@kyndryl-design-system/shidoka-applications 1.48.2 → 1.48.4

package/README.md

@@ -24,21 +24,18 @@ The method used (SCSS @use, CSS @import, JS import, or <style> tag) will v
 
 ```css
 @use '~@kyndryl-design-system/shidoka-foundation/scss/root.scss';
-@use '~@kyndryl-design-system/shidoka-applications/common/scss/root.scss';
 ```
 
 ### CSS
 
 ```css
 @import '@kyndryl-design-system/shidoka-foundation/css/root.css';
-@import '@kyndryl-design-system/shidoka-applications/common/css/root.css';
 ```
 
 ### JS
 
 ```js
 import '@kyndryl-design-system/shidoka-foundation/css/root.css';
-import '@kyndryl-design-system/shidoka-applications/common/css/root.css';
 ```
 
 ### Use CSS tokens/variables

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

@@ -52,6 +52,11 @@ export declare class LocalNavLink extends LitElement {
      * @internal
      */
     menuPosition: any;
+    /**
+     * Queries slotted icon.
+     * @ignore
+     */
+    _icon: Array<any>;
     render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
     willUpdate(changedProps: any): void;

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":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAKnE;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,SAAS,UAAS;IAElB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IAuDN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAc5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAMjB,oBAAoB;CAK9B;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":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAKnE;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,SAAS,UAAS;IAElB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEvB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;IA0DN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAc5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}

package/components/global/localNav/localNavLink.js

@@ -45,13 +45,18 @@ a {
   color: var(--kd-color-text-secondary);
   transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
 }
-a ::slotted(kd-icon),
-a ::slotted(svg) {
+a .icon.slotted {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+}
+@media (min-width: 42rem) {
+  a .icon.slotted {
+    width: 32px;
+  }
 }
 .link-active a {
   color: var(--kd-color-text-tertiary);
@@ -276,13 +281,6 @@ a:active {
 }
 .arrow-icon kd-icon {
   display: block;
-}
-
-@media (min-width: 42rem) {
-  slot[name=icon]::slotted(*) {
-    flex-shrink: 0;
-    margin: 0 4px;
-  }
 }`;let p=class extends r{constructor(){super(...arguments),this.href="",this._expanded=!1,this.active=!1,this.disabled=!1,this.backText="Back",this._level=1,this._navExpanded=!1,this._navExpandedMobile=!1,this._text="",this.menuPosition={}}render(){const e={"level--1":1==this._level,"level--2":2==this._level,"level--3":3==this._level,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this._expanded,"link-active":this.active,"link-disabled":this.disabled};return l`
       <div
         class=${o(e)}
@@ -290,7 +288,10 @@ a:active {
         @pointerenter=${e=>this.handlePointerEnter(e)}
       >
         <a href=${this.href} @click=${e=>this.handleClick(e)}>
-          <slot name="icon"></slot>
+          <span class="icon ${this._icon.length?"slotted":""}">
+            <slot name="icon"></slot>
+          </span>
+
           <span class="text">
             <slot @slotchange=${this._handleTextSlotChange}></slot>
           </span>
@@ -318,5 +319,5 @@ a:active {
           <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
         </div>
       </div>
-    `}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("_navExpanded")&&this.updateChildren(),e.has("_expanded")&&this._expanded&&this.navLinks.length&&this._positionMenu()}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._navExpanded=this._navExpanded}))}determineLevel(){const e=this.shadowRoot.host.parentNode;"KYN-LOCAL-NAV"===e.nodeName?this._level=1:"KYN-LOCAL-NAV"===e.parentNode.nodeName?this._level=2:this._level=3}handlePointerEnter(e){"mouse"===e.pointerType&&this.navLinks.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&document.activeElement!==this&&this.navLinks.length&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),n=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".sub-menu"))||void 0===t?void 0:t.getBoundingClientRect(),o=i.top+i.height/2,a=n.height/2,d=o+a>window.innerHeight?o-a-(o+a-window.innerHeight):o-a,r=i.right+8;this.menuPosition={top:d<56?56:d,left:r<320?320:r}}_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)}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};p.styles=c,e([t({type:String})],p.prototype,"href",void 0),e([i()],p.prototype,"_expanded",void 0),e([t({type:Boolean,reflect:!0})],p.prototype,"active",void 0),e([t({type:Boolean})],p.prototype,"disabled",void 0),e([t({type:String})],p.prototype,"backText",void 0),e([i()],p.prototype,"_level",void 0),e([i()],p.prototype,"_navExpanded",void 0),e([i()],p.prototype,"_navExpandedMobile",void 0),e([i()],p.prototype,"_text",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],p.prototype,"navLinks",void 0),e([i()],p.prototype,"_leaveTimer",void 0),e([i()],p.prototype,"menuPosition",void 0),p=e([a("kyn-local-nav-link")],p);export{p as LocalNavLink};
+    `}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("_navExpanded")&&this.updateChildren(),e.has("_expanded")&&this._expanded&&this.navLinks.length&&this._positionMenu()}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._navExpanded=this._navExpanded}))}determineLevel(){const e=this.shadowRoot.host.parentNode;"KYN-LOCAL-NAV"===e.nodeName?this._level=1:"KYN-LOCAL-NAV"===e.parentNode.nodeName?this._level=2:this._level=3}handlePointerEnter(e){"mouse"===e.pointerType&&this.navLinks.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&document.activeElement!==this&&this.navLinks.length&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),n=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".sub-menu"))||void 0===t?void 0:t.getBoundingClientRect(),o=i.top+i.height/2,a=n.height/2,d=o+a>window.innerHeight?o-a-(o+a-window.innerHeight):o-a,r=i.right+8;this.menuPosition={top:d<56?56:d,left:r<320?320:r}}_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)}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};p.styles=c,e([t({type:String})],p.prototype,"href",void 0),e([i()],p.prototype,"_expanded",void 0),e([t({type:Boolean,reflect:!0})],p.prototype,"active",void 0),e([t({type:Boolean})],p.prototype,"disabled",void 0),e([t({type:String})],p.prototype,"backText",void 0),e([i()],p.prototype,"_level",void 0),e([i()],p.prototype,"_navExpanded",void 0),e([i()],p.prototype,"_navExpandedMobile",void 0),e([i()],p.prototype,"_text",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],p.prototype,"navLinks",void 0),e([i()],p.prototype,"_leaveTimer",void 0),e([i()],p.prototype,"menuPosition",void 0),e([n({slot:"icon"})],p.prototype,"_icon",void 0),p=e([a("kyn-local-nav-link")],p);export{p 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 { LitElement, html } 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';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\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.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size.\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 = LocalNavLinkScss;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Expanded state. */\n  @state()\n  _expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  _level = 1;\n\n  /** The local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  _navExpanded = false;\n\n  /** The local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  _navExpandedMobile = false;\n\n  /** The slotted text.\n   * @internal\n   */\n  @state()\n  _text = '';\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  navLinks!: Array<any>;\n\n  /** Timeout function to delay flyout open.\n   * @internal\n   */\n  _enterTimer: any;\n\n  /** Timeout function to delay flyout close.\n   * @internal\n   */\n  @state()\n  _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  menuPosition: any = {};\n\n  override render() {\n    const classes = {\n      'level--1': this._level == 1,\n      'level--2': this._level == 2,\n      'level--3': this._level == 3,\n      'nav-expanded': this._navExpanded || this._navExpandedMobile,\n      'link-expanded': this._expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n    };\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          <slot name=\"icon\"></slot>\n          <span class=\"text\">\n            <slot @slotchange=${this._handleTextSlotChange}></slot>\n          </span>\n\n          ${this.navLinks.length\n            ? html`\n                <span class=\"arrow-icon\">\n                  <kd-icon .icon=${arrowIcon}></kd-icon>\n                </span>\n              `\n            : null}\n        </a>\n\n        <div\n          class=\"sub-menu ${this.navLinks.length ? 'has-links' : ''}\"\n          style=${this.navLinks.length\n            ? `top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`\n            : ''}\n        >\n          ${this.navLinks.length\n            ? html`\n                <button class=\"go-back\" @click=${() => this._handleBack()}>\n                  <kd-icon .icon=${backIcon}></kd-icon>\n                  ${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 firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n\n    if (\n      changedProps.has('_expanded') &&\n      this._expanded &&\n      this.navLinks.length\n    ) {\n      this._positionMenu();\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._navExpanded = this._navExpanded;\n    });\n  }\n\n  private determineLevel() {\n    const parentNode = this.shadowRoot!.host.parentNode;\n    if (parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 1;\n    } else if (parentNode!.parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 2;\n    } else {\n      this._level = 3;\n    }\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && this.navLinks.length) {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this._expanded = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (\n      e.pointerType === 'mouse' &&\n      document.activeElement !== this &&\n      this.navLinks.length\n    ) {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this._expanded = false;\n      }, 150);\n    }\n  }\n\n  private _positionMenu() {\n    // determine submenu positioning\n    const LinkBounds: any = this.getBoundingClientRect();\n    const MenuBounds: any = this.shadowRoot\n      ?.querySelector('.sub-menu')\n      ?.getBoundingClientRect();\n    const Padding = 8;\n    const HeaderHeight = 56;\n\n    const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n    const MenuHalf = MenuBounds.height / 2;\n\n    const Top =\n      LinkHalf + MenuHalf > window.innerHeight\n        ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n        : LinkHalf - MenuHalf;\n    const Left = LinkBounds.right + Padding;\n\n    this.menuPosition = {\n      top: Top < HeaderHeight ? HeaderHeight : Top,\n      left: Left < 320 ? 320 : Left,\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  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this._expanded = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","_expanded","active","disabled","backText","_level","_navExpanded","_navExpandedMobile","_text","menuPosition","render","classes","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","_handleTextSlotChange","navLinks","length","arrowIcon","top","left","_handleBack","backIcon","_handleLinksSlotChange","firstUpdated","determineLevel","willUpdate","changedProps","has","updateChildren","_positionMenu","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","link","parentNode","host","nodeName","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","document","activeElement","LinkBounds","getBoundingClientRect","MenuBounds","_b","LinkHalf","height","MenuHalf","Top","window","innerHeight","Left","right","preventDefault","origEvent","level","defaultPrevented","_handleClickOut","composedPath","includes","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","state","Boolean","reflect","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
+{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { LitElement, html } 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';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\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.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size.\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 = LocalNavLinkScss;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Expanded state. */\n  @state()\n  _expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  _level = 1;\n\n  /** The local nav desktop expanded state.\n   * @internal\n   */\n  @state()\n  _navExpanded = false;\n\n  /** The local nav mobile expanded state.\n   * @internal\n   */\n  @state()\n  _navExpandedMobile = false;\n\n  /** The slotted text.\n   * @internal\n   */\n  @state()\n  _text = '';\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  navLinks!: Array<any>;\n\n  /** Timeout function to delay flyout open.\n   * @internal\n   */\n  _enterTimer: any;\n\n  /** Timeout function to delay flyout close.\n   * @internal\n   */\n  @state()\n  _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  menuPosition: any = {};\n\n  /**\n   * Queries slotted icon.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _icon!: Array<any>;\n\n  override render() {\n    const classes = {\n      'level--1': this._level == 1,\n      'level--2': this._level == 2,\n      'level--3': this._level == 3,\n      'nav-expanded': this._navExpanded || this._navExpandedMobile,\n      'link-expanded': this._expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n    };\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          <span class=\"icon ${this._icon.length ? 'slotted' : ''}\">\n            <slot name=\"icon\"></slot>\n          </span>\n\n          <span class=\"text\">\n            <slot @slotchange=${this._handleTextSlotChange}></slot>\n          </span>\n\n          ${this.navLinks.length\n            ? html`\n                <span class=\"arrow-icon\">\n                  <kd-icon .icon=${arrowIcon}></kd-icon>\n                </span>\n              `\n            : null}\n        </a>\n\n        <div\n          class=\"sub-menu ${this.navLinks.length ? 'has-links' : ''}\"\n          style=${this.navLinks.length\n            ? `top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`\n            : ''}\n        >\n          ${this.navLinks.length\n            ? html`\n                <button class=\"go-back\" @click=${() => this._handleBack()}>\n                  <kd-icon .icon=${backIcon}></kd-icon>\n                  ${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 firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n\n    if (\n      changedProps.has('_expanded') &&\n      this._expanded &&\n      this.navLinks.length\n    ) {\n      this._positionMenu();\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._navExpanded = this._navExpanded;\n    });\n  }\n\n  private determineLevel() {\n    const parentNode = this.shadowRoot!.host.parentNode;\n    if (parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 1;\n    } else if (parentNode!.parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 2;\n    } else {\n      this._level = 3;\n    }\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && this.navLinks.length) {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this._expanded = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (\n      e.pointerType === 'mouse' &&\n      document.activeElement !== this &&\n      this.navLinks.length\n    ) {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this._expanded = false;\n      }, 150);\n    }\n  }\n\n  private _positionMenu() {\n    // determine submenu positioning\n    const LinkBounds: any = this.getBoundingClientRect();\n    const MenuBounds: any = this.shadowRoot\n      ?.querySelector('.sub-menu')\n      ?.getBoundingClientRect();\n    const Padding = 8;\n    const HeaderHeight = 56;\n\n    const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n    const MenuHalf = MenuBounds.height / 2;\n\n    const Top =\n      LinkHalf + MenuHalf > window.innerHeight\n        ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n        : LinkHalf - MenuHalf;\n    const Left = LinkBounds.right + Padding;\n\n    this.menuPosition = {\n      top: Top < HeaderHeight ? HeaderHeight : Top,\n      left: Left < 320 ? 320 : Left,\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  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this._expanded = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","_expanded","active","disabled","backText","_level","_navExpanded","_navExpandedMobile","_text","menuPosition","render","classes","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","_icon","length","_handleTextSlotChange","navLinks","arrowIcon","top","left","_handleBack","backIcon","_handleLinksSlotChange","firstUpdated","determineLevel","willUpdate","changedProps","has","updateChildren","_positionMenu","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","link","parentNode","host","nodeName","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","document","activeElement","LinkBounds","getBoundingClientRect","MenuBounds","_b","LinkHalf","height","MenuHalf","Top","window","innerHeight","Left","right","preventDefault","origEvent","level","defaultPrevented","_handleClickOut","composedPath","includes","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","state","Boolean","reflect","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}

package/components/reusable/checkbox/checkboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;;AAYnE;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,kBAAqB;IACtD,OAAgB,MAAM,MAAqB;IAE3C,sCAAsC;IAE7B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEhC,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,4DAA4D;IAE5D,eAAe,UAAS;IAExB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;;MAAuB;IAUnC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAG5B,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAE3B,MAAM;IA6FN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAyElC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,qBAAqB;IAiEpB,iBAAiB;IAiBjB,oBAAoB;CAc9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
+{"version":3,"file":"checkboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;;AAYnE;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,kBAAqB;IACtD,OAAgB,MAAM,MAAqB;IAE3C,sCAAsC;IAE7B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEhC,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,4DAA4D;IAE5D,eAAe,UAAS;IAExB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;;MAAuB;IAUnC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAG5B,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAE3B,MAAM;IA6FN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAyElC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,qBAAqB;IAiC7B,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,qBAAqB;IAiEpB,iBAAiB;IAiBjB,oBAAoB;CAc9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -422,5 +422,5 @@ fieldset {
           </div>
         </fieldset>
       </div>
-    `}willUpdate(e){e.has("textStrings")&&(this._textStrings=a(c,this.textStrings))}updated(e){if(this._onUpdated(e),e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0;const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this._internals.setFormValue(t)}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&void 0!==e.get("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&this.checkboxes.forEach((e=>{e.invalid=this._isInvalid})),e.has("limitCheckboxes")&&void 0!==e.get("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},o=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:o;this._internals.setValidity(i,l,this.checkboxes[0]),e&&(this._internalValidationMsg=o),t&&this._internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[];else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.filteredCheckboxes=this.checkboxes.filter((e=>e.textContent.toLowerCase().includes(this.searchTerm))),this.checkboxes.forEach((e=>{const i=e.textContent.toLowerCase();this.limitCheckboxes&&!this.limitRevealed?i.includes(this.searchTerm)&&t<this._limitCount?(e.style.display="block",t++):e.style.display="none":i.includes(this.searchTerm)?e.style.display="block":e.style.display="none"}));const i=new CustomEvent("on-search",{detail:{searchTerm:this.searchTerm}});this.dispatchEvent(i)}_toggleRevealed(e){this.limitRevealed=e,this.filteredCheckboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed||t<this._limitCount?e.style.display="block":e.style.display="none"}));const t=new CustomEvent("on-limit-toggle",{detail:{expanded:this.limitRevealed}});this.dispatchEvent(t)}_handleSlotChange(){this.checkboxes=Array.from(this.querySelectorAll("kyn-checkbox")),this.filteredCheckboxes=this.checkboxes,this._updateChildren(),this._toggleRevealed(this.limitRevealed),this.requestUpdate()}_updateChildren(){this.checkboxes.forEach((e=>{e.disabled=this.disabled,e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0}_handleSubgroupChange(e){const t=[...this.value],{isParent:i,parentChecked:o,parentValue:l,value:r,checked:s,childValues:a}=e.detail;if(i)if(s)t.includes(r)||t.push(r),a.forEach((e=>{t.includes(e)||t.push(e)}));else{const e=t.indexOf(r);t.splice(e,1),a.forEach((e=>{const i=t.indexOf(e);-1!==i&&t.splice(i,1)}))}else{if(s)t.includes(r)||t.push(r);else{const e=t.indexOf(r);-1!==e&&t.splice(e,1)}if(o)t.includes(l)||t.push(l);else{const e=t.indexOf(l);-1!==e&&t.splice(e,1)}}console.log(t),this.value=t,this._validate(!0,!1),this._emitChangeEvent()}connectedCallback(){super.connectedCallback(),this._onConnected(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.addEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e)))}disconnectedCallback(){this._onDisconnected(),this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.removeEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e))),super.disconnectedCallback()}};m.styles=h,e([t({type:Array})],m.prototype,"value",void 0),e([t({type:Boolean})],m.prototype,"required",void 0),e([t({type:Boolean})],m.prototype,"disabled",void 0),e([t({type:Boolean})],m.prototype,"horizontal",void 0),e([t({type:Boolean})],m.prototype,"selectAll",void 0),e([t({type:Boolean})],m.prototype,"selectAllChecked",void 0),e([t({type:Boolean})],m.prototype,"selectAllIndeterminate",void 0),e([t({type:Boolean})],m.prototype,"hideLegend",void 0),e([t({type:Boolean})],m.prototype,"filterable",void 0),e([i()],m.prototype,"searchTerm",void 0),e([t({type:Boolean})],m.prototype,"limitCheckboxes",void 0),e([i()],m.prototype,"_limitCount",void 0),e([i()],m.prototype,"limitRevealed",void 0),e([t({type:Object})],m.prototype,"textStrings",void 0),e([i()],m.prototype,"_textStrings",void 0),e([i()],m.prototype,"checkboxes",void 0),e([i()],m.prototype,"filteredCheckboxes",void 0),m=e([o("kyn-checkbox-group")],m);export{m as CheckboxGroup};
+    `}willUpdate(e){e.has("textStrings")&&(this._textStrings=a(c,this.textStrings))}updated(e){if(this._onUpdated(e),e.has("name")&&this.checkboxes.forEach((e=>{e.name=this.name})),e.has("value")){this.checkboxes.forEach((e=>{e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0;const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this._internals.setFormValue(t)}e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&void 0!==e.get("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&this.checkboxes.forEach((e=>{e.invalid=this._isInvalid})),e.has("limitCheckboxes")&&void 0!==e.get("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&!this.value.length},o=this.required&&!this.value.length?"A selection is required.":"",l=""!==this.invalidText?this.invalidText:o;this._internals.setValidity(i,l,this.checkboxes[0]),e&&(this._internalValidationMsg=o),t&&this._internals.reportValidity()}_handleCheckboxChange(e){const t=e.detail.value;if("selectAll"===t)e.detail.checked?this.value=this.checkboxes.filter((e=>!e.disabled)).map((e=>e.value)):this.value=[],this.checkboxes.forEach((e=>{e.indeterminate=!1}));else{const e=[...this.value];if(e.includes(t)){const i=e.indexOf(t);e.splice(i,1)}else e.push(t);this.value=e}this._validate(!0,!1),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.filteredCheckboxes=this.checkboxes.filter((e=>e.textContent.toLowerCase().includes(this.searchTerm))),this.checkboxes.forEach((e=>{const i=e.textContent.toLowerCase();this.limitCheckboxes&&!this.limitRevealed?i.includes(this.searchTerm)&&t<this._limitCount?(e.style.display="block",t++):e.style.display="none":i.includes(this.searchTerm)?e.style.display="block":e.style.display="none"}));const i=new CustomEvent("on-search",{detail:{searchTerm:this.searchTerm}});this.dispatchEvent(i)}_toggleRevealed(e){this.limitRevealed=e,this.filteredCheckboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed||t<this._limitCount?e.style.display="block":e.style.display="none"}));const t=new CustomEvent("on-limit-toggle",{detail:{expanded:this.limitRevealed}});this.dispatchEvent(t)}_handleSlotChange(){this.checkboxes=Array.from(this.querySelectorAll("kyn-checkbox")),this.filteredCheckboxes=this.checkboxes,this._updateChildren(),this._toggleRevealed(this.limitRevealed),this.requestUpdate()}_updateChildren(){this.checkboxes.forEach((e=>{e.disabled=this.disabled,e.checked=this.value.includes(e.value)}));const e=this.checkboxes.filter((e=>e.checked)).length;this.selectAllChecked=this.checkboxes.length>0&&e===this.checkboxes.length,this.selectAllIndeterminate=e<this.checkboxes.length&&e>0}_handleSubgroupChange(e){const t=[...this.value],{isParent:i,parentChecked:o,parentValue:l,value:r,checked:s,childValues:a}=e.detail;if(i)if(s)t.includes(r)||t.push(r),a.forEach((e=>{t.includes(e)||t.push(e)}));else{const e=t.indexOf(r);t.splice(e,1),a.forEach((e=>{const i=t.indexOf(e);-1!==i&&t.splice(i,1)}))}else{if(s)t.includes(r)||t.push(r);else{const e=t.indexOf(r);-1!==e&&t.splice(e,1)}if(o)t.includes(l)||t.push(l);else{const e=t.indexOf(l);-1!==e&&t.splice(e,1)}}console.log(t),this.value=t,this._validate(!0,!1),this._emitChangeEvent()}connectedCallback(){super.connectedCallback(),this._onConnected(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.addEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e)))}disconnectedCallback(){this._onDisconnected(),this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.removeEventListener("on-checkbox-subgroup-change",(e=>this._handleSubgroupChange(e))),super.disconnectedCallback()}};m.styles=h,e([t({type:Array})],m.prototype,"value",void 0),e([t({type:Boolean})],m.prototype,"required",void 0),e([t({type:Boolean})],m.prototype,"disabled",void 0),e([t({type:Boolean})],m.prototype,"horizontal",void 0),e([t({type:Boolean})],m.prototype,"selectAll",void 0),e([t({type:Boolean})],m.prototype,"selectAllChecked",void 0),e([t({type:Boolean})],m.prototype,"selectAllIndeterminate",void 0),e([t({type:Boolean})],m.prototype,"hideLegend",void 0),e([t({type:Boolean})],m.prototype,"filterable",void 0),e([i()],m.prototype,"searchTerm",void 0),e([t({type:Boolean})],m.prototype,"limitCheckboxes",void 0),e([i()],m.prototype,"_limitCount",void 0),e([i()],m.prototype,"limitRevealed",void 0),e([t({type:Object})],m.prototype,"textStrings",void 0),e([i()],m.prototype,"_textStrings",void 0),e([i()],m.prototype,"checkboxes",void 0),e([i()],m.prototype,"filteredCheckboxes",void 0),m=e([o("kyn-checkbox-group")],m);export{m as CheckboxGroup};
 //# sourceMappingURL=checkboxGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } 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';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\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.\n * @fires on-search - Captures the search input event and emits the search term.\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = CheckboxGroupScss;\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  checkboxes: Array<any> = [];\n\n  @state()\n  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            <slot name=\"label\"></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                  <kd-icon\n                    .icon=\"${errorIcon}\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                  ></kd-icon>\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    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\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      // sync \"Select All\" checkbox state\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n\n      // set form data value\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    if (changedProps.has('required')) {\n      // set required for each checkbox\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      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first checkbox\n    this._internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.checkboxes[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\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    } 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  // override _handleFormdata = (e: any) => {\n  //   this.value.forEach((value) => {\n  //     e.formData.append(this.name, value);\n  //   });\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.searchTerm = '';\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    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n    this._updateChildren();\n    this._toggleRevealed(this.limitRevealed);\n    this.requestUpdate();\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled;\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    // sync \"Select All\" checkbox state\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    // sync \"Select All\" indeterminate state\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\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    console.log(newValues);\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","FormMixin","LitElement","constructor","this","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","checkboxes","filteredCheckboxes","render","html","e","_handleFilter","_isInvalid","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","name","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","undefined","get","invalid","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","Array","from","querySelectorAll","_updateChildren","requestUpdate","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","console","log","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","CheckboxGroupScss","__decorate","property","type","prototype","Boolean","state","Object","customElement"],"mappings":"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"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { LitElement, html } 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';\n\nimport '../textInput';\nimport './checkbox';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\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.\n * @fires on-search - Captures the search input event and emits the search term.\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = CheckboxGroupScss;\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  checkboxes: Array<any> = [];\n\n  @state()\n  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            <slot name=\"label\"></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                  <kd-icon\n                    .icon=\"${errorIcon}\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                  ></kd-icon>\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    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('name')) {\n      // set name for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each checkbox\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      // sync \"Select All\" checkbox state\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n\n      // set form data value\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    if (changedProps.has('required')) {\n      // set required for each checkbox\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      // set disabled for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first checkbox\n    this._internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.checkboxes[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\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  // override _handleFormdata = (e: any) => {\n  //   this.value.forEach((value) => {\n  //     e.formData.append(this.name, value);\n  //   });\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.searchTerm = '';\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    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n    this._updateChildren();\n    this._toggleRevealed(this.limitRevealed);\n    this.requestUpdate();\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled;\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    // sync \"Select All\" checkbox state\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    // sync \"Select All\" indeterminate state\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\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    console.log(newValues);\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","FormMixin","LitElement","constructor","this","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","checkboxes","filteredCheckboxes","render","html","e","_handleFilter","_isInvalid","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","name","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","undefined","get","invalid","_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","Array","from","querySelectorAll","_updateChildren","requestUpdate","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","console","log","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","CheckboxGroupScss","__decorate","property","type","prototype","Boolean","state","Object","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.48.2",
+  "version": "1.48.4",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",
@@ -17,8 +17,7 @@
     "build-storybook": "storybook build",
     "build": "rollup -c && npm run sass-build",
     "sass-utility": "sass --no-source-map --style=compressed src/common/scss/utility:dist/common/css",
-    "sass-root": "sass --no-source-map --style=compressed src/common/scss/root.scss:dist/common/css/root.css",
-    "sass-build": "npm run sass-utility && npm run sass-root",
+    "sass-build": "npm run sass-utility",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint . --ext .js,.ts",
     "lint:lit-analyzer": "lit-analyzer",
@@ -89,8 +88,8 @@
     "chromatic": "^11.2.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.3",
-    "eslint": "^8.31.0",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "lit-analyzer": "^2.0.3",

package/common/css/root.css

@@ -1 +0,0 @@
-:root{--kd-z-overlay: 100000;--kd-z-header: 10000;--kd-z-local-nav: 9000}:root{--kd-header-height: 56px;--kd-local-nav-width: 56px;--kd-local-nav-width-expanded: 320px}

package/common/scss/root.scss

@@ -1 +0,0 @@
-@use './variables/index.scss';

package/common/scss/variables/index.scss

@@ -1,2 +0,0 @@
-@use 'zindex.scss';
-@use 'misc.scss';

package/common/scss/variables/misc.scss

@@ -1,5 +0,0 @@
-:root {
-  --kd-header-height: 56px;
-  --kd-local-nav-width: 56px;
-  --kd-local-nav-width-expanded: 320px;
-}

package/common/scss/variables/zindex.scss

@@ -1,5 +0,0 @@
-:root {
-  --kd-z-overlay: 100000;
-  --kd-z-header: 10000;
-  --kd-z-local-nav: 9000;
-}