@kyndryl-design-system/shidoka-applications 1.3.1 → 1.3.3

package/README.md

@@ -89,3 +89,22 @@ Some options for React wrapper libraries:
 When using with an SSR framework like Next.js, you will encounter errors with code that only runs client-side, like `window` references for example. This is because web components cannot render on the server. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c) and [How to entirely disable server-side rendering in next.js v13?](https://stackoverflow.com/questions/75406728/how-to-entirely-disable-server-side-rendering-in-next-js-v13). Basically, they need their rendering deferred to only happen on the client-side.
 
 Here is some additional information about why SSR does not work for web components, and some potential polyfills/solutions to enable server rendering: https://lit.dev/docs/ssr/overview/
+
+### Handling `Failed to execute 'define' on 'CustomElementRegistry'`
+
+#### The Problem
+
+This is a common bundling issue that can appear when you incorporate a component that has already bundled Shidoka components. Typically this would be caused by having a middle layer, for example a Common UI layer that has a cross-platform Header component built using Shidoka components.
+
+#### Avoiding This
+
+You can get around this in by not declaring Shidoka components as dependencies, and instead declaring them as external or peer dependencies in the middle/common layer.
+
+For example, from the shidoka-applications rollup.js config using [the external option](https://rollupjs.org/configuration-options/#external): `external: [/shidoka-foundation\/components/]`. Since shidoka-foundation components are used within shidoka-applications components, this prevents the foundation components from being bundled, meaning it leaves the import statements unaltered (ex: `import '@kyndryl-design-system/...'`). This way, the application bundler can handle it instead.
+
+This works with bundling from node_modules, but not with CDN hosted files since the deployed application wouldn't know how to resolve aliased node_modules imports like: `import '@kyndryl-design-system/...'`. In this case you probably need a workaround.
+
+#### Workaround
+
+If for some reason the above suggestion does not help, there is a library containing a script/polyfill that can be used which allows custom elements to be redefined:
+https://github.com/caridy/redefine-custom-elements.

package/components/global/header/headerLink.d.ts

@@ -29,22 +29,17 @@ export declare class HeaderLink extends LitElement {
      * @ignore
      */
     breakpointHit: boolean;
-    /**
-     * Evaluates to true if level 2 links are slotted inside to generate a flyout menu.
-     * @ignore
-     */
-    isSlotted: boolean;
     /**
      * Queries any slotted HTML elements.
      * @ignore
      */
     slottedElements: Array<HTMLElement>;
     render(): import("lit-html").TemplateResult<1>;
+    private _handleLinksSlotChange;
     private handlePointerEnter;
     private handlePointerLeave;
     private handleClick;
     private handleClickOut;
-    private determineIfSlotted;
     private determineLevel;
     firstUpdated(): void;
     connectedCallback(): void;

package/components/global/header/headerLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,mDAAmD;IAEnD,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IA8Cf,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,cAAc;IASb,YAAY;IAKZ,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,UAAU,CAAC;KACnC;CACF"}
+{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,mDAAmD;IAEnD,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IAkDf,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IASb,YAAY;IAIZ,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,UAAU,CAAC;KACnC;CACF"}

package/components/global/header/headerLink.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as d}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as a}from"../../../common/helpers/helpers.js";import p from"./headerLink.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/caret--down/16.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.breakpointHit=!1,this.isSlotted=!1}render(){const e={menu:this.isSlotted,"breakpoint-hit":this.breakpointHit,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,"level--1":1==this.level,"level--2":2==this.level,interactive:1==this.level&&this.breakpointHit},o={menu__content:this.breakpointHit,static:!this.breakpointHit,slotted:this.slottedElements.length};return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as d}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as a}from"../../../common/helpers/helpers.js";import p from"./headerLink.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/caret--down/16.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.breakpointHit=!1}render(){const e={menu:this.slottedElements.length,"breakpoint-hit":this.breakpointHit,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,"level--1":1==this.level,"level--2":2==this.level,interactive:1==this.level&&this.breakpointHit},o={menu__content:this.breakpointHit,static:!this.breakpointHit,slotted:this.slottedElements.length};return t`
       <div
         class="${r(e)}"
         @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -15,7 +15,11 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
 
           ${this.slottedElements.length&&this.breakpointHit?t` <kd-icon .icon=${h}></kd-icon> `:null}
         </a>
-        <slot name="links" class=${r(o)}></slot>
+        <slot
+          name="links"
+          class=${r(o)}
+          @slotchange=${this._handleLinksSlotChange}
+        ></slot>
       </div>
-    `}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&(this.open=!1)}handleClick(e){let t=!1;this.slottedElements.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}determineIfSlotted(){this.isSlotted=!!this.slottedElements.length}determineLevel(){const e=this.shadowRoot.host.parentNode.nodeName;this.level="KYN-HEADER-NAV"==e?1:2}firstUpdated(){this.determineIfSlotted(),this.determineLevel()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",a((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",a((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=d("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};m.styles=p,e([s({type:Boolean})],m.prototype,"open",void 0),e([s({type:String})],m.prototype,"href",void 0),e([s({type:String})],m.prototype,"target",void 0),e([s({type:String})],m.prototype,"rel",void 0),e([s({type:Boolean})],m.prototype,"isActive",void 0),e([n()],m.prototype,"level",void 0),e([s({type:Boolean})],m.prototype,"divider",void 0),e([n()],m.prototype,"breakpointHit",void 0),e([n()],m.prototype,"isSlotted",void 0),e([l({slot:"links"})],m.prototype,"slottedElements",void 0),m=e([o("kyn-header-link")],m);export{m as HeaderLink};
+    `}_handleLinksSlotChange(){this.determineLevel(),this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&(this.open=!1)}handleClick(e){let t=!1;this.slottedElements.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}determineLevel(){const e=this.shadowRoot.host.parentNode.nodeName;this.level="KYN-HEADER-NAV"==e?1:2}firstUpdated(){this.determineLevel()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",a((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",a((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=d("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};m.styles=p,e([s({type:Boolean})],m.prototype,"open",void 0),e([s({type:String})],m.prototype,"href",void 0),e([s({type:String})],m.prototype,"target",void 0),e([s({type:String})],m.prototype,"rel",void 0),e([s({type:Boolean})],m.prototype,"isActive",void 0),e([n()],m.prototype,"level",void 0),e([s({type:Boolean})],m.prototype,"divider",void 0),e([n()],m.prototype,"breakpointHit",void 0),e([l({slot:"links"})],m.prototype,"slottedElements",void 0),m=e([o("kyn-header-link")],m);export{m as HeaderLink};
 //# sourceMappingURL=headerLink.js.map

package/components/global/header/headerLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.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 { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/caret--down/16';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /**\n   * Determines if menu should be a flyout or inline depending on screen size.\n   * @ignore\n   */\n  @state()\n  breakpointHit = false;\n\n  /**\n   * Evaluates to true if level 2 links are slotted inside to generate a flyout menu.\n   * @ignore\n   */\n  @state()\n  isSlotted = false;\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: this.isSlotted,\n      'breakpoint-hit': this.breakpointHit,\n      divider: this.divider,\n      open: this.open,\n    };\n\n    const linkClasses = {\n      'nav-link': true,\n      active: this.isActive,\n      'level--1': this.level == 1,\n      'level--2': this.level == 2,\n      interactive: this.level == 1 && this.breakpointHit,\n    };\n\n    const slotClasses = {\n      menu__content: this.breakpointHit,\n      static: !this.breakpointHit,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n      >\n        <a\n          target=${this.target}\n          rel=${this.rel}\n          href=${this.href}\n          class=${classMap(linkClasses)}\n          @click=${(e: Event) => this.handleClick(e)}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot></slot>\n\n          ${this.slottedElements.length && this.breakpointHit\n            ? html` <kd-icon .icon=${downIcon}></kd-icon> `\n            : null}\n        </a>\n        <slot name=\"links\" class=${classMap(slotClasses)}></slot>\n      </div>\n    `;\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      this.open = true;\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      this.open = false;\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.slottedElements.length) {\n      preventDefault = true;\n      e.preventDefault();\n      this.open = !this.open;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e, defaultPrevented: preventDefault },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  private determineIfSlotted() {\n    this.isSlotted = this.slottedElements.length ? true : false;\n  }\n\n  private determineLevel() {\n    const parentTagName = this.shadowRoot!.host.parentNode!.nodeName;\n    if (parentTagName == 'KYN-HEADER-NAV') {\n      this.level = 1;\n    } else {\n      this.level = 2;\n    }\n  }\n\n  override firstUpdated() {\n    this.determineIfSlotted();\n    this.determineLevel();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    this.testBreakpoint();\n    window?.addEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private testBreakpoint() {\n    const nav = querySelectorDeep('kyn-header');\n    if (nav) {\n      this.breakpointHit = nav!.breakpointHit;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-nav-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","breakpointHit","isSlotted","render","classes","menu","linkClasses","active","interactive","slotClasses","menu__content","static","slotted","slottedElements","length","html","classMap","e","handlePointerLeave","handleClick","handlePointerEnter","downIcon","pointerType","preventDefault","event","CustomEvent","detail","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","includes","determineIfSlotted","determineLevel","parentTagName","shadowRoot","host","parentNode","nodeName","firstUpdated","connectedCallback","super","document","addEventListener","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","nav","querySelectorDeep","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}
+{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.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 { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/caret--down/16';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /**\n   * Determines if menu should be a flyout or inline depending on screen size.\n   * @ignore\n   */\n  @state()\n  breakpointHit = false;\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: this.slottedElements.length,\n      'breakpoint-hit': this.breakpointHit,\n      divider: this.divider,\n      open: this.open,\n    };\n\n    const linkClasses = {\n      'nav-link': true,\n      active: this.isActive,\n      'level--1': this.level == 1,\n      'level--2': this.level == 2,\n      interactive: this.level == 1 && this.breakpointHit,\n    };\n\n    const slotClasses = {\n      menu__content: this.breakpointHit,\n      static: !this.breakpointHit,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n      >\n        <a\n          target=${this.target}\n          rel=${this.rel}\n          href=${this.href}\n          class=${classMap(linkClasses)}\n          @click=${(e: Event) => this.handleClick(e)}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot></slot>\n\n          ${this.slottedElements.length && this.breakpointHit\n            ? html` <kd-icon .icon=${downIcon}></kd-icon> `\n            : null}\n        </a>\n        <slot\n          name=\"links\"\n          class=${classMap(slotClasses)}\n          @slotchange=${this._handleLinksSlotChange}\n        ></slot>\n      </div>\n    `;\n  }\n\n  private _handleLinksSlotChange() {\n    this.determineLevel();\n    this.requestUpdate();\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      this.open = true;\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      this.open = false;\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.slottedElements.length) {\n      preventDefault = true;\n      e.preventDefault();\n      this.open = !this.open;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e, defaultPrevented: preventDefault },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  private determineLevel() {\n    const parentTagName = this.shadowRoot!.host.parentNode!.nodeName;\n    if (parentTagName == 'KYN-HEADER-NAV') {\n      this.level = 1;\n    } else {\n      this.level = 2;\n    }\n  }\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    this.testBreakpoint();\n    window?.addEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private testBreakpoint() {\n    const nav = querySelectorDeep('kyn-header');\n    if (nav) {\n      this.breakpointHit = nav!.breakpointHit;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-nav-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","breakpointHit","render","classes","menu","slottedElements","length","linkClasses","active","interactive","slotClasses","menu__content","static","slotted","html","classMap","e","handlePointerLeave","handleClick","handlePointerEnter","downIcon","_handleLinksSlotChange","determineLevel","requestUpdate","pointerType","preventDefault","event","CustomEvent","detail","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","includes","parentTagName","shadowRoot","host","parentNode","nodeName","firstUpdated","connectedCallback","super","document","addEventListener","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","nav","querySelectorDeep","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,sBAAsB;IAEtB,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB,oEAAoE;IAEpE,aAAa,UAAS;IAEb,MAAM;IAsBf,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,sBAAsB;IAEtB,KAAK,SAAM;IAEX;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB,oEAAoE;IAEpE,aAAa,UAAS;IAEb,MAAM;IAuBf,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/checkbox/checkbox.js

@@ -1,8 +1,9 @@
 import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as l}from'./../../../external/lit-html/directives/class-map.js';import d from"./checkbox.scss.js";let n=class extends i{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.required=!1,this.disabled=!1,this.invalid=!1,this.visiblyHidden=!1,this.indeterminate=!1}render(){return t`
       <label ?disabled=${this.disabled} ?invalid=${this.invalid}>
-        <span class=${l({"sr-only":this.visiblyHidden})}
-          ><slot></slot
-        ></span>
+        <span class=${l({"sr-only":this.visiblyHidden})}>
+          <slot></slot>
+        </span>
+
         <input
           type="checkbox"
           name=${this.name}

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}\n          ><slot></slot\n        ></span>\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"sqBAWO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAKLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAMPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CAqCjB,CAnCUC,SACP,OAAOC,CAAI;yBACUV,KAAKK,qBAAqBL,KAAKM;sBAClCK,EAAS,CAAE,UAAWX,KAAKO;;;;;iBAKhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEOK,aAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GApFejB,EAAMyB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP9B,EAAA+B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR9B,EAAA+B,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIhC,EAAA+B,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIhC,EAAA+B,UAAA,qBAAA,GAjDX/B,EAAQ2B,EAAA,CADpBM,EAAc,iBACFjC"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n  static override styles = CheckboxScss;\n\n  /** Checkbox value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Checkbox name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Checkbox checked state, inherited from the parent group if value matches.\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Checkbox disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Checkbox group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * Determines whether the label should be hidden from visual view but remain accessible\n   * to screen readers for accessibility purposes.\n   */\n  @property({ type: Boolean })\n  visiblyHidden = false;\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean })\n  indeterminate = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n          <slot></slot>\n        </span>\n\n        <input\n          type=\"checkbox\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n          .indeterminate=${this.indeterminate}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-checkbox-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox': Checkbox;\n  }\n}\n"],"names":["Checkbox","LitElement","constructor","this","value","name","checked","required","disabled","invalid","visiblyHidden","indeterminate","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","CheckboxScss","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"sqBAWO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAKLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAMPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,EAOVN,KAAaO,eAAG,EAIhBP,KAAaQ,eAAG,CAsCjB,CApCUC,SACP,OAAOC,CAAI;yBACUV,KAAKK,qBAAqBL,KAAKM;sBAClCK,EAAS,CAAE,UAAWX,KAAKO;;;;;;iBAMhCP,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLM,GAAWZ,KAAKa,aAAaD;2BACvBZ,KAAKQ;;;KAI7B,CAEOK,aAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNf,QAASS,EAAEO,OAAOhB,QAClBF,MAAOW,EAAEO,OAAOlB,MAChBmB,UAAWR,KAGfZ,KAAKqB,cAAcP,EACpB,GArFejB,EAAMyB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP9B,EAAA+B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR9B,EAAA+B,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDhC,EAAA+B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFhC,EAAA+B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIhC,EAAA+B,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACIhC,EAAA+B,UAAA,qBAAA,GAjDX/B,EAAQ2B,EAAA,CADpBM,EAAc,iBACFjC"}

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

@@ -1,4 +1,6 @@
 import { LitElement } from 'lit';
+import '../textInput';
+import './checkbox';
 import '@kyndryl-design-system/shidoka-foundation/components/icon';
 /**
  * Checkbox group container.
@@ -21,6 +23,30 @@ export declare class CheckboxGroup extends LitElement {
     required: boolean;
     /** Checkbox group disabled state. */
     disabled: boolean;
+    /** Checkbox group horizontal style. */
+    horizontal: boolean;
+    /** Adds a "Select All" checkbox to the top of the group. */
+    selectAll: boolean;
+    /** Hide the group legend/label visually. */
+    hideLegend: boolean;
+    /** Adds a search input to enable filtering of checkboxes. */
+    filterable: boolean;
+    /** Filter text input value.
+     * @internal
+     */
+    searchTerm: string;
+    /** Limits visible checkboxes (4) behind a "Show all" button. */
+    limitCheckboxes: boolean;
+    /** Checkbox limit visibility.
+     * @internal
+     */
+    limitRevealed: boolean;
+    /** Text string customization. */
+    textStrings: {
+        selectAll: string;
+        showMore: string;
+        showLess: string;
+    };
     /** Checkbox group invalid text. */
     invalidText: string;
     /**
@@ -47,7 +73,10 @@ export declare class CheckboxGroup extends LitElement {
     updated(changedProps: any): void;
     private _validate;
     private _handleCheckboxChange;
+    private _emitChangeEvent;
     private _handleFormdata;
+    private _handleFilter;
+    private _toggleRevealed;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

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;AASvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsBN,OAAO,CAAC,YAAY,EAAE,GAAG;IAmDlC,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAejB,oBAAoB;CAa9B;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;AASvC,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAqB;IAE3C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,qCAAqC;IAErC,IAAI,SAAM;IAEV,sCAAsC;IAEtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAM;IAEvB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,UAAU,UAAS;IAEnB,4DAA4D;IAE5D,SAAS,UAAS;IAElB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,6DAA6D;IAE7D,UAAU,UAAS;IAEnB;;OAEG;IAEH,UAAU,SAAM;IAEhB,gEAAgE;IAEhE,eAAe,UAAS;IAExB;;OAEG;IAEH,aAAa,UAAS;IAEtB,iCAAiC;IAEjC,WAAW;;;;MAIT;IAEF,mCAAmC;IAEnC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAoEN,OAAO,CAAC,YAAY,EAAE,GAAG;IAuDlC,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,eAAe;IAoBd,iBAAiB;IAejB,oBAAoB;CAa9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

package/components/reusable/checkbox/checkboxGroup.js

@@ -1,11 +1,48 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as o}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./checkboxGroup.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/warning--filled/16.js';let d=class extends i{constructor(){super(...arguments),this.name="",this.value=[],this.required=!1,this.disabled=!1,this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as a}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import n from"./checkboxGroup.scss.js";import"../textInput/textInput.js";import"./checkbox.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/warning--filled/16.js';let h=class extends i{constructor(){super(...arguments),this.name="",this.value=[],this.required=!1,this.disabled=!1,this.horizontal=!1,this.selectAll=!1,this.hideLegend=!1,this.filterable=!1,this.searchTerm="",this.limitCheckboxes=!1,this.limitRevealed=!1,this.textStrings={selectAll:"Select all",showMore:"Show more",showLess:"Show less"},this.invalidText="",this.internals=this.attachInternals(),this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
       <fieldset ?disabled=${this.disabled}>
-        <legend>
-          ${this.required?t`<span class="required">*</span>`:null}
-          <slot name="label"></slot>
-        </legend>
+        ${this.filterable?t`
+              <kyn-text-input
+                class="search"
+                type="search"
+                size="sm"
+                placeholder="Search"
+                hideLabel
+                value=${this.searchTerm}
+                @on-input=${e=>this._handleFilter(e)}
+              ></kyn-text-input>
+            `:null}
+
+        <div class="${this.horizontal?"horizontal":""}">
+          <legend class="${this.hideLegend?"sr-only":""}">
+            ${this.required?t`<span class="required">*</span>`:null}
+            <slot name="label"></slot>
+          </legend>
+
+          ${this.selectAll?t`
+                <kyn-checkbox
+                  class="select-all"
+                  value="selectAll"
+                  ?required=${this.required}
+                  ?disabled=${this.disabled}
+                  ?invalid=${""!==this.invalidText||""!==this.internalValidationMsg}
+                >
+                  ${this.textStrings.selectAll}
+                </kyn-checkbox>
+              `:null}
+
+          <slot></slot>
 
-        <slot></slot>
+          ${this.limitCheckboxes?t`
+                <button
+                  class="reveal-toggle"
+                  @click=${()=>this._toggleRevealed(!this.limitRevealed)}
+                >
+                  ${this.limitRevealed?this.textStrings.showLess:t`
+                        ${this.textStrings.showMore} (${this.checkboxes.length})
+                      `}
+                </button>
+              `:null}
+        </div>
 
         ${this.isInvalid?t`
               <div class="error">
@@ -14,5 +51,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
               </div>
             `:null}
       </fieldset>
-    `}updated(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)})),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid})))}_validate(){this.required&&(this.value.length?(this.internals.setValidity({}),this.internalValidationMsg=""):(this.internals.setValidity({valueMissing:!0},"A selection is required."),this.internalValidationMsg=this.internals.validationMessage))}_handleCheckboxChange(e){const t=e.detail.value,i=[...this.value];if(i.includes(t)){const e=i.indexOf(t);i.splice(e,1)}else i.push(t);this.value=i,this._validate();const s=new CustomEvent("on-checkbox-group-change",{detail:{value:i}});this.dispatchEvent(s)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};d.styles=l,d.formAssociated=!0,e([a({type:String})],d.prototype,"name",void 0),e([a({type:Array})],d.prototype,"value",void 0),e([a({type:Boolean})],d.prototype,"required",void 0),e([a({type:Boolean})],d.prototype,"disabled",void 0),e([a({type:String})],d.prototype,"invalidText",void 0),e([o()],d.prototype,"checkboxes",void 0),e([n()],d.prototype,"internals",void 0),e([n()],d.prototype,"internalValidationMsg",void 0),e([n()],d.prototype,"isInvalid",void 0),d=e([s("kyn-checkbox-group")],d);export{d as CheckboxGroup};
+    `}updated(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)})),e.has("required")&&this.checkboxes.forEach((e=>{e.required=this.required})),e.has("disabled")&&this.checkboxes.forEach((e=>{e.disabled=this.disabled})),(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg,this.checkboxes.forEach((e=>{e.invalid=this.isInvalid}))),e.has("limitCheckboxes")&&this._toggleRevealed(!1)}_validate(){this.required&&(this.value.length?(this.internals.setValidity({}),this.internalValidationMsg=""):(this.internals.setValidity({valueMissing:!0},"A selection is required."),this.internalValidationMsg=this.internals.validationMessage))}_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(),this._emitChangeEvent()}_emitChangeEvent(){const e=new CustomEvent("on-checkbox-group-change",{detail:{value:this.value}});this.dispatchEvent(e)}_handleFormdata(e){this.value.forEach((t=>{e.formData.append(this.name,t)}))}_handleFilter(e){let t=0;this.searchTerm=e.detail.value.toLowerCase(),this.checkboxes.forEach((e=>{const i=e.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let s="";for(let e=0;e<i.length;e++)s+=i[e].textContent.trim();this.limitCheckboxes&&!this.limitRevealed?s.toLowerCase().includes(this.searchTerm)&&t<4?(e.style.display="block",t++):e.style.display="none":s.toLowerCase().includes(this.searchTerm)?e.style.display="block":e.style.display="none"}))}_toggleRevealed(e){this.limitRevealed=e,this.searchTerm="",this.checkboxes.forEach(((e,t)=>{!this.limitCheckboxes||this.limitRevealed?e.style.display="block":e.style.display=t<4?"block":"none"}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};h.styles=n,h.formAssociated=!0,e([l({type:String})],h.prototype,"name",void 0),e([l({type:Array})],h.prototype,"value",void 0),e([l({type:Boolean})],h.prototype,"required",void 0),e([l({type:Boolean})],h.prototype,"disabled",void 0),e([l({type:Boolean})],h.prototype,"horizontal",void 0),e([l({type:Boolean})],h.prototype,"selectAll",void 0),e([l({type:Boolean})],h.prototype,"hideLegend",void 0),e([l({type:Boolean})],h.prototype,"filterable",void 0),e([o()],h.prototype,"searchTerm",void 0),e([l({type:Boolean})],h.prototype,"limitCheckboxes",void 0),e([o()],h.prototype,"limitRevealed",void 0),e([l({type:Object})],h.prototype,"textStrings",void 0),e([l({type:String})],h.prototype,"invalidText",void 0),e([a()],h.prototype,"checkboxes",void 0),e([o()],h.prototype,"internals",void 0),e([o()],h.prototype,"internalValidationMsg",void 0),e([o()],h.prototype,"isInvalid",void 0),h=e([s("kyn-checkbox-group")],h);export{h 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 {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  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 invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        <legend>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </legend>\n\n        <slot></slot>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\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      // 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 (changedProps.has('disabled')) {\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      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n  }\n\n  private _validate() {\n    if (this.required) {\n      if (!this.value.length) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'A selection is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n      }\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\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    this._validate();\n\n    // emit selected value\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: newValues },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFormdata(e: any) {\n    this.value.forEach((value) => {\n      e.formData.append(this.name, value);\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","errorIcon","updated","changedProps","has","checkboxes","forEach","checkbox","checked","includes","invalid","_validate","length","setValidity","valueMissing","validationMessage","_handleCheckboxChange","e","detail","newValues","index","indexOf","splice","push","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","queryAssignedElements","state","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 {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\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\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot label - Slot for label text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends LitElement {\n  static override styles = CheckboxGroupScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Checkbox input name attribute. */\n  @property({ type: String })\n  name = '';\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  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  /** 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 (4) behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    selectAll: 'Select all',\n    showMore: 'Show more',\n    showLess: 'Show less',\n  };\n\n  /** Checkbox group invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Queries for slotted checkboxes.\n   * @ignore\n   */\n  @queryAssignedElements()\n  checkboxes!: Array<any>;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=\"Search\"\n                hideLabel\n                value=${this.searchTerm}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              ></kyn-text-input>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <legend class=\"${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required ? html`<span class=\"required\">*</span>` : null}\n            <slot name=\"label\"></slot>\n          </legend>\n\n          ${this.selectAll\n            ? html`\n                <kyn-checkbox\n                  class=\"select-all\"\n                  value=\"selectAll\"\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></slot>\n\n          ${this.limitCheckboxes\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} (${this.checkboxes.length})\n                      `}\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon .icon=\"${errorIcon}\"></kd-icon>\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </fieldset>\n    `;\n  }\n\n  override updated(changedProps: any) {\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      // 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 (changedProps.has('disabled')) {\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      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n      // set invalid state for each checkbox\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this.isInvalid;\n      });\n    }\n\n    if (changedProps.has('limitCheckboxes')) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _validate() {\n    if (this.required) {\n      if (!this.value.length) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'A selection is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n      }\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();\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 _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.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const nodes = checkboxEl.shadowRoot.querySelector('slot').assignedNodes({\n        flatten: true,\n      });\n      let checkboxText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        checkboxText += nodes[i].textContent.trim();\n      }\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.toLowerCase().includes(this.searchTerm) &&\n          visibleCount < 4\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.toLowerCase().includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 4;\n\n    this.limitRevealed = revealed;\n\n    this.searchTerm = '';\n\n    this.checkboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < Limit) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["CheckboxGroup","LitElement","constructor","this","name","value","required","disabled","horizontal","selectAll","hideLegend","filterable","searchTerm","limitCheckboxes","limitRevealed","textStrings","showMore","showLess","invalidText","internals","attachInternals","internalValidationMsg","isInvalid","render","html","e","_handleFilter","_toggleRevealed","checkboxes","length","errorIcon","updated","changedProps","has","forEach","checkbox","checked","includes","invalid","_validate","setValidity","valueMissing","validationMessage","_handleCheckboxChange","detail","filter","map","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","_handleFormdata","formData","append","visibleCount","toLowerCase","checkboxEl","nodes","shadowRoot","querySelector","assignedNodes","flatten","checkboxText","i","textContent","trim","style","display","revealed","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","styles","CheckboxGroupScss","formAssociated","__decorate","property","type","String","prototype","Array","Boolean","state","Object","queryAssignedElements","customElement"],"mappings":"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"}

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

@@ -38,6 +38,12 @@ fieldset {
   padding: 0;
 }
 
+.horizontal {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+}
+
 legend {
   font-family: var(--kd-font-family-secondary);
   font-size: var(--kd-font-size-utility-3-sm);
@@ -76,6 +82,18 @@ legend {
     line-height: var(--kd-line-height-utility-3-max);
   }
 }
+.horizontal legend {
+  margin-bottom: 0;
+}
+legend.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 fieldset[disabled] legend {
   color: var(--kd-color-text-disabled);
 }
@@ -87,6 +105,36 @@ fieldset[disabled] legend {
   color: var(--kd-color-text-disabled);
 }
 
+.select-all {
+  font-weight: 500;
+}
+
+.search {
+  margin-bottom: 12px;
+}
+
+.reveal-toggle {
+  margin-top: 10px;
+  padding: 0;
+  background: none;
+  border: none;
+  font: inherit;
+  color: var(--kd-color-text-link);
+  border-radius: 2px;
+  cursor: pointer;
+  outline: 2px solid transparent;
+}
+.reveal-toggle:hover {
+  text-decoration: underline;
+  color: var(--kd-color-text-link-hover);
+}
+.reveal-toggle:active {
+  color: var(--kd-color-text-pressed);
+}
+.reveal-toggle:focus {
+  outline-color: var(--kd-color-border-focus);
+}
+
 .error {
   font-family: var(--kd-font-family-secondary);
   font-size: var(--kd-font-size-utility-3-sm);

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

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkboxGroup.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/reusable/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import './dropdownOption';
 import '@kyndryl-design-system/shidoka-foundation/components/icon';
 /**
  * Dropdown, single select.
@@ -42,6 +43,10 @@ export declare class Dropdown extends LitElement {
     invalidText: string;
     /** Hide the tags below multi-select. */
     hideTags: boolean;
+    /** Adds a "Select all" option to the top of a multi-select dropdown. */
+    selectAll: boolean;
+    /** "Select all" text customization. */
+    selectAllText: string;
     /**
      * Selected option value.
      * @ignore
@@ -124,6 +129,7 @@ export declare class Dropdown extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private updateValue;
+    private _setValidity;
     private emitValue;
     updated(changedProps: any): void;
     private _updateChildren;

package/components/reusable/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA2KN,YAAY;IAWrB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA8CnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAyFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAWrB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAyFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as a}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as h}from'./../../../external/lit-html/directives/class-map.js';import d from"./dropdown.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/24.js';import p from'./../../../external/@carbon/icons/es/warning--filled/24.js';import c from'./../../../external/@carbon/icons/es/close/24.js';import u from'./../../../external/@carbon/icons/es/close/16.js';let v=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.name="",this.open=!1,this.searchable=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.invalidText="",this.hideTags=!1,this.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as a}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as h}from'./../../../external/lit-html/directives/class-map.js';import d from"./dropdown.scss.js";import"./dropdownOption.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/24.js';import p from'./../../../external/@carbon/icons/es/warning--filled/24.js';import c from'./../../../external/@carbon/icons/es/close/24.js';import u from'./../../../external/@carbon/icons/es/close/16.js';let v=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.name="",this.open=!1,this.searchable=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.invalidText="",this.hideTags=!1,this.selectAll=!1,this.selectAllText="Select all",this.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return t`
       <div
         class="dropdown"
         ?disabled=${this.disabled}
@@ -68,6 +68,17 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
               @keydown=${e=>this.handleListKeydown(e)}
               @blur=${e=>this.handleListBlur(e)}
             >
+              ${this.multiple&&this.selectAll?t`
+                    <kyn-dropdown-option
+                      class="select-all"
+                      value="selectAll"
+                      multiple
+                      ?disabled=${this.disabled}
+                    >
+                      ${this.selectAllText}
+                    </kyn-dropdown-option>
+                  `:null}
+
               <slot
                 id="children"
                 @slotchange=${()=>this.handleSlotChange()}
@@ -117,5 +128,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           ${this.assistiveText}
         </div>
       </div>
-    `}firstUpdated(){""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item.",this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="")),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const t=e.get("value");if((this.multiple?e.has("value")&&void 0!==t&&""!==t&&t!==this.value:e.has("value")&&void 0!==t&&t!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value})),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
+    `}firstUpdated(){""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){"selectAll"===e.detail.value?(e.detail.selected?(this.value=this.options.filter((e=>!e.disabled)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._setValidity()):(this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._setValidity(),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_setValidity(){this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg=""))}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const t=e.get("value");if((this.multiple?e.has("value")&&void 0!==t&&""!==t&&t!==this.value:e.has("value")&&void 0!==t&&t!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value})),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([l({type:Boolean})],v.prototype,"selectAll",void 0),e([l({type:String})],v.prototype,"selectAllText",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
 //# sourceMappingURL=dropdown.js.map