@kyndryl-design-system/shidoka-applications 2.53.3 → 2.54.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,7 +1,10 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from 'lit';
2
2
  import './dropdownOption';
3
+ import './enhancedDropdownOption';
3
4
  import '../tag';
4
5
  import '../button';
6
+ import { DropdownOption } from './dropdownOption';
7
+ import { EnhancedDropdownOption } from './enhancedDropdownOption';
5
8
  declare const Dropdown_base: (new (...args: any[]) => import("../../../common/mixins/form-input").FormMixinInterface) & typeof LitElement;
6
9
  /**
7
10
  * Dropdown, single select.
@@ -11,6 +14,7 @@ declare const Dropdown_base: (new (...args: any[]) => import("../../../common/mi
11
14
  * @fires on-add-option - Captures the add button click and emits the newly added option. `detail:{ value: string }`
12
15
  * @slot unnamed - Slot for dropdown options.
13
16
  * @slot tooltip - Slot for tooltip.
17
+ * @slot anchor - Slot for custom dropdown anchor element. If not provided, defaults to standard input-style anchor.
14
18
  * @attr {string/array} [value=''/[]] - The selected value(s) of the input. For single select, it is a string. For multi-select, it is an array of strings.
15
19
  * @attr {string} [name=''] - The name of the input, used for form submission.
16
20
  * @attr {string} [invalidText=''] - The custom validation message when the input is invalid.
@@ -31,6 +35,8 @@ export declare class Dropdown extends Dropdown_base {
31
35
  accessor open: boolean;
32
36
  /** Makes the dropdown searchable. */
33
37
  accessor searchable: boolean;
38
+ /** Makes the dropdown enhanced. */
39
+ accessor enhanced: boolean;
34
40
  /** Searchable variant filters results. */
35
41
  accessor filterSearch: boolean;
36
42
  /** Enabled multi-select functionality. */
@@ -105,15 +111,15 @@ export declare class Dropdown extends Dropdown_base {
105
111
  */
106
112
  accessor assistiveText: string;
107
113
  /**
108
- * Queries any slotted options.
114
+ * Queries any slotted options, default or enhanced.
109
115
  * @ignore
110
116
  */
111
- accessor options: Array<any>;
117
+ protected get options(): Array<DropdownOption | EnhancedDropdownOption>;
112
118
  /**
113
119
  * Queries any slotted selected options.
114
120
  * @ignore
115
121
  */
116
- accessor selectedOptions: Array<any>;
122
+ protected get selectedOptions(): Array<DropdownOption | EnhancedDropdownOption>;
117
123
  /**
118
124
  * Queries the .search DOM element.
119
125
  * @ignore
@@ -160,13 +166,14 @@ export declare class Dropdown extends Dropdown_base {
160
166
  render(): import("lit-html").TemplateResult<1>;
161
167
  private _onAddOptionInputKeydown;
162
168
  private _onAddOptionInputFocus;
169
+ private handleAnchorClick;
170
+ private handleAnchorKeydown;
163
171
  private _handleAddOption;
164
172
  private renderHelperContent;
165
173
  firstUpdated(): void;
166
174
  private handleSlotChange;
167
175
  private updateChildOptions;
168
176
  private handleClick;
169
- private _handleLabelClick;
170
177
  private handleButtonKeydown;
171
178
  private handleListKeydown;
172
179
  private handleListBlur;
@@ -188,7 +195,7 @@ export declare class Dropdown extends Dropdown_base {
188
195
  private emitValue;
189
196
  private _emitSearch;
190
197
  willUpdate(changedProps: any): void;
191
- updated(changedProps: any): void;
198
+ updated(changedProps: PropertyValues): void;
192
199
  private _updateTags;
193
200
  private _updateOptions;
194
201
  private _handleInputNewOption;
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import{_ as e,a as t,b as i,c as s,d as a}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as l,o as n,x as o}from"../../../vendor/lit-html-BRBT5o_V.js";import{i as r,a as d,t as h,r as c,n as p,o as u,e as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as g}from"../../../vendor/lit-element-m-OqzV5s.js";import{FormMixin as v}from"../../../common/mixins/form-input.js";import{d as f}from"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"./dropdownOption.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../button/button.js";import{e as b,f as k,g as x}from"../../../vendor/@kyndryl-design-system/shidoka-icons-bi0_OAYf.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../checkbox/checkboxSubgroup.js";import"../../../tag-B2B6WTaT.js";import"../link/link.js";import"../link/defs.js";import"../loaders/skeleton.js";var y=r`*,
1
+ import{_ as e,a as t,b as i,c as s,d as a}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as l,o as n,x as o}from"../../../vendor/lit-html-BRBT5o_V.js";import{i as r,a as d,t as h,r as c,n as p,e as u}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as m}from"../../../vendor/lit-element-m-OqzV5s.js";import{FormMixin as g}from"../../../common/mixins/form-input.js";import{d as v}from"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"./dropdownOption.js";import"./enhancedDropdownOption.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../button/button.js";import{e as f,f as b,g as k}from"../../../vendor/@kyndryl-design-system/shidoka-icons-bi0_OAYf.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../checkbox/checkboxSubgroup.js";import"../../../tag-B2B6WTaT.js";import"../link/link.js";import"../link/defs.js";import"../loaders/skeleton.js";var x=r`*,
2
2
  *::before,
3
3
  *::after {
4
4
  box-sizing: border-box;
@@ -757,7 +757,7 @@ kyn-tag-group {
757
757
 
758
758
  .placeholder-text {
759
759
  color: var(--kd-color-text-variant-placeholder);
760
- }`;const w={title:"Dropdown",selectedOptions:"List of selected options",requiredText:"Required",errorText:"Error",clearAll:"Clear all",clear:"Clear",addItem:"Add item...",add:"Add"},$="Enter",z="Escape",_="ArrowDown",E="ArrowUp";let S=(()=>{var r,S,O,T,A,C,M,W,I,L,V,j,q,D,B,K,U,N,P,R,Y,H,F,G,J,Q,X,Z,ee,te,ie,se,ae,le,ne;let oe,re,de,he,ce,pe,ue,me,ge,ve,fe,be,ke,xe,ye,we,$e,ze,_e,Ee,Se,Oe,Te,Ae,Ce,Me,We,Ie,Le,Ve,je,qe,De,Be,Ke,Ue,Ne,Pe=[h("kyn-dropdown")],Re=[],Ye=v(g),He=[],Fe=[],Ge=[],Je=[],Qe=[],Xe=[],Ze=[],et=[],tt=[],it=[],st=[],at=[],lt=[],nt=[],ot=[],rt=[],dt=[],ht=[],ct=[],pt=[],ut=[],mt=[],gt=[],vt=[],ft=[],bt=[],kt=[],xt=[],yt=[],wt=[],$t=[],zt=[],_t=[],Et=[],St=[],Ot=[],Tt=[],At=[],Ct=[],Mt=[],Wt=[],It=[],Lt=[],Vt=[],jt=[],qt=[],Dt=[],Bt=[],Kt=[],Ut=[],Nt=[],Pt=[],Rt=[],Yt=[],Ht=[],Ft=[],Gt=[],Jt=[],Qt=[],Xt=[],Zt=[],ei=[],ti=[],ii=[],si=[],ai=[],li=[],ni=[],oi=[],ri=[];return re=class extends Ye{constructor(){super(...arguments),r.set(this,i(this,He,"")),S.set(this,(i(this,Fe),i(this,Ge,"md"))),O.set(this,(i(this,Je),i(this,Qe,!1))),T.set(this,(i(this,Xe),i(this,Ze,""))),A.set(this,(i(this,et),i(this,tt,""))),C.set(this,(i(this,it),i(this,st,!1))),M.set(this,(i(this,at),i(this,lt,!1))),W.set(this,(i(this,nt),i(this,ot,!1))),I.set(this,(i(this,rt),i(this,dt,!1))),L.set(this,(i(this,ht),i(this,ct,!1))),V.set(this,(i(this,pt),i(this,ut,!1))),j.set(this,(i(this,mt),i(this,gt,!1))),q.set(this,(i(this,vt),i(this,ft,!1))),D.set(this,(i(this,bt),i(this,kt,!1))),B.set(this,(i(this,xt),i(this,yt,"Select all"))),K.set(this,(i(this,wt),i(this,$t,"initial"))),U.set(this,(i(this,zt),i(this,_t,"auto"))),N.set(this,(i(this,Et),i(this,St,!1))),P.set(this,(i(this,Ot),i(this,Tt,!1))),R.set(this,(i(this,At),i(this,Ct,w))),Y.set(this,(i(this,Mt),i(this,Wt,!1))),H.set(this,(i(this,It),i(this,Lt,w))),F.set(this,(i(this,Vt),i(this,jt,""))),G.set(this,(i(this,qt),i(this,Dt,""))),J.set(this,(i(this,Bt),i(this,Kt,""))),Q.set(this,(i(this,Ut),i(this,Nt,"Dropdown menu options."))),X.set(this,(i(this,Pt),i(this,Rt,void 0))),Z.set(this,(i(this,Yt),i(this,Ht,void 0))),ee.set(this,(i(this,Ft),i(this,Gt,void 0))),te.set(this,(i(this,Jt),i(this,Qt,void 0))),ie.set(this,(i(this,Xt),i(this,Zt,void 0))),se.set(this,(i(this,ei),i(this,ti,void 0))),ae.set(this,(i(this,ii),i(this,si,void 0))),le.set(this,(i(this,ai),i(this,li,!1))),ne.set(this,(i(this,ni),i(this,oi,[]))),this.searchTextEntered=(i(this,ri),!1),this.prevSearchKeydownIndex=-1}get label(){return s(this,r,"f")}set label(e){a(this,r,e,"f")}get size(){return s(this,S,"f")}set size(e){a(this,S,e,"f")}get inline(){return s(this,O,"f")}set inline(e){a(this,O,e,"f")}get caption(){return s(this,T,"f")}set caption(e){a(this,T,e,"f")}get placeholder(){return s(this,A,"f")}set placeholder(e){a(this,A,e,"f")}get open(){return s(this,C,"f")}set open(e){a(this,C,e,"f")}get searchable(){return s(this,M,"f")}set searchable(e){a(this,M,e,"f")}get filterSearch(){return s(this,W,"f")}set filterSearch(e){a(this,W,e,"f")}get multiple(){return s(this,I,"f")}set multiple(e){a(this,I,e,"f")}get required(){return s(this,L,"f")}set required(e){a(this,L,e,"f")}get hideLabel(){return s(this,V,"f")}set hideLabel(e){a(this,V,e,"f")}get disabled(){return s(this,j,"f")}set disabled(e){a(this,j,e,"f")}get hideTags(){return s(this,q,"f")}set hideTags(e){a(this,q,e,"f")}get selectAll(){return s(this,D,"f")}set selectAll(e){a(this,D,e,"f")}get selectAllText(){return s(this,B,"f")}set selectAllText(e){a(this,B,e,"f")}get menuMinWidth(){return s(this,K,"f")}set menuMinWidth(e){a(this,K,e,"f")}get openDirection(){return s(this,U,"f")}set openDirection(e){a(this,U,e,"f")}get selectAllChecked(){return s(this,N,"f")}set selectAllChecked(e){a(this,N,e,"f")}get selectAllIndeterminate(){return s(this,P,"f")}set selectAllIndeterminate(e){a(this,P,e,"f")}get textStrings(){return s(this,R,"f")}set textStrings(e){a(this,R,e,"f")}get allowAddOption(){return s(this,Y,"f")}set allowAddOption(e){a(this,Y,e,"f")}get _textStrings(){return s(this,H,"f")}set _textStrings(e){a(this,H,e,"f")}get newOptionValue(){return s(this,F,"f")}set newOptionValue(e){a(this,F,e,"f")}get text(){return s(this,G,"f")}set text(e){a(this,G,e,"f")}get searchText(){return s(this,J,"f")}set searchText(e){a(this,J,e,"f")}get assistiveText(){return s(this,Q,"f")}set assistiveText(e){a(this,Q,e,"f")}get options(){return s(this,X,"f")}set options(e){a(this,X,e,"f")}get selectedOptions(){return s(this,Z,"f")}set selectedOptions(e){a(this,Z,e,"f")}get searchEl(){return s(this,ee,"f")}set searchEl(e){a(this,ee,e,"f")}get buttonEl(){return s(this,te,"f")}set buttonEl(e){a(this,te,e,"f")}get listboxEl(){return s(this,ie,"f")}set listboxEl(e){a(this,ie,e,"f")}get clearMultipleEl(){return s(this,se,"f")}set clearMultipleEl(e){a(this,se,e,"f")}get addOptionInputEl(){return s(this,ae,"f")}set addOptionInputEl(e){a(this,ae,e,"f")}get _openUpwards(){return s(this,le,"f")}set _openUpwards(e){a(this,le,e,"f")}get _tags(){return s(this,ne,"f")}set _tags(e){a(this,ne,e,"f")}render(){var e;return o`
760
+ }`;const y={title:"Dropdown",selectedOptions:"List of selected options",requiredText:"Required",errorText:"Error",clearAll:"Clear all",clear:"Clear",addItem:"Add item...",add:"Add"},w="Enter",E="Escape",O="ArrowDown",$="ArrowUp";let S=(()=>{var r,S,z,T,_,A,C,M,W,I,N,D,q,V,j,L,K,B,P,R,U,Y,H,F,G,J,Q,X,Z,ee,te,ie,se,ae;let le,ne,oe,re,de,he,ce,pe,ue,me,ge,ve,fe,be,ke,xe,ye,we,Ee,Oe,$e,Se,ze,Te,_e,Ae,Ce,Me,We,Ie,Ne,De,qe,Ve,je,Le,Ke=[h("kyn-dropdown")],Be=[],Pe=g(m),Re=[],Ue=[],Ye=[],He=[],Fe=[],Ge=[],Je=[],Qe=[],Xe=[],Ze=[],et=[],tt=[],it=[],st=[],at=[],lt=[],nt=[],ot=[],rt=[],dt=[],ht=[],ct=[],pt=[],ut=[],mt=[],gt=[],vt=[],ft=[],bt=[],kt=[],xt=[],yt=[],wt=[],Et=[],Ot=[],$t=[],St=[],zt=[],Tt=[],_t=[],At=[],Ct=[],Mt=[],Wt=[],It=[],Nt=[],Dt=[],qt=[],Vt=[],jt=[],Lt=[],Kt=[],Bt=[],Pt=[],Rt=[],Ut=[],Yt=[],Ht=[],Ft=[],Gt=[],Jt=[],Qt=[],Xt=[],Zt=[],ei=[],ti=[],ii=[],si=[];return ne=class extends Pe{constructor(){super(...arguments),r.set(this,i(this,Re,"")),S.set(this,(i(this,Ue),i(this,Ye,"md"))),z.set(this,(i(this,He),i(this,Fe,!1))),T.set(this,(i(this,Ge),i(this,Je,""))),_.set(this,(i(this,Qe),i(this,Xe,""))),A.set(this,(i(this,Ze),i(this,et,!1))),C.set(this,(i(this,tt),i(this,it,!1))),M.set(this,(i(this,st),i(this,at,!1))),W.set(this,(i(this,lt),i(this,nt,!1))),I.set(this,(i(this,ot),i(this,rt,!1))),N.set(this,(i(this,dt),i(this,ht,!1))),D.set(this,(i(this,ct),i(this,pt,!1))),q.set(this,(i(this,ut),i(this,mt,!1))),V.set(this,(i(this,gt),i(this,vt,!1))),j.set(this,(i(this,ft),i(this,bt,!1))),L.set(this,(i(this,kt),i(this,xt,"Select all"))),K.set(this,(i(this,yt),i(this,wt,"initial"))),B.set(this,(i(this,Et),i(this,Ot,"auto"))),P.set(this,(i(this,$t),i(this,St,!1))),R.set(this,(i(this,zt),i(this,Tt,!1))),U.set(this,(i(this,_t),i(this,At,y))),Y.set(this,(i(this,Ct),i(this,Mt,!1))),H.set(this,(i(this,Wt),i(this,It,y))),F.set(this,(i(this,Nt),i(this,Dt,""))),G.set(this,(i(this,qt),i(this,Vt,""))),J.set(this,(i(this,jt),i(this,Lt,""))),Q.set(this,(i(this,Kt),i(this,Bt,"Dropdown menu options."))),X.set(this,(i(this,Pt),i(this,Rt,void 0))),Z.set(this,(i(this,Ut),i(this,Yt,void 0))),ee.set(this,(i(this,Ht),i(this,Ft,void 0))),te.set(this,(i(this,Gt),i(this,Jt,void 0))),ie.set(this,(i(this,Qt),i(this,Xt,void 0))),se.set(this,(i(this,Zt),i(this,ei,!1))),ae.set(this,(i(this,ti),i(this,ii,[]))),this.searchTextEntered=(i(this,si),!1),this.prevSearchKeydownIndex=-1}get label(){return s(this,r,"f")}set label(e){a(this,r,e,"f")}get size(){return s(this,S,"f")}set size(e){a(this,S,e,"f")}get inline(){return s(this,z,"f")}set inline(e){a(this,z,e,"f")}get caption(){return s(this,T,"f")}set caption(e){a(this,T,e,"f")}get placeholder(){return s(this,_,"f")}set placeholder(e){a(this,_,e,"f")}get open(){return s(this,A,"f")}set open(e){a(this,A,e,"f")}get searchable(){return s(this,C,"f")}set searchable(e){a(this,C,e,"f")}get enhanced(){return s(this,M,"f")}set enhanced(e){a(this,M,e,"f")}get filterSearch(){return s(this,W,"f")}set filterSearch(e){a(this,W,e,"f")}get multiple(){return s(this,I,"f")}set multiple(e){a(this,I,e,"f")}get required(){return s(this,N,"f")}set required(e){a(this,N,e,"f")}get hideLabel(){return s(this,D,"f")}set hideLabel(e){a(this,D,e,"f")}get disabled(){return s(this,q,"f")}set disabled(e){a(this,q,e,"f")}get hideTags(){return s(this,V,"f")}set hideTags(e){a(this,V,e,"f")}get selectAll(){return s(this,j,"f")}set selectAll(e){a(this,j,e,"f")}get selectAllText(){return s(this,L,"f")}set selectAllText(e){a(this,L,e,"f")}get menuMinWidth(){return s(this,K,"f")}set menuMinWidth(e){a(this,K,e,"f")}get openDirection(){return s(this,B,"f")}set openDirection(e){a(this,B,e,"f")}get selectAllChecked(){return s(this,P,"f")}set selectAllChecked(e){a(this,P,e,"f")}get selectAllIndeterminate(){return s(this,R,"f")}set selectAllIndeterminate(e){a(this,R,e,"f")}get textStrings(){return s(this,U,"f")}set textStrings(e){a(this,U,e,"f")}get allowAddOption(){return s(this,Y,"f")}set allowAddOption(e){a(this,Y,e,"f")}get _textStrings(){return s(this,H,"f")}set _textStrings(e){a(this,H,e,"f")}get newOptionValue(){return s(this,F,"f")}set newOptionValue(e){a(this,F,e,"f")}get text(){return s(this,G,"f")}set text(e){a(this,G,e,"f")}get searchText(){return s(this,J,"f")}set searchText(e){a(this,J,e,"f")}get assistiveText(){return s(this,Q,"f")}set assistiveText(e){a(this,Q,e,"f")}get options(){return Array.from(this.querySelectorAll("kyn-dropdown-option, kyn-enhanced-dropdown-option"))}get selectedOptions(){return this.options.filter((e=>e.hasAttribute("selected")))}get searchEl(){return s(this,X,"f")}set searchEl(e){a(this,X,e,"f")}get buttonEl(){return s(this,Z,"f")}set buttonEl(e){a(this,Z,e,"f")}get listboxEl(){return s(this,ee,"f")}set listboxEl(e){a(this,ee,e,"f")}get clearMultipleEl(){return s(this,te,"f")}set clearMultipleEl(e){a(this,te,e,"f")}get addOptionInputEl(){return s(this,ie,"f")}set addOptionInputEl(e){a(this,ie,e,"f")}get _openUpwards(){return s(this,se,"f")}set _openUpwards(e){a(this,se,e,"f")}get _tags(){return s(this,ae,"f")}set _tags(e){a(this,ae,e,"f")}render(){var e;return o`
761
761
  <div
762
762
  class="dropdown"
763
763
  ?disabled=${this.disabled}
@@ -769,8 +769,6 @@ kyn-tag-group {
769
769
  id="label-${this.name}"
770
770
  class="label-text ${this.hideLabel||this.inline?"sr-only":""}"
771
771
  for=${this.name}
772
- aria-disabled=${this.disabled}
773
- @click=${()=>this._handleLabelClick()}
774
772
  >
775
773
  ${this.required?o`<abbr
776
774
  class="required"
@@ -786,62 +784,66 @@ kyn-tag-group {
786
784
  <div
787
785
  class=${l({wrapper:!0,open:this.open})}
788
786
  >
789
- <div class="custom">
790
- <div
791
- class="${l({select:!0,"input-custom":!0,"size--sm":"sm"===this.size,"size--lg":"lg"===this.size,inline:this.inline})}"
792
- aria-labelledby="label-${this.name}"
793
- aria-expanded=${this.open}
794
- aria-controls="options"
795
- role="combobox"
796
- id=${this.name}
797
- name=${this.name}
798
- title=${this._textStrings.title}
799
- ?required=${this.required}
800
- ?disabled=${this.disabled}
801
- ?invalid=${this._isInvalid}
802
- tabindex=${this.disabled?"":"0"}
803
- @click=${()=>this.handleClick()}
804
- @keydown=${e=>this.handleButtonKeydown(e)}
805
- @mousedown=${e=>{this.searchable||e.preventDefault()}}
806
- @blur=${e=>e.stopPropagation()}
807
- >
808
- ${this.multiple&&this.value.length?o`
809
- <button
810
- class="clear-multiple"
811
- aria-label="${this.value.length} items selected. Clear selections"
812
- ?disabled=${this.disabled}
813
- title=${this._textStrings.clear}
814
- @click=${e=>this.handleClearMultiple(e)}
815
- >
816
- ${this.value.length}
817
- <span style="display:flex;" slot="icon"
818
- >${n(b)}</span
787
+ <div
788
+ class="custom"
789
+ @click=${()=>this.handleAnchorClick()}
790
+ @keydown=${e=>this.handleAnchorKeydown(e)}
791
+ >
792
+ <slot name="anchor">
793
+ <div
794
+ class="${l({select:!0,"input-custom":!0,"size--sm":"sm"===this.size,"size--lg":"lg"===this.size,inline:this.inline})}"
795
+ aria-labelledby="label-${this.name}"
796
+ aria-expanded=${this.open}
797
+ aria-controls="options"
798
+ role="combobox"
799
+ id=${this.name}
800
+ name=${this.name}
801
+ title=${this._textStrings.title}
802
+ ?required=${this.required}
803
+ ?disabled=${this.disabled}
804
+ ?invalid=${this._isInvalid}
805
+ tabindex=${this.disabled?"":"0"}
806
+ @mousedown=${e=>{this.searchable||e.preventDefault()}}
807
+ @blur=${e=>e.stopPropagation()}
808
+ >
809
+ ${this.multiple&&this.value.length?o`
810
+ <button
811
+ class="clear-multiple"
812
+ aria-label="${this.value.length} items selected. Clear selections"
813
+ ?disabled=${this.disabled}
814
+ title=${this._textStrings.clear}
815
+ @click=${e=>this.handleClearMultiple(e)}
819
816
  >
820
- </button>
821
- `:null}
822
- ${this.searchable?o`
823
- <input
824
- class="search"
825
- type="text"
826
- placeholder=${this.placeholder}
827
- value=${this.searchText}
828
- ?disabled=${this.disabled}
829
- aria-disabled=${this.disabled}
830
- @keydown=${e=>this.handleSearchKeydown(e)}
831
- @input=${e=>this.handleSearchInput(e)}
832
- @blur=${e=>e.stopPropagation()}
833
- @click=${e=>this.handleSearchClick(e)}
834
- />
835
- `:o`
836
- <span
837
- class="${l({"placeholder-text":""===this.text})}"
838
- >
839
- ${this.multiple||""===this.value?this.placeholder:this.text}
840
- </span>
841
- `}
842
-
843
- <span class="arrow-icon">${n(k)}</span>
844
- </div>
817
+ ${this.value.length}
818
+ <span style="display:flex;" slot="icon"
819
+ >${n(f)}</span
820
+ >
821
+ </button>
822
+ `:null}
823
+ ${this.searchable?o`
824
+ <input
825
+ class="search"
826
+ type="text"
827
+ placeholder=${this.placeholder}
828
+ value=${this.searchText}
829
+ ?disabled=${this.disabled}
830
+ aria-disabled=${this.disabled}
831
+ @keydown=${e=>this.handleSearchKeydown(e)}
832
+ @input=${e=>this.handleSearchInput(e)}
833
+ @blur=${e=>e.stopPropagation()}
834
+ @click=${e=>this.handleSearchClick(e)}
835
+ />
836
+ `:o`
837
+ <span
838
+ class="${l({"placeholder-text":""===this.text})}"
839
+ >
840
+ ${this.multiple||""===this.value?this.placeholder:this.text}
841
+ </span>
842
+ `}
843
+
844
+ <span class="arrow-icon">${n(b)}</span>
845
+ </div>
846
+ </slot>
845
847
 
846
848
  <div
847
849
  id="options"
@@ -875,16 +877,29 @@ kyn-tag-group {
875
877
 
876
878
  <div role="listbox" aria-labelledby="label-${this.name}">
877
879
  ${this.multiple&&this.selectAll?o`
878
- <kyn-dropdown-option
879
- class="select-all"
880
- value="selectAll"
881
- multiple
882
- ?selected=${this.selectAllChecked}
883
- ?indeterminate=${this.selectAllIndeterminate}
884
- ?disabled=${this.disabled}
885
- >
886
- ${this.selectAllText}
887
- </kyn-dropdown-option>
880
+ ${this.enhanced?o`
881
+ <kyn-enhanced-dropdown-option
882
+ class="select-all"
883
+ value="selectAll"
884
+ multiple
885
+ ?selected=${this.selectAllChecked}
886
+ ?indeterminate=${this.selectAllIndeterminate}
887
+ ?disabled=${this.disabled}
888
+ >
889
+ ${this.selectAllText}
890
+ </kyn-enhanced-dropdown-option>
891
+ `:o`
892
+ <kyn-dropdown-option
893
+ class="select-all"
894
+ value="selectAll"
895
+ multiple
896
+ ?selected=${this.selectAllChecked}
897
+ ?indeterminate=${this.selectAllIndeterminate}
898
+ ?disabled=${this.disabled}
899
+ >
900
+ ${this.selectAllText}
901
+ </kyn-dropdown-option>
902
+ `}
888
903
  `:null}
889
904
 
890
905
  <slot
@@ -904,14 +919,14 @@ kyn-tag-group {
904
919
  @click=${e=>this.handleClear(e)}
905
920
  >
906
921
  <span style="display:flex;" slot="icon"
907
- >${n(b)}</span
922
+ >${n(f)}</span
908
923
  >
909
924
  </kyn-button>
910
925
  `:null}
911
926
  </div>
912
927
  ${this.renderHelperContent()}
913
928
  </div>
914
- `}_onAddOptionInputKeydown(e){switch(e.stopPropagation(),e.key){case $:this._handleAddOption();break;case z:this.newOptionValue="",this.open=!1,this.buttonEl.focus();break;case _:this.handleKeyboard(e,40,"addOption");break;case E:this.handleKeyboard(e,38,"addOption")}}_onAddOptionInputFocus(){this.assistiveText="Add new option input"}_handleAddOption(){const e=this.newOptionValue.trim();e&&(this.dispatchEvent(new CustomEvent("on-add-option",{detail:{value:e}})),this.newOptionValue="")}renderHelperContent(){return o`
929
+ `}_onAddOptionInputKeydown(e){switch(e.stopPropagation(),e.key){case w:this._handleAddOption();break;case E:this.newOptionValue="",this.open=!1,this.buttonEl.focus();break;case O:this.handleKeyboard(e,40,"addOption");break;case $:this.handleKeyboard(e,38,"addOption")}}_onAddOptionInputFocus(){this.assistiveText="Add new option input"}handleAnchorClick(){this.handleClick()}handleAnchorKeydown(e){this.handleButtonKeydown(e)}_handleAddOption(){const e=this.newOptionValue.trim();e&&(this.dispatchEvent(new CustomEvent("on-add-option",{detail:{value:e}})),this.newOptionValue="")}renderHelperContent(){return o`
915
930
  ${this.multiple&&!this.hideTags&&this._tags.length?o`
916
931
  <kyn-tag-group
917
932
  filter
@@ -940,7 +955,7 @@ kyn-tag-group {
940
955
  role="img"
941
956
  title=${this._textStrings.errorText}
942
957
  aria-label=${this._textStrings.errorText}
943
- >${n(x)}</span
958
+ >${n(k)}</span
944
959
  >
945
960
  ${this.invalidText||this._internalValidationMsg}
946
961
  </div>
@@ -955,5 +970,5 @@ kyn-tag-group {
955
970
  ${this.assistiveText}
956
971
  </div>
957
972
  </div>
958
- `}firstUpdated(){""===this.placeholder&&(this.searchable?this.placeholder="Search":this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.updateChildOptions(),this._updateOptions(),this._updateSelectedText()}updateChildOptions(){var e;(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("#children")).assignedElements({flatten:!0}).forEach((e=>{"KYN-DROPDOWN-OPTION"===e.tagName&&(e.allowAddOption=this.allowAddOption)}))}handleClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.focus())}_handleLabelClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1));const t=e.relatedTarget;t&&(t.closest("kyn-dropdown-option")||t.classList.contains("search")||t.closest(".add-option"))||(this.open=!1,this.assistiveText="Dropdown menu options.")}handleKeyboard(e,t,i){var s;const a=[0,32],l=[...Array.from((null===(s=this.shadowRoot)||void 0===s?void 0:s.querySelectorAll(".select-all"))||[]),...this.options.filter((e=>"none"!==e.style.display))],n=l.find((e=>e.highlighted)),o=l.find((e=>e.selected));let r=n?l.indexOf(n):l.find((e=>e.selected))?l.indexOf(o):0;a.includes(t)&&e.preventDefault();const d=this.open;if("button"===i||"addOption"===i){let s=a.includes(t)||13===t||40==t||38==t;if(e.target===this.clearMultipleEl&&13===t&&(s=!1,l[r].highlighted=!1,l[r].selected=!l[r].selected,r=0,13!==t))return;s&&(this.open=!0,this.allowAddOption&&"button"===i&&13===t?setTimeout((()=>{var e;null===(e=this.addOptionInputEl)||void 0===e||e.focus()}),100):this.multiple||""===this.value||l[r].scrollIntoView({block:"nearest"}))}switch(t){case 0:case 32:case 13:return l[r].highlighted=!0,void(d&&(this.multiple?(l[r].selected=!l[r].selected,this._handleClick({detail:{value:l[r].value,selected:l[r].selected}})):(l.forEach((e=>e.selected=!1)),l[r].selected=!0,this.open=!1,this.assistiveText=`Selected ${l[r].value}`)));case 40:{let e=n||o?r===l.length-1?0:r+1:0;return l[e].disabled&&(e=e===l.length-1?0:e+1),l[e].focus(),l[r].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[e].text)}case 38:{let e=0===r?l.length-1:r-1;return l[e].disabled&&(e=0===e?l.length-1:e-1),l[e].focus(),l[r].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){var t;if(e.stopPropagation(),this.multiple){const e=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));this.value=e.length?e:[]}else this.value="";this._validate(!0,!1),this._updateSelectedOptions(),this.emitValue();const i=new CustomEvent("on-clear-all",{detail:{value:this.value}});this.dispatchEvent(i)}handleTagClear(e){this.updateValue(e.value,!1),this._updateSelectedOptions(),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this._emitSearch(),this.filterSearch&&this.options.map((e=>{e.style.display="block"})),this.multiple||(this.value="",this._validate(!0,!1),this._updateSelectedOptions(),this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted)),i=this.options.findIndex((e=>e.highlighted));this.searchTextEntered=!1,13===e.keyCode&&(this.searchTextEntered=!0,t?(this.prevSearchKeydownIndex!==i&&(this.multiple?t.selected=!t.selected:(this.options.forEach((e=>e.selected=!1)),t.selected=!0,this.open=!1),this.updateValue(t.value,t.selected)),t.selected?(this.assistiveText=`Selected ${t.innerHTML}`,this.prevSearchKeydownIndex=i):this.assistiveText=`Deselected ${t.innerHTML}`):this.assistiveText="No item matched."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;if(this.searchText=t,this.open=!0,this._emitSearch(),this.filterSearch)this.options.map((e=>{e.text.toLowerCase().includes(t.toLowerCase())?e.style.display="block":e.style.display="none"}));else{const e=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&e.length&&(e[0].highlighted=!0,e[0].scrollIntoView({block:"nearest"}),this.searchTextEntered&&(this.assistiveText="Option Matched"))}}_updateSelectedOptions(){this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value}))}_handleClick(e){var t;if("selectAll"===e.detail.value){this.selectAllChecked=e.detail.selected;const i=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));e.detail.selected?(this.value=this.options.filter((e=>!e.disabled||e.disabled&&e.selected)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=i.length?i:[],this.assistiveText="Deselected all items."),this._validate(!0,!1)}else this.updateValue(e.detail.value,e.detail.selected),this.assistiveText=e.detail.selected?`Selected ${e.detail.value}`:`Deselected ${e.detail.value}`;this._updateSelectedOptions(),this.multiple||(this.open=!1),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==(null==t?void 0:t.localName)&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),this._onConnected(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.addEventListener("on-blur",(e=>this._handleBlur(e)))}disconnectedCallback(){this._onDisconnected(),document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-click",(e=>this._handleClick(e))),this.removeEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.removeEventListener("on-blur",(e=>this._handleBlur(e))),super.disconnectedCallback()}updateValue(e,t=!1){if(this.multiple){const i=""===this.value?[]:JSON.parse(JSON.stringify(this.value));if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._validate(!0,!1),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value)},s=this.required&&!this.value.length?"Please fill out this field.":"",a=""!==this.invalidText?this.invalidText:s;this._internals.setValidity(i,a,this.buttonEl),e&&(this._internalValidationMsg=s),t&&this._internals.reportValidity()}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}_emitSearch(){const e=new CustomEvent("on-search",{detail:{searchText:this.searchText}});this.dispatchEvent(e)}willUpdate(e){e.has("textStrings")&&(this._textStrings=f(w,this.textStrings))}updated(e){var t,i;if(this._onUpdated(e),e.has("value")){this._updateOptions();const e=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>!e.disabled)),i=e.filter((e=>e.selected));this.selectAllChecked=i.length===e.length,this.selectAllIndeterminate=i.length<e.length&&i.length>0,this._updateTags(),this._updateSelectedText()}if(e.has("open")||e.has("openDirection")){if(this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),"up"===this.openDirection)this._openUpwards=!0;else if("down"===this.openDirection)this._openUpwards=!1;else if(this.open){const e=.6;this._openUpwards=this.buttonEl.getBoundingClientRect().top>window.innerHeight*e}this.open&&!this.multiple&&(null===(i=this.options.find((e=>e.selected)))||void 0===i||i.scrollIntoView({block:"nearest"}))}e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple})),e.has("searchText")&&this.searchEl&&(this.searchEl.value=this.searchText),e.has("allowAddOption")&&this.updateChildOptions()}_updateTags(){if(this.multiple){const e=Array.from(this.querySelectorAll("kyn-dropdown-option")),t=[];e&&(e.forEach((e=>{e.selected&&t.push({value:e.value,text:e.textContent,disabled:e.disabled})})),this._tags=t)}}_updateOptions(){Array.from(this.querySelectorAll("kyn-dropdown-option")).forEach((e=>{if(e.multiple=this.multiple,this.multiple){const t=this.value.includes(e.value);e.selected=t}else e.selected=this.value===e.value}))}_handleInputNewOption(e){const t=e.target;this.newOptionValue=t.value}_handleRemoveOption(){this.assistiveText="MY option removed ",setTimeout((()=>{this.open=!1,this.buttonEl.focus()}),100)}_updateSelectedText(){const e=Array.from(this.querySelectorAll("kyn-dropdown-option"));if(!this.multiple){if(e.length&&""!==this.value){const t=e.find((e=>e.value===this.value));t?this.text=t.textContent.trim():(this.text="",console.warn(`No dropdown option found with value: ${this.value}`))}this.searchable&&this.text&&(this.searchText=this.text===this.placeholder?"":this.text,this.searchEl.value=this.searchText)}}},r=new WeakMap,S=new WeakMap,O=new WeakMap,T=new WeakMap,A=new WeakMap,C=new WeakMap,M=new WeakMap,W=new WeakMap,I=new WeakMap,L=new WeakMap,V=new WeakMap,j=new WeakMap,q=new WeakMap,D=new WeakMap,B=new WeakMap,K=new WeakMap,U=new WeakMap,N=new WeakMap,P=new WeakMap,R=new WeakMap,Y=new WeakMap,H=new WeakMap,F=new WeakMap,G=new WeakMap,J=new WeakMap,Q=new WeakMap,X=new WeakMap,Z=new WeakMap,ee=new WeakMap,te=new WeakMap,ie=new WeakMap,se=new WeakMap,ae=new WeakMap,le=new WeakMap,ne=new WeakMap,e(re,"Dropdown"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=Ye[Symbol.metadata])&&void 0!==e?e:null):void 0;de=[p({type:String})],he=[p({type:String})],ce=[p({type:Boolean})],pe=[p({type:String})],ue=[p({type:String})],me=[p({type:Boolean})],ge=[p({type:Boolean})],ve=[p({type:Boolean})],fe=[p({type:Boolean})],be=[p({type:Boolean})],ke=[p({type:Boolean})],xe=[p({type:Boolean})],ye=[p({type:Boolean})],we=[p({type:Boolean})],$e=[p({type:String})],ze=[p({type:String})],_e=[p({type:String})],Ee=[p({type:Boolean})],Se=[p({type:Boolean})],Oe=[p({type:Object})],Te=[p({type:Boolean})],Ae=[d()],Ce=[d()],Me=[d()],We=[p({type:String})],Ie=[d()],Le=[u({selector:"kyn-dropdown-option"})],Ve=[u({selector:"kyn-dropdown-option[selected]"})],je=[m(".search")],qe=[m(".select")],De=[m(".options")],Be=[m(".clear-multiple")],Ke=[m(".add-option-input")],Ue=[d()],Ne=[d()],t(re,null,de,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:i},He,Fe),t(re,null,he,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:e=>"size"in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:i},Ge,Je),t(re,null,ce,{kind:"accessor",name:"inline",static:!1,private:!1,access:{has:e=>"inline"in e,get:e=>e.inline,set:(e,t)=>{e.inline=t}},metadata:i},Qe,Xe),t(re,null,pe,{kind:"accessor",name:"caption",static:!1,private:!1,access:{has:e=>"caption"in e,get:e=>e.caption,set:(e,t)=>{e.caption=t}},metadata:i},Ze,et),t(re,null,ue,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:e=>"placeholder"in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:i},tt,it),t(re,null,me,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:i},st,at),t(re,null,ge,{kind:"accessor",name:"searchable",static:!1,private:!1,access:{has:e=>"searchable"in e,get:e=>e.searchable,set:(e,t)=>{e.searchable=t}},metadata:i},lt,nt),t(re,null,ve,{kind:"accessor",name:"filterSearch",static:!1,private:!1,access:{has:e=>"filterSearch"in e,get:e=>e.filterSearch,set:(e,t)=>{e.filterSearch=t}},metadata:i},ot,rt),t(re,null,fe,{kind:"accessor",name:"multiple",static:!1,private:!1,access:{has:e=>"multiple"in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:i},dt,ht),t(re,null,be,{kind:"accessor",name:"required",static:!1,private:!1,access:{has:e=>"required"in e,get:e=>e.required,set:(e,t)=>{e.required=t}},metadata:i},ct,pt),t(re,null,ke,{kind:"accessor",name:"hideLabel",static:!1,private:!1,access:{has:e=>"hideLabel"in e,get:e=>e.hideLabel,set:(e,t)=>{e.hideLabel=t}},metadata:i},ut,mt),t(re,null,xe,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:i},gt,vt),t(re,null,ye,{kind:"accessor",name:"hideTags",static:!1,private:!1,access:{has:e=>"hideTags"in e,get:e=>e.hideTags,set:(e,t)=>{e.hideTags=t}},metadata:i},ft,bt),t(re,null,we,{kind:"accessor",name:"selectAll",static:!1,private:!1,access:{has:e=>"selectAll"in e,get:e=>e.selectAll,set:(e,t)=>{e.selectAll=t}},metadata:i},kt,xt),t(re,null,$e,{kind:"accessor",name:"selectAllText",static:!1,private:!1,access:{has:e=>"selectAllText"in e,get:e=>e.selectAllText,set:(e,t)=>{e.selectAllText=t}},metadata:i},yt,wt),t(re,null,ze,{kind:"accessor",name:"menuMinWidth",static:!1,private:!1,access:{has:e=>"menuMinWidth"in e,get:e=>e.menuMinWidth,set:(e,t)=>{e.menuMinWidth=t}},metadata:i},$t,zt),t(re,null,_e,{kind:"accessor",name:"openDirection",static:!1,private:!1,access:{has:e=>"openDirection"in e,get:e=>e.openDirection,set:(e,t)=>{e.openDirection=t}},metadata:i},_t,Et),t(re,null,Ee,{kind:"accessor",name:"selectAllChecked",static:!1,private:!1,access:{has:e=>"selectAllChecked"in e,get:e=>e.selectAllChecked,set:(e,t)=>{e.selectAllChecked=t}},metadata:i},St,Ot),t(re,null,Se,{kind:"accessor",name:"selectAllIndeterminate",static:!1,private:!1,access:{has:e=>"selectAllIndeterminate"in e,get:e=>e.selectAllIndeterminate,set:(e,t)=>{e.selectAllIndeterminate=t}},metadata:i},Tt,At),t(re,null,Oe,{kind:"accessor",name:"textStrings",static:!1,private:!1,access:{has:e=>"textStrings"in e,get:e=>e.textStrings,set:(e,t)=>{e.textStrings=t}},metadata:i},Ct,Mt),t(re,null,Te,{kind:"accessor",name:"allowAddOption",static:!1,private:!1,access:{has:e=>"allowAddOption"in e,get:e=>e.allowAddOption,set:(e,t)=>{e.allowAddOption=t}},metadata:i},Wt,It),t(re,null,Ae,{kind:"accessor",name:"_textStrings",static:!1,private:!1,access:{has:e=>"_textStrings"in e,get:e=>e._textStrings,set:(e,t)=>{e._textStrings=t}},metadata:i},Lt,Vt),t(re,null,Ce,{kind:"accessor",name:"newOptionValue",static:!1,private:!1,access:{has:e=>"newOptionValue"in e,get:e=>e.newOptionValue,set:(e,t)=>{e.newOptionValue=t}},metadata:i},jt,qt),t(re,null,Me,{kind:"accessor",name:"text",static:!1,private:!1,access:{has:e=>"text"in e,get:e=>e.text,set:(e,t)=>{e.text=t}},metadata:i},Dt,Bt),t(re,null,We,{kind:"accessor",name:"searchText",static:!1,private:!1,access:{has:e=>"searchText"in e,get:e=>e.searchText,set:(e,t)=>{e.searchText=t}},metadata:i},Kt,Ut),t(re,null,Ie,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:e=>"assistiveText"in e,get:e=>e.assistiveText,set:(e,t)=>{e.assistiveText=t}},metadata:i},Nt,Pt),t(re,null,Le,{kind:"accessor",name:"options",static:!1,private:!1,access:{has:e=>"options"in e,get:e=>e.options,set:(e,t)=>{e.options=t}},metadata:i},Rt,Yt),t(re,null,Ve,{kind:"accessor",name:"selectedOptions",static:!1,private:!1,access:{has:e=>"selectedOptions"in e,get:e=>e.selectedOptions,set:(e,t)=>{e.selectedOptions=t}},metadata:i},Ht,Ft),t(re,null,je,{kind:"accessor",name:"searchEl",static:!1,private:!1,access:{has:e=>"searchEl"in e,get:e=>e.searchEl,set:(e,t)=>{e.searchEl=t}},metadata:i},Gt,Jt),t(re,null,qe,{kind:"accessor",name:"buttonEl",static:!1,private:!1,access:{has:e=>"buttonEl"in e,get:e=>e.buttonEl,set:(e,t)=>{e.buttonEl=t}},metadata:i},Qt,Xt),t(re,null,De,{kind:"accessor",name:"listboxEl",static:!1,private:!1,access:{has:e=>"listboxEl"in e,get:e=>e.listboxEl,set:(e,t)=>{e.listboxEl=t}},metadata:i},Zt,ei),t(re,null,Be,{kind:"accessor",name:"clearMultipleEl",static:!1,private:!1,access:{has:e=>"clearMultipleEl"in e,get:e=>e.clearMultipleEl,set:(e,t)=>{e.clearMultipleEl=t}},metadata:i},ti,ii),t(re,null,Ke,{kind:"accessor",name:"addOptionInputEl",static:!1,private:!1,access:{has:e=>"addOptionInputEl"in e,get:e=>e.addOptionInputEl,set:(e,t)=>{e.addOptionInputEl=t}},metadata:i},si,ai),t(re,null,Ue,{kind:"accessor",name:"_openUpwards",static:!1,private:!1,access:{has:e=>"_openUpwards"in e,get:e=>e._openUpwards,set:(e,t)=>{e._openUpwards=t}},metadata:i},li,ni),t(re,null,Ne,{kind:"accessor",name:"_tags",static:!1,private:!1,access:{has:e=>"_tags"in e,get:e=>e._tags,set:(e,t)=>{e._tags=t}},metadata:i},oi,ri),t(null,oe={value:re},Pe,{kind:"class",name:re.name,metadata:i},null,Re),re=oe.value,i&&Object.defineProperty(re,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),re.styles=c(y),i(re,Re),re})();export{S as Dropdown};
973
+ `}firstUpdated(){""===this.placeholder&&(this.searchable?this.placeholder="Search":this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.updateChildOptions(),this._updateOptions(),this._updateSelectedText()}updateChildOptions(){var e;(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("#children")).assignedElements({flatten:!0}).forEach((e=>{"KYN-DROPDOWN-OPTION"!==e.tagName&&"KYN-ENHANCED-DROPDOWN-OPTION"!==e.tagName||(e.allowAddOption=this.allowAddOption)}))}handleClick(){this.disabled||(this.open=!this.open,this.searchable?this.searchEl.focus():this.buttonEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){if(this.multiple)return;this.options.forEach((e=>e.highlighted=!1));const t=e.relatedTarget;t&&(t.closest("kyn-dropdown-option")||t.closest("kyn-enhanced-dropdown-option")||t.classList.contains("search")||t.closest(".add-option"))||(this.open=!1,this.assistiveText="Dropdown menu options.")}handleKeyboard(e,t,i){var s;const a=[0,32],l=[...Array.from((null===(s=this.shadowRoot)||void 0===s?void 0:s.querySelectorAll(".select-all"))||[]),...this.options.filter((e=>"none"!==e.style.display))],n=l.find((e=>e.highlighted)),o=l.find((e=>e.selected));let r=n?l.indexOf(n):o?l.indexOf(o):0;a.includes(t)&&e.preventDefault();const d=this.open;if("button"===i||"addOption"===i){let s=a.includes(t)||13===t||40==t||38==t;if(e.target===this.clearMultipleEl&&13===t&&(s=!1,l[r].highlighted=!1,l[r].selected=!l[r].selected,r=0,13!==t))return;s&&(this.open=!0,this.allowAddOption&&"button"===i&&13===t?setTimeout((()=>{var e;null===(e=this.addOptionInputEl)||void 0===e||e.focus()}),100):this.multiple||""===this.value||l[r].scrollIntoView({block:"nearest"}))}switch(t){case 0:case 32:case 13:return l[r].highlighted=!0,void(d&&(this.multiple?(l[r].selected=!l[r].selected,this._handleClick({detail:{value:l[r].value,selected:l[r].selected}})):(l.forEach((e=>e.selected=!1)),l[r].selected=!0,this.updateValue(l[r].value,!0),this.emitValue(),this.open=!1,this.assistiveText=`Selected ${l[r].value}`)));case 40:{let e=n||o?r===l.length-1?0:r+1:0;return l[e].disabled&&(e=e===l.length-1?0:e+1),l[e].focus(),l[r].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[e].text)}case 38:{let e=0===r?l.length-1:r-1;return l[e].disabled&&(e=0===e?l.length-1:e-1),l[e].focus(),l[r].highlighted=!1,l[e].highlighted=!0,l[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=l[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){var t;if(e.stopPropagation(),this.multiple){const e=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));this.value=e.length?e:[]}else this.value="";this._validate(!0,!1),this._updateSelectedOptions(),this.emitValue();const i=new CustomEvent("on-clear-all",{detail:{value:this.value}});this.dispatchEvent(i)}handleTagClear(e){this.updateValue(e.value,!1),this._updateSelectedOptions(),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this._emitSearch(),this.filterSearch&&this.options.map((e=>{e.style.display="block"})),this.multiple||(this.value="",this._validate(!0,!1),this._updateSelectedOptions(),this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted)),i=this.options.findIndex((e=>e.highlighted));this.searchTextEntered=!1,13===e.keyCode&&(this.searchTextEntered=!0,t?(this.prevSearchKeydownIndex!==i&&(this.multiple?t.selected=!t.selected:(this.options.forEach((e=>e.selected=!1)),t.selected=!0,this.open=!1),this.updateValue(t.value,t.selected)),t.selected?(this.assistiveText=`Selected ${t.innerHTML}`,this.prevSearchKeydownIndex=i):this.assistiveText=`Deselected ${t.innerHTML}`):this.assistiveText="No item matched."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;if(this.searchText=t,this.open=!0,this._emitSearch(),this.filterSearch)this.options.map((e=>{let i=e.text;if("KYN-ENHANCED-DROPDOWN-OPTION"===e.tagName){const t=e.querySelector('[slot="title"]');i=t&&t.textContent.trim()?t.textContent.trim():e.displayText||e.value}i.toLowerCase().includes(t.toLowerCase())?e.style.display="block":e.style.display="none"}));else{const e=this.options.filter((e=>{let i=e.text;if("KYN-ENHANCED-DROPDOWN-OPTION"===e.tagName){const t=e.querySelector('[slot="title"]');i=t&&t.textContent.trim()?t.textContent.trim():e.displayText||e.value}return i.toLowerCase().startsWith(t.toLowerCase())}));this.options.forEach((e=>e.highlighted=!1)),""!==t&&e.length&&(e[0].highlighted=!0,e[0].scrollIntoView({block:"nearest"}),this.searchTextEntered&&(this.assistiveText="Option Matched"))}}_updateSelectedOptions(){this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value}))}_handleClick(e){var t;if("selectAll"===e.detail.value){this.selectAllChecked=e.detail.selected;const i=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot#children")).assignedElements().filter((e=>e.selected&&e.disabled)).map((e=>e.value));e.detail.selected?(this.value=this.options.filter((e=>!e.disabled||e.disabled&&e.selected)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=i.length?i:[],this.assistiveText="Deselected all items."),this._validate(!0,!1)}else this.updateValue(e.detail.value,e.detail.selected),this.assistiveText=e.detail.selected?`Selected ${e.detail.value}`:`Deselected ${e.detail.value}`;this._updateSelectedOptions(),this.multiple&&(this.open=!1),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==(null==t?void 0:t.localName)&&"kyn-enhanced-dropdown-option"!==(null==t?void 0:t.localName)&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),this._onConnected(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.addEventListener("on-blur",(e=>this._handleBlur(e)))}disconnectedCallback(){this._onDisconnected(),document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-click",(e=>this._handleClick(e))),this.removeEventListener("on-remove-option",(()=>this._handleRemoveOption())),this.removeEventListener("on-blur",(e=>this._handleBlur(e))),super.disconnectedCallback()}updateValue(e,t=!1){if(this.multiple){const i=""===this.value?[]:JSON.parse(JSON.stringify(this.value));if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._validate(!0,!1),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value)},s=this.required&&!this.value.length?"Please fill out this field.":"",a=""!==this.invalidText?this.invalidText:s,l=this.buttonEl||this.listboxEl;l?this._internals.setValidity(i,a,l):this._internals.setValidity(i,a),e&&(this._internalValidationMsg=s),t&&this._internals.reportValidity()}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}_emitSearch(){const e=new CustomEvent("on-search",{detail:{searchText:this.searchText}});this.dispatchEvent(e)}willUpdate(e){e.has("textStrings")&&(this._textStrings=v(y,this.textStrings))}updated(e){super.updated(e);const t=this.shadowRoot;if(t){if(e.has("open")){const e=t.querySelector('slot[name="button"]'),i=null==e?void 0:e.assignedElements({flatten:!0}),s=null==i?void 0:i[0],a=null==s?void 0:s.querySelector('span[slot="icon"]');a&&(a.style.transition="transform 0.2s ease-in-out",a.style.transform=this.open?"rotate(180deg)":"rotate(0deg)")}if(this._onUpdated(e),e.has("value")){this._updateOptions();const e=t.querySelector("slot#children"),i=e?e.assignedElements().filter((e=>!e.hasAttribute("disabled"))):[],s=i.filter((e=>e.hasAttribute("selected")));this.selectAllChecked=s.length===i.length,this.selectAllIndeterminate=s.length>0&&s.length<i.length,this._updateTags(),this._updateSelectedText()}if(e.has("open")||e.has("openDirection")){if(this.open&&!this.searchable&&this.listboxEl&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),"up"===this.openDirection)this._openUpwards=!0;else if("down"===this.openDirection)this._openUpwards=!1;else if(this.open){const e=this.buttonEl.getBoundingClientRect();this._openUpwards=e.top>.6*window.innerHeight}if(this.open&&!this.multiple){const e=this.options.find((e=>e.selected));null==e||e.scrollIntoView({block:"nearest"})}}e.has("multiple")&&this.options.forEach((e=>e.multiple=this.multiple)),e.has("searchText")&&this.searchEl&&(this.searchEl.value=this.searchText),e.has("allowAddOption")&&this.updateChildOptions()}}_updateTags(){if(this.multiple){const e=Array.from(this.querySelectorAll("kyn-dropdown-option, kyn-enhanced-dropdown-option")),t=[];e&&(e.forEach((e=>{if(e.selected){let i=e.textContent;if("KYN-ENHANCED-DROPDOWN-OPTION"===e.tagName){const t=e.querySelector('[slot="title"]');i=t&&t.textContent.trim()?t.textContent.trim():e.displayText||e.value}else i=e.textContent.trim();t.push({value:e.value,text:i,disabled:e.disabled})}})),this._tags=t)}}_updateOptions(){Array.from(this.querySelectorAll("kyn-dropdown-option, kyn-enhanced-dropdown-option")).forEach((e=>{if(e.multiple=this.multiple,this.multiple){const t=this.value.includes(e.value);e.selected=t}else e.selected=this.value===e.value}))}_handleInputNewOption(e){const t=e.target;this.newOptionValue=t.value}_handleRemoveOption(){this.assistiveText="MY option removed ",setTimeout((()=>{this.open=!1,this.buttonEl.focus()}),100)}_updateSelectedText(){const e=Array.from(this.querySelectorAll("kyn-dropdown-option, kyn-enhanced-dropdown-option"));if(!this.multiple){if(e.length&&""!==this.value){const t=e.find((e=>e.value===this.value));if(t)if("KYN-ENHANCED-DROPDOWN-OPTION"===t.tagName){const e=t.querySelector('[slot="title"]');e&&e.textContent.trim()?this.text=e.textContent.trim():this.text=t.displayText||this.value}else this.text=t.textContent.trim();else this.text="",console.warn(`No dropdown option found with value: ${this.value}`)}this.searchable&&this.text&&(this.searchText=this.text===this.placeholder?"":this.text,this.searchEl.value=this.searchText)}}},r=new WeakMap,S=new WeakMap,z=new WeakMap,T=new WeakMap,_=new WeakMap,A=new WeakMap,C=new WeakMap,M=new WeakMap,W=new WeakMap,I=new WeakMap,N=new WeakMap,D=new WeakMap,q=new WeakMap,V=new WeakMap,j=new WeakMap,L=new WeakMap,K=new WeakMap,B=new WeakMap,P=new WeakMap,R=new WeakMap,U=new WeakMap,Y=new WeakMap,H=new WeakMap,F=new WeakMap,G=new WeakMap,J=new WeakMap,Q=new WeakMap,X=new WeakMap,Z=new WeakMap,ee=new WeakMap,te=new WeakMap,ie=new WeakMap,se=new WeakMap,ae=new WeakMap,e(ne,"Dropdown"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=Pe[Symbol.metadata])&&void 0!==e?e:null):void 0;oe=[p({type:String})],re=[p({type:String})],de=[p({type:Boolean})],he=[p({type:String})],ce=[p({type:String})],pe=[p({type:Boolean,reflect:!0})],ue=[p({type:Boolean})],me=[p({type:Boolean})],ge=[p({type:Boolean})],ve=[p({type:Boolean})],fe=[p({type:Boolean})],be=[p({type:Boolean})],ke=[p({type:Boolean})],xe=[p({type:Boolean})],ye=[p({type:Boolean})],we=[p({type:String})],Ee=[p({type:String})],Oe=[p({type:String})],$e=[p({type:Boolean})],Se=[p({type:Boolean})],ze=[p({type:Object})],Te=[p({type:Boolean})],_e=[d()],Ae=[d()],Ce=[d()],Me=[p({type:String})],We=[d()],Ie=[u(".search")],Ne=[u(".select")],De=[u(".options")],qe=[u(".clear-multiple")],Ve=[u(".add-option-input")],je=[d()],Le=[d()],t(ne,null,oe,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:i},Re,Ue),t(ne,null,re,{kind:"accessor",name:"size",static:!1,private:!1,access:{has:e=>"size"in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:i},Ye,He),t(ne,null,de,{kind:"accessor",name:"inline",static:!1,private:!1,access:{has:e=>"inline"in e,get:e=>e.inline,set:(e,t)=>{e.inline=t}},metadata:i},Fe,Ge),t(ne,null,he,{kind:"accessor",name:"caption",static:!1,private:!1,access:{has:e=>"caption"in e,get:e=>e.caption,set:(e,t)=>{e.caption=t}},metadata:i},Je,Qe),t(ne,null,ce,{kind:"accessor",name:"placeholder",static:!1,private:!1,access:{has:e=>"placeholder"in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:i},Xe,Ze),t(ne,null,pe,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:i},et,tt),t(ne,null,ue,{kind:"accessor",name:"searchable",static:!1,private:!1,access:{has:e=>"searchable"in e,get:e=>e.searchable,set:(e,t)=>{e.searchable=t}},metadata:i},it,st),t(ne,null,me,{kind:"accessor",name:"enhanced",static:!1,private:!1,access:{has:e=>"enhanced"in e,get:e=>e.enhanced,set:(e,t)=>{e.enhanced=t}},metadata:i},at,lt),t(ne,null,ge,{kind:"accessor",name:"filterSearch",static:!1,private:!1,access:{has:e=>"filterSearch"in e,get:e=>e.filterSearch,set:(e,t)=>{e.filterSearch=t}},metadata:i},nt,ot),t(ne,null,ve,{kind:"accessor",name:"multiple",static:!1,private:!1,access:{has:e=>"multiple"in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:i},rt,dt),t(ne,null,fe,{kind:"accessor",name:"required",static:!1,private:!1,access:{has:e=>"required"in e,get:e=>e.required,set:(e,t)=>{e.required=t}},metadata:i},ht,ct),t(ne,null,be,{kind:"accessor",name:"hideLabel",static:!1,private:!1,access:{has:e=>"hideLabel"in e,get:e=>e.hideLabel,set:(e,t)=>{e.hideLabel=t}},metadata:i},pt,ut),t(ne,null,ke,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:i},mt,gt),t(ne,null,xe,{kind:"accessor",name:"hideTags",static:!1,private:!1,access:{has:e=>"hideTags"in e,get:e=>e.hideTags,set:(e,t)=>{e.hideTags=t}},metadata:i},vt,ft),t(ne,null,ye,{kind:"accessor",name:"selectAll",static:!1,private:!1,access:{has:e=>"selectAll"in e,get:e=>e.selectAll,set:(e,t)=>{e.selectAll=t}},metadata:i},bt,kt),t(ne,null,we,{kind:"accessor",name:"selectAllText",static:!1,private:!1,access:{has:e=>"selectAllText"in e,get:e=>e.selectAllText,set:(e,t)=>{e.selectAllText=t}},metadata:i},xt,yt),t(ne,null,Ee,{kind:"accessor",name:"menuMinWidth",static:!1,private:!1,access:{has:e=>"menuMinWidth"in e,get:e=>e.menuMinWidth,set:(e,t)=>{e.menuMinWidth=t}},metadata:i},wt,Et),t(ne,null,Oe,{kind:"accessor",name:"openDirection",static:!1,private:!1,access:{has:e=>"openDirection"in e,get:e=>e.openDirection,set:(e,t)=>{e.openDirection=t}},metadata:i},Ot,$t),t(ne,null,$e,{kind:"accessor",name:"selectAllChecked",static:!1,private:!1,access:{has:e=>"selectAllChecked"in e,get:e=>e.selectAllChecked,set:(e,t)=>{e.selectAllChecked=t}},metadata:i},St,zt),t(ne,null,Se,{kind:"accessor",name:"selectAllIndeterminate",static:!1,private:!1,access:{has:e=>"selectAllIndeterminate"in e,get:e=>e.selectAllIndeterminate,set:(e,t)=>{e.selectAllIndeterminate=t}},metadata:i},Tt,_t),t(ne,null,ze,{kind:"accessor",name:"textStrings",static:!1,private:!1,access:{has:e=>"textStrings"in e,get:e=>e.textStrings,set:(e,t)=>{e.textStrings=t}},metadata:i},At,Ct),t(ne,null,Te,{kind:"accessor",name:"allowAddOption",static:!1,private:!1,access:{has:e=>"allowAddOption"in e,get:e=>e.allowAddOption,set:(e,t)=>{e.allowAddOption=t}},metadata:i},Mt,Wt),t(ne,null,_e,{kind:"accessor",name:"_textStrings",static:!1,private:!1,access:{has:e=>"_textStrings"in e,get:e=>e._textStrings,set:(e,t)=>{e._textStrings=t}},metadata:i},It,Nt),t(ne,null,Ae,{kind:"accessor",name:"newOptionValue",static:!1,private:!1,access:{has:e=>"newOptionValue"in e,get:e=>e.newOptionValue,set:(e,t)=>{e.newOptionValue=t}},metadata:i},Dt,qt),t(ne,null,Ce,{kind:"accessor",name:"text",static:!1,private:!1,access:{has:e=>"text"in e,get:e=>e.text,set:(e,t)=>{e.text=t}},metadata:i},Vt,jt),t(ne,null,Me,{kind:"accessor",name:"searchText",static:!1,private:!1,access:{has:e=>"searchText"in e,get:e=>e.searchText,set:(e,t)=>{e.searchText=t}},metadata:i},Lt,Kt),t(ne,null,We,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:e=>"assistiveText"in e,get:e=>e.assistiveText,set:(e,t)=>{e.assistiveText=t}},metadata:i},Bt,Pt),t(ne,null,Ie,{kind:"accessor",name:"searchEl",static:!1,private:!1,access:{has:e=>"searchEl"in e,get:e=>e.searchEl,set:(e,t)=>{e.searchEl=t}},metadata:i},Rt,Ut),t(ne,null,Ne,{kind:"accessor",name:"buttonEl",static:!1,private:!1,access:{has:e=>"buttonEl"in e,get:e=>e.buttonEl,set:(e,t)=>{e.buttonEl=t}},metadata:i},Yt,Ht),t(ne,null,De,{kind:"accessor",name:"listboxEl",static:!1,private:!1,access:{has:e=>"listboxEl"in e,get:e=>e.listboxEl,set:(e,t)=>{e.listboxEl=t}},metadata:i},Ft,Gt),t(ne,null,qe,{kind:"accessor",name:"clearMultipleEl",static:!1,private:!1,access:{has:e=>"clearMultipleEl"in e,get:e=>e.clearMultipleEl,set:(e,t)=>{e.clearMultipleEl=t}},metadata:i},Jt,Qt),t(ne,null,Ve,{kind:"accessor",name:"addOptionInputEl",static:!1,private:!1,access:{has:e=>"addOptionInputEl"in e,get:e=>e.addOptionInputEl,set:(e,t)=>{e.addOptionInputEl=t}},metadata:i},Xt,Zt),t(ne,null,je,{kind:"accessor",name:"_openUpwards",static:!1,private:!1,access:{has:e=>"_openUpwards"in e,get:e=>e._openUpwards,set:(e,t)=>{e._openUpwards=t}},metadata:i},ei,ti),t(ne,null,Le,{kind:"accessor",name:"_tags",static:!1,private:!1,access:{has:e=>"_tags"in e,get:e=>e._tags,set:(e,t)=>{e._tags=t}},metadata:i},ii,si),t(null,le={value:ne},Ke,{kind:"class",name:ne.name,metadata:i},null,Be),ne=le.value,i&&Object.defineProperty(ne,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),ne.styles=c(x),i(ne,Be),ne})();export{S as Dropdown};
959
974
  //# sourceMappingURL=dropdown.js.map