@kyndryl-design-system/shidoka-applications 2.40.2 → 2.42.0

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

@@ -27,6 +27,8 @@ export declare class HeaderLink extends LitElement {
     divider: boolean;
     /** Label for sub-menu link search input, which is visible with > 5 sub-links. */
     searchLabel: string;
+    /** Number of child links required to show search input. */
+    searchThreshold: number;
     /** Text for mobile "Back" button. */
     backText: string;
     /** Add left padding when icon is not provided to align text with links that do have icons. */

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

@@ -1 +1 @@
-{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAKlC;;;;;;GAMG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,MAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,8FAA8F;IAE9F,WAAW,UAAS;IAEpB,qCAAqC;IAErC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IA8Ef,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,aAAa;IAuBrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAKlC;;;;;;GAMG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,MAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,2DAA2D;IAE3D,eAAe,SAAK;IAEpB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,8FAA8F;IAE9F,WAAW,UAAS;IAEpB,qCAAqC;IAErC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IA8Ef,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,aAAa;IAuBrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/global/header/headerLink.js

@@ -412,7 +412,7 @@ kyn-text-input {
     transform: scaleX(0);
     transform-origin: right;
   }
-}`;let u=class extends s{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this.leftPadding=!1,this._searchTerm="",this.menuPosition={},this._debounceResize=c((()=>{this.determineLevel()}))}render(){const e={menu:this.slottedEls.length,[`level--${this.level}`]:!0,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level,"padding-left":this.leftPadding},o={menu__content:!0,slotted:this.slottedEls.length},n=this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link");return d`
+}`;let u=class extends s{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.searchThreshold=6,this.backText="Back",this.leftPadding=!1,this._searchTerm="",this.menuPosition={},this._debounceResize=c((()=>{this.determineLevel()}))}render(){const e={menu:this.slottedEls.length,[`level--${this.level}`]:!0,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level,"padding-left":this.leftPadding},o={menu__content:!0,slotted:this.slottedEls.length},n=this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link");return d`
       <div
         class="${r(e)}"
         @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -440,7 +440,7 @@ kyn-text-input {
             ${this.backText}
           </button>
 
-          ${n.length>5?d`
+          ${n.length>=this.searchThreshold?d`
                 <kyn-text-input
                   hideLabel
                   size="sm"
@@ -459,5 +459,5 @@ kyn-text-input {
           <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
         </div>
       </div>
-    `}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link").forEach((e=>{var t,i;const o=null===(i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("slot"))||void 0===i?void 0:i.assignedNodes({flatten:!0});let n="";for(let e=0;e<o.length;e++)n+=o[e].textContent.trim();n.toLowerCase().includes(this._searchTerm)?e.style.display="block":e.style.display="none"})),this._positionMenu()}_handleBack(){this.open=!1}_handleLinksSlotChange(){this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&this.slottedEls.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this.open=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&this.slottedEls.length&&""===this._searchTerm&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this.open=!1}),150))}handleClick(e){let t=!1;this.slottedEls.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._searchTerm="",this._searchFilter())}determineLevel(){const e=this.parentNode,t=e.parentNode;"KYN-HEADER-LINK"===e.nodeName?this.level=e.level+1:"KYN-HEADER-CATEGORY"===e.nodeName&&"KYN-HEADER-LINK"===t.nodeName?this.level=t.level+1:window.innerWidth<672&&"KYN-HEADER-FLYOUT"===e.nodeName?this.level=2:this.level=1}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),o=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".menu__content"))||void 0===t?void 0:t.getBoundingClientRect(),n=i.top+i.height/2,r=o.height/2,a=n+r>window.innerHeight?n-r-(n+r-window.innerHeight):n-r;this.menuPosition={top:a<56?56:a,left:i.right+8}}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("open")&&this.open&&this._positionMenu()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}};u.styles=p,e([i({type:Boolean})],u.prototype,"open",void 0),e([i({type:String})],u.prototype,"href",void 0),e([i({type:String})],u.prototype,"target",void 0),e([i({type:String})],u.prototype,"rel",void 0),e([i({type:Boolean})],u.prototype,"isActive",void 0),e([o()],u.prototype,"level",void 0),e([i({type:Boolean})],u.prototype,"divider",void 0),e([i({type:String})],u.prototype,"searchLabel",void 0),e([i({type:String})],u.prototype,"backText",void 0),e([i({type:Boolean})],u.prototype,"leftPadding",void 0),e([o()],u.prototype,"_searchTerm",void 0),e([n({slot:"links"})],u.prototype,"slottedEls",void 0),e([o()],u.prototype,"_leaveTimer",void 0),e([o()],u.prototype,"menuPosition",void 0),u=e([a("kyn-header-link")],u);export{u as HeaderLink};
+    `}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll(":scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link").forEach((e=>{var t,i;const o=null===(i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("slot"))||void 0===i?void 0:i.assignedNodes({flatten:!0});let n="";for(let e=0;e<o.length;e++)n+=o[e].textContent.trim();n.toLowerCase().includes(this._searchTerm)?e.style.display="block":e.style.display="none"})),this._positionMenu()}_handleBack(){this.open=!1}_handleLinksSlotChange(){this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&this.slottedEls.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this.open=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&this.slottedEls.length&&""===this._searchTerm&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this.open=!1}),150))}handleClick(e){let t=!1;this.slottedEls.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._searchTerm="",this._searchFilter())}determineLevel(){const e=this.parentNode,t=e.parentNode;"KYN-HEADER-LINK"===e.nodeName?this.level=e.level+1:"KYN-HEADER-CATEGORY"===e.nodeName&&"KYN-HEADER-LINK"===t.nodeName?this.level=t.level+1:window.innerWidth<672&&"KYN-HEADER-FLYOUT"===e.nodeName?this.level=2:this.level=1}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),o=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".menu__content"))||void 0===t?void 0:t.getBoundingClientRect(),n=i.top+i.height/2,r=o.height/2,a=n+r>window.innerHeight?n-r-(n+r-window.innerHeight):n-r;this.menuPosition={top:a<56?56:a,left:i.right+8}}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("open")&&this.open&&this._positionMenu()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}};u.styles=p,e([i({type:Boolean})],u.prototype,"open",void 0),e([i({type:String})],u.prototype,"href",void 0),e([i({type:String})],u.prototype,"target",void 0),e([i({type:String})],u.prototype,"rel",void 0),e([i({type:Boolean})],u.prototype,"isActive",void 0),e([o()],u.prototype,"level",void 0),e([i({type:Boolean})],u.prototype,"divider",void 0),e([i({type:String})],u.prototype,"searchLabel",void 0),e([i({type:Number})],u.prototype,"searchThreshold",void 0),e([i({type:String})],u.prototype,"backText",void 0),e([i({type:Boolean})],u.prototype,"leftPadding",void 0),e([o()],u.prototype,"_searchTerm",void 0),e([n({slot:"links"})],u.prototype,"slottedEls",void 0),e([o()],u.prototype,"_leaveTimer",void 0),e([o()],u.prototype,"menuPosition",void 0),u=e([a("kyn-header-link")],u);export{u as HeaderLink};
 //# sourceMappingURL=headerLink.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '../../reusable/textInput';\nimport arrowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport searchIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/search.svg';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n  @property({ type: String })\n  searchLabel = 'Search';\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. */\n  @property({ type: Boolean })\n  leftPadding = false;\n\n  /** Text for mobile \"Back\" button. */\n  @state()\n  _searchTerm = '';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  slottedEls!: Array<HTMLElement>;\n\n  /** Timeout function to delay flyout open.\n   * @internal\n   */\n  _enterTimer: any;\n\n  /** Timeout function to delay flyout close.\n   * @internal\n   */\n  @state()\n  _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  menuPosition: any = {};\n\n  override render() {\n    const classes = {\n      menu: this.slottedEls.length,\n      [`level--${this.level}`]: true,\n      divider: this.divider,\n      open: this.open,\n    };\n\n    const linkClasses = {\n      'nav-link': true,\n      active: this.isActive,\n      interactive: this.level == 1,\n      'padding-left': this.leftPadding,\n    };\n\n    const menuClasses = {\n      menu__content: true,\n      slotted: this.slottedEls.length,\n    };\n\n    const Links = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <a\n          target=${this.target}\n          rel=${this.rel}\n          href=${this.href}\n          class=${classMap(linkClasses)}\n          @click=${(e: Event) => this.handleClick(e)}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot></slot>\n\n          ${this.slottedEls.length\n            ? html` <span class=\"arrow\">${unsafeSVG(arrowIcon)}</span> `\n            : null}\n        </a>\n\n        <div\n          class=${classMap(menuClasses)}\n          style=${`top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`}\n        >\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${Links.length > 5\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  size=\"sm\"\n                  label=${this.searchLabel}\n                  placeholder=${this.searchLabel}\n                  value=${this._searchTerm}\n                  @on-input=${(e: Event) => this._handleSearch(e)}\n                >\n                  <span slot=\"icon\" class=\"search-icon\">\n                    ${unsafeSVG(searchIcon)}\n                  </span>\n                  ${this.searchLabel}\n                </kyn-text-input>\n              `\n            : null}\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _handleSearch(e: any) {\n    this._searchTerm = e.detail.value.toLowerCase();\n    this._searchFilter();\n  }\n\n  private _searchFilter() {\n    const Links: any = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    Links.forEach((link: any) => {\n      // get link text\n      const nodes: any = link.shadowRoot?.querySelector('slot')?.assignedNodes({\n        flatten: true,\n      });\n      let linkText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        linkText += nodes[i].textContent.trim();\n      }\n\n      if (linkText.toLowerCase().includes(this._searchTerm)) {\n        link.style.display = 'block';\n      } else {\n        link.style.display = 'none';\n      }\n    });\n\n    this._positionMenu();\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private _handleLinksSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && this.slottedEls.length) {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this.open = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (\n      e.pointerType === 'mouse' &&\n      this.slottedEls.length &&\n      this._searchTerm === ''\n    ) {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this.open = false;\n      }, 150);\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.slottedEls.length) {\n      preventDefault = true;\n      e.preventDefault();\n      this.open = !this.open;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e, defaultPrevented: preventDefault },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n      this._searchTerm = '';\n      this._searchFilter();\n    }\n  }\n\n  private determineLevel() {\n    const ParentNode: any = this.parentNode;\n    const GrandparentNode: any = ParentNode.parentNode;\n\n    if (ParentNode.nodeName === 'KYN-HEADER-LINK') {\n      this.level = ParentNode.level + 1;\n    } else if (\n      ParentNode.nodeName === 'KYN-HEADER-CATEGORY' &&\n      GrandparentNode.nodeName === 'KYN-HEADER-LINK'\n    ) {\n      this.level = GrandparentNode.level + 1;\n    } else {\n      if (\n        window.innerWidth < 672 &&\n        ParentNode.nodeName === 'KYN-HEADER-FLYOUT'\n      ) {\n        this.level = 2;\n      } else {\n        this.level = 1;\n      }\n    }\n  }\n\n  private _positionMenu() {\n    // determine submenu positioning\n    const LinkBounds: any = this.getBoundingClientRect();\n    const MenuBounds: any = this.shadowRoot\n      ?.querySelector('.menu__content')\n      ?.getBoundingClientRect();\n    const Padding = 8;\n    const HeaderHeight = 56;\n\n    const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n    const MenuHalf = MenuBounds.height / 2;\n\n    const Top =\n      LinkHalf + MenuHalf > window.innerHeight\n        ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n        : LinkHalf - MenuHalf;\n\n    this.menuPosition = {\n      top: Top < HeaderHeight ? HeaderHeight : Top,\n      left: LinkBounds.right + Padding,\n    };\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this.determineLevel();\n  });\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open') && this.open) {\n      this._positionMenu();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener('resize', this._debounceResize);\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","leftPadding","_searchTerm","menuPosition","_debounceResize","debounce","determineLevel","render","classes","menu","slottedEls","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","unsafeSVG","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","value","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","ParentNode","parentNode","GrandparentNode","nodeName","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}
+{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '../../reusable/textInput';\nimport arrowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport searchIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/search.svg';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n  @property({ type: Boolean })\n  divider = false;\n\n  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n  @property({ type: String })\n  searchLabel = 'Search';\n\n  /** Number of child links required to show search input. */\n  @property({ type: Number })\n  searchThreshold = 6;\n\n  /** Text for mobile \"Back\" button. */\n  @property({ type: String })\n  backText = 'Back';\n\n  /** Add left padding when icon is not provided to align text with links that do have icons. */\n  @property({ type: Boolean })\n  leftPadding = false;\n\n  /** Text for mobile \"Back\" button. */\n  @state()\n  _searchTerm = '';\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'links' })\n  slottedEls!: Array<HTMLElement>;\n\n  /** Timeout function to delay flyout open.\n   * @internal\n   */\n  _enterTimer: any;\n\n  /** Timeout function to delay flyout close.\n   * @internal\n   */\n  @state()\n  _leaveTimer: any;\n\n  /** Menu positioning\n   * @internal\n   */\n  @state()\n  menuPosition: any = {};\n\n  override render() {\n    const classes = {\n      menu: this.slottedEls.length,\n      [`level--${this.level}`]: true,\n      divider: this.divider,\n      open: this.open,\n    };\n\n    const linkClasses = {\n      'nav-link': true,\n      active: this.isActive,\n      interactive: this.level == 1,\n      'padding-left': this.leftPadding,\n    };\n\n    const menuClasses = {\n      menu__content: true,\n      slotted: this.slottedEls.length,\n    };\n\n    const Links = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n        @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n      >\n        <a\n          target=${this.target}\n          rel=${this.rel}\n          href=${this.href}\n          class=${classMap(linkClasses)}\n          @click=${(e: Event) => this.handleClick(e)}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot></slot>\n\n          ${this.slottedEls.length\n            ? html` <span class=\"arrow\">${unsafeSVG(arrowIcon)}</span> `\n            : null}\n        </a>\n\n        <div\n          class=${classMap(menuClasses)}\n          style=${`top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`}\n        >\n          <button class=\"go-back\" @click=${() => this._handleBack()}>\n            <span>${unsafeSVG(backIcon)}</span>\n            ${this.backText}\n          </button>\n\n          ${Links.length >= this.searchThreshold\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  size=\"sm\"\n                  label=${this.searchLabel}\n                  placeholder=${this.searchLabel}\n                  value=${this._searchTerm}\n                  @on-input=${(e: Event) => this._handleSearch(e)}\n                >\n                  <span slot=\"icon\" class=\"search-icon\">\n                    ${unsafeSVG(searchIcon)}\n                  </span>\n                  ${this.searchLabel}\n                </kyn-text-input>\n              `\n            : null}\n\n          <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private _handleSearch(e: any) {\n    this._searchTerm = e.detail.value.toLowerCase();\n    this._searchFilter();\n  }\n\n  private _searchFilter() {\n    const Links: any = this.querySelectorAll(\n      ':scope > kyn-header-link, :scope > kyn-header-category > kyn-header-link'\n    );\n\n    Links.forEach((link: any) => {\n      // get link text\n      const nodes: any = link.shadowRoot?.querySelector('slot')?.assignedNodes({\n        flatten: true,\n      });\n      let linkText = '';\n      for (let i = 0; i < nodes.length; i++) {\n        linkText += nodes[i].textContent.trim();\n      }\n\n      if (linkText.toLowerCase().includes(this._searchTerm)) {\n        link.style.display = 'block';\n      } else {\n        link.style.display = 'none';\n      }\n    });\n\n    this._positionMenu();\n  }\n\n  private _handleBack() {\n    this.open = false;\n  }\n\n  private _handleLinksSlotChange() {\n    this.requestUpdate();\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && this.slottedEls.length) {\n      clearTimeout(this._leaveTimer);\n\n      this._enterTimer = setTimeout(() => {\n        this.open = true;\n      }, 150);\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (\n      e.pointerType === 'mouse' &&\n      this.slottedEls.length &&\n      this._searchTerm === ''\n    ) {\n      clearTimeout(this._enterTimer);\n\n      this._leaveTimer = setTimeout(() => {\n        this.open = false;\n      }, 150);\n    }\n  }\n\n  private handleClick(e: Event) {\n    let preventDefault = false;\n\n    if (this.slottedEls.length) {\n      preventDefault = true;\n      e.preventDefault();\n      this.open = !this.open;\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e, defaultPrevented: preventDefault },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n      this._searchTerm = '';\n      this._searchFilter();\n    }\n  }\n\n  private determineLevel() {\n    const ParentNode: any = this.parentNode;\n    const GrandparentNode: any = ParentNode.parentNode;\n\n    if (ParentNode.nodeName === 'KYN-HEADER-LINK') {\n      this.level = ParentNode.level + 1;\n    } else if (\n      ParentNode.nodeName === 'KYN-HEADER-CATEGORY' &&\n      GrandparentNode.nodeName === 'KYN-HEADER-LINK'\n    ) {\n      this.level = GrandparentNode.level + 1;\n    } else {\n      if (\n        window.innerWidth < 672 &&\n        ParentNode.nodeName === 'KYN-HEADER-FLYOUT'\n      ) {\n        this.level = 2;\n      } else {\n        this.level = 1;\n      }\n    }\n  }\n\n  private _positionMenu() {\n    // determine submenu positioning\n    const LinkBounds: any = this.getBoundingClientRect();\n    const MenuBounds: any = this.shadowRoot\n      ?.querySelector('.menu__content')\n      ?.getBoundingClientRect();\n    const Padding = 8;\n    const HeaderHeight = 56;\n\n    const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n    const MenuHalf = MenuBounds.height / 2;\n\n    const Top =\n      LinkHalf + MenuHalf > window.innerHeight\n        ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n        : LinkHalf - MenuHalf;\n\n    this.menuPosition = {\n      top: Top < HeaderHeight ? HeaderHeight : Top,\n      left: LinkBounds.right + Padding,\n    };\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this.determineLevel();\n  });\n\n  override firstUpdated() {\n    this.determineLevel();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('open') && this.open) {\n      this._positionMenu();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener('resize', this._debounceResize);\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","searchThreshold","backText","leftPadding","_searchTerm","menuPosition","_debounceResize","debounce","determineLevel","render","classes","menu","slottedEls","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","unsafeSVG","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","value","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","ParentNode","parentNode","GrandparentNode","nodeName","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","Number","queryAssignedElements","slot","customElement"],"mappings":"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"}

package/components/reusable/sideDrawer/sideDrawer.d.ts

@@ -14,9 +14,9 @@ export declare class SideDrawer extends LitElement {
      */
     open: boolean;
     /**
-     * Drawer size. `'md'`, or `'sm'`.
+     * Drawer size.
      */
-    size: string;
+    size: 'md' | 'sm' | 'xl' | 'standard';
     /**
      * Title / Heading text, required.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,WAAW,CAAC;AAKnB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,QAiBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB,uCAAuC;IAEvC,WAAW,UAAS;IAEpB,yCAAyC;IAEzC,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAqHf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAKb,OAAO,CAAC,YAAY,EAAE,GAAG;CAcnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,WAAW,CAAC;AAKnB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,QAiBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,CAAQ;IAE7C;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB,uCAAuC;IAEvC,WAAW,UAAS;IAEpB,yCAAyC;IAEzC,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAmHf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAKb,OAAO,CAAC,YAAY,EAAE,GAAG;CAcnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/sideDrawer/sideDrawer.js

@@ -86,6 +86,9 @@ dialog.size--standard {
 dialog.size--md {
   width: 800px;
 }
+dialog.size--xl {
+  width: 1024px;
+}
 
 button {
   appearance: none;
@@ -233,7 +236,7 @@ form {
   }
 }
 
-.size--sm kyn-button {
+.size--sm .dialog-footer kyn-button {
   width: 100%;
   flex-grow: 1;
 }
@@ -277,7 +280,7 @@ form {
   100% {
     transform: none;
   }
-}`;let p=class extends d{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.closeBtnDescription="Close",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1,this.aiConnected=!1,this.noBackdrop=!1}render(){const e={dialog:!0,"no-backdrop":this.noBackdrop,"size--md":"md"===this.size,"size--standard":"standard"===this.size,"size--sm":"sm"===this.size,"ai-connected":this.aiConnected},o={"dialog-footer":!0,"ai-connected":this.aiConnected},i={"header-title":!0,"ai-connected":this.aiConnected};return s`
+}`;let p=class extends d{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.closeBtnDescription="Close",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1,this.aiConnected=!1,this.noBackdrop=!1}render(){const e={dialog:!0,"no-backdrop":this.noBackdrop,[`size--${this.size}`]:this.size,"ai-connected":this.aiConnected},o={"dialog-footer":!0,"ai-connected":this.aiConnected},i={"header-title":!0,"ai-connected":this.aiConnected};return s`
       <span class="anchor" @click=${this._openDrawer}>
         <slot name="anchor"></slot>
       </span>

package/components/reusable/sideDrawer/sideDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport SideDrawerScss from './sideDrawer.scss';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the drawer open event.\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n  static override styles = [\n    SideDrawerScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            transform: translateX(100%);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Drawer open state.\n   */\n  @property({ type: Boolean })\n  open = false;\n\n  /**\n   * Drawer size. `'md'`, or `'sm'`.\n   */\n  @property({ type: String })\n  size = 'md';\n\n  /**\n   * Title / Heading text, required.\n   */\n  @property({ type: String })\n  titleText = '';\n\n  /**\n   * Label text, optional.\n   */\n  @property({ type: String })\n  labelText = '';\n\n  /**\n   * Submit button text.\n   */\n  @property({ type: String })\n  submitBtnText = 'Ok';\n\n  /**\n   * Cancel button text.\n   */\n  @property({ type: String })\n  cancelBtnText = 'Cancel';\n\n  /** Close button description (Required to support accessibility). */\n  @property({ type: String })\n  closeBtnDescription = 'Close';\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  submitBtnDisabled = false;\n\n  /** Determine whether needs footer */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** Set this to `true` for AI theme. */\n  @property({ type: Boolean })\n  aiConnected = false;\n\n  /** Set this to `true` for no backdrop */\n  @property({ type: Boolean })\n  noBackdrop = false;\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  override render() {\n    const classes = {\n      dialog: true,\n      'no-backdrop': this.noBackdrop,\n      'size--md': this.size === 'md',\n      'size--standard': this.size === 'standard',\n      'size--sm': this.size === 'sm',\n      'ai-connected': this.aiConnected,\n    };\n\n    const dialogFooterClasses = {\n      'dialog-footer': true,\n      'ai-connected': this.aiConnected,\n    };\n\n    const dialogHeaderClasses = {\n      'header-title': true,\n      'ai-connected': this.aiConnected,\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <!--  Header -->\n          <header>\n            <div class=\"header-label-title\">\n              <h1 class=\"${classMap(dialogHeaderClasses)}\" id=\"dialogLabel\">\n                ${this.titleText}\n              </h1>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n            </div>\n\n            <kyn-button\n              class=\"side-drawer-close-btn\"\n              size=\"small\"\n              kind=\"ghost\"\n              description=${ifDefined(this.closeBtnDescription)}\n              @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n            >\n              <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n            </kyn-button>\n          </header>\n\n          <!-- Body -->\n          <div\n            class=\"body\"\n            tabindex=\"0\"\n            role=\"region\"\n            aria-label=\"${this.titleText} content\"\n          >\n            <slot></slot>\n          </div>\n\n          <!-- footer -->\n          ${!this.hideFooter\n            ? html`\n                <div class=\"${classMap(dialogFooterClasses)}\">\n                  <div class=\"actions\">\n                    <kyn-button\n                      class=\"action-button\"\n                      value=\"Ok\"\n                      ?disabled=${this.submitBtnDisabled}\n                      kind=${this.destructive\n                        ? 'primary-destructive'\n                        : this.aiConnected\n                        ? 'primary-ai'\n                        : 'primary'}\n                      @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n                    >\n                      ${this.submitBtnText}\n                    </kyn-button>\n\n                    ${this.showSecondaryButton\n                      ? html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n                            @click=${(e: Event) =>\n                              this._closeDrawer(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kyn-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Cancel\"\n                            kind=\"ghost\"\n                            @click=${(e: Event) =>\n                              this._closeDrawer(e, 'cancel')}\n                          >\n                            ${this.cancelBtnText}\n                          </kyn-button>\n                        `}\n                  </div>\n                </div>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openDrawer() {\n    this.open = true;\n  }\n\n  private _closeDrawer(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitOpenEvent() {\n    const event = new CustomEvent('on-open');\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        if (this.noBackdrop) {\n          this._dialog.show();\n        } else {\n          this._dialog.showModal();\n        }\n        this._emitOpenEvent();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-side-drawer': SideDrawer;\n  }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","closeBtnDescription","submitBtnDisabled","hideFooter","destructive","secondaryButtonText","showSecondaryButton","hideCancelButton","aiConnected","noBackdrop","render","classes","dialog","dialogFooterClasses","dialogHeaderClasses","html","_openDrawer","classMap","e","_closeDrawer","ifDefined","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","show","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}
+{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport SideDrawerScss from './sideDrawer.scss';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the drawer open event.\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n  static override styles = [\n    SideDrawerScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            transform: translateX(100%);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Drawer open state.\n   */\n  @property({ type: Boolean })\n  open = false;\n\n  /**\n   * Drawer size.\n   */\n  @property({ type: String })\n  size: 'md' | 'sm' | 'xl' | 'standard' = 'md';\n\n  /**\n   * Title / Heading text, required.\n   */\n  @property({ type: String })\n  titleText = '';\n\n  /**\n   * Label text, optional.\n   */\n  @property({ type: String })\n  labelText = '';\n\n  /**\n   * Submit button text.\n   */\n  @property({ type: String })\n  submitBtnText = 'Ok';\n\n  /**\n   * Cancel button text.\n   */\n  @property({ type: String })\n  cancelBtnText = 'Cancel';\n\n  /** Close button description (Required to support accessibility). */\n  @property({ type: String })\n  closeBtnDescription = 'Close';\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  submitBtnDisabled = false;\n\n  /** Determine whether needs footer */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** Set this to `true` for AI theme. */\n  @property({ type: Boolean })\n  aiConnected = false;\n\n  /** Set this to `true` for no backdrop */\n  @property({ type: Boolean })\n  noBackdrop = false;\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  override render() {\n    const classes = {\n      dialog: true,\n      'no-backdrop': this.noBackdrop,\n      [`size--${this.size}`]: this.size,\n      'ai-connected': this.aiConnected,\n    };\n\n    const dialogFooterClasses = {\n      'dialog-footer': true,\n      'ai-connected': this.aiConnected,\n    };\n\n    const dialogHeaderClasses = {\n      'header-title': true,\n      'ai-connected': this.aiConnected,\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <!--  Header -->\n          <header>\n            <div class=\"header-label-title\">\n              <h1 class=\"${classMap(dialogHeaderClasses)}\" id=\"dialogLabel\">\n                ${this.titleText}\n              </h1>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n            </div>\n\n            <kyn-button\n              class=\"side-drawer-close-btn\"\n              size=\"small\"\n              kind=\"ghost\"\n              description=${ifDefined(this.closeBtnDescription)}\n              @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n            >\n              <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n            </kyn-button>\n          </header>\n\n          <!-- Body -->\n          <div\n            class=\"body\"\n            tabindex=\"0\"\n            role=\"region\"\n            aria-label=\"${this.titleText} content\"\n          >\n            <slot></slot>\n          </div>\n\n          <!-- footer -->\n          ${!this.hideFooter\n            ? html`\n                <div class=\"${classMap(dialogFooterClasses)}\">\n                  <div class=\"actions\">\n                    <kyn-button\n                      class=\"action-button\"\n                      value=\"Ok\"\n                      ?disabled=${this.submitBtnDisabled}\n                      kind=${this.destructive\n                        ? 'primary-destructive'\n                        : this.aiConnected\n                        ? 'primary-ai'\n                        : 'primary'}\n                      @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n                    >\n                      ${this.submitBtnText}\n                    </kyn-button>\n\n                    ${this.showSecondaryButton\n                      ? html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n                            @click=${(e: Event) =>\n                              this._closeDrawer(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kyn-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Cancel\"\n                            kind=\"ghost\"\n                            @click=${(e: Event) =>\n                              this._closeDrawer(e, 'cancel')}\n                          >\n                            ${this.cancelBtnText}\n                          </kyn-button>\n                        `}\n                  </div>\n                </div>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openDrawer() {\n    this.open = true;\n  }\n\n  private _closeDrawer(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitOpenEvent() {\n    const event = new CustomEvent('on-open');\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        if (this.noBackdrop) {\n          this._dialog.show();\n        } else {\n          this._dialog.showModal();\n        }\n        this._emitOpenEvent();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-side-drawer': SideDrawer;\n  }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","closeBtnDescription","submitBtnDisabled","hideFooter","destructive","secondaryButtonText","showSecondaryButton","hideCancelButton","aiConnected","noBackdrop","render","classes","dialog","dialogFooterClasses","dialogHeaderClasses","html","_openDrawer","classMap","e","_closeDrawer","ifDefined","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","show","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.40.2",
+  "version": "2.42.0",
   "description": "Shidoka Web Components for Applications",
   "license": "MIT",
   "main": "index.js",
@@ -93,7 +93,7 @@
     "lint-staged": "^15.4.3",
     "lit-analyzer": "^2.0.3",
     "lit-css-loader": "^3.0.0",
-    "playwright": "^1.52.0",
+    "playwright": "^1.53.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.2",
     "prismjs-components-importer": "^0.2.0",