@kyndryl-design-system/shidoka-applications 1.0.1 → 1.0.2

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

@@ -43,6 +43,7 @@ export declare class Header extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleSlotChange;
+    private handleMenuClickOut;
     private testBreakpoint;
     private handleRootLinkClick;
     private toggleNavMenu;

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,+BAAc;IAEpC,6EAA6E;IAE7E,OAAO,SAAO;IAEd,+DAA+D;IAE/D,QAAQ,SAAM;IAEd,oFAAoF;IAEpF,UAAU,SAAO;IAEjB,2FAA2F;IAE3F,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEb;;OAEG;IAEH,gBAAgB,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA2CN,iBAAiB;IAYjB,oBAAoB;IAW7B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;CAQtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,+BAAc;IAEpC,6EAA6E;IAE7E,OAAO,SAAO;IAEd,+DAA+D;IAE/D,QAAQ,SAAM;IAEd,oFAAoF;IAEpF,UAAU,SAAO;IAEjB,2FAA2F;IAE3F,OAAO,UAAS;IAEhB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEb;;OAEG;IAEH,gBAAgB,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA2CN,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,aAAa;CAQtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}

package/components/global/header/header.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 o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}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{unsafeHTML as a}from'./../../../external/lit-html/directives/unsafe-html.js';import{debounce as d}from"../../../common/helpers/helpers.js";import m from"./header.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import p from'./../../../external/@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg.js';import h from'./../../../external/@carbon/icons/es/overflow-menu--vertical/24.js';let c=class extends o{constructor(){super(...arguments),this.rootUrl="/",this.appTitle="",this.breakpoint=672,this.divider=!1,this.breakpointHit=!1,this.menuOpen=!1}render(){const e={header:!0,"breakpoint-hit":this.breakpointHit,divider:this.divider,"left-slotted":this.leftEls.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 o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}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{unsafeHTML as d}from'./../../../external/lit-html/directives/unsafe-html.js';import{debounce as a}from"../../../common/helpers/helpers.js";import m from"./header.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import p from'./../../../external/@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg.js';import c from'./../../../external/@carbon/icons/es/overflow-menu--vertical/24.js';let h=class extends o{constructor(){super(...arguments),this.rootUrl="/",this.appTitle="",this.breakpoint=672,this.divider=!1,this.breakpointHit=!1,this.menuOpen=!1}render(){const e={header:!0,"breakpoint-hit":this.breakpointHit,divider:this.divider,"left-slotted":this.leftEls.length};return t`
       <header class="${r(e)}">
         <slot name="left" @slotchange=${this.handleSlotChange}></slot>
         <a
@@ -7,7 +7,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           @click="${e=>this.handleRootLinkClick(e)}"
         >
           <slot name="logo" @slotchange=${this.handleSlotChange}>
-            ${a(p)}
+            ${d(p)}
           </slot>
 
           <span class="title">${this.appTitle}</span>
@@ -22,11 +22,11 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
                     class="menu-button interactive"
                     @click=${()=>this.toggleNavMenu()}
                   >
-                    <kd-icon .icon=${h}></kd-icon>
+                    <kd-icon .icon=${c}></kd-icon>
                   </button>
                 </div>
               `:null}
         </div>
       </header>
-    `}connectedCallback(){super.connectedCallback(),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",d((()=>{this.testBreakpoint()})))}disconnectedCallback(){null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}handleSlotChange(){this.requestUpdate()}testBreakpoint(){(null===window||void 0===window?void 0:window.innerWidth)>=this.breakpoint?this.breakpointHit=!0:this.breakpointHit=!1}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}toggleNavMenu(){this.menuOpen=!this.menuOpen;const e=new CustomEvent("on-menu-toggle",{detail:this.menuOpen});this.dispatchEvent(e)}};c.styles=m,e([s({type:String})],c.prototype,"rootUrl",void 0),e([s({type:String})],c.prototype,"appTitle",void 0),e([s({type:Number})],c.prototype,"breakpoint",void 0),e([s({type:Boolean})],c.prototype,"divider",void 0),e([n()],c.prototype,"breakpointHit",void 0),e([n()],c.prototype,"menuOpen",void 0),e([l({selector:"kyn-header-nav"})],c.prototype,"navEls",void 0),e([l()],c.prototype,"assignedElements",void 0),e([l({slot:"left"})],c.prototype,"leftEls",void 0),c=e([i("kyn-header")],c);export{c as Header};
+    `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleMenuClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",a((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleMenuClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",a((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}handleSlotChange(){this.requestUpdate()}handleMenuClickOut(e){var t;const o=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".menu-button");e.composedPath().includes(this.navEls[0])||e.composedPath().includes(o)||this.toggleNavMenu()}testBreakpoint(){(null===window||void 0===window?void 0:window.innerWidth)>=this.breakpoint?this.breakpointHit=!0:this.breakpointHit=!1}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}toggleNavMenu(){this.menuOpen=!this.menuOpen;const e=new CustomEvent("on-menu-toggle",{detail:this.menuOpen});this.dispatchEvent(e)}};h.styles=m,e([s({type:String})],h.prototype,"rootUrl",void 0),e([s({type:String})],h.prototype,"appTitle",void 0),e([s({type:Number})],h.prototype,"breakpoint",void 0),e([s({type:Boolean})],h.prototype,"divider",void 0),e([n()],h.prototype,"breakpointHit",void 0),e([n()],h.prototype,"menuOpen",void 0),e([l({selector:"kyn-header-nav"})],h.prototype,"navEls",void 0),e([l()],h.prototype,"assignedElements",void 0),e([l({slot:"left"})],h.prototype,"leftEls",void 0),h=e([i("kyn-header")],h);export{h as Header};
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.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 { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderScss from './header.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--vertical/24';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for a header panel.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = HeaderScss;\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  appTitle = '';\n\n  /** The breakpoint (in px) to convert the nav to a flyout menu for small screens. */\n  @property({ type: Number })\n  breakpoint = 672;\n\n  /** Adds a 1px shadow to the bottom of the header, for contrast with  white backgrounds. */\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  /** Small screen header nav visibility.\n   * @ignore\n   */\n  @state()\n  menuOpen = false;\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  leftEls!: any;\n\n  override render() {\n    const classes = {\n      header: true,\n      'breakpoint-hit': this.breakpointHit,\n      divider: this.divider,\n      'left-slotted': this.leftEls.length,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n\n          <span class=\"title\">${this.appTitle}</span>\n        </a>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n\n          ${!this.breakpointHit && this.navEls.length\n            ? html`\n                <div class=\"menu\">\n                  <button\n                    class=\"menu-button interactive\"\n                    @click=${() => this.toggleNavMenu()}\n                  >\n                    <kd-icon .icon=${overflowIcon}></kd-icon>\n                  </button>\n                </div>\n              `\n            : null}\n        </div>\n      </header>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.testBreakpoint();\n    window?.addEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private testBreakpoint() {\n    if (window?.innerWidth >= this.breakpoint) {\n      this.breakpointHit = true;\n    } else {\n      this.breakpointHit = false;\n    }\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private toggleNavMenu() {\n    this.menuOpen = !this.menuOpen;\n\n    const event = new CustomEvent('on-menu-toggle', {\n      detail: this.menuOpen,\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","breakpoint","divider","breakpointHit","menuOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","navEls","toggleNavMenu","overflowIcon","connectedCallback","super","testBreakpoint","window","addEventListener","debounce","disconnectedCallback","removeEventListener","requestUpdate","innerWidth","event","CustomEvent","detail","origEvent","dispatchEvent","styles","HeaderScss","__decorate","property","type","String","prototype","Number","Boolean","state","queryAssignedElements","selector","slot","customElement"],"mappings":"orCAwBO,IAAMA,EAAN,cAAqBC,EAArBC,kCAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAIXF,KAAUG,WAAG,IAIbH,KAAOI,SAAG,EAOVJ,KAAaK,eAAG,EAMhBL,KAAQM,UAAG,CAiHZ,CA7FUC,SACP,MAAMC,EAAU,CACdC,QAAQ,EACR,iBAAkBT,KAAKK,cACvBD,QAASJ,KAAKI,QACd,eAAgBJ,KAAKU,QAAQC,QAG/B,OAAOC,CAAI;uBACQC,EAASL;wCACQR,KAAKc;;kBAE3Bd,KAAKC;;oBAEFc,GAAaf,KAAKgB,oBAAoBD;;0CAEjBf,KAAKc;cACjCG,EAAWC;;;gCAGOlB,KAAKE;;;;8BAIPF,KAAKc;;aAEtBd,KAAKK,eAAiBL,KAAKmB,OAAOR,OACjCC,CAAI;;;;6BAIW,IAAMZ,KAAKoB;;qCAEHC;;;gBAIvB;;;KAIX,CAEQC,oBACPC,MAAMD,oBAENtB,KAAKwB,iBACL,OAAAC,aAAA,IAAAA,QAAAA,OAAQC,iBACN,SACAC,GAAS,KACP3B,KAAKwB,gBAAgB,IAG1B,CAEQI,uBACP,OAAAH,aAAA,IAAAA,QAAAA,OAAQI,oBACN,SACAF,GAAS,KACP3B,KAAKwB,gBAAgB,KAIzBD,MAAMK,sBACP,CAEOd,mBACNd,KAAK8B,eACN,CAEON,kBACF,OAAAC,aAAA,IAAAA,YAAA,EAAAA,OAAQM,aAAc/B,KAAKG,WAC7BH,KAAKK,eAAgB,EAErBL,KAAKK,eAAgB,CAExB,CAEOW,oBAAoBD,GAC1B,MAAMiB,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAWpB,KAEvBf,KAAKoC,cAAcJ,EACpB,CAEOZ,gBACNpB,KAAKM,UAAYN,KAAKM,SAEtB,MAAM0B,EAAQ,IAAIC,YAAY,iBAAkB,CAC9CC,OAAQlC,KAAKM,WAEfN,KAAKoC,cAAcJ,EACpB,GA7IenC,EAAMwC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJ7C,EAAA8C,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJ7C,EAAA8C,UAAA,gBAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACD/C,EAAA8C,UAAA,kBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACFhD,EAAA8C,UAAA,eAAA,GAOhBJ,EAAA,CADCO,KACqBjD,EAAA8C,UAAA,qBAAA,GAMtBJ,EAAA,CADCO,KACgBjD,EAAA8C,UAAA,gBAAA,GAMjBJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,oBACtBnD,EAAA8C,UAAA,cAAA,GAMbJ,EAAA,CADCQ,KACsBlD,EAAA8C,UAAA,wBAAA,GAMvBJ,EAAA,CADCQ,EAAsB,CAAEE,KAAM,UACjBpD,EAAA8C,UAAA,eAAA,GAhDH9C,EAAM0C,EAAA,CADlBW,EAAc,eACFrD"}
+{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.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 { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderScss from './header.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--vertical/24';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for a header panel.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n  static override styles = HeaderScss;\n\n  /** URL for the header logo link. Should target the application home page. */\n  @property({ type: String })\n  rootUrl = '/';\n\n  /** App title text next to logo.  Hidden on smaller screens. */\n  @property({ type: String })\n  appTitle = '';\n\n  /** The breakpoint (in px) to convert the nav to a flyout menu for small screens. */\n  @property({ type: Number })\n  breakpoint = 672;\n\n  /** Adds a 1px shadow to the bottom of the header, for contrast with  white backgrounds. */\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  /** Small screen header nav visibility.\n   * @ignore\n   */\n  @state()\n  menuOpen = false;\n\n  /** Queries for slotted header-nav.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-header-nav' })\n  navEls!: any;\n\n  /** Queries for all slotted elements.\n   * @internal\n   */\n  @queryAssignedElements()\n  assignedElements!: any;\n\n  /** Queries for elements in left slot.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'left' })\n  leftEls!: any;\n\n  override render() {\n    const classes = {\n      header: true,\n      'breakpoint-hit': this.breakpointHit,\n      divider: this.divider,\n      'left-slotted': this.leftEls.length,\n    };\n\n    return html`\n      <header class=\"${classMap(classes)}\">\n        <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n        <a\n          href=\"${this.rootUrl}\"\n          class=\"logo-link interactive\"\n          @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n        >\n          <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n            ${unsafeHTML(logo)}\n          </slot>\n\n          <span class=\"title\">${this.appTitle}</span>\n        </a>\n\n        <div class=\"header__right\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n\n          ${!this.breakpointHit && this.navEls.length\n            ? html`\n                <div class=\"menu\">\n                  <button\n                    class=\"menu-button interactive\"\n                    @click=${() => this.toggleNavMenu()}\n                  >\n                    <kd-icon .icon=${overflowIcon}></kd-icon>\n                  </button>\n                </div>\n              `\n            : null}\n        </div>\n      </header>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleMenuClickOut(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.handleMenuClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handleMenuClickOut(e: any) {\n    const button = this.shadowRoot?.querySelector('.menu-button');\n\n    if (\n      !e.composedPath().includes(this.navEls[0]) &&\n      !e.composedPath().includes(button)\n    ) {\n      this.toggleNavMenu();\n    }\n  }\n\n  private testBreakpoint() {\n    if (window?.innerWidth >= this.breakpoint) {\n      this.breakpointHit = true;\n    } else {\n      this.breakpointHit = false;\n    }\n  }\n\n  private handleRootLinkClick(e: Event) {\n    const event = new CustomEvent('on-root-link-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private toggleNavMenu() {\n    this.menuOpen = !this.menuOpen;\n\n    const event = new CustomEvent('on-menu-toggle', {\n      detail: this.menuOpen,\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header': Header;\n  }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","breakpoint","divider","breakpointHit","menuOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","navEls","toggleNavMenu","overflowIcon","connectedCallback","super","document","addEventListener","handleMenuClickOut","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","requestUpdate","button","_a","shadowRoot","querySelector","composedPath","includes","innerWidth","event","CustomEvent","detail","origEvent","dispatchEvent","styles","HeaderScss","__decorate","property","type","String","prototype","Number","Boolean","state","queryAssignedElements","selector","slot","customElement"],"mappings":"orCAwBO,IAAMA,EAAN,cAAqBC,EAArBC,kCAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAIXF,KAAUG,WAAG,IAIbH,KAAOI,SAAG,EAOVJ,KAAaK,eAAG,EAMhBL,KAAQM,UAAG,CAgIZ,CA5GUC,SACP,MAAMC,EAAU,CACdC,QAAQ,EACR,iBAAkBT,KAAKK,cACvBD,QAASJ,KAAKI,QACd,eAAgBJ,KAAKU,QAAQC,QAG/B,OAAOC,CAAI;uBACQC,EAASL;wCACQR,KAAKc;;kBAE3Bd,KAAKC;;oBAEFc,GAAaf,KAAKgB,oBAAoBD;;0CAEjBf,KAAKc;cACjCG,EAAWC;;;gCAGOlB,KAAKE;;;;8BAIPF,KAAKc;;aAEtBd,KAAKK,eAAiBL,KAAKmB,OAAOR,OACjCC,CAAI;;;;6BAIW,IAAMZ,KAAKoB;;qCAEHC;;;gBAIvB;;;KAIX,CAEQC,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUV,GAAMf,KAAK0B,mBAAmBX,KAElEf,KAAK2B,iBACL,OAAAC,aAAA,IAAAA,QAAAA,OAAQH,iBACN,SACAI,GAAS,KACP7B,KAAK2B,gBAAgB,IAG1B,CAEQG,uBACPN,SAASO,oBAAoB,SAAUhB,GAAMf,KAAK0B,mBAAmBX,KAErE,OAAAa,aAAA,IAAAA,QAAAA,OAAQG,oBACN,SACAF,GAAS,KACP7B,KAAK2B,gBAAgB,KAIzBJ,MAAMO,sBACP,CAEOhB,mBACNd,KAAKgC,eACN,CAEON,mBAAmBX,SACzB,MAAMkB,EAAwB,QAAfC,EAAAlC,KAAKmC,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,cAAc,gBAG3CrB,EAAEsB,eAAeC,SAAStC,KAAKmB,OAAO,KACtCJ,EAAEsB,eAAeC,SAASL,IAE3BjC,KAAKoB,eAER,CAEOO,kBACF,OAAAC,aAAA,IAAAA,YAAA,EAAAA,OAAQW,aAAcvC,KAAKG,WAC7BH,KAAKK,eAAgB,EAErBL,KAAKK,eAAgB,CAExB,CAEOW,oBAAoBD,GAC1B,MAAMyB,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAW5B,KAEvBf,KAAK4C,cAAcJ,EACpB,CAEOpB,gBACNpB,KAAKM,UAAYN,KAAKM,SAEtB,MAAMkC,EAAQ,IAAIC,YAAY,iBAAkB,CAC9CC,OAAQ1C,KAAKM,WAEfN,KAAK4C,cAAcJ,EACpB,GA5Je3C,EAAMgD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJrD,EAAAsD,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJrD,EAAAsD,UAAA,gBAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACDvD,EAAAsD,UAAA,kBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACFxD,EAAAsD,UAAA,eAAA,GAOhBJ,EAAA,CADCO,KACqBzD,EAAAsD,UAAA,qBAAA,GAMtBJ,EAAA,CADCO,KACgBzD,EAAAsD,UAAA,gBAAA,GAMjBJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,oBACtB3D,EAAAsD,UAAA,cAAA,GAMbJ,EAAA,CADCQ,KACsB1D,EAAAsD,UAAA,wBAAA,GAMvBJ,EAAA,CADCQ,EAAsB,CAAEE,KAAM,UACjB5D,EAAAsD,UAAA,eAAA,GAhDHtD,EAAMkD,EAAA,CADlBW,EAAc,eACF7D"}

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

@@ -15,6 +15,8 @@ export declare class LocalNavLink extends LitElement {
     expanded: boolean;
     /** Active state. */
     active: boolean;
+    /** Disabled state. */
+    disabled: boolean;
     /** Link level, supports three levels.
      * @ignore
      */

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

@@ -1 +1 @@
-{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,MAAM,UAAS;IAEf;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,YAAY,KAAM;IAElB;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM;IAkCN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAMrC,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;CAuBpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}
+{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,YAAY,KAAM;IAElB;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM;IAmCN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAMrC,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;CA2BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}

package/components/global/localNav/localNavLink.js

@@ -1,4 +1,4 @@
-import{__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 s}from'./../../../external/lit-element/lit-element.js';import{customElement as l}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as o}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import{styleMap as d}from'./../../../external/lit-html/directives/style-map.js';import r from"./localNavLink.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import p from'./../../../external/@carbon/icons/es/chevron--down/20.js';let m=class extends s{constructor(){super(...arguments),this.href="",this.expanded=!1,this.active=!1,this._level=1,this._navExpanded=!1,this.flyoutStyles={},this.isSlotted=!1}render(){const e={"level--1":1==this._level,"level--2":2==this._level,"level--3":3==this._level,"nav-expanded":this._navExpanded,"link-expanded":this.expanded,"link-active":this.active};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 s}from'./../../../external/lit-element/lit-element.js';import{customElement as l}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as o}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as n}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import{styleMap as d}from'./../../../external/lit-html/directives/style-map.js';import r from"./localNavLink.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import p from'./../../../external/@carbon/icons/es/chevron--down/20.js';let h=class extends s{constructor(){super(...arguments),this.href="",this.expanded=!1,this.active=!1,this.disabled=!1,this._level=1,this._navExpanded=!1,this.flyoutStyles={},this.isSlotted=!1}render(){const e={"level--1":1==this._level,"level--2":2==this._level,"level--3":3==this._level,"nav-expanded":this._navExpanded,"link-expanded":this.expanded,"link-active":this.active,"link-disabled":this.disabled};return t`
       <li class=${a(e)}>
         <a href=${this.href} @click=${e=>this.handleClick(e)}>
           <slot name="icon"></slot>
@@ -17,5 +17,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           <slot name="links"></slot>
         </ul>
       </li>
-    `}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}handleSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this.navLinks.forEach((e=>{e._navExpanded=this._navExpanded}))}determineLevel(){const e=this.shadowRoot.host.parentNode;"KYN-LOCAL-NAV"===e.nodeName?this._level=1:"KYN-LOCAL-NAV"===e.parentNode.nodeName?this._level=2:this._level=3}handleClick(e){let t=!1;this.navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const s=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(s)}};m.styles=r,e([o({type:String})],m.prototype,"href",void 0),e([o({type:Boolean})],m.prototype,"expanded",void 0),e([o({type:Boolean})],m.prototype,"active",void 0),e([i()],m.prototype,"_level",void 0),e([i()],m.prototype,"_navExpanded",void 0),e([i()],m.prototype,"flyoutStyles",void 0),e([i()],m.prototype,"isSlotted",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],m.prototype,"navLinks",void 0),m=e([l("kyn-local-nav-link")],m);export{m as LocalNavLink};
+    `}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}handleSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this.navLinks.forEach((e=>{e._navExpanded=this._navExpanded}))}determineLevel(){const e=this.shadowRoot.host.parentNode;"KYN-LOCAL-NAV"===e.nodeName?this._level=1:"KYN-LOCAL-NAV"===e.parentNode.nodeName?this._level=2:this._level=3}handleClick(e){let t=!1;this.disabled&&(t=!0),this.navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const s=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(s)}};h.styles=r,e([o({type:String})],h.prototype,"href",void 0),e([o({type:Boolean})],h.prototype,"expanded",void 0),e([o({type:Boolean})],h.prototype,"active",void 0),e([o({type:Boolean})],h.prototype,"disabled",void 0),e([i()],h.prototype,"_level",void 0),e([i()],h.prototype,"_navExpanded",void 0),e([i()],h.prototype,"flyoutStyles",void 0),e([i()],h.prototype,"isSlotted",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],h.prototype,"navLinks",void 0),h=e([l("kyn-local-nav-link")],h);export{h as LocalNavLink};
 //# sourceMappingURL=localNavLink.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport LocalNavLinkScss from './localNavLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport chevDownIcon from '@carbon/icons/es/chevron--down/20';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon, level 1 links only.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n  static override styles = LocalNavLinkScss;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Expanded state. */\n  @property({ type: Boolean })\n  expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  _level = 1;\n\n  /** The local nav expanded state.\n   * @internal\n   */\n  @state()\n  _navExpanded = false;\n\n  /**\n   * Positioning for the level 3 flyout.\n   * @ignore\n   */\n  @state()\n  flyoutStyles = {};\n\n  /**\n   * Determines if sub-links are slotted.\n   * @ignore\n   */\n  @state()\n  isSlotted = false;\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  navLinks!: Array<any>;\n\n  override render() {\n    const classes = {\n      'level--1': this._level == 1,\n      'level--2': this._level == 2,\n      'level--3': this._level == 3,\n      'nav-expanded': this._navExpanded,\n      'link-expanded': this.expanded,\n      'link-active': this.active,\n    };\n\n    return html`\n      <li class=${classMap(classes)}>\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          <slot name=\"icon\"></slot>\n          <span class=\"text\">\n            <slot @slotchange=${this.handleSlotChange}></slot>\n          </span>\n\n          ${this.navLinks.length\n            ? html`\n                <span class=\"arrow-icon\">\n                  <kd-icon .icon=${chevDownIcon}></kd-icon>\n                </span>\n              `\n            : null}\n        </a>\n\n        <ul style=${styleMap(this.flyoutStyles)}>\n          <slot name=\"links\"></slot>\n        </ul>\n      </li>\n    `;\n  }\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n  }\n\n  private handleSlotChange() {\n    this.updateChildren();\n    this.requestUpdate();\n  }\n\n  private updateChildren() {\n    this.navLinks.forEach((link: any) => {\n      link._navExpanded = this._navExpanded;\n    });\n  }\n\n  private determineLevel() {\n    const parentNode = this.shadowRoot!.host.parentNode;\n    if (parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 1;\n    } else if (parentNode!.parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 2;\n    } else {\n      this._level = 3;\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.navLinks.length) {\n      preventDefault = true;\n      this.expanded = !this.expanded;\n    }\n\n    if (preventDefault) {\n      e.preventDefault();\n    }\n\n    this.requestUpdate();\n\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e,\n        level: this._level,\n        defaultPrevented: preventDefault,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","expanded","active","_level","_navExpanded","flyoutStyles","isSlotted","render","classes","html","classMap","e","handleClick","handleSlotChange","navLinks","length","chevDownIcon","styleMap","firstUpdated","determineLevel","willUpdate","changedProps","has","updateChildren","requestUpdate","forEach","link","parentNode","shadowRoot","host","nodeName","preventDefault","event","CustomEvent","detail","origEvent","level","defaultPrevented","dispatchEvent","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","Boolean","state","queryAssignedElements","slot","selector","customElement"],"mappings":"ggCAsBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,KAAG,GAIPD,KAAQE,UAAG,EAIXF,KAAMG,QAAG,EAMTH,KAAMI,OAAG,EAMTJ,KAAYK,cAAG,EAOfL,KAAYM,aAAG,GAOfN,KAASO,WAAG,CAkGb,CAzFUC,SACP,MAAMC,EAAU,CACd,WAA2B,GAAfT,KAAKI,OACjB,WAA2B,GAAfJ,KAAKI,OACjB,WAA2B,GAAfJ,KAAKI,OACjB,eAAgBJ,KAAKK,aACrB,gBAAiBL,KAAKE,SACtB,cAAeF,KAAKG,QAGtB,OAAOO,CAAI;kBACGC,EAASF;kBACTT,KAAKC,eAAgBW,GAAaZ,KAAKa,YAAYD;;;gCAGrCZ,KAAKc;;;YAGzBd,KAAKe,SAASC,OACZN,CAAI;;mCAEiBO;;gBAGrB;;;oBAGMC,EAASlB,KAAKM;;;;KAK/B,CAEQa,eACPnB,KAAKoB,gBACN,CAEQC,WAAWC,GACdA,EAAaC,IAAI,iBACnBvB,KAAKwB,gBAER,CAEOV,mBACNd,KAAKwB,iBACLxB,KAAKyB,eACN,CAEOD,iBACNxB,KAAKe,SAASW,SAASC,IACrBA,EAAKtB,aAAeL,KAAKK,YAAY,GAExC,CAEOe,iBACN,MAAMQ,EAAa5B,KAAK6B,WAAYC,KAAKF,WACZ,kBAAzBA,EAAYG,SACd/B,KAAKI,OAAS,EACgC,kBAArCwB,EAAYA,WAAYG,SACjC/B,KAAKI,OAAS,EAEdJ,KAAKI,OAAS,CAEjB,CAEOS,YAAYD,GAClB,IAAIoB,GAAiB,EAEjBhC,KAAKe,SAASC,SAChBgB,GAAiB,EACjBhC,KAAKE,UAAYF,KAAKE,UAGpB8B,GACFpB,EAAEoB,iBAGJhC,KAAKyB,gBAEL,MAAMQ,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNC,UAAWxB,EACXyB,MAAOrC,KAAKI,OACZkC,iBAAkBN,KAGtBhC,KAAKuC,cAAcN,EACpB,GAvIepC,EAAM2C,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRhD,EAAAiD,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDlD,EAAAiD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACHlD,EAAAiD,UAAA,cAAA,GAMfJ,EAAA,CADCM,KACUnD,EAAAiD,UAAA,cAAA,GAMXJ,EAAA,CADCM,KACoBnD,EAAAiD,UAAA,oBAAA,GAOrBJ,EAAA,CADCM,KACiBnD,EAAAiD,UAAA,oBAAA,GAOlBJ,EAAA,CADCM,KACiBnD,EAAAiD,UAAA,iBAAA,GAOlBJ,EAAA,CADCO,EAAsB,CAAEC,KAAM,QAASC,SAAU,wBAC5BtD,EAAAiD,UAAA,gBAAA,GA9CXjD,EAAY6C,EAAA,CADxBU,EAAc,uBACFvD"}
+{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport LocalNavLinkScss from './localNavLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport chevDownIcon from '@carbon/icons/es/chevron--down/20';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon, level 1 links only.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n  static override styles = LocalNavLinkScss;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Expanded state. */\n  @property({ type: Boolean })\n  expanded = false;\n\n  /** Active state. */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Link level, supports three levels.\n   * @ignore\n   */\n  @state()\n  _level = 1;\n\n  /** The local nav expanded state.\n   * @internal\n   */\n  @state()\n  _navExpanded = false;\n\n  /**\n   * Positioning for the level 3 flyout.\n   * @ignore\n   */\n  @state()\n  flyoutStyles = {};\n\n  /**\n   * Determines if sub-links are slotted.\n   * @ignore\n   */\n  @state()\n  isSlotted = false;\n\n  /**\n   * Queries slotted links.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n  navLinks!: Array<any>;\n\n  override render() {\n    const classes = {\n      'level--1': this._level == 1,\n      'level--2': this._level == 2,\n      'level--3': this._level == 3,\n      'nav-expanded': this._navExpanded,\n      'link-expanded': this.expanded,\n      'link-active': this.active,\n      'link-disabled': this.disabled,\n    };\n\n    return html`\n      <li class=${classMap(classes)}>\n        <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n          <slot name=\"icon\"></slot>\n          <span class=\"text\">\n            <slot @slotchange=${this.handleSlotChange}></slot>\n          </span>\n\n          ${this.navLinks.length\n            ? html`\n                <span class=\"arrow-icon\">\n                  <kd-icon .icon=${chevDownIcon}></kd-icon>\n                </span>\n              `\n            : null}\n        </a>\n\n        <ul style=${styleMap(this.flyoutStyles)}>\n          <slot name=\"links\"></slot>\n        </ul>\n      </li>\n    `;\n  }\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('_navExpanded')) {\n      this.updateChildren();\n    }\n  }\n\n  private handleSlotChange() {\n    this.updateChildren();\n    this.requestUpdate();\n  }\n\n  private updateChildren() {\n    this.navLinks.forEach((link: any) => {\n      link._navExpanded = this._navExpanded;\n    });\n  }\n\n  private determineLevel() {\n    const parentNode = this.shadowRoot!.host.parentNode;\n    if (parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 1;\n    } else if (parentNode!.parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n      this._level = 2;\n    } else {\n      this._level = 3;\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.disabled) {\n      preventDefault = true;\n    }\n\n    if (this.navLinks.length) {\n      preventDefault = true;\n      this.expanded = !this.expanded;\n    }\n\n    if (preventDefault) {\n      e.preventDefault();\n    }\n\n    this.requestUpdate();\n\n    const event = new CustomEvent('on-click', {\n      detail: {\n        origEvent: e,\n        level: this._level,\n        defaultPrevented: preventDefault,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-local-nav-link': LocalNavLink;\n  }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","expanded","active","disabled","_level","_navExpanded","flyoutStyles","isSlotted","render","classes","html","classMap","e","handleClick","handleSlotChange","navLinks","length","chevDownIcon","styleMap","firstUpdated","determineLevel","willUpdate","changedProps","has","updateChildren","requestUpdate","forEach","link","parentNode","shadowRoot","host","nodeName","preventDefault","event","CustomEvent","detail","origEvent","level","defaultPrevented","dispatchEvent","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","Boolean","state","queryAssignedElements","slot","selector","customElement"],"mappings":"ggCAsBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,KAAG,GAIPD,KAAQE,UAAG,EAIXF,KAAMG,QAAG,EAITH,KAAQI,UAAG,EAMXJ,KAAMK,OAAG,EAMTL,KAAYM,cAAG,EAOfN,KAAYO,aAAG,GAOfP,KAASQ,WAAG,CAuGb,CA9FUC,SACP,MAAMC,EAAU,CACd,WAA2B,GAAfV,KAAKK,OACjB,WAA2B,GAAfL,KAAKK,OACjB,WAA2B,GAAfL,KAAKK,OACjB,eAAgBL,KAAKM,aACrB,gBAAiBN,KAAKE,SACtB,cAAeF,KAAKG,OACpB,gBAAiBH,KAAKI,UAGxB,OAAOO,CAAI;kBACGC,EAASF;kBACTV,KAAKC,eAAgBY,GAAab,KAAKc,YAAYD;;;gCAGrCb,KAAKe;;;YAGzBf,KAAKgB,SAASC,OACZN,CAAI;;mCAEiBO;;gBAGrB;;;oBAGMC,EAASnB,KAAKO;;;;KAK/B,CAEQa,eACPpB,KAAKqB,gBACN,CAEQC,WAAWC,GACdA,EAAaC,IAAI,iBACnBxB,KAAKyB,gBAER,CAEOV,mBACNf,KAAKyB,iBACLzB,KAAK0B,eACN,CAEOD,iBACNzB,KAAKgB,SAASW,SAASC,IACrBA,EAAKtB,aAAeN,KAAKM,YAAY,GAExC,CAEOe,iBACN,MAAMQ,EAAa7B,KAAK8B,WAAYC,KAAKF,WACZ,kBAAzBA,EAAYG,SACdhC,KAAKK,OAAS,EACgC,kBAArCwB,EAAYA,WAAYG,SACjChC,KAAKK,OAAS,EAEdL,KAAKK,OAAS,CAEjB,CAEOS,YAAYD,GAClB,IAAIoB,GAAiB,EAEjBjC,KAAKI,WACP6B,GAAiB,GAGfjC,KAAKgB,SAASC,SAChBgB,GAAiB,EACjBjC,KAAKE,UAAYF,KAAKE,UAGpB+B,GACFpB,EAAEoB,iBAGJjC,KAAK0B,gBAEL,MAAMQ,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNC,UAAWxB,EACXyB,MAAOtC,KAAKK,OACZkC,iBAAkBN,KAGtBjC,KAAKwC,cAAcN,EACpB,GAhJerC,EAAM4C,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRjD,EAAAkD,UAAA,YAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDnD,EAAAkD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACHnD,EAAAkD,UAAA,cAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDnD,EAAAkD,UAAA,gBAAA,GAMjBJ,EAAA,CADCM,KACUpD,EAAAkD,UAAA,cAAA,GAMXJ,EAAA,CADCM,KACoBpD,EAAAkD,UAAA,oBAAA,GAOrBJ,EAAA,CADCM,KACiBpD,EAAAkD,UAAA,oBAAA,GAOlBJ,EAAA,CADCM,KACiBpD,EAAAkD,UAAA,iBAAA,GAOlBJ,EAAA,CADCO,EAAsB,CAAEC,KAAM,QAASC,SAAU,wBAC5BvD,EAAAkD,UAAA,gBAAA,GAlDXlD,EAAY8C,EAAA,CADxBU,EAAc,uBACFxD"}

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

@@ -1,4 +1,4 @@
-import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as o}from'./../../../external/@lit/reactive-element/css-tag.js';var e=o`*,
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var o=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -47,6 +47,12 @@ a:focus {
 a:active {
   background-color: var(--kd-color-background-primary-pressed);
 }
+.link-disabled a, .nav-expanded.link-active.link-disabled a {
+  color: var(--kd-color-text-disabled);
+}
+.link-disabled a:hover, .nav-expanded.link-active.link-disabled a:hover {
+  background-color: transparent;
+}
 
 ul {
   visibility: hidden;
@@ -112,5 +118,5 @@ li {
 
 slot[name=icon]::slotted(*) {
   flex-shrink: 0;
-}`;export{e as default};
+}`;export{o as default};
 //# sourceMappingURL=localNavLink.scss.js.map

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

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

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

@@ -55,11 +55,6 @@ export declare class Dropdown extends LitElement {
      * @ignore
      */
     searchText: string;
-    /**
-     * Evaluates if options are slotted.
-     * @ignore
-     */
-    isSlotted: boolean;
     /**
      * Assistive text for screen readers.
      * @ignore
@@ -102,8 +97,12 @@ export declare class Dropdown extends LitElement {
     isInvalid: boolean;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
-    private determineIfSlotted;
-    private initialSelection;
+    private handleSlotChange;
+    /**
+     * Retrieves the selected values from the list of child options and sets value property.
+     * @function
+     */
+    private resetSelection;
     private handleClick;
     private handleButtonKeydown;
     private handleListKeydown;

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;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;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;IA6JN,YAAY;IAcrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,gBAAgB;IAsBxB,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;IAanB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBhB,iBAAiB;IA2B1B,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;CAyFnC;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,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;;;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;IA6JN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAsBtB,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;IAanB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBhB,iBAAiB;IA2B1B,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;CAyFnC;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 t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}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 o}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as l}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 r from"./dropdown.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d 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.value="",this.text="",this.searchText="",this.isSlotted=!1,this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}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 r from"./dropdown.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d 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.value="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
       <div
         class="dropdown"
         ?disabled=${this.disabled}
@@ -65,7 +65,7 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               @keydown=${t=>this.handleListKeydown(t)}
               @blur=${t=>this.handleListBlur(t)}
             >
-              <slot></slot>
+              <slot @slotchange=${()=>this.handleSlotChange()}></slot>
             </ul>
           </div>
 
@@ -111,5 +111,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
           ${this.assistiveText}
         </div>
       </div>
-    `}firstUpdated(){this.determineIfSlotted(),this.initialSelection(),""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}determineIfSlotted(){this.isSlotted=!!this.options.length}initialSelection(){const t=[];let e="";this.options.forEach((i=>{i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],o=this.options.find((t=>t.highlighted)),l=this.options.find((t=>t.selected)),a=o?this.options.indexOf(o):this.options.find((t=>t.selected))?this.options.indexOf(l):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=o||l?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.searchText="",this.searchEl.value="",this.multiple||(this.value="")}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>{this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item.",this.emitValue()})),this.addEventListener("on-blur",(t=>{const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}))}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")){if(this.multiple||(this.open=!1),this.multiple){const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this.internals.setFormValue(t)}else this.internals.setFormValue(this.value);if(this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value));this.text=t.text}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}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.invalidText=""))}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}};v.styles=r,v.formAssociated=!0,t([l()],v.prototype,"internals",void 0),t([o({type:String})],v.prototype,"size",void 0),t([o({type:Boolean})],v.prototype,"inline",void 0),t([o({type:String})],v.prototype,"caption",void 0),t([o({type:String})],v.prototype,"placeholder",void 0),t([o({type:String})],v.prototype,"name",void 0),t([o({type:Boolean})],v.prototype,"open",void 0),t([o({type:Boolean})],v.prototype,"searchable",void 0),t([o({type:Boolean})],v.prototype,"multiple",void 0),t([o({type:Boolean})],v.prototype,"required",void 0),t([o({type:Boolean})],v.prototype,"disabled",void 0),t([o({type:String})],v.prototype,"invalidText",void 0),t([l()],v.prototype,"value",void 0),t([l()],v.prototype,"text",void 0),t([l()],v.prototype,"searchText",void 0),t([l()],v.prototype,"isSlotted",void 0),t([l()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([l()],v.prototype,"internalValidationMsg",void 0),t([l()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
+    `}firstUpdated(){this.resetSelection(),""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){const t=[];let e="";this.options.forEach((i=>{i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],l=this.options.find((t=>t.highlighted)),o=this.options.find((t=>t.selected)),a=l?this.options.indexOf(l):this.options.find((t=>t.selected))?this.options.indexOf(o):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=l||o?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.searchText="",this.searchEl.value="",this.multiple||(this.value="")}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>{this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item.",this.emitValue()})),this.addEventListener("on-blur",(t=>{const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}))}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")){if(this.multiple||(this.open=!1),this.multiple){const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this.internals.setFormValue(t)}else this.internals.setFormValue(this.value);if(this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value));this.text=t.text}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}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.invalidText=""))}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}};v.styles=r,v.formAssociated=!0,t([o()],v.prototype,"internals",void 0),t([l({type:String})],v.prototype,"size",void 0),t([l({type:Boolean})],v.prototype,"inline",void 0),t([l({type:String})],v.prototype,"caption",void 0),t([l({type:String})],v.prototype,"placeholder",void 0),t([l({type:String})],v.prototype,"name",void 0),t([l({type:Boolean})],v.prototype,"open",void 0),t([l({type:Boolean})],v.prototype,"searchable",void 0),t([l({type:Boolean})],v.prototype,"multiple",void 0),t([l({type:Boolean})],v.prototype,"required",void 0),t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:String})],v.prototype,"invalidText",void 0),t([o()],v.prototype,"value",void 0),t([o()],v.prototype,"text",void 0),t([o()],v.prototype,"searchText",void 0),t([o()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([o()],v.prototype,"internalValidationMsg",void 0),t([o()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
 //# sourceMappingURL=dropdown.js.map

package/components/reusable/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n  static override styles = DropdownScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Dropdown name. */\n  @property({ type: String })\n  name = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Dropdown invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Selected option value.\n   * @ignore\n   */\n  @state()\n  value: any = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   * @ignore\n   */\n  @state()\n  searchText = '';\n\n  /**\n   * Evaluates if options are slotted.\n   * @ignore\n   */\n  @state()\n  isSlotted = false;\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\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      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              role=\"button\"\n              aria-labelledby=\"label-${this.name}\"\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.searchable ? '-1' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"Clear selections\"\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=\"Search\"\n                      value=${this.text}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    ${this.multiple\n                      ? this.placeholder\n                      : this.value === ''\n                      ? this.placeholder\n                      : this.text}\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              class=${classMap({\n                options: true,\n                open: this.open,\n              })}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              <slot></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n        </div>\n\n        ${this.multiple && this.value.length\n          ? html`\n              <div class=\"tags\">\n                ${this.value.map((value: string) => {\n                  const option = this.options.find(\n                    (option) => option.value === value\n                  );\n                  const text = option.text;\n\n                  return html`\n                    <button\n                      class=\"tag\"\n                      aria-label=\"Deselect ${text}\"\n                      @click=${() => this.handleTagClear(option.value)}\n                    >\n                      ${text}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `;\n                })}\n              </div>\n            `\n          : null}\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    this.determineIfSlotted();\n    this.initialSelection();\n\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.multiple) {\n        this.placeholder = 'Select items';\n      } else {\n        this.placeholder = 'Select an option';\n      }\n    }\n  }\n\n  private determineIfSlotted() {\n    this.isSlotted = this.options.length ? true : false;\n  }\n\n  private initialSelection() {\n    // get value from selected options\n    const values: any = [];\n    let value = '';\n    this.options.forEach((option: any) => {\n      if (option.selected) {\n        if (this.multiple) {\n          values.push(option.value);\n        } else {\n          value = option.value;\n        }\n      }\n    });\n\n    // set initial values\n    if (this.multiple) {\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const highlightedEl = this.options.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = this.options.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? this.options.indexOf(highlightedEl)\n      : this.options.find((option: any) => option.selected)\n      ? this.options.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    // open the listbox\n    if (target === 'button') {\n      const openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (openDropdown) {\n        this.open = true;\n        this.options[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        if (target === 'list') {\n          this.updateValue(\n            this.options[highlightedIndex].value,\n            !this.options[highlightedIndex].selected\n          );\n          this.assistiveText = 'Selected an item.';\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === this.options.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? this.options.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this.emitValue();\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE && option) {\n      this.updateValue(option.value, option.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    // find matches\n    const options = this.options.filter((option: any) => {\n      const text = option.text;\n      return text.toLowerCase().startsWith(value.toLowerCase());\n    });\n\n    // reset options highlighted state\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // option highlight and scroll\n    if (value !== '' && options.length) {\n      options[0].highlighted = true;\n      options[0].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => {\n      // set selected value\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n\n      // emit selected value\n      this.emitValue();\n    });\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => {\n      const relatedTarget = e.detail.origEvent.relatedTarget;\n\n      if (\n        !relatedTarget ||\n        (relatedTarget.localName !== 'kyn-dropdown-option' &&\n          relatedTarget.localName !== 'kyn-dropdown')\n      ) {\n        this.open = false;\n      }\n    });\n  }\n\n  private updateValue(value: string, selected = false) {\n    const values = JSON.parse(JSON.stringify(this.value));\n\n    // set value\n    if (this.multiple) {\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      // close listbox\n      if (!this.multiple) {\n        this.open = false;\n      }\n\n      // set form data value\n      if (this.multiple) {\n        const entries = new FormData();\n        this.value.forEach((value: string) => {\n          entries.append(this.name, value);\n        });\n        this.internals.setFormValue(entries);\n      } else {\n        this.internals.setFormValue(this.value);\n      }\n\n      // set selected state for each option\n      this.options.forEach((option: any) => {\n        if (this.multiple) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n\n      // update selected option text\n      if (!this.multiple) {\n        if (this.options.length && this.value !== '') {\n          const option = this.options.find(\n            (option) => option.value === this.value\n          );\n          this.text = option.text;\n        }\n\n        // set search input value\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        if (this.searchEl) {\n          this.searchEl.value = this.searchText;\n        }\n      }\n\n      // set validity\n      if (this.required) {\n        if (\n          !this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')\n        ) {\n          this.internals.setValidity(\n            { valueMissing: true },\n            'This field is required.'\n          );\n          this.internalValidationMsg = this.internals.validationMessage;\n        } else {\n          this.internals.setValidity({});\n          this.internalValidationMsg = '';\n          this.invalidText = '';\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","value","text","searchText","isSlotted","assistiveText","internalValidationMsg","isInvalid","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","handleListKeydown","handleListBlur","searchEl","handleClear","clearIcon","errorIcon","map","option","find","handleTagClear","firstUpdated","determineIfSlotted","initialSelection","values","forEach","selected","push","focus","handleKeyboard","keyCode","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","emitValue","_a","classList","contains","_b","filter","toLowerCase","startsWith","connectedCallback","super","addEventListener","detail","origEvent","JSON","parse","stringify","index","splice","event","CustomEvent","dispatchEvent","updated","changedProps","has","entries","FormData","append","setFormValue","setValidity","valueMissing","validationMessage","listboxEl","preventScroll","styles","DropdownScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n  static override styles = DropdownScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Dropdown name. */\n  @property({ type: String })\n  name = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Dropdown invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Selected option value.\n   * @ignore\n   */\n  @state()\n  value: any = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   * @ignore\n   */\n  @state()\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\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      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              role=\"button\"\n              aria-labelledby=\"label-${this.name}\"\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.searchable ? '-1' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"Clear selections\"\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=\"Search\"\n                      value=${this.text}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    ${this.multiple\n                      ? this.placeholder\n                      : this.value === ''\n                      ? this.placeholder\n                      : this.text}\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              class=${classMap({\n                options: true,\n                open: this.open,\n              })}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              <slot @slotchange=${() => this.handleSlotChange()}></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n        </div>\n\n        ${this.multiple && this.value.length\n          ? html`\n              <div class=\"tags\">\n                ${this.value.map((value: string) => {\n                  const option = this.options.find(\n                    (option) => option.value === value\n                  );\n                  const text = option.text;\n\n                  return html`\n                    <button\n                      class=\"tag\"\n                      aria-label=\"Deselect ${text}\"\n                      @click=${() => this.handleTagClear(option.value)}\n                    >\n                      ${text}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `;\n                })}\n              </div>\n            `\n          : null}\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    this.resetSelection();\n\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.multiple) {\n        this.placeholder = 'Select items';\n      } else {\n        this.placeholder = 'Select an option';\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  private resetSelection() {\n    // get value from selected options\n    const values: any = [];\n    let value = '';\n    this.options.forEach((option: any) => {\n      if (option.selected) {\n        if (this.multiple) {\n          values.push(option.value);\n        } else {\n          value = option.value;\n        }\n      }\n    });\n\n    // set initial values\n    if (this.multiple) {\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const highlightedEl = this.options.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = this.options.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? this.options.indexOf(highlightedEl)\n      : this.options.find((option: any) => option.selected)\n      ? this.options.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    // open the listbox\n    if (target === 'button') {\n      const openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (openDropdown) {\n        this.open = true;\n        this.options[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        if (target === 'list') {\n          this.updateValue(\n            this.options[highlightedIndex].value,\n            !this.options[highlightedIndex].selected\n          );\n          this.assistiveText = 'Selected an item.';\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === this.options.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? this.options.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this.emitValue();\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE && option) {\n      this.updateValue(option.value, option.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    // find matches\n    const options = this.options.filter((option: any) => {\n      const text = option.text;\n      return text.toLowerCase().startsWith(value.toLowerCase());\n    });\n\n    // reset options highlighted state\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // option highlight and scroll\n    if (value !== '' && options.length) {\n      options[0].highlighted = true;\n      options[0].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => {\n      // set selected value\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n\n      // emit selected value\n      this.emitValue();\n    });\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => {\n      const relatedTarget = e.detail.origEvent.relatedTarget;\n\n      if (\n        !relatedTarget ||\n        (relatedTarget.localName !== 'kyn-dropdown-option' &&\n          relatedTarget.localName !== 'kyn-dropdown')\n      ) {\n        this.open = false;\n      }\n    });\n  }\n\n  private updateValue(value: string, selected = false) {\n    const values = JSON.parse(JSON.stringify(this.value));\n\n    // set value\n    if (this.multiple) {\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      // close listbox\n      if (!this.multiple) {\n        this.open = false;\n      }\n\n      // set form data value\n      if (this.multiple) {\n        const entries = new FormData();\n        this.value.forEach((value: string) => {\n          entries.append(this.name, value);\n        });\n        this.internals.setFormValue(entries);\n      } else {\n        this.internals.setFormValue(this.value);\n      }\n\n      // set selected state for each option\n      this.options.forEach((option: any) => {\n        if (this.multiple) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n\n      // update selected option text\n      if (!this.multiple) {\n        if (this.options.length && this.value !== '') {\n          const option = this.options.find(\n            (option) => option.value === this.value\n          );\n          this.text = option.text;\n        }\n\n        // set search input value\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        if (this.searchEl) {\n          this.searchEl.value = this.searchText;\n        }\n      }\n\n      // set validity\n      if (this.required) {\n        if (\n          !this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')\n        ) {\n          this.internals.setValidity(\n            { valueMissing: true },\n            'This field is required.'\n          );\n          this.internalValidationMsg = this.internals.validationMessage;\n        } else {\n          this.internals.setValidity({});\n          this.internalValidationMsg = '';\n          this.invalidText = '';\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","handleTagClear","firstUpdated","resetSelection","values","forEach","selected","push","focus","handleKeyboard","keyCode","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","emitValue","_a","classList","contains","_b","filter","toLowerCase","startsWith","connectedCallback","super","addEventListener","detail","origEvent","JSON","parse","stringify","index","splice","event","CustomEvent","dispatchEvent","updated","changedProps","has","entries","FormData","append","setFormValue","setValidity","valueMissing","validationMessage","listboxEl","preventScroll","styles","DropdownScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",