@kyndryl-design-system/shidoka-applications 1.22.0 → 1.22.2

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

@@ -29,6 +29,8 @@ export declare class HeaderLink extends LitElement {
     searchLabel: string;
     /** Text for mobile "Back" button. */
     backText: string;
+    /** Text for mobile "Back" button. */
+    _searchTerm: string;
     /**
      * Queries any slotted HTML elements.
      * @ignore
@@ -48,6 +50,7 @@ export declare class HeaderLink extends LitElement {
     menuPosition: any;
     render(): import("lit-html").TemplateResult<1>;
     private _handleSearch;
+    private _searchFilter;
     private _handleBack;
     private _handleLinksSlotChange;
     private handlePointerEnter;

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

@@ -1 +1 @@
-{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;;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;IAsEf,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,aAAa;IAuBZ,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAajB,oBAAoB;CAY9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,UAAU,CAAC;KACnC;CACF"}
+{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2DAA2D,CAAC;AAKnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,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;IAwEf,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,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;IAoBtB,OAAO,CAAC,aAAa;IAuBZ,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAajB,oBAAoB;CAY9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,UAAU,CAAC;KACnC;CACF"}

package/components/global/header/headerLink.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as n}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as s}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{debounce as d}from"../../../common/helpers/helpers.js";import a from"./headerLink.scss.js";import"../../reusable/textInput/textInput.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import h from'./../../../external/@carbon/icons/es/chevron--right/16.js';import c from'./../../../external/@carbon/icons/es/arrow--left/16.js';let p=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this.menuPosition={}}render(){const e={menu:this.slottedEls.length,"level--1":1==this.level,"level--2":2==this.level,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level},o={menu__content:!0,slotted:this.slottedEls.length},n=this.querySelectorAll("kyn-header-link");return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{debounce as d}from"../../../common/helpers/helpers.js";import h from"./headerLink.scss.js";import"../../reusable/textInput/textInput.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/chevron--right/16.js';import c from'./../../../external/@carbon/icons/es/arrow--left/16.js';import p from'./../../../external/@carbon/icons/es/search/24.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this._searchTerm="",this.menuPosition={}}render(){const e={menu:this.slottedEls.length,"level--1":1==this.level,"level--2":2==this.level,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level},o={menu__content:!0,slotted:this.slottedEls.length},s=this.querySelectorAll("kyn-header-link");return t`
       <div
         class="${r(e)}"
         @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -14,7 +14,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
         >
           <slot></slot>
 
-          ${this.slottedEls.length?t` <kd-icon class="arrow" .icon=${h}></kd-icon> `:null}
+          ${this.slottedEls.length?t` <kd-icon class="arrow" .icon=${a}></kd-icon> `:null}
         </a>
 
         <div
@@ -26,12 +26,14 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
             ${this.backText}
           </button>
 
-          ${n.length>5?t`
+          ${s.length>5?t`
                 <kyn-text-input
                   hideLabel
                   placeholder=${this.searchLabel}
+                  value=${this._searchTerm}
                   @on-input=${e=>this._handleSearch(e)}
                 >
+                  <kd-icon .icon=${p} slot="icon"></kd-icon>
                   ${this.searchLabel}
                 </kyn-text-input>
               `:null}
@@ -39,5 +41,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
         </div>
       </div>
-    `}_handleSearch(e){const t=e.detail.value.toLowerCase();this.querySelectorAll("kyn-header-link").forEach((e=>{var i,o;const n=null===(o=null===(i=e.shadowRoot)||void 0===i?void 0:i.querySelector("slot"))||void 0===o?void 0:o.assignedNodes({flatten:!0});let s="";for(let e=0;e<n.length;e++)s+=n[e].textContent.trim();s.toLowerCase().includes(t)?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&&(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)}determineLevel(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.host.parentNode;"KYN-HEADER-LINK"===t.nodeName||"links"===t.slot||window.innerWidth<672&&"KYN-HEADER-FLYOUT"===t.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,s=o.height/2,l=n+s>window.innerHeight?n-s-(n+s-window.innerHeight):n-s;this.menuPosition={top:l<56?56:l,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",d((()=>{this.determineLevel()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.determineLevel()}))),super.disconnectedCallback()}};p.styles=a,e([n({type:Boolean})],p.prototype,"open",void 0),e([n({type:String})],p.prototype,"href",void 0),e([n({type:String})],p.prototype,"target",void 0),e([n({type:String})],p.prototype,"rel",void 0),e([n({type:Boolean})],p.prototype,"isActive",void 0),e([s()],p.prototype,"level",void 0),e([n({type:Boolean})],p.prototype,"divider",void 0),e([n({type:String})],p.prototype,"searchLabel",void 0),e([n({type:String})],p.prototype,"backText",void 0),e([l({slot:"links"})],p.prototype,"slottedEls",void 0),e([s()],p.prototype,"_leaveTimer",void 0),e([s()],p.prototype,"menuPosition",void 0),p=e([o("kyn-header-link")],p);export{p as HeaderLink};
+    `}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll("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 s="";for(let e=0;e<o.length;e++)s+=o[e].textContent.trim();s.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(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.host.parentNode;"KYN-HEADER-LINK"===t.nodeName||"links"===t.slot||window.innerWidth<672&&"KYN-HEADER-FLYOUT"===t.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(),s=i.top+i.height/2,n=o.height/2,l=s+n>window.innerHeight?s-n-(s+n-window.innerHeight):s-n;this.menuPosition={top:l<56?56:l,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",d((()=>{this.determineLevel()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.determineLevel()}))),super.disconnectedCallback()}};m.styles=h,e([s({type:Boolean})],m.prototype,"open",void 0),e([s({type:String})],m.prototype,"href",void 0),e([s({type:String})],m.prototype,"target",void 0),e([s({type:String})],m.prototype,"rel",void 0),e([s({type:Boolean})],m.prototype,"isActive",void 0),e([n()],m.prototype,"level",void 0),e([s({type:Boolean})],m.prototype,"divider",void 0),e([s({type:String})],m.prototype,"searchLabel",void 0),e([s({type:String})],m.prototype,"backText",void 0),e([n()],m.prototype,"_searchTerm",void 0),e([l({slot:"links"})],m.prototype,"slottedEls",void 0),e([n()],m.prototype,"_leaveTimer",void 0),e([n()],m.prototype,"menuPosition",void 0),m=e([o("kyn-header-link")],m);export{m as HeaderLink};
 //# sourceMappingURL=headerLink.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '../../reusable/textInput';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** 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  /**\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--1': this.level == 1,\n      'level--2': this.level == 2,\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    };\n\n    const menuClasses = {\n      menu__content: true,\n      slotted: this.slottedEls.length,\n    };\n\n    const Links = this.querySelectorAll('kyn-header-link');\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` <kd-icon class=\"arrow\" .icon=${arrowIcon}></kd-icon> `\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            <kd-icon .icon=${backIcon}></kd-icon>\n            ${this.backText}\n          </button>\n\n          ${Links.length > 5\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  placeholder=${this.searchLabel}\n                  @on-input=${(e: Event) => this._handleSearch(e)}\n                >\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    const SearchTerm = e.detail.value.toLowerCase();\n    const Links: any = this.querySelectorAll('kyn-header-link');\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(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 (e.pointerType === 'mouse' && this.slottedEls.length) {\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    }\n  }\n\n  private determineLevel() {\n    const ParentNode: any = this.shadowRoot?.host.parentNode;\n\n    if (\n      ParentNode.nodeName === 'KYN-HEADER-LINK' ||\n      ParentNode.slot === 'links'\n    ) {\n      this.level = 2;\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  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(\n      'resize',\n      debounce(() => {\n        this.determineLevel();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.determineLevel();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-nav-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","menuPosition","render","classes","menu","slottedEls","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","_handleLinksSlotChange","SearchTerm","detail","value","toLowerCase","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","determineLevel","ParentNode","host","parentNode","nodeName","slot","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","debounce","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"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"}
+{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '../../reusable/textInput';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\nimport searchIcon from '@carbon/icons/es/search/24';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n  static override styles = HeaderLinkScss;\n\n  /** Link open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Link url. */\n  @property({ type: String })\n  href = '';\n\n  /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n  @property({ type: String })\n  target = '_self' as const;\n\n  /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n  @property({ type: String })\n  rel = '';\n\n  /** Link active state, for example when URL path matches link href. */\n  @property({ type: Boolean })\n  isActive = false;\n\n  /** Link level, supports two levels.\n   * @ignore\n   */\n  @state()\n  level = 1;\n\n  /** 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  /** 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--1': this.level == 1,\n      'level--2': this.level == 2,\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    };\n\n    const menuClasses = {\n      menu__content: true,\n      slotted: this.slottedEls.length,\n    };\n\n    const Links = this.querySelectorAll('kyn-header-link');\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` <kd-icon class=\"arrow\" .icon=${arrowIcon}></kd-icon> `\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            <kd-icon .icon=${backIcon}></kd-icon>\n            ${this.backText}\n          </button>\n\n          ${Links.length > 5\n            ? html`\n                <kyn-text-input\n                  hideLabel\n                  placeholder=${this.searchLabel}\n                  value=${this._searchTerm}\n                  @on-input=${(e: Event) => this._handleSearch(e)}\n                >\n                  <kd-icon .icon=${searchIcon} slot=\"icon\"></kd-icon>\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('kyn-header-link');\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.shadowRoot?.host.parentNode;\n\n    if (\n      ParentNode.nodeName === 'KYN-HEADER-LINK' ||\n      ParentNode.slot === 'links'\n    ) {\n      this.level = 2;\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  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(\n      'resize',\n      debounce(() => {\n        this.determineLevel();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.determineLevel();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-nav-link': HeaderLink;\n  }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","_searchTerm","menuPosition","render","classes","menu","slottedEls","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","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","determineLevel","ParentNode","host","parentNode","nodeName","slot","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","debounce","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"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"}

package/components/reusable/tag/tagGroup.js

@@ -11,5 +11,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               </button>
             `:null}
       </div>
-    `}updated(t){(t.has("filter")||t.has("tagSize")||t.has("limitTags"))&&this._updateChildren()}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){this.tags.forEach((t=>{t.filter=this.filter})),this.tags.forEach((t=>{t.tagSize=this.tagSize})),this._toggleRevealed(!1)}_toggleRevealed(t){this.limitRevealed=t,this.tags.forEach(((t,e)=>{!this.limitTags||this.limitRevealed?t.style.display="inline-block":t.style.display=e<5?"inline-block":"none"}))}};d.styles=m,t([l({type:Object})],d.prototype,"textStrings",void 0),t([l({type:Boolean})],d.prototype,"limitTags",void 0),t([o()],d.prototype,"limitRevealed",void 0),t([l({type:Boolean})],d.prototype,"filter",void 0),t([l({type:String})],d.prototype,"tagSize",void 0),t([a()],d.prototype,"tags",void 0),d=t([i("kyn-tag-group")],d);export{d as TagGroup};
+    `}updated(t){(t.has("filter")||t.has("tagSize")||t.has("limitTags"))&&this._updateChildren()}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){this.tags.forEach((t=>{t.filter=this.filter})),this.tags.forEach((t=>{t.tagSize=this.tagSize})),this._toggleRevealed(this.limitRevealed)}_toggleRevealed(t){this.limitRevealed=t,this.tags.forEach(((t,e)=>{!this.limitTags||this.limitRevealed?t.style.display="inline-block":t.style.display=e<5?"inline-block":"none"}))}};d.styles=m,t([l({type:Object})],d.prototype,"textStrings",void 0),t([l({type:Boolean})],d.prototype,"limitTags",void 0),t([o()],d.prototype,"limitRevealed",void 0),t([l({type:Boolean})],d.prototype,"filter",void 0),t([l({type:String})],d.prototype,"tagSize",void 0),t([a()],d.prototype,"tags",void 0),d=t([i("kyn-tag-group")],d);export{d as TagGroup};
 //# sourceMappingURL=tagGroup.js.map

package/components/reusable/tag/tagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagGroup.js","sources":["../../../../src/components/reusable/tag/tagGroup.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-html/directives/class-map.js';\nimport './tag';\nimport TagGroupScss from './tagGroup.scss';\n\n/**\n * Tag & Tag Group\n * @slot unnamed - Slot for individual tags.\n */\n\n@customElement('kyn-tag-group')\nexport class TagGroup extends LitElement {\n  static override styles = TagGroupScss;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    showAll: 'Show all',\n    showLess: 'Show less',\n  };\n\n  /** Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.*/\n  @property({ type: Boolean })\n  limitTags = false;\n\n  /** Tag limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Tag group filter */\n  @property({ type: Boolean })\n  filter = false;\n\n  /**\n   * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n   */\n  @property({ type: String })\n  tagSize = 'md';\n\n  /**\n   * Queries for slotted tags.\n   * @ignore\n   */\n  @queryAssignedElements()\n  tags!: Array<any>;\n\n  override render() {\n    const toggleBtnClasses = {\n      'tag-reveal-toggle': true,\n      [`tag-reveal-toggle-${this.tagSize}`]: true,\n    };\n\n    return html`\n      <div class=\"tags-container\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n\n        ${this.limitTags && this.tags.length > 5\n          ? html`\n              <button\n                class=\"${classMap(toggleBtnClasses)}\"\n                @click=${() => this._toggleRevealed(!this.limitRevealed)}\n              >\n                ${this.limitRevealed\n                  ? this.textStrings.showLess\n                  : html` ${this.textStrings.showAll}`}\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('filter') ||\n      changedProps.has('tagSize') ||\n      changedProps.has('limitTags')\n    ) {\n      this._updateChildren();\n    }\n  }\n\n  private _handleSlotChange() {\n    this._updateChildren();\n    this.requestUpdate();\n  }\n\n  private _updateChildren() {\n    // set filter for each tag\n    this.tags.forEach((tag: any) => {\n      tag.filter = this.filter;\n    });\n\n    // set tag size for each tag\n    this.tags.forEach((tag: any) => {\n      tag.tagSize = this.tagSize;\n    });\n\n    this._toggleRevealed(false);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 5;\n    this.limitRevealed = revealed;\n    this.tags.forEach((tagEl, index) => {\n      if (!this.limitTags || this.limitRevealed) {\n        tagEl.style.display = 'inline-block';\n      } else {\n        if (index < Limit) {\n          tagEl.style.display = 'inline-block';\n        } else {\n          tagEl.style.display = 'none';\n        }\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tag-group': TagGroup;\n  }\n}\n"],"names":["TagGroup","LitElement","constructor","this","textStrings","showAll","showLess","limitTags","limitRevealed","filter","tagSize","render","toggleBtnClasses","html","_handleSlotChange","tags","length","classMap","_toggleRevealed","updated","changedProps","has","_updateChildren","requestUpdate","forEach","tag","revealed","tagEl","index","style","display","styles","TagGroupScss","__decorate","property","type","Object","prototype","Boolean","state","String","queryAssignedElements","customElement"],"mappings":"+yBAiBO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAAC,YAAc,CACZC,QAAS,WACTC,SAAU,aAKZH,KAASI,WAAG,EAMZJ,KAAaK,eAAG,EAIhBL,KAAMM,QAAG,EAMTN,KAAOO,QAAG,IA8EX,CArEU,MAAAC,GACP,MAAMC,EAAmB,CACvB,qBAAqB,EACrB,CAAC,qBAAqBT,KAAKO,YAAY,GAGzC,OAAOG,CAAI;;4BAEaV,KAAKW;;UAEvBX,KAAKI,WAAaJ,KAAKY,KAAKC,OAAS,EACnCH,CAAI;;yBAESI,EAASL;yBACT,IAAMT,KAAKe,iBAAiBf,KAAKK;;kBAExCL,KAAKK,cACHL,KAAKC,YAAYE,SACjBO,CAAI,IAAIV,KAAKC,YAAYC;;cAGjC;;KAGT,CACQ,OAAAc,CAAQC,IAEbA,EAAaC,IAAI,WACjBD,EAAaC,IAAI,YACjBD,EAAaC,IAAI,eAEjBlB,KAAKmB,iBAER,CAEO,iBAAAR,GACNX,KAAKmB,kBACLnB,KAAKoB,eACN,CAEO,eAAAD,GAENnB,KAAKY,KAAKS,SAASC,IACjBA,EAAIhB,OAASN,KAAKM,MAAM,IAI1BN,KAAKY,KAAKS,SAASC,IACjBA,EAAIf,QAAUP,KAAKO,OAAO,IAG5BP,KAAKe,iBAAgB,EACtB,CAEO,eAAAA,CAAgBQ,GAEtBvB,KAAKK,cAAgBkB,EACrBvB,KAAKY,KAAKS,SAAQ,CAACG,EAAOC,MACnBzB,KAAKI,WAAaJ,KAAKK,cAC1BmB,EAAME,MAAMC,QAAU,eAGpBH,EAAME,MAAMC,QADVF,EANM,EAOc,eAEA,MAEzB,GAEJ,GAxGe5B,EAAM+B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAIhBpC,EAAAqC,UAAA,mBAAA,GAIFJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAtC,EAAAqC,UAAA,iBAAA,GAMlBJ,EAAA,CADCM,KACqBvC,EAAAqC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACHtC,EAAAqC,UAAA,cAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMK,UACHxC,EAAAqC,UAAA,eAAA,GAOfJ,EAAA,CADCQ,KACiBzC,EAAAqC,UAAA,YAAA,GAnCPrC,EAAQiC,EAAA,CADpBS,EAAc,kBACF1C"}
+{"version":3,"file":"tagGroup.js","sources":["../../../../src/components/reusable/tag/tagGroup.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-html/directives/class-map.js';\nimport './tag';\nimport TagGroupScss from './tagGroup.scss';\n\n/**\n * Tag & Tag Group\n * @slot unnamed - Slot for individual tags.\n */\n\n@customElement('kyn-tag-group')\nexport class TagGroup extends LitElement {\n  static override styles = TagGroupScss;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = {\n    showAll: 'Show all',\n    showLess: 'Show less',\n  };\n\n  /** Limits visible tags (5) behind a \"Show all\" button. Use only if having more than 5 tags.*/\n  @property({ type: Boolean })\n  limitTags = false;\n\n  /** Tag limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Tag group filter */\n  @property({ type: Boolean })\n  filter = false;\n\n  /**\n   * Size of the tag, `'md'` (default) or `'sm'`. Icon size: 16px.\n   */\n  @property({ type: String })\n  tagSize = 'md';\n\n  /**\n   * Queries for slotted tags.\n   * @ignore\n   */\n  @queryAssignedElements()\n  tags!: Array<any>;\n\n  override render() {\n    const toggleBtnClasses = {\n      'tag-reveal-toggle': true,\n      [`tag-reveal-toggle-${this.tagSize}`]: true,\n    };\n\n    return html`\n      <div class=\"tags-container\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n\n        ${this.limitTags && this.tags.length > 5\n          ? html`\n              <button\n                class=\"${classMap(toggleBtnClasses)}\"\n                @click=${() => this._toggleRevealed(!this.limitRevealed)}\n              >\n                ${this.limitRevealed\n                  ? this.textStrings.showLess\n                  : html` ${this.textStrings.showAll}`}\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('filter') ||\n      changedProps.has('tagSize') ||\n      changedProps.has('limitTags')\n    ) {\n      this._updateChildren();\n    }\n  }\n\n  private _handleSlotChange() {\n    this._updateChildren();\n    this.requestUpdate();\n  }\n\n  private _updateChildren() {\n    // set filter for each tag\n    this.tags.forEach((tag: any) => {\n      tag.filter = this.filter;\n    });\n\n    // set tag size for each tag\n    this.tags.forEach((tag: any) => {\n      tag.tagSize = this.tagSize;\n    });\n\n    this._toggleRevealed(this.limitRevealed);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    const Limit = 5;\n    this.limitRevealed = revealed;\n    this.tags.forEach((tagEl, index) => {\n      if (!this.limitTags || this.limitRevealed) {\n        tagEl.style.display = 'inline-block';\n      } else {\n        if (index < Limit) {\n          tagEl.style.display = 'inline-block';\n        } else {\n          tagEl.style.display = 'none';\n        }\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tag-group': TagGroup;\n  }\n}\n"],"names":["TagGroup","LitElement","constructor","this","textStrings","showAll","showLess","limitTags","limitRevealed","filter","tagSize","render","toggleBtnClasses","html","_handleSlotChange","tags","length","classMap","_toggleRevealed","updated","changedProps","has","_updateChildren","requestUpdate","forEach","tag","revealed","tagEl","index","style","display","styles","TagGroupScss","__decorate","property","type","Object","prototype","Boolean","state","String","queryAssignedElements","customElement"],"mappings":"+yBAiBO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAAC,YAAc,CACZC,QAAS,WACTC,SAAU,aAKZH,KAASI,WAAG,EAMZJ,KAAaK,eAAG,EAIhBL,KAAMM,QAAG,EAMTN,KAAOO,QAAG,IA8EX,CArEU,MAAAC,GACP,MAAMC,EAAmB,CACvB,qBAAqB,EACrB,CAAC,qBAAqBT,KAAKO,YAAY,GAGzC,OAAOG,CAAI;;4BAEaV,KAAKW;;UAEvBX,KAAKI,WAAaJ,KAAKY,KAAKC,OAAS,EACnCH,CAAI;;yBAESI,EAASL;yBACT,IAAMT,KAAKe,iBAAiBf,KAAKK;;kBAExCL,KAAKK,cACHL,KAAKC,YAAYE,SACjBO,CAAI,IAAIV,KAAKC,YAAYC;;cAGjC;;KAGT,CACQ,OAAAc,CAAQC,IAEbA,EAAaC,IAAI,WACjBD,EAAaC,IAAI,YACjBD,EAAaC,IAAI,eAEjBlB,KAAKmB,iBAER,CAEO,iBAAAR,GACNX,KAAKmB,kBACLnB,KAAKoB,eACN,CAEO,eAAAD,GAENnB,KAAKY,KAAKS,SAASC,IACjBA,EAAIhB,OAASN,KAAKM,MAAM,IAI1BN,KAAKY,KAAKS,SAASC,IACjBA,EAAIf,QAAUP,KAAKO,OAAO,IAG5BP,KAAKe,gBAAgBf,KAAKK,cAC3B,CAEO,eAAAU,CAAgBQ,GAEtBvB,KAAKK,cAAgBkB,EACrBvB,KAAKY,KAAKS,SAAQ,CAACG,EAAOC,MACnBzB,KAAKI,WAAaJ,KAAKK,cAC1BmB,EAAME,MAAMC,QAAU,eAGpBH,EAAME,MAAMC,QADVF,EANM,EAOc,eAEA,MAEzB,GAEJ,GAxGe5B,EAAM+B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAIhBpC,EAAAqC,UAAA,mBAAA,GAIFJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAtC,EAAAqC,UAAA,iBAAA,GAMlBJ,EAAA,CADCM,KACqBvC,EAAAqC,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACHtC,EAAAqC,UAAA,cAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMK,UACHxC,EAAAqC,UAAA,eAAA,GAOfJ,EAAA,CADCQ,KACiBzC,EAAAqC,UAAA,YAAA,GAnCPrC,EAAQiC,EAAA,CADpBS,EAAc,kBACF1C"}

package/components/reusable/widget/widget.scss.js

@@ -61,41 +61,42 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 .widget-header {
   display: flex;
   align-items: center;
-  padding: 8px 16px 0 16px;
+  margin: 8px 16px 0 16px;
+  height: 40px;
 }
 .has-chart .widget-header {
   display: none;
 }
 .widget-header .title {
-  font-family: var(--kd-font-family-primary);
-  font-size: var(--kd-font-size-utility-1-sm);
-  line-height: var(--kd-line-height-utility-1-sm);
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-utility-2-sm);
+  line-height: var(--kd-line-height-utility-2-sm);
   font-weight: var(--kd-font-weight-regular);
   letter-spacing: var(--kd-letter-spacing-5);
   font-weight: 500;
 }
 @media (min-width: 42rem) {
   .widget-header .title {
-    font-size: var(--kd-font-size-utility-1-md);
-    line-height: var(--kd-line-height-utility-1-md);
+    font-size: var(--kd-font-size-utility-2-md);
+    line-height: var(--kd-line-height-utility-2-md);
   }
 }
 @media (min-width: 74rem) {
   .widget-header .title {
-    font-size: var(--kd-font-size-utility-1-lg);
-    line-height: var(--kd-line-height-utility-1-lg);
+    font-size: var(--kd-font-size-utility-2-lg);
+    line-height: var(--kd-line-height-utility-2-lg);
   }
 }
 @media (min-width: 82rem) {
   .widget-header .title {
-    font-size: var(--kd-font-size-utility-1-xlg);
-    line-height: var(--kd-line-height-utility-1-xlg);
+    font-size: var(--kd-font-size-utility-2-xlg);
+    line-height: var(--kd-line-height-utility-2-xlg);
   }
 }
 @media (min-width: 99rem) {
   .widget-header .title {
-    font-size: var(--kd-font-size-utility-1-max);
-    line-height: var(--kd-line-height-utility-1-max);
+    font-size: var(--kd-font-size-utility-2-max);
+    line-height: var(--kd-line-height-utility-2-max);
   }
 }
 .widget-header .description {

package/components/reusable/widget/widget.scss.js.map

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

package/external/@carbon/icons/es/search/24.js

@@ -0,0 +1,2 @@
+var t={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:24,height:24},content:[{elem:"path",attrs:{d:"M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"}}],name:"search",size:24};export{t as default};
+//# sourceMappingURL=24.js.map

package/external/@carbon/icons/es/search/24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"24.js","sources":["../../../../../../node_modules/@carbon/icons/es/search/24.js"],"sourcesContent":["/**\n * Copyright IBM Corp. 2016, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * Code generated by @carbon/icon-build-helpers. DO NOT EDIT.\n */\nvar _24 = {\n  \"elem\": \"svg\",\n  \"attrs\": {\n    \"xmlns\": \"http://www.w3.org/2000/svg\",\n    \"viewBox\": \"0 0 32 32\",\n    \"fill\": \"currentColor\",\n    \"width\": 24,\n    \"height\": 24\n  },\n  \"content\": [{\n    \"elem\": \"path\",\n    \"attrs\": {\n      \"d\": \"M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z\"\n    }\n  }],\n  \"name\": \"search\",\n  \"size\": 24\n};\n\nexport { _24 as default };\n"],"names":["_24","elem","attrs","xmlns","viewBox","fill","width","height","content","d","name","size"],"mappings":"AAQG,IAACA,EAAM,CACRC,KAAQ,MACRC,MAAS,CACPC,MAAS,6BACTC,QAAW,YACXC,KAAQ,eACRC,MAAS,GACTC,OAAU,IAEZC,QAAW,CAAC,CACVP,KAAQ,OACRC,MAAS,CACPO,EAAK,yHAGTC,KAAQ,SACRC,KAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",
@@ -31,7 +31,7 @@
     "lit": "^2.7.6"
   },
   "peerDependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^1.6.2"
+    "@kyndryl-design-system/shidoka-foundation": "^1.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -43,8 +43,8 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@custom-elements-manifest/analyzer": "^0.9.4",
-    "@kyndryl-design-system/shidoka-charts": "^1.6.0",
-    "@kyndryl-design-system/shidoka-foundation": "^1.6.2",
+    "@kyndryl-design-system/shidoka-charts": "^1.6.2",
+    "@kyndryl-design-system/shidoka-foundation": "^1.6.5",
     "@open-wc/testing": "^3.1.7",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",