@kyndryl-design-system/shidoka-applications 2.57.0 → 2.57.2

package/common/scss/form-input.scss

@@ -202,7 +202,8 @@ textarea {
   }
 
   &.dropdown-clear {
-    right: 45px;
+    right: 55px;
+    width: 24px;
   }
 
   @include mixins.close-icon-btn($top: 50%, $right: 10px, $size: 16px);

package/common/scss/menu-item.scss

@@ -0,0 +1,113 @@
+@use './global.scss';
+@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/elevation.scss';
+@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';
+
+:host([highlighted]) {
+  outline: 1px solid var(--kd-color-border-variants-focus);
+}
+
+.menu-item {
+  background-color: var(--kd-color-background-menu-state-default);
+  .menu-item-inner-el {
+    color: var(--kd-color-text-level-primary);
+  }
+  transition: background-color 150ms ease-out, color 150ms ease-out;
+
+  &:hover {
+    background-color: var(--kd-color-background-menu-state-hover);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-light);
+    }
+  }
+
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    background-color: var(--kd-color-background-menu-state-open);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-primary);
+    }
+  }
+
+  &:active:not([disabled]) {
+    background-color: var(--kd-color-background-menu-state-pressed);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-light);
+    }
+  }
+
+  &[selected]:not([disabled]) {
+    background-color: var(--kd-color-background-menu-state-open);
+
+    &:hover {
+      background-color: var(--kd-color-background-menu-state-hover);
+      .menu-item-inner-el {
+        color: var(--kd-color-text-level-light);
+      }
+    }
+  }
+
+  &[highlighted]:not([disabled]) {
+    background-color: var(--kd-color-background-menu-state-hover);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-light);
+    }
+  }
+
+  &[selected][highlighted]:not([disabled]) {
+    background-color: var(--kd-color-background-menu-state-hover);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-light);
+    }
+  }
+
+  &[highlighted]:is(:focus, :focus-within, :focus-visible) {
+    background-color: var(--kd-color-background-menu-state-hover);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-light);
+    }
+  }
+
+  &[disabled] {
+    color: var(--kd-color-text-link-level-disabled);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-link-level-disabled);
+    }
+
+    &:hover {
+      cursor: not-allowed;
+      background-color: var(--kd-color-background-container-default);
+    }
+
+    kyn-checkbox:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  &.destructive {
+    color: var(--kd-color-text-variant-destructive);
+    border-top: 1px solid var(--kd-color-border-level-tertiary);
+
+    &:hover {
+      background-color: var(--kd-color-status-error-light);
+    }
+
+    .menu-item-inner-el {
+      color: var(--kd-color-text-variant-destructive);
+    }
+  }
+
+  &:active:not([disabled]),
+  &:has(:active):not([disabled]),
+  &[selected]:active:not([disabled]),
+  &[selected]:has(:active):not([disabled]),
+  &[highlighted]:active:not([disabled]),
+  &[highlighted]:has(:active):not([disabled]),
+  &[selected][highlighted]:active:not([disabled]),
+  &[selected][highlighted]:has(:active):not([disabled]) {
+    background-color: var(--kd-color-background-menu-state-pressed);
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-light);
+    }
+  }
+}

package/components/global/localNav/localNavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAalD;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,gBAAgB;IAEhB,QAAQ,CAAC,IAAI,SAAM;IAEnB,sBAAsB;IAEtB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oBAAoB;IAEpB,QAAQ,CAAC,MAAM,UAAS;IAExB,sBAAsB;IAEtB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,SAAU;IAE3B,yHAAyH;IAEzH,QAAQ,CAAC,WAAW,UAAS;IAE7B;;OAEG;IAEH,QAAQ,CAAC,MAAM,SAAK;IAEpB;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;OAEG;IAEH,QAAQ,CAAC,kBAAkB,UAAS;IAEpC;;OAEG;IAEH,QAAQ,CAAC,KAAK,SAAM;IAEpB;;;OAGG;IAEH,QAAQ,CAAC,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEnB,MAAM;IAiDN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;CA2BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}
+{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAalD;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,gBAAgB;IAEhB,QAAQ,CAAC,IAAI,SAAM;IAEnB,sBAAsB;IAEtB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oBAAoB;IAEpB,QAAQ,CAAC,MAAM,UAAS;IAExB,sBAAsB;IAEtB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,SAAU;IAE3B,yHAAyH;IAEzH,QAAQ,CAAC,WAAW,UAAS;IAE7B;;OAEG;IAEH,QAAQ,CAAC,MAAM,SAAK;IAEpB;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;OAEG;IAEH,QAAQ,CAAC,kBAAkB,UAAS;IAEpC;;OAEG;IAEH,QAAQ,CAAC,KAAK,SAAM;IAEpB;;;OAGG;IAEH,QAAQ,CAAC,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEnB,MAAM;IAmDN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;CA2BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}

package/components/global/localNav/localNavLink.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as s,o as d,x as o}from"../../../vendor/lit-html-BRBT5o_V.js";import{i as l,a as r,t as c,r as h,n as p,o as v}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as m}from"../../../vendor/lit-element-m-OqzV5s.js";import{f as k,d as g}from"../../../vendor/@kyndryl-design-system/shidoka-icons-bi0_OAYf.js";var u=l`*,
+import{_ as e,a as t,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as s,o as d,x as o}from"../../../vendor/lit-html-BRBT5o_V.js";import{i as l,a as r,t as c,r as h,n as p,o as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as v}from"../../../vendor/lit-element-m-OqzV5s.js";import{f as k,d as g}from"../../../vendor/@kyndryl-design-system/shidoka-icons-bi0_OAYf.js";var u=l`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -75,8 +75,8 @@ a slot[name=icon]::slotted(svg) {
   }
 }
 .link-active a {
-  background-color: var(--kd-color-background-menu-state-active);
-  color: var(--kd-color-text-button-dark-primary);
+  background: var(--kd-color-background-menu-state-open);
+  color: var(--kd-color-text-level-primary);
   font-weight: var(--kd-font-weight-medium);
 }
 .link-expanded.nav-expanded a {
@@ -84,7 +84,7 @@ a slot[name=icon]::slotted(svg) {
 }
 a:hover {
   background: var(--kd-color-background-menu-state-hover);
-  color: var(--kd-color-text-button-dark-primary);
+  color: var(--kd-color-text-level-light);
 }
 a:focus-visible {
   outline-color: var(--kd-color-border-variants-focus);
@@ -352,18 +352,20 @@ a:active {
 }
 .expand-icon svg {
   display: block;
-}`;let x=(()=>{var l,x,f,b,y,_,w,E,z,M,L,S,W;let C,T,$,j,P,B,q,U,N,O,D,R,X,A,F,G=[c("kyn-local-nav-link")],H=[],I=m,J=[],K=[],Q=[],V=[],Y=[],Z=[],ee=[],te=[],ie=[],ae=[],ne=[],se=[],de=[],oe=[],le=[],re=[],ce=[],he=[],pe=[],ve=[],me=[],ke=[],ge=[],ue=[],xe=[],fe=[];return T=class extends I{get href(){return a(this,l,"f")}set href(e){n(this,l,e,"f")}get expanded(){return a(this,x,"f")}set expanded(e){n(this,x,e,"f")}get active(){return a(this,f,"f")}set active(e){n(this,f,e,"f")}get disabled(){return a(this,b,"f")}set disabled(e){n(this,b,e,"f")}get backText(){return a(this,y,"f")}set backText(e){n(this,y,e,"f")}get leftPadding(){return a(this,_,"f")}set leftPadding(e){n(this,_,e,"f")}get _level(){return a(this,w,"f")}set _level(e){n(this,w,e,"f")}get _navExpanded(){return a(this,E,"f")}set _navExpanded(e){n(this,E,e,"f")}get _navExpandedMobile(){return a(this,z,"f")}set _navExpandedMobile(e){n(this,z,e,"f")}get _text(){return a(this,M,"f")}set _text(e){n(this,M,e,"f")}get _navLinks(){return a(this,L,"f")}set _navLinks(e){n(this,L,e,"f")}get _dividers(){return a(this,S,"f")}set _dividers(e){n(this,S,e,"f")}get _icon(){return a(this,W,"f")}set _icon(e){n(this,W,e,"f")}render(){const e={link:!0,"top-level":1===this._level,"sub-level":this._level>1,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this.expanded,"link-active":this.active,"link-disabled":this.disabled,"has-links":this._navLinks.length,"has-icon":this._icon.length,"left-padding":this.leftPadding&&this._level>1};return o`
+}`;let x=(()=>{var l,x,f,b,y,_,w,E,z,M,L,S,W;let C,T,$,j,P,B,q,U,N,O,D,R,X,A,F,G=[c("kyn-local-nav-link")],H=[],I=v,J=[],K=[],Q=[],V=[],Y=[],Z=[],ee=[],te=[],ie=[],ae=[],ne=[],se=[],de=[],oe=[],le=[],re=[],ce=[],he=[],pe=[],me=[],ve=[],ke=[],ge=[],ue=[],xe=[],fe=[];return T=class extends I{get href(){return a(this,l,"f")}set href(e){n(this,l,e,"f")}get expanded(){return a(this,x,"f")}set expanded(e){n(this,x,e,"f")}get active(){return a(this,f,"f")}set active(e){n(this,f,e,"f")}get disabled(){return a(this,b,"f")}set disabled(e){n(this,b,e,"f")}get backText(){return a(this,y,"f")}set backText(e){n(this,y,e,"f")}get leftPadding(){return a(this,_,"f")}set leftPadding(e){n(this,_,e,"f")}get _level(){return a(this,w,"f")}set _level(e){n(this,w,e,"f")}get _navExpanded(){return a(this,E,"f")}set _navExpanded(e){n(this,E,e,"f")}get _navExpandedMobile(){return a(this,z,"f")}set _navExpandedMobile(e){n(this,z,e,"f")}get _text(){return a(this,M,"f")}set _text(e){n(this,M,e,"f")}get _navLinks(){return a(this,L,"f")}set _navLinks(e){n(this,L,e,"f")}get _dividers(){return a(this,S,"f")}set _dividers(e){n(this,S,e,"f")}get _icon(){return a(this,W,"f")}set _icon(e){n(this,W,e,"f")}render(){const e={link:!0,"top-level":1===this._level,"sub-level":this._level>1,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this.expanded,"link-active":this.active,"link-disabled":this.disabled,"has-links":this._navLinks.length,"has-icon":this._icon.length,"left-padding":this.leftPadding&&this._level>1};return o`
       <div class=${s(e)}>
         <a href=${this.href} @click=${e=>this.handleClick(e)}>
           ${this._navLinks.length?o`
-                <span class="expand-icon"> ${d(k)} </span>
+                <span class="menu-item-inner-el expand-icon">
+                  ${d(k)}
+                </span>
               `:null}
 
-          <div class="icon">
+          <div class="menu-item-inner-el icon">
             <slot name="icon"></slot>
           </div>
 
-          <span class="text">
+          <span class="menu-item-inner-el text">
             <slot @slotchange=${this._handleTextSlotChange}></slot>
           </span>
         </a>
@@ -380,5 +382,5 @@ a:active {
           <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
         </div>
       </div>
-    `}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this._navLinks.forEach((e=>{e._level=this._level+1,e._navExpanded=this._navExpanded||this._navExpandedMobile})),this._dividers.forEach((e=>{e._navExpanded=this._navExpanded||this._navExpandedMobile}))}_handleBack(){this.expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this._navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}constructor(){super(...arguments),l.set(this,i(this,J,"")),x.set(this,(i(this,K),i(this,Q,!1))),f.set(this,(i(this,V),i(this,Y,!1))),b.set(this,(i(this,Z),i(this,ee,!1))),y.set(this,(i(this,te),i(this,ie,"Back"))),_.set(this,(i(this,ae),i(this,ne,!1))),w.set(this,(i(this,se),i(this,de,1))),E.set(this,(i(this,oe),i(this,le,!1))),z.set(this,(i(this,re),i(this,ce,!1))),M.set(this,(i(this,he),i(this,pe,""))),L.set(this,(i(this,ve),i(this,me,void 0))),S.set(this,(i(this,ke),i(this,ge,void 0))),W.set(this,(i(this,ue),i(this,xe,void 0))),i(this,fe)}},l=new WeakMap,x=new WeakMap,f=new WeakMap,b=new WeakMap,y=new WeakMap,_=new WeakMap,w=new WeakMap,E=new WeakMap,z=new WeakMap,M=new WeakMap,L=new WeakMap,S=new WeakMap,W=new WeakMap,e(T,"LocalNavLink"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=I[Symbol.metadata])&&void 0!==e?e:null):void 0;$=[p({type:String})],j=[p({type:Boolean})],P=[p({type:Boolean,reflect:!0})],B=[p({type:Boolean})],q=[p({type:String})],U=[p({type:Boolean})],N=[r()],O=[r()],D=[r()],R=[r()],X=[v({slot:"links",selector:"kyn-local-nav-link"})],A=[v({slot:"links",selector:"kyn-local-nav-divider"})],F=[v({slot:"icon"})],t(T,null,$,{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:i},J,K),t(T,null,j,{kind:"accessor",name:"expanded",static:!1,private:!1,access:{has:e=>"expanded"in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:i},Q,V),t(T,null,P,{kind:"accessor",name:"active",static:!1,private:!1,access:{has:e=>"active"in e,get:e=>e.active,set:(e,t)=>{e.active=t}},metadata:i},Y,Z),t(T,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:i},ee,te),t(T,null,q,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:e=>"backText"in e,get:e=>e.backText,set:(e,t)=>{e.backText=t}},metadata:i},ie,ae),t(T,null,U,{kind:"accessor",name:"leftPadding",static:!1,private:!1,access:{has:e=>"leftPadding"in e,get:e=>e.leftPadding,set:(e,t)=>{e.leftPadding=t}},metadata:i},ne,se),t(T,null,N,{kind:"accessor",name:"_level",static:!1,private:!1,access:{has:e=>"_level"in e,get:e=>e._level,set:(e,t)=>{e._level=t}},metadata:i},de,oe),t(T,null,O,{kind:"accessor",name:"_navExpanded",static:!1,private:!1,access:{has:e=>"_navExpanded"in e,get:e=>e._navExpanded,set:(e,t)=>{e._navExpanded=t}},metadata:i},le,re),t(T,null,D,{kind:"accessor",name:"_navExpandedMobile",static:!1,private:!1,access:{has:e=>"_navExpandedMobile"in e,get:e=>e._navExpandedMobile,set:(e,t)=>{e._navExpandedMobile=t}},metadata:i},ce,he),t(T,null,R,{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},pe,ve),t(T,null,X,{kind:"accessor",name:"_navLinks",static:!1,private:!1,access:{has:e=>"_navLinks"in e,get:e=>e._navLinks,set:(e,t)=>{e._navLinks=t}},metadata:i},me,ke),t(T,null,A,{kind:"accessor",name:"_dividers",static:!1,private:!1,access:{has:e=>"_dividers"in e,get:e=>e._dividers,set:(e,t)=>{e._dividers=t}},metadata:i},ge,ue),t(T,null,F,{kind:"accessor",name:"_icon",static:!1,private:!1,access:{has:e=>"_icon"in e,get:e=>e._icon,set:(e,t)=>{e._icon=t}},metadata:i},xe,fe),t(null,C={value:T},G,{kind:"class",name:T.name,metadata:i},null,H),T=C.value,i&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),T.styles=h(u),i(T,H),T})();export{x as LocalNavLink};
+    `}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this._navLinks.forEach((e=>{e._level=this._level+1,e._navExpanded=this._navExpanded||this._navExpandedMobile})),this._dividers.forEach((e=>{e._navExpanded=this._navExpanded||this._navExpandedMobile}))}_handleBack(){this.expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this._navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}constructor(){super(...arguments),l.set(this,i(this,J,"")),x.set(this,(i(this,K),i(this,Q,!1))),f.set(this,(i(this,V),i(this,Y,!1))),b.set(this,(i(this,Z),i(this,ee,!1))),y.set(this,(i(this,te),i(this,ie,"Back"))),_.set(this,(i(this,ae),i(this,ne,!1))),w.set(this,(i(this,se),i(this,de,1))),E.set(this,(i(this,oe),i(this,le,!1))),z.set(this,(i(this,re),i(this,ce,!1))),M.set(this,(i(this,he),i(this,pe,""))),L.set(this,(i(this,me),i(this,ve,void 0))),S.set(this,(i(this,ke),i(this,ge,void 0))),W.set(this,(i(this,ue),i(this,xe,void 0))),i(this,fe)}},l=new WeakMap,x=new WeakMap,f=new WeakMap,b=new WeakMap,y=new WeakMap,_=new WeakMap,w=new WeakMap,E=new WeakMap,z=new WeakMap,M=new WeakMap,L=new WeakMap,S=new WeakMap,W=new WeakMap,e(T,"LocalNavLink"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=I[Symbol.metadata])&&void 0!==e?e:null):void 0;$=[p({type:String})],j=[p({type:Boolean})],P=[p({type:Boolean,reflect:!0})],B=[p({type:Boolean})],q=[p({type:String})],U=[p({type:Boolean})],N=[r()],O=[r()],D=[r()],R=[r()],X=[m({slot:"links",selector:"kyn-local-nav-link"})],A=[m({slot:"links",selector:"kyn-local-nav-divider"})],F=[m({slot:"icon"})],t(T,null,$,{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:i},J,K),t(T,null,j,{kind:"accessor",name:"expanded",static:!1,private:!1,access:{has:e=>"expanded"in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:i},Q,V),t(T,null,P,{kind:"accessor",name:"active",static:!1,private:!1,access:{has:e=>"active"in e,get:e=>e.active,set:(e,t)=>{e.active=t}},metadata:i},Y,Z),t(T,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:i},ee,te),t(T,null,q,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:e=>"backText"in e,get:e=>e.backText,set:(e,t)=>{e.backText=t}},metadata:i},ie,ae),t(T,null,U,{kind:"accessor",name:"leftPadding",static:!1,private:!1,access:{has:e=>"leftPadding"in e,get:e=>e.leftPadding,set:(e,t)=>{e.leftPadding=t}},metadata:i},ne,se),t(T,null,N,{kind:"accessor",name:"_level",static:!1,private:!1,access:{has:e=>"_level"in e,get:e=>e._level,set:(e,t)=>{e._level=t}},metadata:i},de,oe),t(T,null,O,{kind:"accessor",name:"_navExpanded",static:!1,private:!1,access:{has:e=>"_navExpanded"in e,get:e=>e._navExpanded,set:(e,t)=>{e._navExpanded=t}},metadata:i},le,re),t(T,null,D,{kind:"accessor",name:"_navExpandedMobile",static:!1,private:!1,access:{has:e=>"_navExpandedMobile"in e,get:e=>e._navExpandedMobile,set:(e,t)=>{e._navExpandedMobile=t}},metadata:i},ce,he),t(T,null,R,{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},pe,me),t(T,null,X,{kind:"accessor",name:"_navLinks",static:!1,private:!1,access:{has:e=>"_navLinks"in e,get:e=>e._navLinks,set:(e,t)=>{e._navLinks=t}},metadata:i},ve,ke),t(T,null,A,{kind:"accessor",name:"_dividers",static:!1,private:!1,access:{has:e=>"_dividers"in e,get:e=>e._dividers,set:(e,t)=>{e._dividers=t}},metadata:i},ge,ue),t(T,null,F,{kind:"accessor",name:"_icon",static:!1,private:!1,access:{has:e=>"_icon"in e,get:e=>e._icon,set:(e,t)=>{e._icon=t}},metadata:i},xe,fe),t(null,C={value:T},G,{kind:"class",name:T.name,metadata:i},null,H),T=C.value,i&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),T.styles=h(u),i(T,H),T})();export{x as LocalNavLink};
 //# sourceMappingURL=localNavLink.js.map

package/components/global/localNav/localNavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport LocalNavLinkScss from './localNavLink.scss?inline';\n\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented. `detail:{ origEvent: ClickEvent, level: number, defaultPrevented: boolean }`\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size. Required for level 1.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n  static override styles = unsafeCSS(LocalNavLinkScss);\n\n  /** Link url. */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Expanded state. */\n  @property({ type: Boolean })\n  accessor expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean, reflect: true })\n  accessor active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  accessor disabled = false;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  accessor backText = 'Back';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. Does not apply to level 1. */\n  @property({ type: Boolean })\n  accessor leftPadding = false;\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  accessor _level = 1;\n\n  /** The local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  accessor _navExpanded = false;\n\n  /** The local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  accessor _navExpandedMobile = false;\n\n  /** The slotted text.\n   * @internal\n   */\n  @state()\n  accessor _text = '';\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  accessor _navLinks!: Array<any>;\n\n  /**\n   * Queries slotted dividers.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-divider' })\n  accessor _dividers!: Array<any>;\n\n  /**\n   * Queries slotted icon.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  accessor _icon!: Array<any>;\n\n  override render() {\n    const classes = {\n      link: true,\n      'top-level': this._level === 1,\n      'sub-level': this._level > 1,\n      'nav-expanded': this._navExpanded || this._navExpandedMobile,\n      'link-expanded': this.expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n      'has-links': this._navLinks.length,\n      'has-icon': this._icon.length,\n      'left-padding': this.leftPadding && this._level > 1,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          ${this._navLinks.length\n            ? html`\n                <span class=\"expand-icon\"> ${unsafeSVG(chevronIcon)} </span>\n              `\n            : null}\n\n          <div class=\"icon\">\n            <slot name=\"icon\"></slot>\n          </div>\n\n          <span class=\"text\">\n            <slot @slotchange=${this._handleTextSlotChange}></slot>\n          </span>\n        </a>\n\n        <div class=\"sub-menu\">\n          ${this._navLinks.length\n            ? html`\n                <button class=\"go-back\" @click=${() => this._handleBack()}>\n                  ${unsafeSVG(backIcon)} ${this.backText}\n                </button>\n              `\n            : null}\n\n          <div class=\"category\">${this._text}</div>\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('active') && this.active) {\n      this._getSlotText();\n\n      const event = new CustomEvent('on-link-active', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          text: this._text,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  private _handleTextSlotChange() {\n    this._getSlotText();\n    this.requestUpdate();\n  }\n\n  private _getSlotText() {\n    const Slot: any = this.shadowRoot?.querySelector('.text slot');\n    let text = '';\n\n    const nodes = Slot.assignedNodes({\n      flatten: true,\n    });\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 _handleLinksSlotChange() {\n    this.updateChildren();\n    this.requestUpdate();\n  }\n\n  private updateChildren() {\n    this._navLinks.forEach((link: any) => {\n      link._level = this._level + 1;\n      link._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n\n    this._dividers.forEach((divider: any) => {\n      divider._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n  }\n\n  private _handleBack() {\n    this.expanded = false;\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.disabled) {\n      preventDefault = true;\n    }\n\n    if (this._navLinks.length) {\n      preventDefault = true;\n      this.expanded = !this.expanded;\n    }\n\n    if (preventDefault) {\n      e.preventDefault();\n    }\n\n    this.requestUpdate();\n\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e,\n        level: this._level,\n        defaultPrevented: preventDefault,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","customElement","LitElement","_classThis","_classSuper","href","__classPrivateFieldGet","this","_LocalNavLink_href_accessor_storage","value","__classPrivateFieldSet","expanded","_LocalNavLink_expanded_accessor_storage","active","_LocalNavLink_active_accessor_storage","disabled","_LocalNavLink_disabled_accessor_storage","backText","_LocalNavLink_backText_accessor_storage","leftPadding","_LocalNavLink_leftPadding_accessor_storage","_level","_LocalNavLink__level_accessor_storage","_navExpanded","_LocalNavLink__navExpanded_accessor_storage","_navExpandedMobile","_LocalNavLink__navExpandedMobile_accessor_storage","_text","_LocalNavLink__text_accessor_storage","_navLinks","_LocalNavLink__navLinks_accessor_storage","_dividers","_LocalNavLink__dividers_accessor_storage","_icon","_LocalNavLink__icon_accessor_storage","render","classes","link","length","html","classMap","e","handleClick","unsafeSVG","chevronIcon","_handleTextSlotChange","_handleBack","backIcon","_handleLinksSlotChange","willUpdate","changedProps","has","updateChildren","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","divider","preventDefault","origEvent","level","defaultPrevented","set","__runInitializers","_href_initializers","_href_extraInitializers","_expanded_initializers","_expanded_extraInitializers","_active_initializers","_active_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_backText_initializers","_backText_extraInitializers","_leftPadding_initializers","_leftPadding_extraInitializers","__level_initializers","__level_extraInitializers","__navExpanded_initializers","__navExpanded_extraInitializers","__navExpandedMobile_initializers","__navExpandedMobile_extraInitializers","__text_initializers","__text_extraInitializers","__navLinks_initializers","__navLinks_extraInitializers","__dividers_initializers","__dividers_extraInitializers","__icon_initializers","_href_decorators","property","type","String","_expanded_decorators","Boolean","reflect","_disabled_decorators","_backText_decorators","_leftPadding_decorators","__level_decorators","state","__navExpanded_decorators","__navExpandedMobile_decorators","__text_decorators","queryAssignedElements","slot","selector","__icon_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_active_decorators","__navLinks_decorators","__dividers_decorators","__icon_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","LocalNavLinkScss"],"mappings":"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"}
+{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport LocalNavLinkScss from './localNavLink.scss?inline';\n\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented. `detail:{ origEvent: ClickEvent, level: number, defaultPrevented: boolean }`\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size. Required for level 1.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n  static override styles = unsafeCSS(LocalNavLinkScss);\n\n  /** Link url. */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Expanded state. */\n  @property({ type: Boolean })\n  accessor expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean, reflect: true })\n  accessor active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  accessor disabled = false;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  accessor backText = 'Back';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. Does not apply to level 1. */\n  @property({ type: Boolean })\n  accessor leftPadding = false;\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  accessor _level = 1;\n\n  /** The local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  accessor _navExpanded = false;\n\n  /** The local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  accessor _navExpandedMobile = false;\n\n  /** The slotted text.\n   * @internal\n   */\n  @state()\n  accessor _text = '';\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  accessor _navLinks!: Array<any>;\n\n  /**\n   * Queries slotted dividers.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-divider' })\n  accessor _dividers!: Array<any>;\n\n  /**\n   * Queries slotted icon.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  accessor _icon!: Array<any>;\n\n  override render() {\n    const classes = {\n      link: true,\n      'top-level': this._level === 1,\n      'sub-level': this._level > 1,\n      'nav-expanded': this._navExpanded || this._navExpandedMobile,\n      'link-expanded': this.expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n      'has-links': this._navLinks.length,\n      'has-icon': this._icon.length,\n      'left-padding': this.leftPadding && this._level > 1,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          ${this._navLinks.length\n            ? html`\n                <span class=\"menu-item-inner-el expand-icon\">\n                  ${unsafeSVG(chevronIcon)}\n                </span>\n              `\n            : null}\n\n          <div class=\"menu-item-inner-el icon\">\n            <slot name=\"icon\"></slot>\n          </div>\n\n          <span class=\"menu-item-inner-el text\">\n            <slot @slotchange=${this._handleTextSlotChange}></slot>\n          </span>\n        </a>\n\n        <div class=\"sub-menu\">\n          ${this._navLinks.length\n            ? html`\n                <button class=\"go-back\" @click=${() => this._handleBack()}>\n                  ${unsafeSVG(backIcon)} ${this.backText}\n                </button>\n              `\n            : null}\n\n          <div class=\"category\">${this._text}</div>\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('active') && this.active) {\n      this._getSlotText();\n\n      const event = new CustomEvent('on-link-active', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          text: this._text,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  private _handleTextSlotChange() {\n    this._getSlotText();\n    this.requestUpdate();\n  }\n\n  private _getSlotText() {\n    const Slot: any = this.shadowRoot?.querySelector('.text slot');\n    let text = '';\n\n    const nodes = Slot.assignedNodes({\n      flatten: true,\n    });\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 _handleLinksSlotChange() {\n    this.updateChildren();\n    this.requestUpdate();\n  }\n\n  private updateChildren() {\n    this._navLinks.forEach((link: any) => {\n      link._level = this._level + 1;\n      link._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n\n    this._dividers.forEach((divider: any) => {\n      divider._navExpanded = this._navExpanded || this._navExpandedMobile;\n    });\n  }\n\n  private _handleBack() {\n    this.expanded = false;\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.disabled) {\n      preventDefault = true;\n    }\n\n    if (this._navLinks.length) {\n      preventDefault = true;\n      this.expanded = !this.expanded;\n    }\n\n    if (preventDefault) {\n      e.preventDefault();\n    }\n\n    this.requestUpdate();\n\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e,\n        level: this._level,\n        defaultPrevented: preventDefault,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","customElement","LitElement","_classThis","_classSuper","href","__classPrivateFieldGet","this","_LocalNavLink_href_accessor_storage","value","__classPrivateFieldSet","expanded","_LocalNavLink_expanded_accessor_storage","active","_LocalNavLink_active_accessor_storage","disabled","_LocalNavLink_disabled_accessor_storage","backText","_LocalNavLink_backText_accessor_storage","leftPadding","_LocalNavLink_leftPadding_accessor_storage","_level","_LocalNavLink__level_accessor_storage","_navExpanded","_LocalNavLink__navExpanded_accessor_storage","_navExpandedMobile","_LocalNavLink__navExpandedMobile_accessor_storage","_text","_LocalNavLink__text_accessor_storage","_navLinks","_LocalNavLink__navLinks_accessor_storage","_dividers","_LocalNavLink__dividers_accessor_storage","_icon","_LocalNavLink__icon_accessor_storage","render","classes","link","length","html","classMap","e","handleClick","unsafeSVG","chevronIcon","_handleTextSlotChange","_handleBack","backIcon","_handleLinksSlotChange","willUpdate","changedProps","has","updateChildren","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","divider","preventDefault","origEvent","level","defaultPrevented","set","__runInitializers","_href_initializers","_href_extraInitializers","_expanded_initializers","_expanded_extraInitializers","_active_initializers","_active_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_backText_initializers","_backText_extraInitializers","_leftPadding_initializers","_leftPadding_extraInitializers","__level_initializers","__level_extraInitializers","__navExpanded_initializers","__navExpanded_extraInitializers","__navExpandedMobile_initializers","__navExpandedMobile_extraInitializers","__text_initializers","__text_extraInitializers","__navLinks_initializers","__navLinks_extraInitializers","__dividers_initializers","__dividers_extraInitializers","__icon_initializers","_href_decorators","property","type","String","_expanded_decorators","Boolean","reflect","_disabled_decorators","_backText_decorators","_leftPadding_decorators","__level_decorators","state","__navExpanded_decorators","__navExpandedMobile_decorators","__text_decorators","queryAssignedElements","slot","selector","__icon_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_active_decorators","__navLinks_decorators","__dividers_decorators","__icon_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","LocalNavLinkScss"],"mappings":"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"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -358,7 +358,8 @@ textarea:not([disabled])[invalid] {
   cursor: pointer;
 }
 .clear-button.dropdown-clear {
-  right: 45px;
+  right: 55px;
+  width: 24px;
 }
 
 .caption-error-count {

package/components/reusable/checkbox/checkboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.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 { deepmerge } from 'deepmerge-ts';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport CheckboxGroupScss from './checkboxGroup.scss?inline';\n\nimport '../textInput';\nimport './checkbox';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\n\nconst _defaultTextStrings = {\n  selectAll: 'Select all',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  search: 'Search',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values. `detail:{ value: Array }`\n * @fires on-search - Captures the search input event and emits the search term. `detail:{ searchTerm: string }`\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state. `detail:{ expanded: boolean }`\n * @slot unnamed - Slot for individual checkboxes.\n * @slot tooltip - Slot for tooltip.\n * @slot description - Slot for description text.\n * @attr {array} [value=[]] - The selected values of the checkbox group.\n * @attr {string} [name=''] - The name of the input, used for form submission.\n * @attr {string} [invalidText=''] - The custom validation message when the input is invalid.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = unsafeCSS(CheckboxGroupScss);\n\n  /** Checkbox group selected values. */\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  accessor required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  accessor disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  accessor horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  accessor selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  accessor selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  accessor selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  accessor hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  accessor filterable = false;\n\n  /** Label text. */\n  @property({ type: String })\n  accessor label = '';\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  accessor searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  accessor limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited. */\n  @property({ type: Number })\n  accessor limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  accessor limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  accessor textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  accessor _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  accessor checkboxes: Array<any> = [];\n\n  @state()\n  accessor filteredCheckboxes: Array<any> = [];\n\n  override render() {\n    return html`\n      <div>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=${this._textStrings.search}\n                hideLabel\n                value=${this.searchTerm}\n                ?disabled=${this.disabled}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              >\n                ${this._textStrings.search}\n              </kyn-text-input>\n            `\n          : null}\n\n        <fieldset ?disabled=${this.disabled}>\n          <legend class=\"label-text ${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required\n              ? html`\n                  <abbr\n                    class=\"required\"\n                    title=${this._textStrings.required}\n                    aria-label=${this._textStrings.required}\n                  >\n                    *\n                  </abbr>\n                `\n              : null}\n            <span>${this.label}</span>\n            <slot name=\"tooltip\"></slot>\n          </legend>\n          <div class=\"description-text\">\n            <slot name=\"description\"></slot>\n          </div>\n          ${this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    role=\"img\"\n                    class=\"error-icon\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null}\n\n          <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n            ${this.selectAll\n              ? html`\n                  <kyn-checkbox\n                    class=\"select-all\"\n                    value=\"selectAll\"\n                    ?checked=${this.selectAllChecked}\n                    ?indeterminate=${this.selectAllIndeterminate}\n                    ?required=${this.required}\n                    ?disabled=${this.disabled}\n                    ?invalid=${this.invalidText !== '' ||\n                    this._internalValidationMsg !== ''}\n                  >\n                    ${this._textStrings.selectAll}\n                  </kyn-checkbox>\n                `\n              : null}\n\n            <slot @slotchange=${this._handleSlotChange}></slot>\n\n            ${this.limitCheckboxes &&\n            this.filteredCheckboxes.length > this.limitCount\n              ? html`\n                  <button\n                    class=\"reveal-toggle\"\n                    @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                  >\n                    ${this.limitRevealed\n                      ? this._textStrings.showLess\n                      : html`\n                          ${this._textStrings.showMore}\n                          (${this.filteredCheckboxes.length})\n                        `}\n                  </button>\n                `\n              : null}\n          </div>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (!changedProps.has('invalidText')) {\n      this._onUpdated(changedProps);\n    }\n\n    if (changedProps.has('invalidText')) {\n      this._isInvalid =\n        this.invalidText !== '' || this._internalValidationMsg !== '';\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    } else if (changedProps.has('value')) {\n      this._updateCheckboxStates();\n    }\n\n    if (changedProps.has('name')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('required')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n\n    if (\n      changedProps.has('limitCount') &&\n      changedProps.get('limitCount') !== undefined\n    ) {\n      this._toggleRevealed(this.limitRevealed);\n    }\n  }\n\n  private _updateCheckboxStates() {\n    this.checkboxes.forEach((checkbox: any) => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    const entries = new FormData();\n    this.value.forEach((value) => {\n      entries.append(this.name, value);\n    });\n    this._internals.setFormValue(entries);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    if (interacted || this.invalidText !== '') {\n      this._internals.setValidity(Validity, ValidationMessage);\n\n      // set internal validation message if value was changed by user input\n      if (interacted) {\n        this._internalValidationMsg = InternalMsg;\n      }\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.indeterminate = false;\n      });\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.filteredCheckboxes = this.checkboxes.filter((checkboxEl) => {\n      return checkboxEl.textContent.toLowerCase().includes(this.searchTerm);\n    });\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const checkboxText = checkboxEl.textContent.toLowerCase();\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.includes(this.searchTerm) &&\n          visibleCount < this.limitCount\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-search', {\n      detail: { searchTerm: this.searchTerm },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    this.filteredCheckboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < this.limitCount) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-limit-toggle', {\n      detail: { expanded: this.limitRevealed },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange() {\n    const previousCheckboxes = this.checkboxes;\n    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n\n    if (!previousCheckboxes.length) {\n      this._updateChildren();\n    }\n\n    this._toggleRevealed(this.limitRevealed);\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = checkbox.hasAttribute('disabled') || this.disabled;\n      if (this.value && this.value.length) {\n        checkbox.checked = this.value.includes(checkbox.value);\n      } else {\n        checkbox.checked = false;\n      }\n    });\n\n    if (this.selectAll) {\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    }\n  }\n\n  private _handleSubgroupChange(e: any) {\n    const newValues = [...this.value];\n    const {\n      isParent,\n      parentChecked,\n      parentValue,\n      value,\n      checked,\n      childValues,\n    } = e.detail;\n\n    if (isParent) {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n\n        childValues.forEach((value: string) => {\n          if (!newValues.includes(value)) {\n            newValues.push(value);\n          }\n        });\n      } else {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n\n        childValues.forEach((value: string) => {\n          const index = newValues.indexOf(value);\n          if (index !== -1) {\n            newValues.splice(index, 1);\n          }\n        });\n      }\n    } else {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n      } else {\n        const index = newValues.indexOf(value);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n\n      if (parentChecked) {\n        if (!newValues.includes(parentValue)) {\n          newValues.push(parentValue);\n        }\n      } else {\n        const index = newValues.indexOf(parentValue);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n    }\n\n    this.value = newValues;\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    // capture subgroup change event\n    this.addEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    this.removeEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["_defaultTextStrings","selectAll","showMore","showLess","search","required","error","CheckboxGroup","customElement","FormMixin","LitElement","_classThis","_classSuper","__classPrivateFieldGet","this","_CheckboxGroup_required_accessor_storage","value","__classPrivateFieldSet","disabled","_CheckboxGroup_disabled_accessor_storage","horizontal","_CheckboxGroup_horizontal_accessor_storage","_CheckboxGroup_selectAll_accessor_storage","selectAllChecked","_CheckboxGroup_selectAllChecked_accessor_storage","selectAllIndeterminate","_CheckboxGroup_selectAllIndeterminate_accessor_storage","hideLegend","_CheckboxGroup_hideLegend_accessor_storage","filterable","_CheckboxGroup_filterable_accessor_storage","label","_CheckboxGroup_label_accessor_storage","searchTerm","_CheckboxGroup_searchTerm_accessor_storage","limitCheckboxes","_CheckboxGroup_limitCheckboxes_accessor_storage","limitCount","_CheckboxGroup_limitCount_accessor_storage","limitRevealed","_CheckboxGroup_limitRevealed_accessor_storage","textStrings","_CheckboxGroup_textStrings_accessor_storage","_textStrings","_CheckboxGroup__textStrings_accessor_storage","checkboxes","_CheckboxGroup_checkboxes_accessor_storage","filteredCheckboxes","_CheckboxGroup_filteredCheckboxes_accessor_storage","render","html","e","_handleFilter","_isInvalid","unsafeSVG","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","invalid","_updateCheckboxStates","name","undefined","get","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","indeterminate","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","previousCheckboxes","Array","from","querySelectorAll","_updateChildren","hasAttribute","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","set","__runInitializers","_required_initializers","_required_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_horizontal_initializers","_horizontal_extraInitializers","_selectAll_initializers","_selectAll_extraInitializers","_selectAllChecked_initializers","_selectAllChecked_extraInitializers","_selectAllIndeterminate_initializers","_selectAllIndeterminate_extraInitializers","_hideLegend_initializers","_hideLegend_extraInitializers","_filterable_initializers","_filterable_extraInitializers","_label_initializers","_label_extraInitializers","_searchTerm_initializers","_searchTerm_extraInitializers","_limitCheckboxes_initializers","_limitCheckboxes_extraInitializers","_limitCount_initializers","_limitCount_extraInitializers","_limitRevealed_initializers","_limitRevealed_extraInitializers","_textStrings_initializers","_textStrings_extraInitializers","__textStrings_initializers","__textStrings_extraInitializers","_checkboxes_initializers","_checkboxes_extraInitializers","_filteredCheckboxes_initializers","_required_decorators","property","type","Boolean","_disabled_decorators","_horizontal_decorators","_selectAll_decorators","_selectAllChecked_decorators","_selectAllIndeterminate_decorators","_hideLegend_decorators","_filterable_decorators","_label_decorators","String","_searchTerm_decorators","state","_limitCheckboxes_decorators","_limitCount_decorators","Number","_limitRevealed_decorators","_textStrings_decorators","Object","__textStrings_decorators","_checkboxes_decorators","_filteredCheckboxes_decorators","__esDecorate","kind","static","private","access","obj","metadata","_metadata","_filteredCheckboxes_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","CheckboxGroupScss"],"mappings":"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"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.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 { deepmerge } from 'deepmerge-ts';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport CheckboxGroupScss from './checkboxGroup.scss?inline';\n\nimport '../textInput';\nimport './checkbox';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\n\nconst _defaultTextStrings = {\n  selectAll: 'Select all',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  search: 'Search',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values. `detail:{ value: Array }`\n * @fires on-search - Captures the search input event and emits the search term. `detail:{ searchTerm: string }`\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state. `detail:{ expanded: boolean }`\n * @slot unnamed - Slot for individual checkboxes.\n * @slot tooltip - Slot for tooltip.\n * @slot description - Slot for description text.\n * @attr {array} [value=[]] - The selected values of the checkbox group.\n * @attr {string} [name=''] - The name of the input, used for form submission.\n * @attr {string} [invalidText=''] - The custom validation message when the input is invalid.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = unsafeCSS(CheckboxGroupScss);\n\n  /** Checkbox group selected values. */\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  accessor required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  accessor disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  accessor horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  accessor selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  accessor selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  accessor selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  accessor hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  accessor filterable = false;\n\n  /** Label text. */\n  @property({ type: String })\n  accessor label = '';\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  accessor searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  accessor limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited. */\n  @property({ type: Number })\n  accessor limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  accessor limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  accessor textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  accessor _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  accessor checkboxes: Array<any> = [];\n\n  @state()\n  accessor filteredCheckboxes: Array<any> = [];\n\n  override render() {\n    return html`\n      <div>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=${this._textStrings.search}\n                hideLabel\n                value=${this.searchTerm}\n                ?disabled=${this.disabled}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              >\n                ${this._textStrings.search}\n              </kyn-text-input>\n            `\n          : null}\n\n        <fieldset ?disabled=${this.disabled}>\n          <legend class=\"label-text ${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required\n              ? html`\n                  <abbr\n                    class=\"required\"\n                    title=${this._textStrings.required}\n                    aria-label=${this._textStrings.required}\n                  >\n                    *\n                  </abbr>\n                `\n              : null}\n            <span>${this.label}</span>\n            <slot name=\"tooltip\"></slot>\n          </legend>\n          <div class=\"description-text\">\n            <slot name=\"description\"></slot>\n          </div>\n          ${this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    role=\"img\"\n                    class=\"error-icon\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null}\n\n          <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n            ${this.selectAll\n              ? html`\n                  <kyn-checkbox\n                    class=\"select-all\"\n                    value=\"selectAll\"\n                    ?checked=${this.selectAllChecked}\n                    ?indeterminate=${this.selectAllIndeterminate}\n                    ?required=${this.required}\n                    ?disabled=${this.disabled}\n                    ?invalid=${this.invalidText !== '' ||\n                    this._internalValidationMsg !== ''}\n                  >\n                    ${this._textStrings.selectAll}\n                  </kyn-checkbox>\n                `\n              : null}\n\n            <slot @slotchange=${this._handleSlotChange}></slot>\n\n            ${this.limitCheckboxes &&\n            this.filteredCheckboxes.length > this.limitCount\n              ? html`\n                  <button\n                    class=\"reveal-toggle\"\n                    @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                  >\n                    ${this.limitRevealed\n                      ? this._textStrings.showLess\n                      : html`\n                          ${this._textStrings.showMore}\n                          (${this.filteredCheckboxes.length})\n                        `}\n                  </button>\n                `\n              : null}\n          </div>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (!changedProps.has('invalidText')) {\n      this._onUpdated(changedProps);\n    }\n\n    if (changedProps.has('invalidText')) {\n      this._isInvalid =\n        this.invalidText !== '' || this._internalValidationMsg !== '';\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    } else if (changedProps.has('value')) {\n      this._updateCheckboxStates();\n    }\n\n    if (changedProps.has('name')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('required')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n\n    if (\n      changedProps.has('limitCount') &&\n      changedProps.get('limitCount') !== undefined\n    ) {\n      this._toggleRevealed(this.limitRevealed);\n    }\n  }\n\n  private _updateCheckboxStates() {\n    this.checkboxes.forEach((checkbox: any) => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    const entries = new FormData();\n    this.value.forEach((value) => {\n      entries.append(this.name, value);\n    });\n    this._internals.setFormValue(entries);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    if (interacted || this.invalidText !== '') {\n      this._internals.setValidity(Validity, ValidationMessage);\n\n      // set internal validation message if value was changed by user input\n      if (interacted) {\n        this._internalValidationMsg = InternalMsg;\n      }\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.indeterminate = false;\n      });\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.filteredCheckboxes = this.checkboxes.filter((checkboxEl) => {\n      return checkboxEl.textContent.toLowerCase().includes(this.searchTerm);\n    });\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const checkboxText = checkboxEl.textContent.toLowerCase();\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.includes(this.searchTerm) &&\n          visibleCount < this.limitCount\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-search', {\n      detail: { searchTerm: this.searchTerm },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    this.filteredCheckboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < this.limitCount) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-limit-toggle', {\n      detail: { expanded: this.limitRevealed },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange() {\n    const previousCheckboxes = this.checkboxes;\n    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n\n    if (!previousCheckboxes.length) {\n      this._updateChildren();\n    }\n\n    this._toggleRevealed(this.limitRevealed);\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = checkbox.hasAttribute('disabled') || this.disabled;\n      if (this.value && this.value.length) {\n        checkbox.checked = this.value.includes(checkbox.value);\n      } else {\n        checkbox.checked = false;\n      }\n    });\n\n    if (this.selectAll) {\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    }\n  }\n\n  private _handleSubgroupChange(e: any) {\n    const newValues = [...this.value];\n    const {\n      isParent,\n      parentChecked,\n      parentValue,\n      value,\n      checked,\n      childValues,\n    } = e.detail;\n\n    if (isParent) {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n\n        childValues.forEach((value: string) => {\n          if (!newValues.includes(value)) {\n            newValues.push(value);\n          }\n        });\n      } else {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n\n        childValues.forEach((value: string) => {\n          const index = newValues.indexOf(value);\n          if (index !== -1) {\n            newValues.splice(index, 1);\n          }\n        });\n      }\n    } else {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n      } else {\n        const index = newValues.indexOf(value);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n\n      if (parentChecked) {\n        if (!newValues.includes(parentValue)) {\n          newValues.push(parentValue);\n        }\n      } else {\n        const index = newValues.indexOf(parentValue);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n    }\n\n    this.value = newValues;\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    // capture subgroup change event\n    this.addEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    this.removeEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["_defaultTextStrings","selectAll","showMore","showLess","search","required","error","CheckboxGroup","customElement","FormMixin","LitElement","_classThis","_classSuper","__classPrivateFieldGet","this","_CheckboxGroup_required_accessor_storage","value","__classPrivateFieldSet","disabled","_CheckboxGroup_disabled_accessor_storage","horizontal","_CheckboxGroup_horizontal_accessor_storage","_CheckboxGroup_selectAll_accessor_storage","selectAllChecked","_CheckboxGroup_selectAllChecked_accessor_storage","selectAllIndeterminate","_CheckboxGroup_selectAllIndeterminate_accessor_storage","hideLegend","_CheckboxGroup_hideLegend_accessor_storage","filterable","_CheckboxGroup_filterable_accessor_storage","label","_CheckboxGroup_label_accessor_storage","searchTerm","_CheckboxGroup_searchTerm_accessor_storage","limitCheckboxes","_CheckboxGroup_limitCheckboxes_accessor_storage","limitCount","_CheckboxGroup_limitCount_accessor_storage","limitRevealed","_CheckboxGroup_limitRevealed_accessor_storage","textStrings","_CheckboxGroup_textStrings_accessor_storage","_textStrings","_CheckboxGroup__textStrings_accessor_storage","checkboxes","_CheckboxGroup_checkboxes_accessor_storage","filteredCheckboxes","_CheckboxGroup_filteredCheckboxes_accessor_storage","render","html","e","_handleFilter","_isInvalid","unsafeSVG","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","invalid","_updateCheckboxStates","name","undefined","get","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","indeterminate","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","previousCheckboxes","Array","from","querySelectorAll","_updateChildren","hasAttribute","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","set","__runInitializers","_required_initializers","_required_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_horizontal_initializers","_horizontal_extraInitializers","_selectAll_initializers","_selectAll_extraInitializers","_selectAllChecked_initializers","_selectAllChecked_extraInitializers","_selectAllIndeterminate_initializers","_selectAllIndeterminate_extraInitializers","_hideLegend_initializers","_hideLegend_extraInitializers","_filterable_initializers","_filterable_extraInitializers","_label_initializers","_label_extraInitializers","_searchTerm_initializers","_searchTerm_extraInitializers","_limitCheckboxes_initializers","_limitCheckboxes_extraInitializers","_limitCount_initializers","_limitCount_extraInitializers","_limitRevealed_initializers","_limitRevealed_extraInitializers","_textStrings_initializers","_textStrings_extraInitializers","__textStrings_initializers","__textStrings_extraInitializers","_checkboxes_initializers","_checkboxes_extraInitializers","_filteredCheckboxes_initializers","_required_decorators","property","type","Boolean","_disabled_decorators","_horizontal_decorators","_selectAll_decorators","_selectAllChecked_decorators","_selectAllIndeterminate_decorators","_hideLegend_decorators","_filterable_decorators","_label_decorators","String","_searchTerm_decorators","state","_limitCheckboxes_decorators","_limitCount_decorators","Number","_limitRevealed_decorators","_textStrings_decorators","Object","__textStrings_decorators","_checkboxes_decorators","_filteredCheckboxes_decorators","__esDecorate","kind","static","private","access","obj","metadata","_metadata","_filteredCheckboxes_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","CheckboxGroupScss"],"mappings":"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"}

package/components/reusable/colorInput/colorInput.js

@@ -358,7 +358,8 @@ textarea:not([disabled])[invalid] {
   cursor: pointer;
 }
 .clear-button.dropdown-clear {
-  right: 45px;
+  right: 55px;
+  width: 24px;
 }
 
 .caption-error-count {

package/components/reusable/colorInput/colorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorInput.js","sources":["../../../../src/components/reusable/colorInput/colorInput.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, state, query, property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { classMap } from 'lit/directives/class-map.js';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport Styles from './colorInput.scss?inline';\nimport { FormMixin } from '../../../common/mixins/form-input';\n\nconst _defaultTextStrings = {\n  requiredText: 'Required',\n  errorText: 'Error',\n  pleaseSelectColor: 'Please select a color',\n  invalidFormat: 'Enter a valid hex color (e.g. #FF0000)',\n  colorTextInput: 'Color text input',\n};\n\n/**\n * Color input.\n * @fires on-input - Captures the input event and emits the selected value and original event details. `detail:{ value: string, origEvent: Event }`\n * @slot tooltip - Slot for tooltip.\n * @attr {string} [value=''] - The value of the input.\n * @attr {string} [name=''] - The name of the input, used for form submission.\n * @attr {string} [invalidText=''] - The custom validation message when the input is invalid.\n */\n@customElement('kyn-color-input')\nexport class ColorInput extends FormMixin(LitElement) {\n  static override styles = unsafeCSS(Styles);\n\n  /** Label text. */\n  @property({ type: String })\n  accessor label = '';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  accessor caption = '';\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  accessor disabled = false;\n\n  /** Input required state. */\n  @property({ type: Boolean })\n  accessor required = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  accessor hideLabel = false;\n\n  /** Input readonly state. */\n  @property({ type: Boolean })\n  accessor readonly = false;\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  accessor textStrings = _defaultTextStrings;\n\n  /** Control for native browser autocomplete. Use `on`, `off`, or a space-separated `token-list` describing autocomplete behavior.*/\n  @property({ type: String })\n  accessor autoComplete: string = 'off';\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  accessor _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries the <input[type=\"color\"]> DOM element.\n   * @ignore\n   */\n  @query('input[type=\"color\"]')\n  accessor _inputColorEl!: HTMLInputElement;\n\n  /**\n   * Queries the <input[type=\"text\"]> DOM element.\n   * @ignore\n   */\n  @query('input[type=\"text\"]')\n  accessor _inputEl!: HTMLInputElement;\n\n  /** Sets whether user has interacted with input text for error handling..\n   * @internal\n   */\n  @state()\n  accessor _hasInteracted = false;\n\n  override render() {\n    return html`\n      <div\n        class=\"text-input\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n      >\n        <label\n          class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\n        >\n          ${\n            this.required\n              ? html`<abbr\n                  class=\"required\"\n                  title=${this._textStrings.requiredText}\n                  role=\"img\"\n                  aria-label=${this._textStrings?.requiredText || 'Required'}\n                  >*</abbr\n                >`\n              : null\n          }\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n        <div class=\"color-input-wrapper\">\n          <input\n          class=${classMap({\n            'custom-color': true,\n            readonly: this.readonly,\n          })}\n            type=\"color\"\n            name=\"colorInput\"\n            id=\"colorInput\"\n            .value=${this.value}\n            ?disabled=${this.disabled}\n            @input=${this.handleColorChange}\n          />\n          </div>\n          <input\n            class=\"${classMap({\n              'is-readonly': this.readonly,\n            })}\"\n            type=\"text\"\n            name=${this.name}\n            .value=${this.value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?invalid=${this._isInvalid}\n            aria-label=${this._textStrings.colorTextInput}\n            aria-invalid=${this._isInvalid}\n            aria-describedby=${this._isInvalid ? 'error' : ''}\n            autocomplete=${this.autoComplete}\n            @input=${(e: any) => this.handleTextInput(e)}\n          />\n          <div class=\"caption-error-count\">\n            <div>\n              ${\n                this.caption !== ''\n                  ? html`\n                      <div class=\"caption\" aria-disabled=${this.disabled}>\n                        ${this.caption}\n                      </div>\n                    `\n                  : null\n              }\n              ${\n                this._isInvalid\n                  ? html`\n                      <div id=\"error\" class=\"error\">\n                        <span\n                          role=\"img\"\n                          class=\"error-icon\"\n                          aria-label=${this._textStrings.errorText}\n                          >${unsafeSVG(errorIcon)}</span\n                        >\n                        ${this.invalidText || this._internalValidationMsg}\n                      </div>\n                    `\n                  : null\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleColorChange(e: any) {\n    this.value = e.target.value;\n    this._inputEl.value = e.target.value;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private handleTextInput(e: any) {\n    this.value = e.target.value;\n    this._inputColorEl.value = e.target.value;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _emitValue(e?: any) {\n    const Detail: any = {\n      value: this.value,\n    };\n    if (e) {\n      Detail.origEvent = e;\n    }\n\n    const event = new CustomEvent('on-input', {\n      detail: Detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl\n    if (interacted) this._hasInteracted = true;\n    const hexPattern = /^#([0-9a-fA-F]{6})$/;\n    const value = this._inputEl.value;\n    const validityFlags = {\n      valueMissing: false,\n      patternMismatch: false,\n      customError: false,\n      valid: true,\n    };\n\n    let validationMessage = '';\n\n    if (this.required && !value) {\n      validityFlags.valueMissing = true;\n      validityFlags.valid = false;\n      validationMessage = this._textStrings.pleaseSelectColor;\n    }\n\n    if (value != '' && !hexPattern.test(value)) {\n      validityFlags.patternMismatch = true;\n      validityFlags.valid = false;\n      validationMessage = this._textStrings.invalidFormat;\n    }\n\n    // set validity on custom element, anchor to inputEl\n    this._internals.setValidity(\n      validityFlags,\n      validationMessage,\n      this._inputEl\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      this._inputEl.value = this.value;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-color-input': ColorInput;\n  }\n}\n"],"names":["_defaultTextStrings","requiredText","errorText","pleaseSelectColor","invalidFormat","colorTextInput","ColorInput","customElement","FormMixin","LitElement","_classThis","_classSuper","label","__classPrivateFieldGet","this","_ColorInput_label_accessor_storage","value","__classPrivateFieldSet","caption","_ColorInput_caption_accessor_storage","disabled","_ColorInput_disabled_accessor_storage","required","_ColorInput_required_accessor_storage","hideLabel","_ColorInput_hideLabel_accessor_storage","readonly","_ColorInput_readonly_accessor_storage","textStrings","_ColorInput_textStrings_accessor_storage","autoComplete","_ColorInput_autoComplete_accessor_storage","_textStrings","_ColorInput__textStrings_accessor_storage","_inputColorEl","_ColorInput__inputColorEl_accessor_storage","_inputEl","_ColorInput__inputEl_accessor_storage","_hasInteracted","_ColorInput__hasInteracted_accessor_storage","render","html","name","_a","classMap","handleColorChange","_isInvalid","e","handleTextInput","unsafeSVG","errorIcon","invalidText","_internalValidationMsg","target","_validate","_emitValue","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","validityFlags","valueMissing","patternMismatch","customError","valid","validationMessage","test","_internals","setValidity","reportValidity","updated","changedProps","_onUpdated","has","willUpdate","deepmerge","set","__runInitializers","_label_initializers","_label_extraInitializers","_caption_initializers","_caption_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_required_initializers","_required_extraInitializers","_hideLabel_initializers","_hideLabel_extraInitializers","_readonly_initializers","_readonly_extraInitializers","_textStrings_initializers","_textStrings_extraInitializers","_autoComplete_initializers","_autoComplete_extraInitializers","__textStrings_initializers","__textStrings_extraInitializers","__inputColorEl_initializers","__inputColorEl_extraInitializers","__inputEl_initializers","__inputEl_extraInitializers","__hasInteracted_initializers","_label_decorators","property","type","String","_caption_decorators","_disabled_decorators","Boolean","_required_decorators","_hideLabel_decorators","_readonly_decorators","_textStrings_decorators","Object","_autoComplete_decorators","__textStrings_decorators","state","query","__hasInteracted_decorators","__esDecorate","kind","static","private","access","obj","get","metadata","_metadata","__inputColorEl_decorators","__inputEl_decorators","__hasInteracted_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","Styles"],"mappings":"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"}
+{"version":3,"file":"colorInput.js","sources":["../../../../src/components/reusable/colorInput/colorInput.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, state, query, property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { classMap } from 'lit/directives/class-map.js';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport Styles from './colorInput.scss?inline';\nimport { FormMixin } from '../../../common/mixins/form-input';\n\nconst _defaultTextStrings = {\n  requiredText: 'Required',\n  errorText: 'Error',\n  pleaseSelectColor: 'Please select a color',\n  invalidFormat: 'Enter a valid hex color (e.g. #FF0000)',\n  colorTextInput: 'Color text input',\n};\n\n/**\n * Color input.\n * @fires on-input - Captures the input event and emits the selected value and original event details. `detail:{ value: string, origEvent: Event }`\n * @slot tooltip - Slot for tooltip.\n * @attr {string} [value=''] - The value of the input.\n * @attr {string} [name=''] - The name of the input, used for form submission.\n * @attr {string} [invalidText=''] - The custom validation message when the input is invalid.\n */\n@customElement('kyn-color-input')\nexport class ColorInput extends FormMixin(LitElement) {\n  static override styles = unsafeCSS(Styles);\n\n  /** Label text. */\n  @property({ type: String })\n  accessor label = '';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  accessor caption = '';\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  accessor disabled = false;\n\n  /** Input required state. */\n  @property({ type: Boolean })\n  accessor required = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  accessor hideLabel = false;\n\n  /** Input readonly state. */\n  @property({ type: Boolean })\n  accessor readonly = false;\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  accessor textStrings = _defaultTextStrings;\n\n  /** Control for native browser autocomplete. Use `on`, `off`, or a space-separated `token-list` describing autocomplete behavior.*/\n  @property({ type: String })\n  accessor autoComplete: string = 'off';\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  accessor _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries the <input[type=\"color\"]> DOM element.\n   * @ignore\n   */\n  @query('input[type=\"color\"]')\n  accessor _inputColorEl!: HTMLInputElement;\n\n  /**\n   * Queries the <input[type=\"text\"]> DOM element.\n   * @ignore\n   */\n  @query('input[type=\"text\"]')\n  accessor _inputEl!: HTMLInputElement;\n\n  /** Sets whether user has interacted with input text for error handling..\n   * @internal\n   */\n  @state()\n  accessor _hasInteracted = false;\n\n  override render() {\n    return html`\n      <div\n        class=\"text-input\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n      >\n        <label\n          class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\n        >\n          ${\n            this.required\n              ? html`<abbr\n                  class=\"required\"\n                  title=${this._textStrings.requiredText}\n                  role=\"img\"\n                  aria-label=${this._textStrings?.requiredText || 'Required'}\n                  >*</abbr\n                >`\n              : null\n          }\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n        <div class=\"color-input-wrapper\">\n          <input\n          class=${classMap({\n            'custom-color': true,\n            readonly: this.readonly,\n          })}\n            type=\"color\"\n            name=\"colorInput\"\n            id=\"colorInput\"\n            .value=${this.value}\n            ?disabled=${this.disabled}\n            @input=${this.handleColorChange}\n          />\n          </div>\n          <input\n            class=\"${classMap({\n              'is-readonly': this.readonly,\n            })}\"\n            type=\"text\"\n            name=${this.name}\n            .value=${this.value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?invalid=${this._isInvalid}\n            aria-label=${this._textStrings.colorTextInput}\n            aria-invalid=${this._isInvalid}\n            aria-describedby=${this._isInvalid ? 'error' : ''}\n            autocomplete=${this.autoComplete}\n            @input=${(e: any) => this.handleTextInput(e)}\n          />\n          <div class=\"caption-error-count\">\n            <div>\n              ${\n                this.caption !== ''\n                  ? html`\n                      <div class=\"caption\" aria-disabled=${this.disabled}>\n                        ${this.caption}\n                      </div>\n                    `\n                  : null\n              }\n              ${\n                this._isInvalid\n                  ? html`\n                      <div id=\"error\" class=\"error\">\n                        <span\n                          role=\"img\"\n                          class=\"error-icon\"\n                          aria-label=${this._textStrings.errorText}\n                          >${unsafeSVG(errorIcon)}</span\n                        >\n                        ${this.invalidText || this._internalValidationMsg}\n                      </div>\n                    `\n                  : null\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleColorChange(e: any) {\n    this.value = e.target.value;\n    this._inputEl.value = e.target.value;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private handleTextInput(e: any) {\n    this.value = e.target.value;\n    this._inputColorEl.value = e.target.value;\n    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _emitValue(e?: any) {\n    const Detail: any = {\n      value: this.value,\n    };\n    if (e) {\n      Detail.origEvent = e;\n    }\n\n    const event = new CustomEvent('on-input', {\n      detail: Detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl\n    if (interacted) this._hasInteracted = true;\n    const hexPattern = /^#([0-9a-fA-F]{6})$/;\n    const value = this._inputEl.value;\n    const validityFlags = {\n      valueMissing: false,\n      patternMismatch: false,\n      customError: false,\n      valid: true,\n    };\n\n    let validationMessage = '';\n\n    if (this.required && !value) {\n      validityFlags.valueMissing = true;\n      validityFlags.valid = false;\n      validationMessage = this._textStrings.pleaseSelectColor;\n    }\n\n    if (value != '' && !hexPattern.test(value)) {\n      validityFlags.patternMismatch = true;\n      validityFlags.valid = false;\n      validationMessage = this._textStrings.invalidFormat;\n    }\n\n    // set validity on custom element, anchor to inputEl\n    this._internals.setValidity(\n      validityFlags,\n      validationMessage,\n      this._inputEl\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      this._inputEl.value = this.value;\n    }\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-color-input': ColorInput;\n  }\n}\n"],"names":["_defaultTextStrings","requiredText","errorText","pleaseSelectColor","invalidFormat","colorTextInput","ColorInput","customElement","FormMixin","LitElement","_classThis","_classSuper","label","__classPrivateFieldGet","this","_ColorInput_label_accessor_storage","value","__classPrivateFieldSet","caption","_ColorInput_caption_accessor_storage","disabled","_ColorInput_disabled_accessor_storage","required","_ColorInput_required_accessor_storage","hideLabel","_ColorInput_hideLabel_accessor_storage","readonly","_ColorInput_readonly_accessor_storage","textStrings","_ColorInput_textStrings_accessor_storage","autoComplete","_ColorInput_autoComplete_accessor_storage","_textStrings","_ColorInput__textStrings_accessor_storage","_inputColorEl","_ColorInput__inputColorEl_accessor_storage","_inputEl","_ColorInput__inputEl_accessor_storage","_hasInteracted","_ColorInput__hasInteracted_accessor_storage","render","html","name","_a","classMap","handleColorChange","_isInvalid","e","handleTextInput","unsafeSVG","errorIcon","invalidText","_internalValidationMsg","target","_validate","_emitValue","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","validityFlags","valueMissing","patternMismatch","customError","valid","validationMessage","test","_internals","setValidity","reportValidity","updated","changedProps","_onUpdated","has","willUpdate","deepmerge","set","__runInitializers","_label_initializers","_label_extraInitializers","_caption_initializers","_caption_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_required_initializers","_required_extraInitializers","_hideLabel_initializers","_hideLabel_extraInitializers","_readonly_initializers","_readonly_extraInitializers","_textStrings_initializers","_textStrings_extraInitializers","_autoComplete_initializers","_autoComplete_extraInitializers","__textStrings_initializers","__textStrings_extraInitializers","__inputColorEl_initializers","__inputColorEl_extraInitializers","__inputEl_initializers","__inputEl_extraInitializers","__hasInteracted_initializers","_label_decorators","property","type","String","_caption_decorators","_disabled_decorators","Boolean","_required_decorators","_hideLabel_decorators","_readonly_decorators","_textStrings_decorators","Object","_autoComplete_decorators","__textStrings_decorators","state","query","__hasInteracted_decorators","__esDecorate","kind","static","private","access","obj","get","metadata","_metadata","__inputColorEl_decorators","__inputEl_decorators","__hasInteracted_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","Styles"],"mappings":"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"}