@kyndryl-design-system/shidoka-applications 2.65.2 → 2.65.4

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.
Files changed (8) hide show
  1. package/common/scss/menu-item.scss +37 -27
  2. package/components/reusable/dropdown/dropdownOption.js +46 -15
  3. package/components/reusable/dropdown/dropdownOption.js.map +1 -1
  4. package/components/reusable/dropdown/enhancedDropdownOption.js +44 -13
  5. package/components/reusable/dropdown/enhancedDropdownOption.js.map +1 -1
  6. package/components/reusable/overflowMenu/overflowMenuItem.js +37 -6
  7. package/components/reusable/overflowMenu/overflowMenuItem.js.map +1 -1
  8. package/package.json +1 -1
package/common/scss/menu-item.scss CHANGED
@@ -25,6 +25,10 @@
25
25
  color: var(--kd-color-text-level-disabled);
26
26
  }
27
27
 
28
+ &[selected] .menu-item-inner-el {
29
+ color: var(--kd-color-text-level-disabled);
30
+ }
31
+
28
32
  &,
29
33
  & * {
30
34
  cursor: not-allowed;
@@ -32,6 +36,14 @@
32
36
 
33
37
  &:hover {
34
38
  background-color: $bg-default;
39
+
40
+ .menu-item-inner-el {
41
+ color: var(--kd-color-text-level-disabled);
42
+ }
43
+
44
+ slot[name='icon']::slotted(span) {
45
+ color: var(--kd-color-icon-disabled);
46
+ }
35
47
  }
36
48
  }
37
49
 
@@ -44,15 +56,36 @@
44
56
  }
45
57
 
46
58
  &:hover {
47
- background-color: var(--kd-color-status-error-light);
59
+ background-color: var(--kd-color-status-error-accent) !important;
60
+
61
+ .menu-item-inner-el {
62
+ color: var(--kd-color-status-error-foreground) !important;
63
+ }
64
+ }
65
+
66
+ &:active {
67
+ background-color: var(
68
+ --kd-color-background-button-primary-destructive-pressed
69
+ ) !important;
70
+ outline: none;
71
+
72
+ .menu-item-inner-el {
73
+ color: var(--kd-color-text-button-dark-destructive) !important;
74
+ }
48
75
  }
49
76
 
50
77
  &:focus-visible {
51
- outline: 2px solid var(--kd-color-border-button-primary-destructive-default);
52
- background-color: var(--kd-color-status-error-light);
78
+ outline: 2px solid var(--kd-color-border-button-primary-destructive-default) !important;
79
+ background-color: var(--kd-color-status-error-accent) !important;
53
80
 
54
81
  .menu-item-inner-el {
55
- color: var(--kd-color-text-level-primary);
82
+ color: var(--kd-color-text-level-primary) !important;
83
+ }
84
+
85
+ &:hover {
86
+ .menu-item-inner-el {
87
+ color: var(--kd-color-status-error-foreground) !important;
88
+ }
56
89
  }
57
90
  }
58
91
  }
@@ -185,13 +218,6 @@
185
218
  var(--kd-color-icon-light)
186
219
  );
187
220
  }
188
- // cancel hover when readonly/disabled/ai-connected/destructive
189
- // &[disabled]:hover,
190
- // &[readonly]:hover,
191
- // &.ai-connected:hover,
192
- // &.destructive:hover {
193
-
194
- // }
195
221
 
196
222
  // 5) selected (non-disabled)
197
223
  &[selected] {
@@ -207,28 +233,12 @@
207
233
  );
208
234
  }
209
235
 
210
- // leave commented out for now as it causes issues with keyboard nav
211
- // 6) highlighted (non-disabled)
212
- // &[highlighted] {
213
- // @include state-colors(
214
- // var(--kd-color-background-menu-state-hover),
215
- // var(--kd-color-text-level-light)
216
- // );
217
- // // default (non-AI) focus ring
218
- // outline: 1px solid var(--kd-color-border-variants-focus);
219
- // }
220
-
221
236
  // ----- AI variant -----
222
237
  &.ai-connected {
223
238
  background-color: var(--kd-color-background-menu-state-ai-default);
224
239
  color: var(--kd-color-text-level-primary);
225
240
  }
226
241
 
227
- // &.ai-connected:focus,
228
- // &.ai-connected:focus-within,
229
- // &.ai-connected:focus-visible {
230
- // }
231
-
232
242
  &.ai-connected:hover {
233
243
  background-color: var(--kd-color-background-menu-state-ai-hover);
234
244
 
package/components/reusable/dropdown/dropdownOption.js CHANGED
@@ -1,4 +1,4 @@
1
- import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as a,x as s,o as r}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,a as d,t as c,r as m,n as h}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../checkbox/checkboxSubgroup.js";import"../button/button.js";import{i as p,c as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";import"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"../../../common/mixins/form-input.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var k=l`*,
1
+ import{_ as e,a as t,b as o,c as i,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as a,x as r,o as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,a as d,t as c,r as m,n as h}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../checkbox/checkboxSubgroup.js";import"../button/button.js";import{i as v,c as p}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";import"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"../../../common/mixins/form-input.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var k=l`*,
2
2
  *::before,
3
3
  *::after {
4
4
  box-sizing: border-box;
@@ -102,12 +102,21 @@ dialog.ai-connected.gradient-bkg {
102
102
  :host .menu-item[disabled] .menu-item-inner-el {
103
103
  color: var(--kd-color-text-level-disabled);
104
104
  }
105
+ :host .menu-item[disabled][selected] .menu-item-inner-el {
106
+ color: var(--kd-color-text-level-disabled);
107
+ }
105
108
  :host .menu-item[disabled], :host .menu-item[disabled] * {
106
109
  cursor: not-allowed;
107
110
  }
108
111
  :host .menu-item[disabled]:hover {
109
112
  background-color: var(--kd-color-background-menu-state-default);
110
113
  }
114
+ :host .menu-item[disabled]:hover .menu-item-inner-el {
115
+ color: var(--kd-color-text-level-disabled);
116
+ }
117
+ :host .menu-item[disabled]:hover slot[name=icon]::slotted(span) {
118
+ color: var(--kd-color-icon-disabled);
119
+ }
111
120
  :host .menu-item[disabled]:focus, :host .menu-item[disabled]:focus-within, :host .menu-item[disabled]:focus-visible {
112
121
  outline: none;
113
122
  border: none;
@@ -206,12 +215,21 @@ dialog.ai-connected.gradient-bkg {
206
215
  :host .menu-item.ai-connected[disabled] .menu-item-inner-el {
207
216
  color: var(--kd-color-text-level-disabled);
208
217
  }
218
+ :host .menu-item.ai-connected[disabled][selected] .menu-item-inner-el {
219
+ color: var(--kd-color-text-level-disabled);
220
+ }
209
221
  :host .menu-item.ai-connected[disabled], :host .menu-item.ai-connected[disabled] * {
210
222
  cursor: not-allowed;
211
223
  }
212
224
  :host .menu-item.ai-connected[disabled]:hover {
213
225
  background-color: var(--kd-color-background-menu-state-ai-default);
214
226
  }
227
+ :host .menu-item.ai-connected[disabled]:hover .menu-item-inner-el {
228
+ color: var(--kd-color-text-level-disabled);
229
+ }
230
+ :host .menu-item.ai-connected[disabled]:hover slot[name=icon]::slotted(span) {
231
+ color: var(--kd-color-icon-disabled);
232
+ }
215
233
  :host .menu-item.destructive {
216
234
  color: var(--kd-color-text-variant-destructive);
217
235
  border-top: 1px solid var(--kd-color-border-level-tertiary);
@@ -220,14 +238,27 @@ dialog.ai-connected.gradient-bkg {
220
238
  color: var(--kd-color-text-variant-destructive);
221
239
  }
222
240
  :host .menu-item.destructive:hover {
223
- background-color: var(--kd-color-status-error-light);
241
+ background-color: var(--kd-color-status-error-accent) !important;
242
+ }
243
+ :host .menu-item.destructive:hover .menu-item-inner-el {
244
+ color: var(--kd-color-status-error-foreground) !important;
245
+ }
246
+ :host .menu-item.destructive:active {
247
+ background-color: var(--kd-color-background-button-primary-destructive-pressed) !important;
248
+ outline: none;
249
+ }
250
+ :host .menu-item.destructive:active .menu-item-inner-el {
251
+ color: var(--kd-color-text-button-dark-destructive) !important;
224
252
  }
225
253
  :host .menu-item.destructive:focus-visible {
226
- outline: 2px solid var(--kd-color-border-button-primary-destructive-default);
227
- background-color: var(--kd-color-status-error-light);
254
+ outline: 2px solid var(--kd-color-border-button-primary-destructive-default) !important;
255
+ background-color: var(--kd-color-status-error-accent) !important;
228
256
  }
229
257
  :host .menu-item.destructive:focus-visible .menu-item-inner-el {
230
- color: var(--kd-color-text-level-primary);
258
+ color: var(--kd-color-text-level-primary) !important;
259
+ }
260
+ :host .menu-item.destructive:focus-visible:hover .menu-item-inner-el {
261
+ color: var(--kd-color-status-error-foreground) !important;
231
262
  }
232
263
 
233
264
  :host .menu-item:active,
@@ -315,7 +346,7 @@ kyn-checkbox {
315
346
  }
316
347
  .remove-option .clear-icon {
317
348
  padding-top: 0.25rem;
318
- }`;let g=(()=>{var l,g,b,f,y,x,w,$,S,E,j,C,I,M;let W,D,A,O,B,z,P,R,q,F,N,T,U,K,L,G,H=[c("kyn-dropdown-option")],_=[],J=u,Q=[],V=[],X=[],Y=[],Z=[],ee=[],te=[],oe=[],ie=[],ne=[],ae=[],se=[],re=[],le=[],de=[],ce=[],me=[],he=[],ue=[],pe=[],ve=[],ke=[],ge=[],be=[],fe=[],ye=[],xe=[],we=[];return D=class extends J{get value(){return i(this,l,"f")}set value(e){n(this,l,e,"f")}get selected(){return i(this,g,"f")}set selected(e){n(this,g,e,"f")}get disabled(){return i(this,b,"f")}set disabled(e){n(this,b,e,"f")}get allowAddOption(){return i(this,f,"f")}set allowAddOption(e){n(this,f,e,"f")}get highlighted(){return i(this,y,"f")}set highlighted(e){n(this,y,e,"f")}get multiple(){return i(this,x,"f")}set multiple(e){n(this,x,e,"f")}get removable(){return i(this,w,"f")}set removable(e){n(this,w,e,"f")}get text(){return i(this,$,"f")}set text(e){n(this,$,e,"f")}get indeterminate(){return i(this,S,"f")}set indeterminate(e){n(this,S,e,"f")}get readonly(){return i(this,E,"f")}set readonly(e){n(this,E,e,"f")}get kind(){return i(this,j,"f")}set kind(e){n(this,j,e,"f")}get hasIcon(){return i(this,C,"f")}set hasIcon(e){n(this,C,e,"f")}get role(){return i(this,I,"f")}set role(e){n(this,I,e,"f")}get ariaSelected(){return i(this,M,"f")}set ariaSelected(e){n(this,M,e,"f")}render(){const e={option:!0,"menu-item":!0,"option-is-readonly":this.readonly,"ai-connected":"ai"===this.kind};return s`
349
+ }`;let b=(()=>{var l,b,g,f,y,x,w,$,S,E,j,C,I,M;let W,D,A,O,B,z,P,R,q,F,N,T,U,K,L,G,H=[c("kyn-dropdown-option")],_=[],J=u,Q=[],V=[],X=[],Y=[],Z=[],ee=[],te=[],oe=[],ie=[],ne=[],ae=[],re=[],se=[],le=[],de=[],ce=[],me=[],he=[],ue=[],ve=[],pe=[],ke=[],be=[],ge=[],fe=[],ye=[],xe=[],we=[];return D=class extends J{get value(){return i(this,l,"f")}set value(e){n(this,l,e,"f")}get selected(){return i(this,b,"f")}set selected(e){n(this,b,e,"f")}get disabled(){return i(this,g,"f")}set disabled(e){n(this,g,e,"f")}get allowAddOption(){return i(this,f,"f")}set allowAddOption(e){n(this,f,e,"f")}get highlighted(){return i(this,y,"f")}set highlighted(e){n(this,y,e,"f")}get multiple(){return i(this,x,"f")}set multiple(e){n(this,x,e,"f")}get removable(){return i(this,w,"f")}set removable(e){n(this,w,e,"f")}get text(){return i(this,$,"f")}set text(e){n(this,$,e,"f")}get indeterminate(){return i(this,S,"f")}set indeterminate(e){n(this,S,e,"f")}get readonly(){return i(this,E,"f")}set readonly(e){n(this,E,e,"f")}get kind(){return i(this,j,"f")}set kind(e){n(this,j,e,"f")}get hasIcon(){return i(this,C,"f")}set hasIcon(e){n(this,C,e,"f")}get role(){return i(this,I,"f")}set role(e){n(this,I,e,"f")}get ariaSelected(){return i(this,M,"f")}set ariaSelected(e){n(this,M,e,"f")}render(){const e={option:!0,"menu-item":!0,"option-is-readonly":this.readonly,"ai-connected":"ai"===this.kind};return r`
319
350
  <div
320
351
  class=${a(e)}
321
352
  role="option"
@@ -333,7 +364,7 @@ kyn-checkbox {
333
364
  @keydown=${e=>this.handleKeyDown(e)}
334
365
  >
335
366
  <span class="menu-item-inner-el text">
336
- ${this.multiple?s`
367
+ ${this.multiple?r`
337
368
  <kyn-checkbox
338
369
  type="checkbox"
339
370
  value=${this.value}
@@ -347,23 +378,23 @@ kyn-checkbox {
347
378
  <slot
348
379
  @slotchange=${e=>this.handleSlotChange(e)}
349
380
  ></slot>
350
- `:s`<slot
381
+ `:r`<slot
351
382
  @slotchange=${e=>this.handleSlotChange(e)}
352
383
  ></slot>`}
353
384
  </span>
354
385
 
355
- ${this.hasIcon?s`<slot
386
+ ${this.hasIcon?r`<slot
356
387
  name="icon"
357
388
  style="display:flex"
358
389
  @slotchange=${e=>this.handleIconSlotChange(e)}
359
- ></slot>`:s`<slot
390
+ ></slot>`:r`<slot
360
391
  name="icon"
361
392
  style="display:none"
362
393
  @slotchange=${e=>this.handleIconSlotChange(e)}
363
394
  ></slot>`}
364
- ${this.selected&&!this.multiple?s`<span class="menu-item-inner-el check-icon"
365
- >${r(p)}</span
366
- >`:this.allowAddOption&&this.removable?s`
395
+ ${this.selected&&!this.multiple?r`<span class="menu-item-inner-el check-icon"
396
+ >${s(v)}</span
397
+ >`:this.allowAddOption&&this.removable?r`
367
398
  <kyn-button
368
399
  class="remove-option"
369
400
  kind=${"ai"===this.kind?"ghost-ai":"ghost"}
@@ -377,10 +408,10 @@ kyn-checkbox {
377
408
  @focus=${e=>e.stopPropagation()}
378
409
  >
379
410
  <span slot="icon" class="clear-icon"
380
- >${r(v)}</span
411
+ >${s(p)}</span
381
412
  >
382
413
  </kyn-button>
383
414
  `:null}
384
415
  </div>
385
- `}firstUpdated(){const e=this.closest("kyn-dropdown");e&&(this.kind=e.kind,e.addEventListener("kind-changed",(e=>{this.kind=e.detail})))}willUpdate(e){var t;if(e.has("selected")&&(this.ariaSelected=this.selected.toString()),e.has("disabled")||e.has("readonly")){const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".menu-item");e&&(e.tabIndex=this.disabled||this.readonly?-1:0)}}handleKeyDown(e){if(!this.disabled&&!this.readonly)switch(e.key){case"Enter":case" ":e.preventDefault(),this.handleClick(e);break;case"ArrowDown":e.preventDefault(),this.moveFocus(1);break;case"ArrowUp":e.preventDefault(),this.moveFocus(-1);break;case"Home":e.preventDefault(),this.moveToEdge("start");break;case"End":e.preventDefault(),this.moveToEdge("end")}}moveFocus(e){var t;let o=e>0?this.nextElementSibling:this.previousElementSibling;for(;o;){if("kyn-dropdown-option"===o.tagName.toLowerCase()){const e=o;if(!e.disabled&&!e.readonly){const o=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".menu-item");null==o||o.focus();break}}o=e>0?o.nextElementSibling:o.previousElementSibling}}moveToEdge(e){var t,o,i;const n=null!==(o=null===(t=this.parentElement)||void 0===t?void 0:t.querySelectorAll("kyn-dropdown-option"))&&void 0!==o?o:[],a=Array.from(n),s="start"===e?a[0]:a[a.length-1];if(s&&!s.disabled&&!s.readonly){const e=null===(i=s.shadowRoot)||void 0===i?void 0:i.querySelector(".menu-item");null==e||e.focus()}}handleRemoveClick(e){e.stopPropagation();const t=new CustomEvent("on-remove-option",{bubbles:!0,composed:!0,detail:{value:this.value}});this.dispatchEvent(t)}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});let o="";for(let e=0;e<t.length;e++)o+=t[e].textContent.trim();this.text=o}handleClick(e){this.disabled||this.readonly?e.stopPropagation():(this.multiple?this.selected=!this.selected:this.selected=!0,this.dispatchEvent(new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}})))}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}handleIconSlotChange(e){const t=e.target.assignedNodes({flatten:!0});this.hasIcon=t.length>0}constructor(){super(...arguments),l.set(this,o(this,Q,"")),g.set(this,(o(this,V),o(this,X,!1))),b.set(this,(o(this,Y),o(this,Z,!1))),f.set(this,(o(this,ee),o(this,te,!1))),y.set(this,(o(this,oe),o(this,ie,!1))),x.set(this,(o(this,ne),o(this,ae,!1))),w.set(this,(o(this,se),o(this,re,!1))),$.set(this,(o(this,le),o(this,de,""))),S.set(this,(o(this,ce),o(this,me,!1))),E.set(this,(o(this,he),o(this,ue,!1))),j.set(this,(o(this,pe),o(this,ve,"default"))),C.set(this,(o(this,ke),o(this,ge,!1))),I.set(this,(o(this,be),o(this,fe,"option"))),M.set(this,(o(this,ye),o(this,xe,"false"))),o(this,we)}},l=new WeakMap,g=new WeakMap,b=new WeakMap,f=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,$=new WeakMap,S=new WeakMap,E=new WeakMap,j=new WeakMap,C=new WeakMap,I=new WeakMap,M=new WeakMap,e(D,"DropdownOption"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=J[Symbol.metadata])&&void 0!==e?e:null):void 0;A=[h({type:String})],O=[h({type:Boolean})],B=[h({type:Boolean})],z=[h({type:Boolean})],P=[d()],R=[h({type:Boolean})],q=[h({type:Boolean})],F=[d()],N=[h({type:Boolean,reflect:!0})],T=[h({type:Boolean,reflect:!0})],U=[d()],K=[d()],L=[h({type:String,reflect:!0})],G=[h({type:String,reflect:!0,attribute:"aria-selected"})],t(D,null,A,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:o},Q,V),t(D,null,O,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:o},X,Y),t(D,null,B,{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:o},Z,ee),t(D,null,z,{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:o},te,oe),t(D,null,P,{kind:"accessor",name:"highlighted",static:!1,private:!1,access:{has:e=>"highlighted"in e,get:e=>e.highlighted,set:(e,t)=>{e.highlighted=t}},metadata:o},ie,ne),t(D,null,R,{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:o},ae,se),t(D,null,q,{kind:"accessor",name:"removable",static:!1,private:!1,access:{has:e=>"removable"in e,get:e=>e.removable,set:(e,t)=>{e.removable=t}},metadata:o},re,le),t(D,null,F,{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:o},de,ce),t(D,null,N,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:e=>"indeterminate"in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:o},me,he),t(D,null,T,{kind:"accessor",name:"readonly",static:!1,private:!1,access:{has:e=>"readonly"in e,get:e=>e.readonly,set:(e,t)=>{e.readonly=t}},metadata:o},ue,pe),t(D,null,U,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:e=>"kind"in e,get:e=>e.kind,set:(e,t)=>{e.kind=t}},metadata:o},ve,ke),t(D,null,K,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:o},ge,be),t(D,null,L,{kind:"accessor",name:"role",static:!1,private:!1,access:{has:e=>"role"in e,get:e=>e.role,set:(e,t)=>{e.role=t}},metadata:o},fe,ye),t(D,null,G,{kind:"accessor",name:"ariaSelected",static:!1,private:!1,access:{has:e=>"ariaSelected"in e,get:e=>e.ariaSelected,set:(e,t)=>{e.ariaSelected=t}},metadata:o},xe,we),t(null,W={value:D},H,{kind:"class",name:D.name,metadata:o},null,_),D=W.value,o&&Object.defineProperty(D,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),D.styles=m(k),o(D,_),D})();export{g as DropdownOption};
416
+ `}firstUpdated(){const e=this.closest("kyn-dropdown");e&&(this.kind=e.kind,e.addEventListener("kind-changed",(e=>{this.kind=e.detail})))}willUpdate(e){var t;if(e.has("selected")&&(this.ariaSelected=this.selected.toString()),e.has("disabled")||e.has("readonly")){const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".menu-item");e&&(e.tabIndex=this.disabled||this.readonly?-1:0)}}handleKeyDown(e){if(!this.disabled&&!this.readonly)switch(e.key){case"Enter":case" ":e.preventDefault(),this.handleClick(e);break;case"ArrowDown":e.preventDefault(),this.moveFocus(1);break;case"ArrowUp":e.preventDefault(),this.moveFocus(-1);break;case"Home":e.preventDefault(),this.moveToEdge("start");break;case"End":e.preventDefault(),this.moveToEdge("end")}}moveFocus(e){var t;let o=e>0?this.nextElementSibling:this.previousElementSibling;for(;o;){if("kyn-dropdown-option"===o.tagName.toLowerCase()){const e=o;if(!e.disabled&&!e.readonly){const o=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".menu-item");null==o||o.focus();break}}o=e>0?o.nextElementSibling:o.previousElementSibling}}moveToEdge(e){var t,o,i;const n=null!==(o=null===(t=this.parentElement)||void 0===t?void 0:t.querySelectorAll("kyn-dropdown-option"))&&void 0!==o?o:[],a=Array.from(n),r="start"===e?a[0]:a[a.length-1];if(r&&!r.disabled&&!r.readonly){const e=null===(i=r.shadowRoot)||void 0===i?void 0:i.querySelector(".menu-item");null==e||e.focus()}}handleRemoveClick(e){e.stopPropagation();const t=new CustomEvent("on-remove-option",{bubbles:!0,composed:!0,detail:{value:this.value}});this.dispatchEvent(t)}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});let o="";for(let e=0;e<t.length;e++)o+=t[e].textContent.trim();this.text=o}handleClick(e){this.disabled||this.readonly?e.stopPropagation():(this.multiple?this.selected=!this.selected:this.selected=!0,this.dispatchEvent(new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}})))}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}handleIconSlotChange(e){const t=e.target.assignedNodes({flatten:!0});this.hasIcon=t.length>0}constructor(){super(...arguments),l.set(this,o(this,Q,"")),b.set(this,(o(this,V),o(this,X,!1))),g.set(this,(o(this,Y),o(this,Z,!1))),f.set(this,(o(this,ee),o(this,te,!1))),y.set(this,(o(this,oe),o(this,ie,!1))),x.set(this,(o(this,ne),o(this,ae,!1))),w.set(this,(o(this,re),o(this,se,!1))),$.set(this,(o(this,le),o(this,de,""))),S.set(this,(o(this,ce),o(this,me,!1))),E.set(this,(o(this,he),o(this,ue,!1))),j.set(this,(o(this,ve),o(this,pe,"default"))),C.set(this,(o(this,ke),o(this,be,!1))),I.set(this,(o(this,ge),o(this,fe,"option"))),M.set(this,(o(this,ye),o(this,xe,"false"))),o(this,we)}},l=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,$=new WeakMap,S=new WeakMap,E=new WeakMap,j=new WeakMap,C=new WeakMap,I=new WeakMap,M=new WeakMap,e(D,"DropdownOption"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=J[Symbol.metadata])&&void 0!==e?e:null):void 0;A=[h({type:String})],O=[h({type:Boolean})],B=[h({type:Boolean})],z=[h({type:Boolean})],P=[d()],R=[h({type:Boolean})],q=[h({type:Boolean})],F=[d()],N=[h({type:Boolean,reflect:!0})],T=[h({type:Boolean,reflect:!0})],U=[d()],K=[d()],L=[h({type:String,reflect:!0})],G=[h({type:String,reflect:!0,attribute:"aria-selected"})],t(D,null,A,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:o},Q,V),t(D,null,O,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:o},X,Y),t(D,null,B,{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:o},Z,ee),t(D,null,z,{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:o},te,oe),t(D,null,P,{kind:"accessor",name:"highlighted",static:!1,private:!1,access:{has:e=>"highlighted"in e,get:e=>e.highlighted,set:(e,t)=>{e.highlighted=t}},metadata:o},ie,ne),t(D,null,R,{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:o},ae,re),t(D,null,q,{kind:"accessor",name:"removable",static:!1,private:!1,access:{has:e=>"removable"in e,get:e=>e.removable,set:(e,t)=>{e.removable=t}},metadata:o},se,le),t(D,null,F,{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:o},de,ce),t(D,null,N,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:e=>"indeterminate"in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:o},me,he),t(D,null,T,{kind:"accessor",name:"readonly",static:!1,private:!1,access:{has:e=>"readonly"in e,get:e=>e.readonly,set:(e,t)=>{e.readonly=t}},metadata:o},ue,ve),t(D,null,U,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:e=>"kind"in e,get:e=>e.kind,set:(e,t)=>{e.kind=t}},metadata:o},pe,ke),t(D,null,K,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:o},be,ge),t(D,null,L,{kind:"accessor",name:"role",static:!1,private:!1,access:{has:e=>"role"in e,get:e=>e.role,set:(e,t)=>{e.role=t}},metadata:o},fe,ye),t(D,null,G,{kind:"accessor",name:"ariaSelected",static:!1,private:!1,access:{has:e=>"ariaSelected"in e,get:e=>e.ariaSelected,set:(e,t)=>{e.ariaSelected=t}},metadata:o},xe,we),t(null,W={value:D},H,{kind:"class",name:D.name,metadata:o},null,_),D=W.value,o&&Object.defineProperty(D,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),D.styles=m(k),o(D,_),D})();export{b as DropdownOption};
386
417
  //# sourceMappingURL=dropdownOption.js.map
package/components/reusable/dropdown/dropdownOption.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss?inline';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown. `detail:{ selected: boolean, value: string, origEvent: PointerEvent }`\n * @fires on-remove-option - Emits the option that is removed. `detail:{ value: string }`\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = unsafeCSS(DropdownOptionScss);\n\n /** Option value. */\n @property({ type: String })\n accessor value = '';\n\n /** Internal text strings.\n * @internal\n */\n @property({ type: Boolean })\n accessor selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n accessor allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n accessor highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n accessor multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n accessor removable = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n accessor text: any = '';\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n accessor indeterminate = false;\n\n /** Readonly state (from parent). Option stays focusable but not selectable. */\n @property({ type: Boolean, reflect: true })\n accessor readonly = false;\n\n /** Kind of the item, derived from parent.\n * @ignore\n */\n @state()\n accessor kind: 'ai' | 'default' = 'default';\n\n /** slotted icon added state.\n * @ignore\n */\n @state()\n accessor hasIcon = false;\n\n @property({ type: String, reflect: true })\n override accessor role = 'option';\n\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override accessor ariaSelected = 'false';\n\n override render() {\n const classes = {\n option: true,\n 'menu-item': true,\n 'option-is-readonly': this.readonly,\n 'ai-connected': this.kind === 'ai',\n };\n\n return html`\n <div\n class=${classMap(classes)}\n role=\"option\"\n aria-selected=${this.selected ? 'true' : 'false'}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n ?readonly=${!this.disabled && this.readonly}\n title=${this.text}\n tabindex=${this.disabled || this.readonly ? -1 : 0}\n @mousedown=${(e: MouseEvent) => {\n if (this.readonly) e.preventDefault();\n }}\n @pointerup=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}\n >\n <span class=\"menu-item-inner-el text\">\n ${this.multiple\n ? html`\n <kyn-checkbox\n type=\"checkbox\"\n value=${this.value}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n ?readonly=${!this.disabled && this.readonly}\n notFocusable\n .indeterminate=${this.indeterminate}\n ></kyn-checkbox>\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n `\n : html`<slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>`}\n </span>\n\n ${this.hasIcon\n ? html`<slot\n name=\"icon\"\n style=\"display:flex\"\n @slotchange=${(e: any) => this.handleIconSlotChange(e)}\n ></slot>`\n : html`<slot\n name=\"icon\"\n style=\"display:none\"\n @slotchange=${(e: any) => this.handleIconSlotChange(e)}\n ></slot>`}\n ${this.selected && !this.multiple\n ? html`<span class=\"menu-item-inner-el check-icon\"\n >${unsafeSVG(checkIcon)}</span\n >`\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n class=\"remove-option\"\n kind=${this.kind === 'ai' ? 'ghost-ai' : 'ghost'}\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n description=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleRemoveClick(e)}\n @mousedown=${(e: Event) => e.stopPropagation()}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <span slot=\"icon\" class=\"clear-icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : null}\n </div>\n `;\n }\n\n override firstUpdated() {\n const parent = this.closest('kyn-dropdown') as any;\n if (parent) {\n this.kind = parent.kind;\n\n parent.addEventListener('kind-changed', (e: Event) => {\n this.kind = (e as CustomEvent<'ai' | 'default'>).detail;\n });\n }\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n if (changed.has('disabled') || changed.has('readonly')) {\n const el = this.shadowRoot?.querySelector(\n '.menu-item'\n ) as HTMLElement | null;\n if (el) el.tabIndex = this.disabled || this.readonly ? -1 : 0;\n }\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n if (this.disabled || this.readonly) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ': {\n e.preventDefault();\n this.handleClick(e);\n break;\n }\n case 'ArrowDown': {\n e.preventDefault();\n this.moveFocus(1);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n this.moveFocus(-1);\n break;\n }\n case 'Home': {\n e.preventDefault();\n this.moveToEdge('start');\n break;\n }\n case 'End': {\n e.preventDefault();\n this.moveToEdge('end');\n break;\n }\n }\n }\n\n private moveFocus(delta: number) {\n let node: Element | null =\n delta > 0 ? this.nextElementSibling : this.previousElementSibling;\n while (node) {\n if (node.tagName.toLowerCase() === 'kyn-dropdown-option') {\n const opt = node as DropdownOption;\n if (!opt.disabled && !opt.readonly) {\n const target = opt.shadowRoot?.querySelector(\n '.menu-item'\n ) as HTMLElement | null;\n target?.focus();\n break;\n }\n }\n node = delta > 0 ? node.nextElementSibling : node.previousElementSibling;\n }\n }\n\n private moveToEdge(where: 'start' | 'end') {\n const all =\n this.parentElement?.querySelectorAll('kyn-dropdown-option') ?? [];\n const list = Array.from(all) as DropdownOption[];\n const candidate = where === 'start' ? list[0] : list[list.length - 1];\n if (candidate && !candidate.disabled && !candidate.readonly) {\n const target = candidate.shadowRoot?.querySelector(\n '.menu-item'\n ) as HTMLElement | null;\n target?.focus();\n }\n }\n\n private handleRemoveClick(e: Event) {\n e.stopPropagation();\n const event = new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n let text = '';\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this.text = text;\n }\n\n private handleClick(e: Event) {\n // block interaction when disabled or readonly\n if (this.disabled || this.readonly) {\n e.stopPropagation();\n return;\n }\n\n if (this.multiple) {\n this.selected = !this.selected;\n } else {\n this.selected = true;\n }\n\n this.dispatchEvent(\n new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: { selected: this.selected, value: this.value, origEvent: e },\n })\n );\n }\n\n private handleBlur(e: any) {\n // emit blur event, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: {\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleIconSlotChange(e: any) {\n const nodes = e.target.assignedNodes({ flatten: true });\n this.hasIcon = nodes.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown-option': DropdownOption;\n }\n}\n"],"names":["DropdownOption","customElement","LitElement","_classThis","_classSuper","value","__classPrivateFieldGet","this","_DropdownOption_value_accessor_storage","__classPrivateFieldSet","selected","_DropdownOption_selected_accessor_storage","disabled","_DropdownOption_disabled_accessor_storage","allowAddOption","_DropdownOption_allowAddOption_accessor_storage","highlighted","_DropdownOption_highlighted_accessor_storage","multiple","_DropdownOption_multiple_accessor_storage","removable","_DropdownOption_removable_accessor_storage","text","_DropdownOption_text_accessor_storage","indeterminate","_DropdownOption_indeterminate_accessor_storage","readonly","_DropdownOption_readonly_accessor_storage","kind","_DropdownOption_kind_accessor_storage","hasIcon","_DropdownOption_hasIcon_accessor_storage","role","_DropdownOption_role_accessor_storage","ariaSelected","_DropdownOption_ariaSelected_accessor_storage","render","classes","option","html","classMap","e","preventDefault","handleClick","handleBlur","handleKeyDown","handleSlotChange","handleIconSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","firstUpdated","parent","closest","addEventListener","detail","willUpdate","changed","has","toString","el","_a","shadowRoot","querySelector","tabIndex","key","moveFocus","moveToEdge","delta","node","nextElementSibling","previousElementSibling","tagName","toLowerCase","opt","target","focus","where","all","_b","parentElement","querySelectorAll","list","Array","from","candidate","length","_c","event","CustomEvent","bubbles","composed","dispatchEvent","nodes","assignedNodes","flatten","i","textContent","trim","origEvent","set","__runInitializers","_value_initializers","_value_extraInitializers","_selected_initializers","_selected_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_allowAddOption_initializers","_allowAddOption_extraInitializers","_highlighted_initializers","_highlighted_extraInitializers","_multiple_initializers","_multiple_extraInitializers","_removable_initializers","_removable_extraInitializers","_text_initializers","_text_extraInitializers","_indeterminate_initializers","_indeterminate_extraInitializers","_readonly_initializers","_readonly_extraInitializers","_kind_initializers","_kind_extraInitializers","_hasIcon_initializers","_hasIcon_extraInitializers","_role_initializers","_role_extraInitializers","_ariaSelected_initializers","_value_decorators","property","type","String","_selected_decorators","Boolean","_disabled_decorators","_allowAddOption_decorators","_highlighted_decorators","state","_multiple_decorators","_removable_decorators","_text_decorators","reflect","_kind_decorators","_hasIcon_decorators","_ariaSelected_decorators","attribute","__esDecorate","name","static","private","access","obj","get","metadata","_metadata","_indeterminate_decorators","_readonly_decorators","_role_decorators","_ariaSelected_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","DropdownOptionScss"],"mappings":"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"}
1
+ {"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss?inline';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown. `detail:{ selected: boolean, value: string, origEvent: PointerEvent }`\n * @fires on-remove-option - Emits the option that is removed. `detail:{ value: string }`\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = unsafeCSS(DropdownOptionScss);\n\n /** Option value. */\n @property({ type: String })\n accessor value = '';\n\n /** Internal text strings.\n * @internal\n */\n @property({ type: Boolean })\n accessor selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n accessor allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n accessor highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n accessor multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n accessor removable = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n accessor text: any = '';\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n accessor indeterminate = false;\n\n /** Readonly state (from parent). Option stays focusable but not selectable. */\n @property({ type: Boolean, reflect: true })\n accessor readonly = false;\n\n /** Kind of the item, derived from parent.\n * @ignore\n */\n @state()\n accessor kind: 'ai' | 'default' = 'default';\n\n /** slotted icon added state.\n * @ignore\n */\n @state()\n accessor hasIcon = false;\n\n @property({ type: String, reflect: true })\n override accessor role = 'option';\n\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override accessor ariaSelected = 'false';\n\n override render() {\n const classes = {\n option: true,\n 'menu-item': true,\n 'option-is-readonly': this.readonly,\n 'ai-connected': this.kind === 'ai',\n };\n\n return html`\n <div\n class=${classMap(classes)}\n role=\"option\"\n aria-selected=${this.selected ? 'true' : 'false'}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n ?readonly=${!this.disabled && this.readonly}\n title=${this.text}\n tabindex=${this.disabled || this.readonly ? -1 : 0}\n @mousedown=${(e: MouseEvent) => {\n if (this.readonly) e.preventDefault();\n }}\n @pointerup=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}\n >\n <span class=\"menu-item-inner-el text\">\n ${this.multiple\n ? html`\n <kyn-checkbox\n type=\"checkbox\"\n value=${this.value}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n ?readonly=${!this.disabled && this.readonly}\n notFocusable\n .indeterminate=${this.indeterminate}\n ></kyn-checkbox>\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n `\n : html`<slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>`}\n </span>\n\n ${this.hasIcon\n ? html`<slot\n name=\"icon\"\n style=\"display:flex\"\n @slotchange=${(e: any) => this.handleIconSlotChange(e)}\n ></slot>`\n : html`<slot\n name=\"icon\"\n style=\"display:none\"\n @slotchange=${(e: any) => this.handleIconSlotChange(e)}\n ></slot>`}\n ${this.selected && !this.multiple\n ? html`<span class=\"menu-item-inner-el check-icon\"\n >${unsafeSVG(checkIcon)}</span\n >`\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n class=\"remove-option\"\n kind=${this.kind === 'ai' ? 'ghost-ai' : 'ghost'}\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n description=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleRemoveClick(e)}\n @mousedown=${(e: Event) => e.stopPropagation()}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <span slot=\"icon\" class=\"clear-icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : null}\n </div>\n `;\n }\n\n override firstUpdated() {\n const parent = this.closest('kyn-dropdown') as any;\n if (parent) {\n this.kind = parent.kind;\n\n parent.addEventListener('kind-changed', (e: Event) => {\n this.kind = (e as CustomEvent<'ai' | 'default'>).detail;\n });\n }\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n if (changed.has('disabled') || changed.has('readonly')) {\n const el = this.shadowRoot?.querySelector(\n '.menu-item'\n ) as HTMLElement | null;\n if (el) el.tabIndex = this.disabled || this.readonly ? -1 : 0;\n }\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n if (this.disabled || this.readonly) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ': {\n e.preventDefault();\n this.handleClick(e);\n break;\n }\n case 'ArrowDown': {\n e.preventDefault();\n this.moveFocus(1);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n this.moveFocus(-1);\n break;\n }\n case 'Home': {\n e.preventDefault();\n this.moveToEdge('start');\n break;\n }\n case 'End': {\n e.preventDefault();\n this.moveToEdge('end');\n break;\n }\n }\n }\n\n private moveFocus(delta: number) {\n let node: Element | null =\n delta > 0 ? this.nextElementSibling : this.previousElementSibling;\n while (node) {\n if (node.tagName.toLowerCase() === 'kyn-dropdown-option') {\n const opt = node as DropdownOption;\n if (!opt.disabled && !opt.readonly) {\n const target = opt.shadowRoot?.querySelector(\n '.menu-item'\n ) as HTMLElement | null;\n target?.focus();\n break;\n }\n }\n node = delta > 0 ? node.nextElementSibling : node.previousElementSibling;\n }\n }\n\n private moveToEdge(where: 'start' | 'end') {\n const all =\n this.parentElement?.querySelectorAll('kyn-dropdown-option') ?? [];\n const list = Array.from(all) as DropdownOption[];\n const candidate = where === 'start' ? list[0] : list[list.length - 1];\n if (candidate && !candidate.disabled && !candidate.readonly) {\n const target = candidate.shadowRoot?.querySelector(\n '.menu-item'\n ) as HTMLElement | null;\n target?.focus();\n }\n }\n\n private handleRemoveClick(e: Event) {\n e.stopPropagation();\n const event = new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n let text = '';\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this.text = text;\n }\n\n private handleClick(e: Event) {\n // block interaction when disabled or readonly\n if (this.disabled || this.readonly) {\n e.stopPropagation();\n return;\n }\n\n if (this.multiple) {\n this.selected = !this.selected;\n } else {\n this.selected = true;\n }\n\n this.dispatchEvent(\n new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: { selected: this.selected, value: this.value, origEvent: e },\n })\n );\n }\n\n private handleBlur(e: any) {\n // emit blur event, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: {\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleIconSlotChange(e: any) {\n const nodes = e.target.assignedNodes({ flatten: true });\n this.hasIcon = nodes.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown-option': DropdownOption;\n }\n}\n"],"names":["DropdownOption","customElement","LitElement","_classThis","_classSuper","value","__classPrivateFieldGet","this","_DropdownOption_value_accessor_storage","__classPrivateFieldSet","selected","_DropdownOption_selected_accessor_storage","disabled","_DropdownOption_disabled_accessor_storage","allowAddOption","_DropdownOption_allowAddOption_accessor_storage","highlighted","_DropdownOption_highlighted_accessor_storage","multiple","_DropdownOption_multiple_accessor_storage","removable","_DropdownOption_removable_accessor_storage","text","_DropdownOption_text_accessor_storage","indeterminate","_DropdownOption_indeterminate_accessor_storage","readonly","_DropdownOption_readonly_accessor_storage","kind","_DropdownOption_kind_accessor_storage","hasIcon","_DropdownOption_hasIcon_accessor_storage","role","_DropdownOption_role_accessor_storage","ariaSelected","_DropdownOption_ariaSelected_accessor_storage","render","classes","option","html","classMap","e","preventDefault","handleClick","handleBlur","handleKeyDown","handleSlotChange","handleIconSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","firstUpdated","parent","closest","addEventListener","detail","willUpdate","changed","has","toString","el","_a","shadowRoot","querySelector","tabIndex","key","moveFocus","moveToEdge","delta","node","nextElementSibling","previousElementSibling","tagName","toLowerCase","opt","target","focus","where","all","_b","parentElement","querySelectorAll","list","Array","from","candidate","length","_c","event","CustomEvent","bubbles","composed","dispatchEvent","nodes","assignedNodes","flatten","i","textContent","trim","origEvent","set","__runInitializers","_value_initializers","_value_extraInitializers","_selected_initializers","_selected_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_allowAddOption_initializers","_allowAddOption_extraInitializers","_highlighted_initializers","_highlighted_extraInitializers","_multiple_initializers","_multiple_extraInitializers","_removable_initializers","_removable_extraInitializers","_text_initializers","_text_extraInitializers","_indeterminate_initializers","_indeterminate_extraInitializers","_readonly_initializers","_readonly_extraInitializers","_kind_initializers","_kind_extraInitializers","_hasIcon_initializers","_hasIcon_extraInitializers","_role_initializers","_role_extraInitializers","_ariaSelected_initializers","_value_decorators","property","type","String","_selected_decorators","Boolean","_disabled_decorators","_allowAddOption_decorators","_highlighted_decorators","state","_multiple_decorators","_removable_decorators","_text_decorators","reflect","_kind_decorators","_hasIcon_decorators","_ariaSelected_decorators","attribute","__esDecorate","name","static","private","access","obj","get","metadata","_metadata","_indeterminate_decorators","_readonly_decorators","_role_decorators","_ariaSelected_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","DropdownOptionScss"],"mappings":"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"}
package/components/reusable/dropdown/enhancedDropdownOption.js CHANGED
@@ -1,4 +1,4 @@
1
- import{_ as e,a as t,b as i,c as n,d as o}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as a,x as s,o as r}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as d,a as l,t as c,r as h,n as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../checkbox/checkboxSubgroup.js";import"../button/button.js";import{i as p,c as g}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";import"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"../../../common/mixins/form-input.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var v=d`*,
1
+ import{_ as e,a as t,b as i,c as o,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as a,x as r,o as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as d,a as l,t as c,r as m,n as h}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../checkbox/checkboxSubgroup.js";import"../button/button.js";import{i as p,c as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";import"../../../vendor/deepmerge-ts-OFb5ej8y.js";import"../../../common/mixins/form-input.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var g=d`*,
2
2
  *::before,
3
3
  *::after {
4
4
  box-sizing: border-box;
@@ -102,12 +102,21 @@ dialog.ai-connected.gradient-bkg {
102
102
  :host .menu-item[disabled] .menu-item-inner-el {
103
103
  color: var(--kd-color-text-level-disabled);
104
104
  }
105
+ :host .menu-item[disabled][selected] .menu-item-inner-el {
106
+ color: var(--kd-color-text-level-disabled);
107
+ }
105
108
  :host .menu-item[disabled], :host .menu-item[disabled] * {
106
109
  cursor: not-allowed;
107
110
  }
108
111
  :host .menu-item[disabled]:hover {
109
112
  background-color: var(--kd-color-background-menu-state-default);
110
113
  }
114
+ :host .menu-item[disabled]:hover .menu-item-inner-el {
115
+ color: var(--kd-color-text-level-disabled);
116
+ }
117
+ :host .menu-item[disabled]:hover slot[name=icon]::slotted(span) {
118
+ color: var(--kd-color-icon-disabled);
119
+ }
111
120
  :host .menu-item[disabled]:focus, :host .menu-item[disabled]:focus-within, :host .menu-item[disabled]:focus-visible {
112
121
  outline: none;
113
122
  border: none;
@@ -206,12 +215,21 @@ dialog.ai-connected.gradient-bkg {
206
215
  :host .menu-item.ai-connected[disabled] .menu-item-inner-el {
207
216
  color: var(--kd-color-text-level-disabled);
208
217
  }
218
+ :host .menu-item.ai-connected[disabled][selected] .menu-item-inner-el {
219
+ color: var(--kd-color-text-level-disabled);
220
+ }
209
221
  :host .menu-item.ai-connected[disabled], :host .menu-item.ai-connected[disabled] * {
210
222
  cursor: not-allowed;
211
223
  }
212
224
  :host .menu-item.ai-connected[disabled]:hover {
213
225
  background-color: var(--kd-color-background-menu-state-ai-default);
214
226
  }
227
+ :host .menu-item.ai-connected[disabled]:hover .menu-item-inner-el {
228
+ color: var(--kd-color-text-level-disabled);
229
+ }
230
+ :host .menu-item.ai-connected[disabled]:hover slot[name=icon]::slotted(span) {
231
+ color: var(--kd-color-icon-disabled);
232
+ }
215
233
  :host .menu-item.destructive {
216
234
  color: var(--kd-color-text-variant-destructive);
217
235
  border-top: 1px solid var(--kd-color-border-level-tertiary);
@@ -220,14 +238,27 @@ dialog.ai-connected.gradient-bkg {
220
238
  color: var(--kd-color-text-variant-destructive);
221
239
  }
222
240
  :host .menu-item.destructive:hover {
223
- background-color: var(--kd-color-status-error-light);
241
+ background-color: var(--kd-color-status-error-accent) !important;
242
+ }
243
+ :host .menu-item.destructive:hover .menu-item-inner-el {
244
+ color: var(--kd-color-status-error-foreground) !important;
245
+ }
246
+ :host .menu-item.destructive:active {
247
+ background-color: var(--kd-color-background-button-primary-destructive-pressed) !important;
248
+ outline: none;
249
+ }
250
+ :host .menu-item.destructive:active .menu-item-inner-el {
251
+ color: var(--kd-color-text-button-dark-destructive) !important;
224
252
  }
225
253
  :host .menu-item.destructive:focus-visible {
226
- outline: 2px solid var(--kd-color-border-button-primary-destructive-default);
227
- background-color: var(--kd-color-status-error-light);
254
+ outline: 2px solid var(--kd-color-border-button-primary-destructive-default) !important;
255
+ background-color: var(--kd-color-status-error-accent) !important;
228
256
  }
229
257
  :host .menu-item.destructive:focus-visible .menu-item-inner-el {
230
- color: var(--kd-color-text-level-primary);
258
+ color: var(--kd-color-text-level-primary) !important;
259
+ }
260
+ :host .menu-item.destructive:focus-visible:hover .menu-item-inner-el {
261
+ color: var(--kd-color-status-error-foreground) !important;
231
262
  }
232
263
 
233
264
  :host .menu-item:active,
@@ -472,7 +503,7 @@ dialog.ai-connected.gradient-bkg {
472
503
 
473
504
  .enhanced-option[multiple] .content {
474
505
  align-items: flex-start;
475
- }`;let k=(()=>{var d,k,b,f,y,x,w,z,$,S,j,M,W,I,C;let E,O,T,B,A,P,N,R,D,U,q,F,G,L,_,H,J,K=[c("kyn-enhanced-dropdown-option")],Q=[],V=u,X=[],Y=[],Z=[],ee=[],te=[],ie=[],ne=[],oe=[],ae=[],se=[],re=[],de=[],le=[],ce=[],he=[],me=[],ue=[],pe=[],ge=[],ve=[],ke=[],be=[],fe=[],ye=[],xe=[],we=[],ze=[],$e=[],Se=[],je=[];return O=class extends V{get value(){return n(this,d,"f")}set value(e){o(this,d,e,"f")}get selected(){return n(this,k,"f")}set selected(e){o(this,k,e,"f")}get disabled(){return n(this,b,"f")}set disabled(e){o(this,b,e,"f")}get readonly(){return n(this,f,"f")}set readonly(e){o(this,f,e,"f")}get allowAddOption(){return n(this,y,"f")}set allowAddOption(e){o(this,y,e,"f")}get highlighted(){return n(this,x,"f")}set highlighted(e){o(this,x,e,"f")}get multiple(){return n(this,w,"f")}set multiple(e){o(this,w,e,"f")}get removable(){return n(this,z,"f")}set removable(e){o(this,z,e,"f")}get indeterminate(){return n(this,$,"f")}set indeterminate(e){o(this,$,e,"f")}get role(){return n(this,S,"f")}set role(e){o(this,S,e,"f")}get ariaSelected(){return n(this,j,"f")}set ariaSelected(e){o(this,j,e,"f")}get text(){return n(this,M,"f")}set text(e){o(this,M,e,"f")}get displayText(){return n(this,W,"f")}set displayText(e){o(this,W,e,"f")}get hasIcon(){return n(this,I,"f")}set hasIcon(e){o(this,I,e,"f")}get kind(){return n(this,C,"f")}set kind(e){o(this,C,e,"f")}render(){const e={"enhanced-option":!0,"menu-item":!0,"option-is-readonly":this.readonly,"ai-connected":"ai"===this.kind};return s`
506
+ }`;let k=(()=>{var d,k,b,f,y,x,w,z,$,S,j,M,W,I,C;let E,O,T,B,A,P,N,R,D,U,q,F,G,L,_,H,J,K=[c("kyn-enhanced-dropdown-option")],Q=[],V=u,X=[],Y=[],Z=[],ee=[],te=[],ie=[],oe=[],ne=[],ae=[],re=[],se=[],de=[],le=[],ce=[],me=[],he=[],ue=[],pe=[],ve=[],ge=[],ke=[],be=[],fe=[],ye=[],xe=[],we=[],ze=[],$e=[],Se=[],je=[];return O=class extends V{get value(){return o(this,d,"f")}set value(e){n(this,d,e,"f")}get selected(){return o(this,k,"f")}set selected(e){n(this,k,e,"f")}get disabled(){return o(this,b,"f")}set disabled(e){n(this,b,e,"f")}get readonly(){return o(this,f,"f")}set readonly(e){n(this,f,e,"f")}get allowAddOption(){return o(this,y,"f")}set allowAddOption(e){n(this,y,e,"f")}get highlighted(){return o(this,x,"f")}set highlighted(e){n(this,x,e,"f")}get multiple(){return o(this,w,"f")}set multiple(e){n(this,w,e,"f")}get removable(){return o(this,z,"f")}set removable(e){n(this,z,e,"f")}get indeterminate(){return o(this,$,"f")}set indeterminate(e){n(this,$,e,"f")}get role(){return o(this,S,"f")}set role(e){n(this,S,e,"f")}get ariaSelected(){return o(this,j,"f")}set ariaSelected(e){n(this,j,e,"f")}get text(){return o(this,M,"f")}set text(e){n(this,M,e,"f")}get displayText(){return o(this,W,"f")}set displayText(e){n(this,W,e,"f")}get hasIcon(){return o(this,I,"f")}set hasIcon(e){n(this,I,e,"f")}get kind(){return o(this,C,"f")}set kind(e){n(this,C,e,"f")}render(){const e={"enhanced-option":!0,"menu-item":!0,"option-is-readonly":this.readonly,"ai-connected":"ai"===this.kind};return r`
476
507
  <div
477
508
  class=${a(e)}
478
509
  ?highlighted=${this.highlighted}
@@ -484,7 +515,7 @@ dialog.ai-connected.gradient-bkg {
484
515
  @pointerup=${this.onClick}
485
516
  @blur=${this.onBlur}
486
517
  >
487
- ${this.multiple?s`
518
+ ${this.multiple?r`
488
519
  <kyn-checkbox
489
520
  .checked=${this.selected}
490
521
  .indeterminate=${this.indeterminate}
@@ -505,7 +536,7 @@ dialog.ai-connected.gradient-bkg {
505
536
  <div class="menu-item-inner-el text">
506
537
  <div class="title-content">
507
538
  <slot name="title" @slotchange=${this.onTitleSlotChange}></slot>
508
- ${this.selected?null:s`<span class="tag-container"
539
+ ${this.selected?null:r`<span class="tag-container"
509
540
  ><slot name="tag"></slot
510
541
  ></span>`}
511
542
  </div>
@@ -519,9 +550,9 @@ dialog.ai-connected.gradient-bkg {
519
550
  </div>
520
551
 
521
552
  <div class="status-icons">
522
- ${!this.multiple&&this.selected?s`<span class="menu-item-inner-el check-icon"
523
- >${r(p)}</span
524
- >`:this.allowAddOption&&this.removable?s`
553
+ ${!this.multiple&&this.selected?r`<span class="menu-item-inner-el check-icon"
554
+ >${s(p)}</span
555
+ >`:this.allowAddOption&&this.removable?r`
525
556
  <kyn-button
526
557
  kind=${"ai"===this.kind?"ghost-ai":"ghost"}
527
558
  size="small"
@@ -530,10 +561,10 @@ dialog.ai-connected.gradient-bkg {
530
561
  @click=${this.onRemove}
531
562
  @mousedown=${e=>e.stopPropagation()}
532
563
  >
533
- <span slot="icon">${r(g)}</span>
564
+ <span slot="icon">${s(v)}</span>
534
565
  </kyn-button>
535
566
  `:null}
536
567
  </div>
537
568
  </div>
538
- `}firstUpdated(){this.hasIcon=this.iconSlot.assignedNodes({flatten:!0}).length>0;const e=this.closest("kyn-dropdown");e&&(this.kind=e.kind,e.addEventListener("kind-changed",(e=>{this.kind=e.detail})))}onIconSlotChange(){this.hasIcon=this.iconSlot.assignedNodes({flatten:!0}).length>0}willUpdate(e){e.has("selected")&&(this.ariaSelected=this.selected.toString())}get iconSlot(){return this.shadowRoot.querySelector('slot[name="icon"]')}onTitleSlotChange(e){const t=e.target.assignedNodes({flatten:!0}).map((e=>{var t,i;return null!==(i=null===(t=e.textContent)||void 0===t?void 0:t.trim())&&void 0!==i?i:""})).join(" ");this.displayText=t,this.text=t}onClick(e){this.disabled||this.readonly?e.stopPropagation():(this.selected=!this.multiple||!this.selected,this.dispatchEvent(new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}})))}onRemove(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("on-remove-option",{bubbles:!0,composed:!0,detail:{value:this.value}}))}onBlur(e){this.dispatchEvent(new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}}))}constructor(){super(...arguments),d.set(this,i(this,X,"")),k.set(this,(i(this,Y),i(this,Z,!1))),b.set(this,(i(this,ee),i(this,te,!1))),f.set(this,(i(this,ie),i(this,ne,!1))),y.set(this,(i(this,oe),i(this,ae,!1))),x.set(this,(i(this,se),i(this,re,!1))),w.set(this,(i(this,de),i(this,le,!1))),z.set(this,(i(this,ce),i(this,he,!1))),$.set(this,(i(this,me),i(this,ue,!1))),S.set(this,(i(this,pe),i(this,ge,"option"))),j.set(this,(i(this,ve),i(this,ke,"option"))),M.set(this,(i(this,be),i(this,fe,""))),W.set(this,(i(this,ye),i(this,xe,""))),I.set(this,(i(this,we),i(this,ze,!1))),C.set(this,(i(this,$e),i(this,Se,"default"))),i(this,je)}},d=new WeakMap,k=new WeakMap,b=new WeakMap,f=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,z=new WeakMap,$=new WeakMap,S=new WeakMap,j=new WeakMap,M=new WeakMap,W=new WeakMap,I=new WeakMap,C=new WeakMap,e(O,"EnhancedDropdownOption"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=V[Symbol.metadata])&&void 0!==e?e:null):void 0;T=[m({type:String})],B=[m({type:Boolean,reflect:!0})],A=[m({type:Boolean})],P=[m({type:Boolean,reflect:!0})],N=[m({type:Boolean})],R=[l()],D=[m({type:Boolean})],U=[m({type:Boolean})],q=[m({type:Boolean,reflect:!0})],F=[m({type:String,reflect:!0})],G=[m({type:String,reflect:!0,attribute:"aria-selected"})],L=[l()],_=[l()],H=[l()],J=[l()],t(O,null,T,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:i},X,Y),t(O,null,B,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:i},Z,ee),t(O,null,A,{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},te,ie),t(O,null,P,{kind:"accessor",name:"readonly",static:!1,private:!1,access:{has:e=>"readonly"in e,get:e=>e.readonly,set:(e,t)=>{e.readonly=t}},metadata:i},ne,oe),t(O,null,N,{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},ae,se),t(O,null,R,{kind:"accessor",name:"highlighted",static:!1,private:!1,access:{has:e=>"highlighted"in e,get:e=>e.highlighted,set:(e,t)=>{e.highlighted=t}},metadata:i},re,de),t(O,null,D,{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},le,ce),t(O,null,U,{kind:"accessor",name:"removable",static:!1,private:!1,access:{has:e=>"removable"in e,get:e=>e.removable,set:(e,t)=>{e.removable=t}},metadata:i},he,me),t(O,null,q,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:e=>"indeterminate"in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:i},ue,pe),t(O,null,F,{kind:"accessor",name:"role",static:!1,private:!1,access:{has:e=>"role"in e,get:e=>e.role,set:(e,t)=>{e.role=t}},metadata:i},ge,ve),t(O,null,G,{kind:"accessor",name:"ariaSelected",static:!1,private:!1,access:{has:e=>"ariaSelected"in e,get:e=>e.ariaSelected,set:(e,t)=>{e.ariaSelected=t}},metadata:i},ke,be),t(O,null,L,{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},fe,ye),t(O,null,_,{kind:"accessor",name:"displayText",static:!1,private:!1,access:{has:e=>"displayText"in e,get:e=>e.displayText,set:(e,t)=>{e.displayText=t}},metadata:i},xe,we),t(O,null,H,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:i},ze,$e),t(O,null,J,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:e=>"kind"in e,get:e=>e.kind,set:(e,t)=>{e.kind=t}},metadata:i},Se,je),t(null,E={value:O},K,{kind:"class",name:O.name,metadata:i},null,Q),O=E.value,i&&Object.defineProperty(O,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),O.styles=h(v),i(O,Q),O})();export{k as EnhancedDropdownOption};
569
+ `}firstUpdated(){this.hasIcon=this.iconSlot.assignedNodes({flatten:!0}).length>0;const e=this.closest("kyn-dropdown");e&&(this.kind=e.kind,e.addEventListener("kind-changed",(e=>{this.kind=e.detail})))}onIconSlotChange(){this.hasIcon=this.iconSlot.assignedNodes({flatten:!0}).length>0}willUpdate(e){e.has("selected")&&(this.ariaSelected=this.selected.toString())}get iconSlot(){return this.shadowRoot.querySelector('slot[name="icon"]')}onTitleSlotChange(e){const t=e.target.assignedNodes({flatten:!0}).map((e=>{var t,i;return null!==(i=null===(t=e.textContent)||void 0===t?void 0:t.trim())&&void 0!==i?i:""})).join(" ");this.displayText=t,this.text=t}onClick(e){this.disabled||this.readonly?e.stopPropagation():(this.selected=!this.multiple||!this.selected,this.dispatchEvent(new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}})))}onRemove(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("on-remove-option",{bubbles:!0,composed:!0,detail:{value:this.value}}))}onBlur(e){this.dispatchEvent(new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}}))}constructor(){super(...arguments),d.set(this,i(this,X,"")),k.set(this,(i(this,Y),i(this,Z,!1))),b.set(this,(i(this,ee),i(this,te,!1))),f.set(this,(i(this,ie),i(this,oe,!1))),y.set(this,(i(this,ne),i(this,ae,!1))),x.set(this,(i(this,re),i(this,se,!1))),w.set(this,(i(this,de),i(this,le,!1))),z.set(this,(i(this,ce),i(this,me,!1))),$.set(this,(i(this,he),i(this,ue,!1))),S.set(this,(i(this,pe),i(this,ve,"option"))),j.set(this,(i(this,ge),i(this,ke,"option"))),M.set(this,(i(this,be),i(this,fe,""))),W.set(this,(i(this,ye),i(this,xe,""))),I.set(this,(i(this,we),i(this,ze,!1))),C.set(this,(i(this,$e),i(this,Se,"default"))),i(this,je)}},d=new WeakMap,k=new WeakMap,b=new WeakMap,f=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,z=new WeakMap,$=new WeakMap,S=new WeakMap,j=new WeakMap,M=new WeakMap,W=new WeakMap,I=new WeakMap,C=new WeakMap,e(O,"EnhancedDropdownOption"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=V[Symbol.metadata])&&void 0!==e?e:null):void 0;T=[h({type:String})],B=[h({type:Boolean,reflect:!0})],A=[h({type:Boolean})],P=[h({type:Boolean,reflect:!0})],N=[h({type:Boolean})],R=[l()],D=[h({type:Boolean})],U=[h({type:Boolean})],q=[h({type:Boolean,reflect:!0})],F=[h({type:String,reflect:!0})],G=[h({type:String,reflect:!0,attribute:"aria-selected"})],L=[l()],_=[l()],H=[l()],J=[l()],t(O,null,T,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:i},X,Y),t(O,null,B,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:e=>"selected"in e,get:e=>e.selected,set:(e,t)=>{e.selected=t}},metadata:i},Z,ee),t(O,null,A,{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},te,ie),t(O,null,P,{kind:"accessor",name:"readonly",static:!1,private:!1,access:{has:e=>"readonly"in e,get:e=>e.readonly,set:(e,t)=>{e.readonly=t}},metadata:i},oe,ne),t(O,null,N,{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},ae,re),t(O,null,R,{kind:"accessor",name:"highlighted",static:!1,private:!1,access:{has:e=>"highlighted"in e,get:e=>e.highlighted,set:(e,t)=>{e.highlighted=t}},metadata:i},se,de),t(O,null,D,{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},le,ce),t(O,null,U,{kind:"accessor",name:"removable",static:!1,private:!1,access:{has:e=>"removable"in e,get:e=>e.removable,set:(e,t)=>{e.removable=t}},metadata:i},me,he),t(O,null,q,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:e=>"indeterminate"in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:i},ue,pe),t(O,null,F,{kind:"accessor",name:"role",static:!1,private:!1,access:{has:e=>"role"in e,get:e=>e.role,set:(e,t)=>{e.role=t}},metadata:i},ve,ge),t(O,null,G,{kind:"accessor",name:"ariaSelected",static:!1,private:!1,access:{has:e=>"ariaSelected"in e,get:e=>e.ariaSelected,set:(e,t)=>{e.ariaSelected=t}},metadata:i},ke,be),t(O,null,L,{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},fe,ye),t(O,null,_,{kind:"accessor",name:"displayText",static:!1,private:!1,access:{has:e=>"displayText"in e,get:e=>e.displayText,set:(e,t)=>{e.displayText=t}},metadata:i},xe,we),t(O,null,H,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:i},ze,$e),t(O,null,J,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:e=>"kind"in e,get:e=>e.kind,set:(e,t)=>{e.kind=t}},metadata:i},Se,je),t(null,E={value:O},K,{kind:"class",name:O.name,metadata:i},null,Q),O=E.value,i&&Object.defineProperty(O,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),O.styles=m(g),i(O,Q),O})();export{k as EnhancedDropdownOption};
539
570
  //# sourceMappingURL=enhancedDropdownOption.js.map
package/components/reusable/dropdown/enhancedDropdownOption.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"enhancedDropdownOption.js","sources":["../../../../src/components/reusable/dropdown/enhancedDropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport EnhancedDropdownOptionScss from './enhancedDropdownOption.scss?inline';\n\n/**\n * Enhanced Dropdown option with rich content support.\n * @fires on-click - Emits the option details to the parent dropdown. `detail:{ selected: boolean, value: string, origEvent: PointerEvent }`\n * @fires on-remove-option - Emits the option that is removed. `detail:{ selected: boolean, value: string, origEvent: PointerEvent }`\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n * @slot title - Slot for option title text.\n * @slot tag - Slot for inline tag appended to title.\n * @slot description - Slot for option description text.\n * @slot optionType - Slot for option type label.\n * @slot unnamed - Fallback slot for simple text content.\n */\n@customElement('kyn-enhanced-dropdown-option')\nexport class EnhancedDropdownOption extends LitElement {\n static override styles = unsafeCSS(EnhancedDropdownOptionScss);\n\n /** Option value. */\n @property({ type: String })\n accessor value = '';\n\n /** Internal text strings.\n * @internal\n */\n @property({ type: Boolean, reflect: true })\n accessor selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /** Readonly state (from parent). Option stays focusable but not selectable. */\n @property({ type: Boolean, reflect: true })\n accessor readonly = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n accessor allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n accessor highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n accessor multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n accessor removable = false;\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n accessor indeterminate = false;\n\n /** ARIA role for the option, defaults to 'option'. */\n @property({ type: String, reflect: true })\n override accessor role = 'option';\n\n /** ARIA selected must mirror `selected`. */\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override accessor ariaSelected = 'option';\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n accessor text: any = '';\n\n /**\n * Title text for display purposes, automatically derived.\n * @ignore\n */\n @state()\n accessor displayText: any = '';\n\n /**\n * Whether the icon slot has content.\n * @ignore\n */\n @state()\n accessor hasIcon = false;\n\n /** Kind of the item, derived from parent. */\n @state()\n accessor kind: 'ai' | 'default' = 'default';\n\n override render() {\n const classes = {\n 'enhanced-option': true,\n 'menu-item': true,\n 'option-is-readonly': this.readonly,\n 'ai-connected': this.kind === 'ai',\n };\n\n return html`\n <div\n class=${classMap(classes)}\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n ?readonly=${!this.disabled && this.readonly}\n aria-disabled=${this.disabled || this.readonly ? 'true' : 'false'}\n title=${this.text}\n @pointerup=${this.onClick}\n @blur=${this.onBlur}\n >\n ${this.multiple\n ? html`\n <kyn-checkbox\n .checked=${this.selected}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n notFocusable\n value=${this.value}\n ></kyn-checkbox>\n `\n : null}\n\n <div class=\"content\">\n <div\n class=\"menu-item-inner-el icon-container\"\n style=${this.hasIcon ? '' : 'display:none'}\n >\n <slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot>\n </div>\n\n <div class=\"menu-item-inner-el text\">\n <div class=\"title-content\">\n <slot name=\"title\" @slotchange=${this.onTitleSlotChange}></slot>\n ${!this.selected\n ? html`<span class=\"tag-container\"\n ><slot name=\"tag\"></slot\n ></span>`\n : null}\n </div>\n <div class=\"description-container\">\n <slot name=\"description\"></slot>\n </div>\n <div class=\"option-type-container\">\n <slot name=\"optionType\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"status-icons\">\n ${!this.multiple && this.selected\n ? html`<span class=\"menu-item-inner-el check-icon\"\n >${unsafeSVG(checkIcon)}</span\n >`\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n kind=${this.kind === 'ai' ? 'ghost-ai' : 'ghost'}\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${this.onRemove}\n @mousedown=${(e: Event) => e.stopPropagation()}\n >\n <span slot=\"icon\">${unsafeSVG(clearIcon)}</span>\n </kyn-button>\n `\n : null}\n </div>\n </div>\n `;\n }\n\n override firstUpdated() {\n // derive whether icon slot has content\n this.hasIcon = this.iconSlot.assignedNodes({ flatten: true }).length > 0;\n\n // sync kind from parent and listen for changes\n const parent = this.closest('kyn-dropdown') as any;\n if (parent) {\n this.kind = parent.kind;\n parent.addEventListener('kind-changed', (e: Event) => {\n this.kind = (e as CustomEvent<'ai' | 'default'>).detail;\n });\n }\n }\n\n private onIconSlotChange() {\n this.hasIcon = this.iconSlot.assignedNodes({ flatten: true }).length > 0;\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n }\n\n private get iconSlot(): HTMLSlotElement {\n return this.shadowRoot!.querySelector(\n 'slot[name=\"icon\"]'\n )! as HTMLSlotElement;\n }\n\n private onTitleSlotChange(e: Event) {\n const titleText = (e.target as HTMLSlotElement)\n .assignedNodes({ flatten: true })\n .map((n) => n.textContent?.trim() ?? '')\n .join(' ');\n this.displayText = titleText;\n this.text = titleText;\n }\n\n private onClick(e: PointerEvent) {\n if (this.disabled || this.readonly) {\n e.stopPropagation();\n return;\n }\n this.selected = this.multiple ? !this.selected : true;\n this.dispatchEvent(\n new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: { selected: this.selected, value: this.value, origEvent: e },\n })\n );\n }\n\n private onRemove(e: Event) {\n e.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n })\n );\n }\n\n private onBlur(e: FocusEvent) {\n this.dispatchEvent(\n new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e },\n })\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-enhanced-dropdown-option': EnhancedDropdownOption;\n }\n}\n"],"names":["EnhancedDropdownOption","customElement","LitElement","_classThis","_classSuper","value","__classPrivateFieldGet","this","_EnhancedDropdownOption_value_accessor_storage","__classPrivateFieldSet","selected","_EnhancedDropdownOption_selected_accessor_storage","disabled","_EnhancedDropdownOption_disabled_accessor_storage","readonly","_EnhancedDropdownOption_readonly_accessor_storage","allowAddOption","_EnhancedDropdownOption_allowAddOption_accessor_storage","highlighted","_EnhancedDropdownOption_highlighted_accessor_storage","multiple","_EnhancedDropdownOption_multiple_accessor_storage","removable","_EnhancedDropdownOption_removable_accessor_storage","indeterminate","_EnhancedDropdownOption_indeterminate_accessor_storage","role","_EnhancedDropdownOption_role_accessor_storage","ariaSelected","_EnhancedDropdownOption_ariaSelected_accessor_storage","text","_EnhancedDropdownOption_text_accessor_storage","displayText","_EnhancedDropdownOption_displayText_accessor_storage","hasIcon","_EnhancedDropdownOption_hasIcon_accessor_storage","kind","_EnhancedDropdownOption_kind_accessor_storage","render","classes","html","classMap","onClick","onBlur","onIconSlotChange","onTitleSlotChange","unsafeSVG","checkIcon","onRemove","e","stopPropagation","clearIcon","firstUpdated","iconSlot","assignedNodes","flatten","length","parent","closest","addEventListener","detail","willUpdate","changed","has","toString","shadowRoot","querySelector","titleText","target","map","n","_a","_b","textContent","trim","join","dispatchEvent","CustomEvent","bubbles","composed","origEvent","set","__runInitializers","_value_initializers","_value_extraInitializers","_selected_initializers","_selected_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_readonly_initializers","_readonly_extraInitializers","_allowAddOption_initializers","_allowAddOption_extraInitializers","_highlighted_initializers","_highlighted_extraInitializers","_multiple_initializers","_multiple_extraInitializers","_removable_initializers","_removable_extraInitializers","_indeterminate_initializers","_indeterminate_extraInitializers","_role_initializers","_role_extraInitializers","_ariaSelected_initializers","_ariaSelected_extraInitializers","_text_initializers","_text_extraInitializers","_displayText_initializers","_displayText_extraInitializers","_hasIcon_initializers","_hasIcon_extraInitializers","_kind_initializers","_value_decorators","property","type","String","Boolean","reflect","_disabled_decorators","_allowAddOption_decorators","_highlighted_decorators","state","_multiple_decorators","_removable_decorators","_ariaSelected_decorators","attribute","_text_decorators","_displayText_decorators","_hasIcon_decorators","_kind_decorators","__esDecorate","name","static","private","access","obj","get","metadata","_metadata","_selected_decorators","_readonly_decorators","_indeterminate_decorators","_role_decorators","_kind_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","EnhancedDropdownOptionScss"],"mappings":"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"}
1
+ {"version":3,"file":"enhancedDropdownOption.js","sources":["../../../../src/components/reusable/dropdown/enhancedDropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport EnhancedDropdownOptionScss from './enhancedDropdownOption.scss?inline';\n\n/**\n * Enhanced Dropdown option with rich content support.\n * @fires on-click - Emits the option details to the parent dropdown. `detail:{ selected: boolean, value: string, origEvent: PointerEvent }`\n * @fires on-remove-option - Emits the option that is removed. `detail:{ selected: boolean, value: string, origEvent: PointerEvent }`\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n * @slot title - Slot for option title text.\n * @slot tag - Slot for inline tag appended to title.\n * @slot description - Slot for option description text.\n * @slot optionType - Slot for option type label.\n * @slot unnamed - Fallback slot for simple text content.\n */\n@customElement('kyn-enhanced-dropdown-option')\nexport class EnhancedDropdownOption extends LitElement {\n static override styles = unsafeCSS(EnhancedDropdownOptionScss);\n\n /** Option value. */\n @property({ type: String })\n accessor value = '';\n\n /** Internal text strings.\n * @internal\n */\n @property({ type: Boolean, reflect: true })\n accessor selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /** Readonly state (from parent). Option stays focusable but not selectable. */\n @property({ type: Boolean, reflect: true })\n accessor readonly = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n accessor allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n accessor highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n accessor multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n accessor removable = false;\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n accessor indeterminate = false;\n\n /** ARIA role for the option, defaults to 'option'. */\n @property({ type: String, reflect: true })\n override accessor role = 'option';\n\n /** ARIA selected must mirror `selected`. */\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override accessor ariaSelected = 'option';\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n accessor text: any = '';\n\n /**\n * Title text for display purposes, automatically derived.\n * @ignore\n */\n @state()\n accessor displayText: any = '';\n\n /**\n * Whether the icon slot has content.\n * @ignore\n */\n @state()\n accessor hasIcon = false;\n\n /** Kind of the item, derived from parent. */\n @state()\n accessor kind: 'ai' | 'default' = 'default';\n\n override render() {\n const classes = {\n 'enhanced-option': true,\n 'menu-item': true,\n 'option-is-readonly': this.readonly,\n 'ai-connected': this.kind === 'ai',\n };\n\n return html`\n <div\n class=${classMap(classes)}\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n ?readonly=${!this.disabled && this.readonly}\n aria-disabled=${this.disabled || this.readonly ? 'true' : 'false'}\n title=${this.text}\n @pointerup=${this.onClick}\n @blur=${this.onBlur}\n >\n ${this.multiple\n ? html`\n <kyn-checkbox\n .checked=${this.selected}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n notFocusable\n value=${this.value}\n ></kyn-checkbox>\n `\n : null}\n\n <div class=\"content\">\n <div\n class=\"menu-item-inner-el icon-container\"\n style=${this.hasIcon ? '' : 'display:none'}\n >\n <slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot>\n </div>\n\n <div class=\"menu-item-inner-el text\">\n <div class=\"title-content\">\n <slot name=\"title\" @slotchange=${this.onTitleSlotChange}></slot>\n ${!this.selected\n ? html`<span class=\"tag-container\"\n ><slot name=\"tag\"></slot\n ></span>`\n : null}\n </div>\n <div class=\"description-container\">\n <slot name=\"description\"></slot>\n </div>\n <div class=\"option-type-container\">\n <slot name=\"optionType\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"status-icons\">\n ${!this.multiple && this.selected\n ? html`<span class=\"menu-item-inner-el check-icon\"\n >${unsafeSVG(checkIcon)}</span\n >`\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n kind=${this.kind === 'ai' ? 'ghost-ai' : 'ghost'}\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${this.onRemove}\n @mousedown=${(e: Event) => e.stopPropagation()}\n >\n <span slot=\"icon\">${unsafeSVG(clearIcon)}</span>\n </kyn-button>\n `\n : null}\n </div>\n </div>\n `;\n }\n\n override firstUpdated() {\n // derive whether icon slot has content\n this.hasIcon = this.iconSlot.assignedNodes({ flatten: true }).length > 0;\n\n // sync kind from parent and listen for changes\n const parent = this.closest('kyn-dropdown') as any;\n if (parent) {\n this.kind = parent.kind;\n parent.addEventListener('kind-changed', (e: Event) => {\n this.kind = (e as CustomEvent<'ai' | 'default'>).detail;\n });\n }\n }\n\n private onIconSlotChange() {\n this.hasIcon = this.iconSlot.assignedNodes({ flatten: true }).length > 0;\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n }\n\n private get iconSlot(): HTMLSlotElement {\n return this.shadowRoot!.querySelector(\n 'slot[name=\"icon\"]'\n )! as HTMLSlotElement;\n }\n\n private onTitleSlotChange(e: Event) {\n const titleText = (e.target as HTMLSlotElement)\n .assignedNodes({ flatten: true })\n .map((n) => n.textContent?.trim() ?? '')\n .join(' ');\n this.displayText = titleText;\n this.text = titleText;\n }\n\n private onClick(e: PointerEvent) {\n if (this.disabled || this.readonly) {\n e.stopPropagation();\n return;\n }\n this.selected = this.multiple ? !this.selected : true;\n this.dispatchEvent(\n new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: { selected: this.selected, value: this.value, origEvent: e },\n })\n );\n }\n\n private onRemove(e: Event) {\n e.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n })\n );\n }\n\n private onBlur(e: FocusEvent) {\n this.dispatchEvent(\n new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e },\n })\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-enhanced-dropdown-option': EnhancedDropdownOption;\n }\n}\n"],"names":["EnhancedDropdownOption","customElement","LitElement","_classThis","_classSuper","value","__classPrivateFieldGet","this","_EnhancedDropdownOption_value_accessor_storage","__classPrivateFieldSet","selected","_EnhancedDropdownOption_selected_accessor_storage","disabled","_EnhancedDropdownOption_disabled_accessor_storage","readonly","_EnhancedDropdownOption_readonly_accessor_storage","allowAddOption","_EnhancedDropdownOption_allowAddOption_accessor_storage","highlighted","_EnhancedDropdownOption_highlighted_accessor_storage","multiple","_EnhancedDropdownOption_multiple_accessor_storage","removable","_EnhancedDropdownOption_removable_accessor_storage","indeterminate","_EnhancedDropdownOption_indeterminate_accessor_storage","role","_EnhancedDropdownOption_role_accessor_storage","ariaSelected","_EnhancedDropdownOption_ariaSelected_accessor_storage","text","_EnhancedDropdownOption_text_accessor_storage","displayText","_EnhancedDropdownOption_displayText_accessor_storage","hasIcon","_EnhancedDropdownOption_hasIcon_accessor_storage","kind","_EnhancedDropdownOption_kind_accessor_storage","render","classes","html","classMap","onClick","onBlur","onIconSlotChange","onTitleSlotChange","unsafeSVG","checkIcon","onRemove","e","stopPropagation","clearIcon","firstUpdated","iconSlot","assignedNodes","flatten","length","parent","closest","addEventListener","detail","willUpdate","changed","has","toString","shadowRoot","querySelector","titleText","target","map","n","_a","_b","textContent","trim","join","dispatchEvent","CustomEvent","bubbles","composed","origEvent","set","__runInitializers","_value_initializers","_value_extraInitializers","_selected_initializers","_selected_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_readonly_initializers","_readonly_extraInitializers","_allowAddOption_initializers","_allowAddOption_extraInitializers","_highlighted_initializers","_highlighted_extraInitializers","_multiple_initializers","_multiple_extraInitializers","_removable_initializers","_removable_extraInitializers","_indeterminate_initializers","_indeterminate_extraInitializers","_role_initializers","_role_extraInitializers","_ariaSelected_initializers","_ariaSelected_extraInitializers","_text_initializers","_text_extraInitializers","_displayText_initializers","_displayText_extraInitializers","_hasIcon_initializers","_hasIcon_extraInitializers","_kind_initializers","_value_decorators","property","type","String","Boolean","reflect","_disabled_decorators","_allowAddOption_decorators","_highlighted_decorators","state","_multiple_decorators","_removable_decorators","_ariaSelected_decorators","attribute","_text_decorators","_displayText_decorators","_hasIcon_decorators","_kind_decorators","__esDecorate","name","static","private","access","obj","get","metadata","_metadata","_selected_decorators","_readonly_decorators","_indeterminate_decorators","_role_decorators","_kind_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","EnhancedDropdownOptionScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyBaA,EAAsB,iFADlCC,EAAc,wCAC6BC,0LAARC,EAAA,cAAQC,EAK1C,SAASC,GAAK,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAd,SAASH,CAAKA,GAAAI,EAAAF,KAAAC,EAAAH,EAAA,IAAA,CAMd,YAASK,GAAQ,OAAAJ,EAAAC,KAAAI,EAAA,IAAA,CAAjB,YAASD,CAAQL,GAAAI,EAAAF,KAAAI,EAAAN,EAAA,IAAA,CAIjB,YAASO,GAAQ,OAAAN,EAAAC,KAAAM,EAAA,IAAA,CAAjB,YAASD,CAAQP,GAAAI,EAAAF,KAAAM,EAAAR,EAAA,IAAA,CAIjB,YAASS,GAAQ,OAAAR,EAAAC,KAAAQ,EAAA,IAAA,CAAjB,YAASD,CAAQT,GAAAI,EAAAF,KAAAQ,EAAAV,EAAA,IAAA,CAIjB,kBAASW,GAAc,OAAAV,EAAAC,KAAAU,EAAA,IAAA,CAAvB,kBAASD,CAAcX,GAAAI,EAAAF,KAAAU,EAAAZ,EAAA,IAAA,CAOvB,eAASa,GAAW,OAAAZ,EAAAC,KAAAY,EAAA,IAAA,CAApB,eAASD,CAAWb,GAAAI,EAAAF,KAAAY,EAAAd,EAAA,IAAA,CAMpB,YAASe,GAAQ,OAAAd,EAAAC,KAAAc,EAAA,IAAA,CAAjB,YAASD,CAAQf,GAAAI,EAAAF,KAAAc,EAAAhB,EAAA,IAAA,CAIjB,aAASiB,GAAS,OAAAhB,EAAAC,KAAAgB,EAAA,IAAA,CAAlB,aAASD,CAASjB,GAAAI,EAAAF,KAAAgB,EAAAlB,EAAA,IAAA,CAIlB,iBAASmB,GAAa,OAAAlB,EAAAC,KAAAkB,EAAA,IAAA,CAAtB,iBAASD,CAAanB,GAAAI,EAAAF,KAAAkB,EAAApB,EAAA,IAAA,CAItB,QAAkBqB,GAAI,OAAApB,EAAAC,KAAAoB,EAAA,IAAA,CAAtB,QAAkBD,CAAIrB,GAAAI,EAAAF,KAAAoB,EAAAtB,EAAA,IAAA,CAItB,gBAAkBuB,GAAY,OAAAtB,EAAAC,KAAAsB,EAAA,IAAA,CAA9B,gBAAkBD,CAAYvB,GAAAI,EAAAF,KAAAsB,EAAAxB,EAAA,IAAA,CAO9B,QAASyB,GAAI,OAAAxB,EAAAC,KAAAwB,EAAA,IAAA,CAAb,QAASD,CAAIzB,GAAAI,EAAAF,KAAAwB,EAAA1B,EAAA,IAAA,CAOb,eAAS2B,GAAW,OAAA1B,EAAAC,KAAA0B,EAAA,IAAA,CAApB,eAASD,CAAW3B,GAAAI,EAAAF,KAAA0B,EAAA5B,EAAA,IAAA,CAOpB,WAAS6B,GAAO,OAAA5B,EAAAC,KAAA4B,EAAA,IAAA,CAAhB,WAASD,CAAO7B,GAAAI,EAAAF,KAAA4B,EAAA9B,EAAA,IAAA,CAIhB,QAAS+B,GAAI,OAAA9B,EAAAC,KAAA8B,EAAA,IAAA,CAAb,QAASD,CAAI/B,GAAAI,EAAAF,KAAA8B,EAAAhC,EAAA,IAAA,CAEJ,MAAAiC,GACP,MAAMC,EAAU,CACd,mBAAmB,EACnB,aAAa,EACb,qBAAsBhC,KAAKO,SAC3B,eAA8B,OAAdP,KAAK6B,MAGvB,OAAOI,CAAI;;gBAECC,EAASF;uBACFhC,KAAKW;oBACRX,KAAKG;oBACLH,KAAKK;qBACJL,KAAKK,UAAYL,KAAKO;wBACnBP,KAAKK,UAAYL,KAAKO,SAAW,OAAS;gBAClDP,KAAKuB;qBACAvB,KAAKmC;gBACVnC,KAAKoC;;UAEXpC,KAAKa,SACHoB,CAAI;;2BAEWjC,KAAKG;iCACCH,KAAKiB;4BACVjB,KAAKK;;wBAETL,KAAKF;;cAGjB;;;;;oBAKQE,KAAK2B,QAAU,GAAK;;4CAEI3B,KAAKqC;;;;;+CAKFrC,KAAKsC;gBACnCtC,KAAKG,SAIJ,KAHA8B,CAAI;;;;;;;;;;;;;;aAeTjC,KAAKa,UAAYb,KAAKG,SACrB8B,CAAI;mBACCM,EAAUC;iBAEfxC,KAAKS,gBAAkBT,KAAKe,UAC5BkB,CAAI;;yBAEqB,OAAdjC,KAAK6B,KAAgB,WAAa;;uCAEpB7B,KAAKF;8BACdE,KAAKK;2BACRL,KAAKyC;+BACAC,GAAaA,EAAEC;;sCAETJ,EAAUK;;gBAGlC;;;MAMH,YAAAC,GAEP7C,KAAK2B,QAAU3B,KAAK8C,SAASC,cAAc,CAAEC,SAAS,IAAQC,OAAS,EAGvE,MAAMC,EAASlD,KAAKmD,QAAQ,gBACxBD,IACFlD,KAAK6B,KAAOqB,EAAOrB,KACnBqB,EAAOE,iBAAiB,gBAAiBV,IACvC1C,KAAK6B,KAAQa,EAAoCW,MAAM,KAKrD,gBAAAhB,GACNrC,KAAK2B,QAAU3B,KAAK8C,SAASC,cAAc,CAAEC,SAAS,IAAQC,OAAS,EAGhE,UAAAK,CAAWC,GACdA,EAAQC,IAAI,cACdxD,KAAKqB,aAAerB,KAAKG,SAASsD,YAItC,YAAYX,GACV,OAAO9C,KAAK0D,WAAYC,cACtB,qBAII,iBAAArB,CAAkBI,GACxB,MAAMkB,EAAalB,EAAEmB,OAClBd,cAAc,CAAEC,SAAS,IACzBc,KAAKC,IAAK,IAAAC,EAAAC,EAAC,eAAAA,UAAAD,EAAAD,EAAEG,kCAAaC,sBAAU,EAAE,IACtCC,KAAK,KACRpE,KAAKyB,YAAcmC,EACnB5D,KAAKuB,KAAOqC,EAGN,OAAAzB,CAAQO,GACV1C,KAAKK,UAAYL,KAAKO,SACxBmC,EAAEC,mBAGJ3C,KAAKG,UAAWH,KAAKa,WAAYb,KAAKG,SACtCH,KAAKqE,cACH,IAAIC,YAAY,WAAY,CAC1BC,SAAS,EACTC,UAAU,EACVnB,OAAQ,CAAElD,SAAUH,KAAKG,SAAUL,MAAOE,KAAKF,MAAO2E,UAAW/B,OAK/D,QAAAD,CAASC,GACfA,EAAEC,kBACF3C,KAAKqE,cACH,IAAIC,YAAY,mBAAoB,CAClCC,SAAS,EACTC,UAAU,EACVnB,OAAQ,CAAEvD,MAAOE,KAAKF,UAKpB,MAAAsC,CAAOM,GACb1C,KAAKqE,cACH,IAAIC,YAAY,UAAW,CACzBC,SAAS,EACTC,UAAU,EACVnB,OAAQ,CAAEoB,UAAW/B,wCAlOlBzC,EAAAyE,IAAA1E,KAAA2E,EAAA3E,KAAA4E,EAAQ,KAMRxE,EAAAsE,IAAA1E,MAAA2E,EAAA3E,KAAA6E,GAAAF,EAAA3E,KAAA8E,GAAW,KAIXxE,EAAAoE,IAAA1E,MAAA2E,EAAA3E,KAAA+E,IAAAJ,EAAA3E,KAAAgF,IAAW,KAIXxE,EAAAkE,IAAA1E,MAAA2E,EAAA3E,KAAAiF,IAAAN,EAAA3E,KAAAkF,IAAW,KAIXxE,EAAAgE,IAAA1E,MAAA2E,EAAA3E,KAAAmF,IAAAR,EAAA3E,KAAAoF,IAAiB,KAOjBxE,EAAA8D,IAAA1E,MAAA2E,EAAA3E,KAAAqF,IAAAV,EAAA3E,KAAAsF,IAAc,KAMdxE,EAAA4D,IAAA1E,MAAA2E,EAAA3E,KAAAuF,IAAAZ,EAAA3E,KAAAwF,IAAW,KAIXxE,EAAA0D,IAAA1E,MAAA2E,EAAA3E,KAAAyF,IAAAd,EAAA3E,KAAA0F,IAAY,KAIZxE,EAAAwD,IAAA1E,MAAA2E,EAAA3E,KAAA2F,IAAAhB,EAAA3E,KAAA4F,IAAgB,KAIPxE,EAAAsD,IAAA1E,MAAA2E,EAAA3E,KAAA6F,IAAAlB,EAAA3E,KAAA8F,GAAO,YAIPxE,EAAAoD,IAAA1E,MAAA2E,EAAA3E,KAAA+F,IAAApB,EAAA3E,KAAAgG,GAAe,YAOxBxE,EAAAkD,IAAA1E,MAAA2E,EAAA3E,KAAAiG,IAAAtB,EAAA3E,KAAAkG,GAAY,MAOZxE,EAAAgD,IAAA1E,MAAA2E,EAAA3E,KAAAmG,IAAAxB,EAAA3E,KAAAoG,GAAmB,MAOnBxE,EAAA8C,IAAA1E,MAAA2E,EAAA3E,KAAAqG,IAAA1B,EAAA3E,KAAAsG,IAAU,KAIVxE,EAAA4C,IAAA1E,MAAA2E,EAAA3E,KAAAuG,IAAA5B,EAAA3E,KAAAwG,GAAyB,gZAzEjCC,EAAA,CAAAC,EAAS,CAAEC,KAAMC,aAMjBF,EAAS,CAAEC,KAAME,QAASC,SAAS,KAInCC,EAAA,CAAAL,EAAS,CAAEC,KAAME,cAIjBH,EAAS,CAAEC,KAAME,QAASC,SAAS,KAInCE,EAAA,CAAAN,EAAS,CAAEC,KAAME,WAOjBI,EAAA,CAAAC,KAMAC,EAAA,CAAAT,EAAS,CAAEC,KAAME,WAIjBO,EAAA,CAAAV,EAAS,CAAEC,KAAME,cAIjBH,EAAS,CAAEC,KAAME,QAASC,SAAS,QAInCJ,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KAIlCO,EAAA,CAAAX,EAAS,CAAEC,KAAMC,OAAQE,SAAS,EAAMQ,UAAW,mBAOnDC,EAAA,CAAAL,KAOAM,EAAA,CAAAN,KAOAO,EAAA,CAAAP,KAIAQ,EAAA,CAAAR,KAvEDS,EAAA/H,EAAA,KAAA6G,EAAA,CAAA5E,KAAA,WAAA+F,KAAA,QAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,UAAAA,EAAAC,IAAAD,GAAAA,EAASlI,MAAK4E,IAAA,CAAAsD,EAAAlI,KAAAkI,EAALlI,MAAKA,CAAA,GAAAoI,SAAAC,GAAAvD,EAAAC,GAMd8C,EAAA/H,EAAA,KAAAwI,EAAA,CAAAvG,KAAA,WAAA+F,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAS7H,SAAQuE,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAR7H,SAAQL,CAAA,GAAAoI,SAAAC,GAAArD,EAAAC,IAIjB4C,EAAA/H,EAAA,KAAAmH,EAAA,CAAAlF,KAAA,WAAA+F,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAS3H,SAAQqE,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAR3H,SAAQP,CAAA,GAAAoI,SAAAC,GAAAnD,GAAAC,IAIjB0C,EAAA/H,EAAA,KAAAyI,EAAA,CAAAxG,KAAA,WAAA+F,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAASzH,SAAQmE,IAAA,CAAAsD,EAAAlI,KAAAkI,EAARzH,SAAQT,CAAA,GAAAoI,SAAAC,GAAAjD,GAAAC,IAIjBwC,EAAA/H,EAAA,KAAAoH,EAAA,CAAAnF,KAAA,WAAA+F,KAAA,iBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,mBAAAA,EAAAC,IAAAD,GAAAA,EAASvH,eAAciE,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAdvH,eAAcX,CAAA,GAAAoI,SAAAC,GAAA/C,GAAAC,IAOvBsC,EAAA/H,EAAA,KAAAqH,EAAA,CAAApF,KAAA,WAAA+F,KAAA,cAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,gBAAAA,EAAAC,IAAAD,GAAAA,EAASrH,YAAW+D,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAXrH,YAAWb,CAAA,GAAAoI,SAAAC,GAAA7C,GAAAC,IAMpBoC,EAAA/H,EAAA,KAAAuH,EAAA,CAAAtF,KAAA,WAAA+F,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAASnH,SAAQ6D,IAAA,CAAAsD,EAAAlI,KAAAkI,EAARnH,SAAQf,CAAA,GAAAoI,SAAAC,GAAA3C,GAAAC,IAIjBkC,EAAA/H,EAAA,KAAAwH,EAAA,CAAAvF,KAAA,WAAA+F,KAAA,YAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,cAAAA,EAAAC,IAAAD,GAAAA,EAASjH,UAAS2D,IAAA,CAAAsD,EAAAlI,KAAAkI,EAATjH,UAASjB,CAAA,GAAAoI,SAAAC,GAAAzC,GAAAC,IAIlBgC,EAAA/H,EAAA,KAAA0I,EAAA,CAAAzG,KAAA,WAAA+F,KAAA,gBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,kBAAAA,EAAAC,IAAAD,GAAAA,EAAS/G,cAAayD,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAb/G,cAAanB,CAAA,GAAAoI,SAAAC,GAAAvC,GAAAC,IAItB8B,EAAA/H,EAAA,KAAA2I,EAAA,CAAA1G,KAAA,WAAA+F,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAAkB7G,KAAIuD,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAJ7G,KAAIrB,CAAA,GAAAoI,SAAAC,GAAArC,GAAAC,IAItB4B,EAAA/H,EAAA,KAAAyH,EAAA,CAAAxF,KAAA,WAAA+F,KAAA,eAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,iBAAAA,EAAAC,IAAAD,GAAAA,EAAkB3G,aAAYqD,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAZ3G,aAAYvB,CAAA,GAAAoI,SAAAC,GAAAnC,GAAAC,IAO9B0B,EAAA/H,EAAA,KAAA2H,EAAA,CAAA1F,KAAA,WAAA+F,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAASzG,KAAImD,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAJzG,KAAIzB,CAAA,GAAAoI,SAAAC,GAAAjC,GAAAC,IAObwB,EAAA/H,EAAA,KAAA4H,EAAA,CAAA3F,KAAA,WAAA+F,KAAA,cAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,gBAAAA,EAAAC,IAAAD,GAAAA,EAASvG,YAAWiD,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAXvG,YAAW3B,CAAA,GAAAoI,SAAAC,GAAA/B,GAAAC,IAOpBsB,EAAA/H,EAAA,KAAA6H,EAAA,CAAA5F,KAAA,WAAA+F,KAAA,UAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,YAAAA,EAAAC,IAAAD,GAAAA,EAASrG,QAAO+C,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAPrG,QAAO7B,CAAA,GAAAoI,SAAAC,GAAA7B,GAAAC,IAIhBoB,EAAA/H,EAAA,KAAA8H,EAAA,CAAA7F,KAAA,WAAA+F,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvE,IAAAwE,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAASnG,KAAI6C,IAAA,CAAAsD,EAAAlI,KAAAkI,EAAJnG,KAAI/B,CAAA,GAAAoI,SAAAC,GAAA3B,GAAAgC,IA7Efb,EAAA,KAAAc,EAAA,CAAA3I,MAAAF,GAAA8I,EAAA,CAAA7G,KAAA,QAAA+F,KAAAhI,EAAAgI,KAAAM,SAAAC,GAAA,KAAAQ,iHACkB/I,EAAAgJ,OAASC,EAAUC,GADxBnE,EAAA/E,EAAA+I,MAAsB"}
package/components/reusable/overflowMenu/overflowMenuItem.js CHANGED
@@ -102,12 +102,21 @@ dialog.ai-connected.gradient-bkg {
102
102
  :host .menu-item[disabled] .menu-item-inner-el {
103
103
  color: var(--kd-color-text-level-disabled);
104
104
  }
105
+ :host .menu-item[disabled][selected] .menu-item-inner-el {
106
+ color: var(--kd-color-text-level-disabled);
107
+ }
105
108
  :host .menu-item[disabled], :host .menu-item[disabled] * {
106
109
  cursor: not-allowed;
107
110
  }
108
111
  :host .menu-item[disabled]:hover {
109
112
  background-color: var(--kd-color-background-menu-state-default);
110
113
  }
114
+ :host .menu-item[disabled]:hover .menu-item-inner-el {
115
+ color: var(--kd-color-text-level-disabled);
116
+ }
117
+ :host .menu-item[disabled]:hover slot[name=icon]::slotted(span) {
118
+ color: var(--kd-color-icon-disabled);
119
+ }
111
120
  :host .menu-item[disabled]:focus, :host .menu-item[disabled]:focus-within, :host .menu-item[disabled]:focus-visible {
112
121
  outline: none;
113
122
  border: none;
@@ -206,12 +215,21 @@ dialog.ai-connected.gradient-bkg {
206
215
  :host .menu-item.ai-connected[disabled] .menu-item-inner-el {
207
216
  color: var(--kd-color-text-level-disabled);
208
217
  }
218
+ :host .menu-item.ai-connected[disabled][selected] .menu-item-inner-el {
219
+ color: var(--kd-color-text-level-disabled);
220
+ }
209
221
  :host .menu-item.ai-connected[disabled], :host .menu-item.ai-connected[disabled] * {
210
222
  cursor: not-allowed;
211
223
  }
212
224
  :host .menu-item.ai-connected[disabled]:hover {
213
225
  background-color: var(--kd-color-background-menu-state-ai-default);
214
226
  }
227
+ :host .menu-item.ai-connected[disabled]:hover .menu-item-inner-el {
228
+ color: var(--kd-color-text-level-disabled);
229
+ }
230
+ :host .menu-item.ai-connected[disabled]:hover slot[name=icon]::slotted(span) {
231
+ color: var(--kd-color-icon-disabled);
232
+ }
215
233
  :host .menu-item.destructive {
216
234
  color: var(--kd-color-text-variant-destructive);
217
235
  border-top: 1px solid var(--kd-color-border-level-tertiary);
@@ -220,14 +238,27 @@ dialog.ai-connected.gradient-bkg {
220
238
  color: var(--kd-color-text-variant-destructive);
221
239
  }
222
240
  :host .menu-item.destructive:hover {
223
- background-color: var(--kd-color-status-error-light);
241
+ background-color: var(--kd-color-status-error-accent) !important;
242
+ }
243
+ :host .menu-item.destructive:hover .menu-item-inner-el {
244
+ color: var(--kd-color-status-error-foreground) !important;
245
+ }
246
+ :host .menu-item.destructive:active {
247
+ background-color: var(--kd-color-background-button-primary-destructive-pressed) !important;
248
+ outline: none;
249
+ }
250
+ :host .menu-item.destructive:active .menu-item-inner-el {
251
+ color: var(--kd-color-text-button-dark-destructive) !important;
224
252
  }
225
253
  :host .menu-item.destructive:focus-visible {
226
- outline: 2px solid var(--kd-color-border-button-primary-destructive-default);
227
- background-color: var(--kd-color-status-error-light);
254
+ outline: 2px solid var(--kd-color-border-button-primary-destructive-default) !important;
255
+ background-color: var(--kd-color-status-error-accent) !important;
228
256
  }
229
257
  :host .menu-item.destructive:focus-visible .menu-item-inner-el {
230
- color: var(--kd-color-text-level-primary);
258
+ color: var(--kd-color-text-level-primary) !important;
259
+ }
260
+ :host .menu-item.destructive:focus-visible:hover .menu-item-inner-el {
261
+ color: var(--kd-color-status-error-foreground) !important;
231
262
  }
232
263
 
233
264
  :host .menu-item:active,
@@ -308,7 +339,7 @@ dialog.ai-connected.gradient-bkg {
308
339
  width: 16px;
309
340
  height: 16px;
310
341
  pointer-events: none;
311
- }`;let k=(()=>{var r,k,b,g,f,y,x,w,_,T;let S,$,M,I,O,W,q,C,j,E,R,z,A=[s("kyn-overflow-menu-item")],L=[],D=h,K=[],B=[],F=[],H=[],P=[],U=[],N=[],Y=[],G=[],J=[],Q=[],V=[],X=[],Z=[],ee=[],te=[],oe=[],ne=[],ie=[],re=[];return $=class extends D{constructor(){super(...arguments),r.set(this,o(this,K,"")),k.set(this,(o(this,B),o(this,F,!1))),b.set(this,(o(this,H),o(this,P,!1))),g.set(this,(o(this,U),o(this,N,""))),f.set(this,(o(this,Y),o(this,G,[]))),y.set(this,(o(this,J),o(this,Q,null))),x.set(this,(o(this,V),o(this,X,!1))),w.set(this,(o(this,Z),o(this,ee,""))),_.set(this,(o(this,te),o(this,oe,"default"))),T.set(this,(o(this,ne),o(this,ie,void 0))),this._mo=(o(this,re),null)}get href(){return n(this,r,"f")}set href(e){i(this,r,e,"f")}get destructive(){return n(this,k,"f")}set destructive(e){i(this,k,e,"f")}get disabled(){return n(this,b,"f")}set disabled(e){i(this,b,e,"f")}get description(){return n(this,g,"f")}set description(e){i(this,g,e,"f")}get _menuItems(){return n(this,f,"f")}set _menuItems(e){i(this,f,e,"f")}get _menu(){return n(this,y,"f")}set _menu(e){i(this,y,e,"f")}get isTruncated(){return n(this,x,"f")}set isTruncated(e){i(this,x,e,"f")}get tooltipText(){return n(this,w,"f")}set tooltipText(e){i(this,w,e,"f")}get kind(){return n(this,_,"f")}set kind(e){i(this,_,e,"f")}get _submenuOpenTimer(){return n(this,T,"f")}set _submenuOpenTimer(e){i(this,T,e,"f")}get submenuEls(){return Array.from(this.querySelectorAll(':scope > [slot="submenu"]'))}get hasSubmenu(){return this.submenuEls.length>0}connectedCallback(){super.connectedCallback(),this._mo=new MutationObserver((()=>this.requestUpdate())),this._mo.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var e;null===(e=this._mo)||void 0===e||e.disconnect(),this._mo=null,super.disconnectedCallback()}render(){const e={"overflow-menu-item":!0,"menu-item":!0,"ai-connected":"ai"===this.kind,destructive:this.destructive},t=this.isTruncated?this.tooltipText:"";return""!==this.href?m`
342
+ }`;let k=(()=>{var r,k,b,g,f,x,y,w,_,T;let S,$,M,I,O,W,q,C,j,E,R,z,A=[s("kyn-overflow-menu-item")],L=[],D=h,K=[],B=[],F=[],H=[],P=[],U=[],N=[],Y=[],G=[],J=[],Q=[],V=[],X=[],Z=[],ee=[],te=[],oe=[],ne=[],ie=[],re=[];return $=class extends D{constructor(){super(...arguments),r.set(this,o(this,K,"")),k.set(this,(o(this,B),o(this,F,!1))),b.set(this,(o(this,H),o(this,P,!1))),g.set(this,(o(this,U),o(this,N,""))),f.set(this,(o(this,Y),o(this,G,[]))),x.set(this,(o(this,J),o(this,Q,null))),y.set(this,(o(this,V),o(this,X,!1))),w.set(this,(o(this,Z),o(this,ee,""))),_.set(this,(o(this,te),o(this,oe,"default"))),T.set(this,(o(this,ne),o(this,ie,void 0))),this._mo=(o(this,re),null)}get href(){return n(this,r,"f")}set href(e){i(this,r,e,"f")}get destructive(){return n(this,k,"f")}set destructive(e){i(this,k,e,"f")}get disabled(){return n(this,b,"f")}set disabled(e){i(this,b,e,"f")}get description(){return n(this,g,"f")}set description(e){i(this,g,e,"f")}get _menuItems(){return n(this,f,"f")}set _menuItems(e){i(this,f,e,"f")}get _menu(){return n(this,x,"f")}set _menu(e){i(this,x,e,"f")}get isTruncated(){return n(this,y,"f")}set isTruncated(e){i(this,y,e,"f")}get tooltipText(){return n(this,w,"f")}set tooltipText(e){i(this,w,e,"f")}get kind(){return n(this,_,"f")}set kind(e){i(this,_,e,"f")}get _submenuOpenTimer(){return n(this,T,"f")}set _submenuOpenTimer(e){i(this,T,e,"f")}get submenuEls(){return Array.from(this.querySelectorAll(':scope > [slot="submenu"]'))}get hasSubmenu(){return this.submenuEls.length>0}connectedCallback(){super.connectedCallback(),this._mo=new MutationObserver((()=>this.requestUpdate())),this._mo.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var e;null===(e=this._mo)||void 0===e||e.disconnect(),this._mo=null,super.disconnectedCallback()}render(){const e={"overflow-menu-item":!0,"menu-item":!0,"ai-connected":"ai"===this.kind,destructive:this.destructive},t=this.isTruncated?this.tooltipText:"";return""!==this.href?m`
312
343
  <a
313
344
  class=${l(e)}
314
345
  href=${this.href}
@@ -343,5 +374,5 @@ dialog.ai-connected.gradient-bkg {
343
374
  ${u(v)}
344
375
  </span>`:null}
345
376
  </button>
346
- `}firstUpdated(){const e=this.closest("kyn-overflow-menu");e&&(this._menuItems=e.getMenuItems?e.getMenuItems():[],this._menu=e.getMenu?e.getMenu():null,"string"==typeof e.kind&&(this.kind=e.kind),e.addEventListener("kind-changed",(e=>{const t=e;requestAnimationFrame((()=>{this.kind=t.detail}))}))),this.checkOverflow()}handleClick(e){var t;const o=this.querySelector(':scope > [slot="submenu"]:not(kyn-overflow-menu-item)'),n=Array.from(this.querySelectorAll(':scope > kyn-overflow-menu-item[slot="submenu"]'));if(this.hasSubmenu){e.stopPropagation();const i=null!==(t=null==o?void 0:o.innerHTML)&&void 0!==t?t:n.map((e=>e.outerHTML)).join("");this.dispatchEvent(new CustomEvent("open-submenu",{detail:{html:i},bubbles:!0,composed:!0}))}else this.dispatchEvent(new CustomEvent("on-click",{detail:{origEvent:e},bubbles:!0,composed:!0}))}handleKeyDown(e){var t,o,n,i,r,a,s,d;const c=this._menuItems,l=this.getRootNode().activeElement,m=c.findIndex((e=>{if(e===l)return!0;const t=e.shadowRoot;return!!(t&&l&&t.contains(l))}));switch(e.keyCode){case 40:if(m<c.length-1&&m>=0){const e=c[m+1],i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("button"),r=null===(o=e.shadowRoot)||void 0===o?void 0:o.querySelector("a");null===(n=null!=i?i:r)||void 0===n||n.focus()}return;case 38:if(m>0){const e=c[m-1],t=null===(i=e.shadowRoot)||void 0===i?void 0:i.querySelector("button"),o=null===(r=e.shadowRoot)||void 0===r?void 0:r.querySelector("a");null===(a=null!=t?t:o)||void 0===a||a.focus()}else 0===m&&(null===(d=null===(s=this._menu)||void 0===s?void 0:s.querySelector("button"))||void 0===d||d.focus());return;default:return}}checkOverflow(){var e,t;const o=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("button, a");o&&(this.isTruncated=o.scrollWidth>o.offsetWidth,this.isTruncated&&(this.tooltipText=(null!==(t=this.textContent)&&void 0!==t?t:"").trim()))}},r=new WeakMap,k=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,y=new WeakMap,x=new WeakMap,w=new WeakMap,_=new WeakMap,T=new WeakMap,e($,"OverflowMenuItem"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=D[Symbol.metadata])&&void 0!==e?e:null):void 0;M=[c({type:String})],I=[c({type:Boolean})],O=[c({type:Boolean})],W=[c({type:String})],q=[a()],C=[a()],j=[a()],E=[a()],R=[c({type:String,reflect:!0})],z=[a()],t($,null,M,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:e=>"href"in e,get:e=>e.href,set:(e,t)=>{e.href=t}},metadata:o},K,B),t($,null,I,{kind:"accessor",name:"destructive",static:!1,private:!1,access:{has:e=>"destructive"in e,get:e=>e.destructive,set:(e,t)=>{e.destructive=t}},metadata:o},F,H),t($,null,O,{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:o},P,U),t($,null,W,{kind:"accessor",name:"description",static:!1,private:!1,access:{has:e=>"description"in e,get:e=>e.description,set:(e,t)=>{e.description=t}},metadata:o},N,Y),t($,null,q,{kind:"accessor",name:"_menuItems",static:!1,private:!1,access:{has:e=>"_menuItems"in e,get:e=>e._menuItems,set:(e,t)=>{e._menuItems=t}},metadata:o},G,J),t($,null,C,{kind:"accessor",name:"_menu",static:!1,private:!1,access:{has:e=>"_menu"in e,get:e=>e._menu,set:(e,t)=>{e._menu=t}},metadata:o},Q,V),t($,null,j,{kind:"accessor",name:"isTruncated",static:!1,private:!1,access:{has:e=>"isTruncated"in e,get:e=>e.isTruncated,set:(e,t)=>{e.isTruncated=t}},metadata:o},X,Z),t($,null,E,{kind:"accessor",name:"tooltipText",static:!1,private:!1,access:{has:e=>"tooltipText"in e,get:e=>e.tooltipText,set:(e,t)=>{e.tooltipText=t}},metadata:o},ee,te),t($,null,R,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:e=>"kind"in e,get:e=>e.kind,set:(e,t)=>{e.kind=t}},metadata:o},oe,ne),t($,null,z,{kind:"accessor",name:"_submenuOpenTimer",static:!1,private:!1,access:{has:e=>"_submenuOpenTimer"in e,get:e=>e._submenuOpenTimer,set:(e,t)=>{e._submenuOpenTimer=t}},metadata:o},ie,re),t(null,S={value:$},A,{kind:"class",name:$.name,metadata:o},null,L),$=S.value,o&&Object.defineProperty($,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),$.styles=d(p),o($,L),$})();export{k as OverflowMenuItem};
377
+ `}firstUpdated(){const e=this.closest("kyn-overflow-menu");e&&(this._menuItems=e.getMenuItems?e.getMenuItems():[],this._menu=e.getMenu?e.getMenu():null,"string"==typeof e.kind&&(this.kind=e.kind),e.addEventListener("kind-changed",(e=>{const t=e;requestAnimationFrame((()=>{this.kind=t.detail}))}))),this.checkOverflow()}handleClick(e){var t;const o=this.querySelector(':scope > [slot="submenu"]:not(kyn-overflow-menu-item)'),n=Array.from(this.querySelectorAll(':scope > kyn-overflow-menu-item[slot="submenu"]'));if(this.hasSubmenu){e.stopPropagation();const i=null!==(t=null==o?void 0:o.innerHTML)&&void 0!==t?t:n.map((e=>e.outerHTML)).join("");this.dispatchEvent(new CustomEvent("open-submenu",{detail:{html:i},bubbles:!0,composed:!0}))}else this.dispatchEvent(new CustomEvent("on-click",{detail:{origEvent:e},bubbles:!0,composed:!0}))}handleKeyDown(e){var t,o,n,i,r,a,s,d;const c=this._menuItems,l=this.getRootNode().activeElement,m=c.findIndex((e=>{if(e===l)return!0;const t=e.shadowRoot;return!!(t&&l&&t.contains(l))}));switch(e.keyCode){case 40:if(m<c.length-1&&m>=0){const e=c[m+1],i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("button"),r=null===(o=e.shadowRoot)||void 0===o?void 0:o.querySelector("a");null===(n=null!=i?i:r)||void 0===n||n.focus()}return;case 38:if(m>0){const e=c[m-1],t=null===(i=e.shadowRoot)||void 0===i?void 0:i.querySelector("button"),o=null===(r=e.shadowRoot)||void 0===r?void 0:r.querySelector("a");null===(a=null!=t?t:o)||void 0===a||a.focus()}else 0===m&&(null===(d=null===(s=this._menu)||void 0===s?void 0:s.querySelector("button"))||void 0===d||d.focus());return;default:return}}checkOverflow(){var e,t;const o=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("button, a");o&&(this.isTruncated=o.scrollWidth>o.offsetWidth,this.isTruncated&&(this.tooltipText=(null!==(t=this.textContent)&&void 0!==t?t:"").trim()))}},r=new WeakMap,k=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,x=new WeakMap,y=new WeakMap,w=new WeakMap,_=new WeakMap,T=new WeakMap,e($,"OverflowMenuItem"),(()=>{var e;const o="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=D[Symbol.metadata])&&void 0!==e?e:null):void 0;M=[c({type:String})],I=[c({type:Boolean})],O=[c({type:Boolean})],W=[c({type:String})],q=[a()],C=[a()],j=[a()],E=[a()],R=[c({type:String,reflect:!0})],z=[a()],t($,null,M,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:e=>"href"in e,get:e=>e.href,set:(e,t)=>{e.href=t}},metadata:o},K,B),t($,null,I,{kind:"accessor",name:"destructive",static:!1,private:!1,access:{has:e=>"destructive"in e,get:e=>e.destructive,set:(e,t)=>{e.destructive=t}},metadata:o},F,H),t($,null,O,{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:o},P,U),t($,null,W,{kind:"accessor",name:"description",static:!1,private:!1,access:{has:e=>"description"in e,get:e=>e.description,set:(e,t)=>{e.description=t}},metadata:o},N,Y),t($,null,q,{kind:"accessor",name:"_menuItems",static:!1,private:!1,access:{has:e=>"_menuItems"in e,get:e=>e._menuItems,set:(e,t)=>{e._menuItems=t}},metadata:o},G,J),t($,null,C,{kind:"accessor",name:"_menu",static:!1,private:!1,access:{has:e=>"_menu"in e,get:e=>e._menu,set:(e,t)=>{e._menu=t}},metadata:o},Q,V),t($,null,j,{kind:"accessor",name:"isTruncated",static:!1,private:!1,access:{has:e=>"isTruncated"in e,get:e=>e.isTruncated,set:(e,t)=>{e.isTruncated=t}},metadata:o},X,Z),t($,null,E,{kind:"accessor",name:"tooltipText",static:!1,private:!1,access:{has:e=>"tooltipText"in e,get:e=>e.tooltipText,set:(e,t)=>{e.tooltipText=t}},metadata:o},ee,te),t($,null,R,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:e=>"kind"in e,get:e=>e.kind,set:(e,t)=>{e.kind=t}},metadata:o},oe,ne),t($,null,z,{kind:"accessor",name:"_submenuOpenTimer",static:!1,private:!1,access:{has:e=>"_submenuOpenTimer"in e,get:e=>e._submenuOpenTimer,set:(e,t)=>{e._submenuOpenTimer=t}},metadata:o},ie,re),t(null,S={value:$},A,{kind:"class",name:$.name,metadata:o},null,L),$=S.value,o&&Object.defineProperty($,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})})(),$.styles=d(p),o($,L),$})();export{k as OverflowMenuItem};
347
378
  //# sourceMappingURL=overflowMenuItem.js.map
package/components/reusable/overflowMenu/overflowMenuItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"overflowMenuItem.js","sources":["../../../../src/components/reusable/overflowMenu/overflowMenuItem.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport SCSS from './overflowMenuItem.scss?inline';\nimport '../tooltip';\nimport chevronRightIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\n\n/**\n * Overflow Menu Item.\n * @fires on-click - Captures the click event and emits the original event details.`detail:{ origEvent: PointerEvent }`\n * @slot unnamed - Slot for menu item text.\n * @slot submenu - Provide a nested submenu's markup here (light DOM). Presence auto-detects nesting.\n * @prop {'ai'|'default'|string} kind - Visual variant inherited from parent menu.\n */\n@customElement('kyn-overflow-menu-item')\nexport class OverflowMenuItem extends LitElement {\n static override styles = unsafeCSS(SCSS);\n\n /** Makes the item a link. */\n @property({ type: String })\n accessor href = '';\n\n /** Adds destructive styles. */\n @property({ type: Boolean })\n accessor destructive = false;\n\n /** Item disabled state. */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /** Item description text for screen readers. */\n @property({ type: String })\n accessor description = '';\n\n /**\n * Has the menu items in the current oveflow menu.\n * @ignore\n */\n @state()\n accessor _menuItems: HTMLElement[] = [];\n\n /**\n * Has the current oveflow menu.\n * @ignore\n */\n @state()\n accessor _menu: HTMLElement | null = null;\n\n /**\n * Tracks if the item content is overflowing and needs a tooltip.\n * @ignore\n */\n @state()\n accessor isTruncated = false;\n\n /** Holds the text content for the title tooltip.\n * @ignore\n */\n @state()\n accessor tooltipText = '';\n\n /** Kind of the item, derived from parent.\n * @ignore\n */\n @property({ type: String, reflect: true })\n accessor kind: 'ai' | 'default' | (string & {}) = 'default';\n\n /**\n * Timer id used to debounce opening of nested submenu on hover/focus.\n * @ignore\n */\n @state()\n accessor _submenuOpenTimer: number | undefined;\n\n private _mo: MutationObserver | null = null;\n\n /** True when a light-DOM submenu exists. */\n private get submenuEls(): HTMLElement[] {\n return Array.from(\n this.querySelectorAll<HTMLElement>(':scope > [slot=\"submenu\"]')\n );\n }\n private get hasSubmenu(): boolean {\n return this.submenuEls.length > 0;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Observe for submenu add/remove or slot attr changes and re-render.\n this._mo = new MutationObserver(() => this.requestUpdate());\n this._mo.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['slot'],\n });\n }\n\n override disconnectedCallback(): void {\n this._mo?.disconnect();\n this._mo = null;\n super.disconnectedCallback();\n }\n\n override render() {\n const classes = {\n 'overflow-menu-item': true,\n 'menu-item': true,\n 'ai-connected': this.kind === 'ai',\n destructive: this.destructive,\n };\n\n const itemText = this.isTruncated ? this.tooltipText : '';\n\n if (this.href !== '') {\n return html`\n <a\n class=${classMap(classes)}\n href=${this.href}\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleClick(e)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}\n title=${itemText}\n >\n <span class=\"menu-item-inner-el text\"><slot></slot></span>\n ${this.destructive\n ? html`<span class=\"sr-only\">${this.description}</span>`\n : null}\n ${this.hasSubmenu\n ? html`<span\n class=\"menu-item-inner-el submenu-arrow\"\n aria-hidden=\"true\"\n >\n ${unsafeSVG(chevronRightIcon)}\n </span>`\n : null}\n </a>\n `;\n }\n\n return html`\n <button\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleClick(e)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}\n title=${itemText}\n >\n <span class=\"menu-item-inner-el text\"><slot></slot></span>\n ${this.destructive\n ? html`<span class=\"sr-only\">${this.description}</span>`\n : null}\n ${this.hasSubmenu\n ? html`<span\n class=\"menu-item-inner-el submenu-arrow\"\n aria-hidden=\"true\"\n >\n ${unsafeSVG(chevronRightIcon)}\n </span>`\n : null}\n </button>\n `;\n }\n\n override firstUpdated() {\n const parent = this.closest('kyn-overflow-menu') as\n | (HTMLElement & {\n getMenuItems?: () => HTMLElement[];\n getMenu?: () => HTMLElement;\n kind?: string;\n })\n | null;\n\n if (parent) {\n this._menuItems = parent.getMenuItems ? parent.getMenuItems() : [];\n this._menu = parent.getMenu ? parent.getMenu() : null;\n if (typeof parent.kind === 'string') this.kind = parent.kind as any;\n\n parent.addEventListener('kind-changed', (e: Event) => {\n const customEvent = e as CustomEvent<'ai' | 'default' | (string & {})>;\n requestAnimationFrame(() => {\n this.kind = customEvent.detail;\n });\n });\n }\n\n this.checkOverflow();\n }\n\n private handleClick(e: Event) {\n const wrapper = this.querySelector<HTMLElement>(\n ':scope > [slot=\"submenu\"]:not(kyn-overflow-menu-item)'\n );\n const directItems = Array.from(\n this.querySelectorAll<HTMLElement>(\n ':scope > kyn-overflow-menu-item[slot=\"submenu\"]'\n )\n );\n\n if (this.hasSubmenu) {\n e.stopPropagation();\n const html =\n wrapper?.innerHTML ?? directItems.map((el) => el.outerHTML).join('');\n this.dispatchEvent(\n new CustomEvent('open-submenu', {\n detail: { html },\n bubbles: true,\n composed: true,\n })\n );\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent('on-click', {\n detail: { origEvent: e },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n const DOWN = 40;\n const UP = 38;\n\n const items = this._menuItems;\n const activeEl = (this.getRootNode() as Document | ShadowRoot)\n .activeElement as Element | null;\n\n const idx = items.findIndex((item) => {\n if (item === activeEl) return true;\n const sr = (item as HTMLElement).shadowRoot;\n return !!(sr && activeEl && sr.contains(activeEl));\n });\n\n switch (e.keyCode) {\n case DOWN: {\n if (idx < items.length - 1 && idx >= 0) {\n const next = items[idx + 1];\n const btn =\n next.shadowRoot?.querySelector<HTMLButtonElement>('button');\n const anchor = next.shadowRoot?.querySelector<HTMLAnchorElement>('a');\n (btn ?? anchor)?.focus();\n }\n return;\n }\n case UP: {\n if (idx > 0) {\n const prev = items[idx - 1];\n const btn =\n prev.shadowRoot?.querySelector<HTMLButtonElement>('button');\n const anchor = prev.shadowRoot?.querySelector<HTMLAnchorElement>('a');\n (btn ?? anchor)?.focus();\n } else if (idx === 0) {\n this._menu?.querySelector<HTMLButtonElement>('button')?.focus();\n }\n return;\n }\n default:\n return;\n }\n }\n\n private checkOverflow() {\n const contentElement =\n this.shadowRoot?.querySelector<HTMLElement>('button, a');\n if (contentElement) {\n this.isTruncated =\n contentElement.scrollWidth > contentElement.offsetWidth;\n if (this.isTruncated) {\n this.tooltipText = (this.textContent ?? '').trim();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-overflow-menu-item': OverflowMenuItem;\n }\n}\n"],"names":["OverflowMenuItem","customElement","LitElement","_classThis","_classSuper","_OverflowMenuItem_href_accessor_storage","set","this","__runInitializers","_href_initializers","_OverflowMenuItem_destructive_accessor_storage","_href_extraInitializers","_destructive_initializers","_OverflowMenuItem_disabled_accessor_storage","_destructive_extraInitializers","_disabled_initializers","_OverflowMenuItem_description_accessor_storage","_disabled_extraInitializers","_description_initializers","_OverflowMenuItem__menuItems_accessor_storage","_description_extraInitializers","__menuItems_initializers","_OverflowMenuItem__menu_accessor_storage","__menuItems_extraInitializers","__menu_initializers","_OverflowMenuItem_isTruncated_accessor_storage","__menu_extraInitializers","_isTruncated_initializers","_OverflowMenuItem_tooltipText_accessor_storage","_isTruncated_extraInitializers","_tooltipText_initializers","_OverflowMenuItem_kind_accessor_storage","_tooltipText_extraInitializers","_kind_initializers","_OverflowMenuItem__submenuOpenTimer_accessor_storage","_kind_extraInitializers","__submenuOpenTimer_initializers","_mo","__submenuOpenTimer_extraInitializers","href","__classPrivateFieldGet","value","__classPrivateFieldSet","destructive","disabled","description","_menuItems","_menu","isTruncated","tooltipText","kind","_submenuOpenTimer","submenuEls","Array","from","querySelectorAll","hasSubmenu","length","connectedCallback","super","MutationObserver","requestUpdate","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","_a","disconnect","render","classes","itemText","html","classMap","e","handleClick","handleKeyDown","unsafeSVG","chevronRightIcon","firstUpdated","parent","closest","getMenuItems","getMenu","addEventListener","customEvent","requestAnimationFrame","detail","checkOverflow","wrapper","querySelector","directItems","stopPropagation","innerHTML","map","el","outerHTML","join","dispatchEvent","CustomEvent","bubbles","composed","origEvent","items","activeEl","getRootNode","activeElement","idx","findIndex","item","sr","shadowRoot","contains","keyCode","next","btn","anchor","_b","_c","focus","prev","_d","_e","_f","_h","_g","contentElement","scrollWidth","offsetWidth","textContent","trim","_href_decorators","property","type","String","_destructive_decorators","Boolean","_disabled_decorators","_description_decorators","__menuItems_decorators","state","__menu_decorators","_isTruncated_decorators","_tooltipText_decorators","reflect","__submenuOpenTimer_decorators","__esDecorate","name","static","private","access","has","obj","get","metadata","_metadata","_kind_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","SCSS"],"mappings":"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"}
1
+ {"version":3,"file":"overflowMenuItem.js","sources":["../../../../src/components/reusable/overflowMenu/overflowMenuItem.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport SCSS from './overflowMenuItem.scss?inline';\nimport '../tooltip';\nimport chevronRightIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\n\n/**\n * Overflow Menu Item.\n * @fires on-click - Captures the click event and emits the original event details.`detail:{ origEvent: PointerEvent }`\n * @slot unnamed - Slot for menu item text.\n * @slot submenu - Provide a nested submenu's markup here (light DOM). Presence auto-detects nesting.\n * @prop {'ai'|'default'|string} kind - Visual variant inherited from parent menu.\n */\n@customElement('kyn-overflow-menu-item')\nexport class OverflowMenuItem extends LitElement {\n static override styles = unsafeCSS(SCSS);\n\n /** Makes the item a link. */\n @property({ type: String })\n accessor href = '';\n\n /** Adds destructive styles. */\n @property({ type: Boolean })\n accessor destructive = false;\n\n /** Item disabled state. */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /** Item description text for screen readers. */\n @property({ type: String })\n accessor description = '';\n\n /**\n * Has the menu items in the current oveflow menu.\n * @ignore\n */\n @state()\n accessor _menuItems: HTMLElement[] = [];\n\n /**\n * Has the current oveflow menu.\n * @ignore\n */\n @state()\n accessor _menu: HTMLElement | null = null;\n\n /**\n * Tracks if the item content is overflowing and needs a tooltip.\n * @ignore\n */\n @state()\n accessor isTruncated = false;\n\n /** Holds the text content for the title tooltip.\n * @ignore\n */\n @state()\n accessor tooltipText = '';\n\n /** Kind of the item, derived from parent.\n * @ignore\n */\n @property({ type: String, reflect: true })\n accessor kind: 'ai' | 'default' | (string & {}) = 'default';\n\n /**\n * Timer id used to debounce opening of nested submenu on hover/focus.\n * @ignore\n */\n @state()\n accessor _submenuOpenTimer: number | undefined;\n\n private _mo: MutationObserver | null = null;\n\n /** True when a light-DOM submenu exists. */\n private get submenuEls(): HTMLElement[] {\n return Array.from(\n this.querySelectorAll<HTMLElement>(':scope > [slot=\"submenu\"]')\n );\n }\n private get hasSubmenu(): boolean {\n return this.submenuEls.length > 0;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Observe for submenu add/remove or slot attr changes and re-render.\n this._mo = new MutationObserver(() => this.requestUpdate());\n this._mo.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['slot'],\n });\n }\n\n override disconnectedCallback(): void {\n this._mo?.disconnect();\n this._mo = null;\n super.disconnectedCallback();\n }\n\n override render() {\n const classes = {\n 'overflow-menu-item': true,\n 'menu-item': true,\n 'ai-connected': this.kind === 'ai',\n destructive: this.destructive,\n };\n\n const itemText = this.isTruncated ? this.tooltipText : '';\n\n if (this.href !== '') {\n return html`\n <a\n class=${classMap(classes)}\n href=${this.href}\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleClick(e)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}\n title=${itemText}\n >\n <span class=\"menu-item-inner-el text\"><slot></slot></span>\n ${this.destructive\n ? html`<span class=\"sr-only\">${this.description}</span>`\n : null}\n ${this.hasSubmenu\n ? html`<span\n class=\"menu-item-inner-el submenu-arrow\"\n aria-hidden=\"true\"\n >\n ${unsafeSVG(chevronRightIcon)}\n </span>`\n : null}\n </a>\n `;\n }\n\n return html`\n <button\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleClick(e)}\n @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}\n title=${itemText}\n >\n <span class=\"menu-item-inner-el text\"><slot></slot></span>\n ${this.destructive\n ? html`<span class=\"sr-only\">${this.description}</span>`\n : null}\n ${this.hasSubmenu\n ? html`<span\n class=\"menu-item-inner-el submenu-arrow\"\n aria-hidden=\"true\"\n >\n ${unsafeSVG(chevronRightIcon)}\n </span>`\n : null}\n </button>\n `;\n }\n\n override firstUpdated() {\n const parent = this.closest('kyn-overflow-menu') as\n | (HTMLElement & {\n getMenuItems?: () => HTMLElement[];\n getMenu?: () => HTMLElement;\n kind?: string;\n })\n | null;\n\n if (parent) {\n this._menuItems = parent.getMenuItems ? parent.getMenuItems() : [];\n this._menu = parent.getMenu ? parent.getMenu() : null;\n if (typeof parent.kind === 'string') this.kind = parent.kind as any;\n\n parent.addEventListener('kind-changed', (e: Event) => {\n const customEvent = e as CustomEvent<'ai' | 'default' | (string & {})>;\n requestAnimationFrame(() => {\n this.kind = customEvent.detail;\n });\n });\n }\n\n this.checkOverflow();\n }\n\n private handleClick(e: Event) {\n const wrapper = this.querySelector<HTMLElement>(\n ':scope > [slot=\"submenu\"]:not(kyn-overflow-menu-item)'\n );\n const directItems = Array.from(\n this.querySelectorAll<HTMLElement>(\n ':scope > kyn-overflow-menu-item[slot=\"submenu\"]'\n )\n );\n\n if (this.hasSubmenu) {\n e.stopPropagation();\n const html =\n wrapper?.innerHTML ?? directItems.map((el) => el.outerHTML).join('');\n this.dispatchEvent(\n new CustomEvent('open-submenu', {\n detail: { html },\n bubbles: true,\n composed: true,\n })\n );\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent('on-click', {\n detail: { origEvent: e },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n const DOWN = 40;\n const UP = 38;\n\n const items = this._menuItems;\n const activeEl = (this.getRootNode() as Document | ShadowRoot)\n .activeElement as Element | null;\n\n const idx = items.findIndex((item) => {\n if (item === activeEl) return true;\n const sr = (item as HTMLElement).shadowRoot;\n return !!(sr && activeEl && sr.contains(activeEl));\n });\n\n switch (e.keyCode) {\n case DOWN: {\n if (idx < items.length - 1 && idx >= 0) {\n const next = items[idx + 1];\n const btn =\n next.shadowRoot?.querySelector<HTMLButtonElement>('button');\n const anchor = next.shadowRoot?.querySelector<HTMLAnchorElement>('a');\n (btn ?? anchor)?.focus();\n }\n return;\n }\n case UP: {\n if (idx > 0) {\n const prev = items[idx - 1];\n const btn =\n prev.shadowRoot?.querySelector<HTMLButtonElement>('button');\n const anchor = prev.shadowRoot?.querySelector<HTMLAnchorElement>('a');\n (btn ?? anchor)?.focus();\n } else if (idx === 0) {\n this._menu?.querySelector<HTMLButtonElement>('button')?.focus();\n }\n return;\n }\n default:\n return;\n }\n }\n\n private checkOverflow() {\n const contentElement =\n this.shadowRoot?.querySelector<HTMLElement>('button, a');\n if (contentElement) {\n this.isTruncated =\n contentElement.scrollWidth > contentElement.offsetWidth;\n if (this.isTruncated) {\n this.tooltipText = (this.textContent ?? '').trim();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-overflow-menu-item': OverflowMenuItem;\n }\n}\n"],"names":["OverflowMenuItem","customElement","LitElement","_classThis","_classSuper","_OverflowMenuItem_href_accessor_storage","set","this","__runInitializers","_href_initializers","_OverflowMenuItem_destructive_accessor_storage","_href_extraInitializers","_destructive_initializers","_OverflowMenuItem_disabled_accessor_storage","_destructive_extraInitializers","_disabled_initializers","_OverflowMenuItem_description_accessor_storage","_disabled_extraInitializers","_description_initializers","_OverflowMenuItem__menuItems_accessor_storage","_description_extraInitializers","__menuItems_initializers","_OverflowMenuItem__menu_accessor_storage","__menuItems_extraInitializers","__menu_initializers","_OverflowMenuItem_isTruncated_accessor_storage","__menu_extraInitializers","_isTruncated_initializers","_OverflowMenuItem_tooltipText_accessor_storage","_isTruncated_extraInitializers","_tooltipText_initializers","_OverflowMenuItem_kind_accessor_storage","_tooltipText_extraInitializers","_kind_initializers","_OverflowMenuItem__submenuOpenTimer_accessor_storage","_kind_extraInitializers","__submenuOpenTimer_initializers","_mo","__submenuOpenTimer_extraInitializers","href","__classPrivateFieldGet","value","__classPrivateFieldSet","destructive","disabled","description","_menuItems","_menu","isTruncated","tooltipText","kind","_submenuOpenTimer","submenuEls","Array","from","querySelectorAll","hasSubmenu","length","connectedCallback","super","MutationObserver","requestUpdate","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","_a","disconnect","render","classes","itemText","html","classMap","e","handleClick","handleKeyDown","unsafeSVG","chevronRightIcon","firstUpdated","parent","closest","getMenuItems","getMenu","addEventListener","customEvent","requestAnimationFrame","detail","checkOverflow","wrapper","querySelector","directItems","stopPropagation","innerHTML","map","el","outerHTML","join","dispatchEvent","CustomEvent","bubbles","composed","origEvent","items","activeEl","getRootNode","activeElement","idx","findIndex","item","sr","shadowRoot","contains","keyCode","next","btn","anchor","_b","_c","focus","prev","_d","_e","_f","_h","_g","contentElement","scrollWidth","offsetWidth","textContent","trim","_href_decorators","property","type","String","_destructive_decorators","Boolean","_disabled_decorators","_description_decorators","__menuItems_decorators","state","__menu_decorators","_isTruncated_decorators","_tooltipText_decorators","reflect","__submenuOpenTimer_decorators","__esDecorate","name","static","private","access","has","obj","get","metadata","_metadata","_kind_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","SCSS"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "2.65.2",
3
+ "version": "2.65.4",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "license": "MIT",
6
6
  "main": "index.js",