@kyndryl-design-system/shidoka-applications 2.40.1 → 2.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/global/header/headerLink.d.ts +2 -0
  2. package/components/global/header/headerLink.d.ts.map +1 -1
  3. package/components/global/header/headerLink.js +3 -3
  4. package/components/global/header/headerLink.js.map +1 -1
  5. package/components/reusable/textInput/textInput.js +1 -1
  6. package/components/reusable/textInput/textInput.js.map +1 -1
  7. package/package.json +2 -2
package/components/global/header/headerLink.d.ts CHANGED
@@ -27,6 +27,8 @@ export declare class HeaderLink extends LitElement {
27
27
  divider: boolean;
28
28
  /** Label for sub-menu link search input, which is visible with > 5 sub-links. */
29
29
  searchLabel: string;
30
+ /** Number of child links required to show search input. */
31
+ searchThreshold: number;
30
32
  /** Text for mobile "Back" button. */
31
33
  backText: string;
32
34
  /** 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 CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -412,7 +412,7 @@ kyn-text-input {
412
412
  transform: scaleX(0);
413
413
  transform-origin: right;
414
414
  }
415
- }`;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`
415
+ }`;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`
416
416
  <div
417
417
  class="${r(e)}"
418
418
  @pointerleave=${e=>this.handlePointerLeave(e)}
@@ -440,7 +440,7 @@ kyn-text-input {
440
440
  ${this.backText}
441
441
  </button>
442
442
 
443
- ${n.length>5?d`
443
+ ${n.length>=this.searchThreshold?d`
444
444
  <kyn-text-input
445
445
  hideLabel
446
446
  size="sm"
@@ -459,5 +459,5 @@ kyn-text-input {
459
459
  <slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
460
460
  </div>
461
461
  </div>
462
- `}_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};
462
+ `}_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};
463
463
  //# sourceMappingURL=headerLink.js.map
package/components/global/header/headerLink.js.map CHANGED
@@ -1 +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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"}
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 /** 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/textInput/textInput.js CHANGED
@@ -613,7 +613,7 @@ input[type=password]::-ms-clear {
613
613
  </span>
614
614
  </kyn-button>
615
615
  `}
616
- ${"search"!==this.value||this.readonly?null:p`
616
+ ${"search"!==this.type||""===this.value||this.readonly?null:p`
617
617
  <kyn-button
618
618
  ?disabled=${this.disabled}
619
619
  class="clear-button"
package/components/reusable/textInput/textInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '../../reusable/button';\n\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport lockIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/no-overview.svg';\nimport unlockIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overview.svg';\n\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport TextInputScss from './textInput.scss';\n\nconst _defaultTextStrings = {\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n showPassword: 'Show password',\n hidePassword: 'Hide password',\n};\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot icon - Slot for contextual icon.\n * @slot tooltip - Slot for tooltip.\n *\n */\n@customElement('kyn-text-input')\nexport class TextInput extends FormMixin(LitElement) {\n static override styles = TextInputScss;\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Input type, limited to options that are \"text like\". */\n @property({ type: String })\n type: 'text' | 'password' | 'email' | 'search' | 'tel' | 'url' = 'text';\n\n /** Input size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Input placeholder. */\n @property({ type: String })\n placeholder = '';\n\n /** Makes the input required. */\n @property({ type: Boolean })\n required = false;\n\n /** Input disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Input readonly state. */\n @property({ type: Boolean })\n readonly = false;\n\n /** RegEx pattern to validate. */\n @property({ type: String })\n pattern!: string;\n\n /** Maximum number of characters. */\n @property({ type: Number })\n maxLength!: number;\n\n /** Minimum number of characters. */\n @property({ type: Number })\n minLength!: number;\n\n /** Place icon on the right. */\n @property({ type: Boolean })\n iconRight = false;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /**\n * Queries the <input> DOM element.\n * @ignore\n */\n @query('input')\n _inputEl!: HTMLInputElement;\n\n /**\n * Evaluates if an icon is slotted.\n * @ignore\n */\n @state()\n iconSlotted = false;\n\n /** Internal state for password visibility\n * @internal\n */\n @state()\n private passwordVisible = false;\n\n /**\n * Queries any slotted icons.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n iconSlot!: Array<HTMLElement>;\n\n override render() {\n return html`\n <div\n class=\"text-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n >\n <label\n class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n for=${this.name}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText || 'Required'}\n >*</abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </label>\n\n <div\n class=\"${classMap({\n 'input-wrapper': true,\n 'icon--left': this.iconSlotted && !this.iconRight,\n 'icon--right': this.iconSlotted && this.iconRight,\n })}\"\n >\n <span class=\"context-icon\">\n <slot name=\"icon\"></slot>\n </span>\n\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n 'is-readonly': this.readonly,\n })}\"\n type=${this.type === 'password' && this.passwordVisible\n ? 'text'\n : this.type}\n id=${this.name}\n name=${this.name}\n value=${this.value}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?invalid=${this._isInvalid}\n aria-invalid=${this._isInvalid}\n aria-describedby=${this._isInvalid ? 'error' : ''}\n pattern=${ifDefined(this.pattern)}\n minlength=${ifDefined(this.minLength)}\n maxlength=${ifDefined(this.maxLength)}\n @input=${(e: any) => this._handleInput(e)}\n />\n ${this.type === 'password' && !this.readonly\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"visibility-toggle\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.passwordVisible\n ? this._textStrings.hidePassword\n : this._textStrings.showPassword}\n @click=${this.disabled\n ? null\n : this._togglePasswordVisibility}\n >\n <span style=\"display:flex;\" slot=\"icon\">\n ${this.passwordVisible\n ? html`${unsafeSVG(unlockIcon)}`\n : html`${unsafeSVG(lockIcon)}`}\n </span>\n </kyn-button>\n `\n : null}\n ${this.value === 'search' && !this.readonly\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"clear-button\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${() => this._handleClear()}\n >\n <span style=\"display:flex;\" slot=\"icon\">\n ${unsafeSVG(clearIcon)}\n </span>\n </kyn-button>\n `\n : null}\n </div>\n\n <div class=\"caption-error-count\">\n <div>\n ${this.caption !== ''\n ? html`\n <div class=\"caption\" aria-disabled=${this.disabled}>\n ${this.caption}\n </div>\n `\n : null}\n ${this._isInvalid\n ? html`\n <div id=\"error\" class=\"error\">\n <span\n role=\"img\"\n class=\"error-icon\"\n aria-label=${this._textStrings.errorText}\n >${unsafeSVG(errorIcon)}</span\n >\n ${this.invalidText || this._internalValidationMsg}\n </div>\n `\n : null}\n </div>\n ${this.maxLength\n ? html`\n <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n `\n : null}\n </div>\n </div>\n `;\n }\n\n private _handleInput(e: any) {\n if (this.readonly) return;\n this.value = e.target.value;\n\n this._validate(true, false);\n this._emitValue(e);\n }\n\n private _handleClear() {\n if (this.readonly) return;\n this.value = '';\n this._inputEl.value = '';\n\n this._validate(true, false);\n this._emitValue();\n }\n\n private _emitValue(e?: any) {\n const Detail: any = {\n value: this.value,\n };\n if (e) {\n Detail.origEvent = e;\n }\n\n const event = new CustomEvent('on-input', {\n detail: Detail,\n });\n this.dispatchEvent(event);\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // get validity state from inputEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this._inputEl.validity, customError: true }\n : this._inputEl.validity;\n // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this._inputEl.validationMessage;\n\n // set validity on custom element, anchor to inputEl\n this._internals.setValidity(Validity, ValidationMessage, this._inputEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this._internalValidationMsg = this._inputEl.validationMessage;\n }\n\n // focus the form field to show validity\n if (report) {\n this._internals.reportValidity();\n }\n }\n\n override updated(changedProps: any) {\n // preserve FormMixin updated function\n this._onUpdated(changedProps);\n\n if (changedProps.has('value')) {\n // set value on input element\n this._inputEl.value = this.value;\n }\n }\n\n override firstUpdated() {\n this.determineIfSlotted();\n }\n\n private determineIfSlotted() {\n this.iconSlotted = this.iconSlot.length ? true : false;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n }\n }\n\n private _togglePasswordVisibility(e: MouseEvent) {\n e.stopPropagation();\n this.passwordVisible = !this.passwordVisible;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-text-input': TextInput;\n }\n}\n"],"names":["_defaultTextStrings","requiredText","clearAll","errorText","showPassword","hidePassword","TextInput","FormMixin","LitElement","constructor","this","label","type","size","caption","placeholder","required","disabled","readonly","iconRight","hideLabel","textStrings","_textStrings","iconSlotted","passwordVisible","render","html","name","_a","classMap","value","_isInvalid","ifDefined","pattern","minLength","maxLength","e","_handleInput","_togglePasswordVisibility","unsafeSVG","unlockIcon","lockIcon","_handleClear","clearIcon","errorIcon","invalidText","_internalValidationMsg","length","target","_validate","_emitValue","_inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","_internals","setValidity","reportValidity","updated","changedProps","_onUpdated","has","firstUpdated","determineIfSlotted","iconSlot","willUpdate","deepmerge","stopPropagation","styles","TextInputScss","__decorate","property","String","prototype","Boolean","Number","Object","state","query","queryAssignedElements","slot","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '../../reusable/button';\n\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport lockIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/no-overview.svg';\nimport unlockIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overview.svg';\n\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport TextInputScss from './textInput.scss';\n\nconst _defaultTextStrings = {\n requiredText: 'Required',\n clearAll: 'Clear all',\n errorText: 'Error',\n showPassword: 'Show password',\n hidePassword: 'Hide password',\n};\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot icon - Slot for contextual icon.\n * @slot tooltip - Slot for tooltip.\n *\n */\n@customElement('kyn-text-input')\nexport class TextInput extends FormMixin(LitElement) {\n static override styles = TextInputScss;\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Input type, limited to options that are \"text like\". */\n @property({ type: String })\n type: 'text' | 'password' | 'email' | 'search' | 'tel' | 'url' = 'text';\n\n /** Input size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Input placeholder. */\n @property({ type: String })\n placeholder = '';\n\n /** Makes the input required. */\n @property({ type: Boolean })\n required = false;\n\n /** Input disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Input readonly state. */\n @property({ type: Boolean })\n readonly = false;\n\n /** RegEx pattern to validate. */\n @property({ type: String })\n pattern!: string;\n\n /** Maximum number of characters. */\n @property({ type: Number })\n maxLength!: number;\n\n /** Minimum number of characters. */\n @property({ type: Number })\n minLength!: number;\n\n /** Place icon on the right. */\n @property({ type: Boolean })\n iconRight = false;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /**\n * Queries the <input> DOM element.\n * @ignore\n */\n @query('input')\n _inputEl!: HTMLInputElement;\n\n /**\n * Evaluates if an icon is slotted.\n * @ignore\n */\n @state()\n iconSlotted = false;\n\n /** Internal state for password visibility\n * @internal\n */\n @state()\n private passwordVisible = false;\n\n /**\n * Queries any slotted icons.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n iconSlot!: Array<HTMLElement>;\n\n override render() {\n return html`\n <div\n class=\"text-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n >\n <label\n class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n for=${this.name}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText || 'Required'}\n >*</abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </label>\n\n <div\n class=\"${classMap({\n 'input-wrapper': true,\n 'icon--left': this.iconSlotted && !this.iconRight,\n 'icon--right': this.iconSlotted && this.iconRight,\n })}\"\n >\n <span class=\"context-icon\">\n <slot name=\"icon\"></slot>\n </span>\n\n <input\n class=\"${classMap({\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n 'is-readonly': this.readonly,\n })}\"\n type=${this.type === 'password' && this.passwordVisible\n ? 'text'\n : this.type}\n id=${this.name}\n name=${this.name}\n value=${this.value}\n placeholder=${this.placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?invalid=${this._isInvalid}\n aria-invalid=${this._isInvalid}\n aria-describedby=${this._isInvalid ? 'error' : ''}\n pattern=${ifDefined(this.pattern)}\n minlength=${ifDefined(this.minLength)}\n maxlength=${ifDefined(this.maxLength)}\n @input=${(e: any) => this._handleInput(e)}\n />\n ${this.type === 'password' && !this.readonly\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"visibility-toggle\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.passwordVisible\n ? this._textStrings.hidePassword\n : this._textStrings.showPassword}\n @click=${this.disabled\n ? null\n : this._togglePasswordVisibility}\n >\n <span style=\"display:flex;\" slot=\"icon\">\n ${this.passwordVisible\n ? html`${unsafeSVG(unlockIcon)}`\n : html`${unsafeSVG(lockIcon)}`}\n </span>\n </kyn-button>\n `\n : null}\n ${this.type === 'search' && this.value !== '' && !this.readonly\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"clear-button\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${() => this._handleClear()}\n >\n <span style=\"display:flex;\" slot=\"icon\">\n ${unsafeSVG(clearIcon)}\n </span>\n </kyn-button>\n `\n : null}\n </div>\n\n <div class=\"caption-error-count\">\n <div>\n ${this.caption !== ''\n ? html`\n <div class=\"caption\" aria-disabled=${this.disabled}>\n ${this.caption}\n </div>\n `\n : null}\n ${this._isInvalid\n ? html`\n <div id=\"error\" class=\"error\">\n <span\n role=\"img\"\n class=\"error-icon\"\n aria-label=${this._textStrings.errorText}\n >${unsafeSVG(errorIcon)}</span\n >\n ${this.invalidText || this._internalValidationMsg}\n </div>\n `\n : null}\n </div>\n ${this.maxLength\n ? html`\n <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n `\n : null}\n </div>\n </div>\n `;\n }\n\n private _handleInput(e: any) {\n if (this.readonly) return;\n this.value = e.target.value;\n\n this._validate(true, false);\n this._emitValue(e);\n }\n\n private _handleClear() {\n if (this.readonly) return;\n this.value = '';\n this._inputEl.value = '';\n\n this._validate(true, false);\n this._emitValue();\n }\n\n private _emitValue(e?: any) {\n const Detail: any = {\n value: this.value,\n };\n if (e) {\n Detail.origEvent = e;\n }\n\n const event = new CustomEvent('on-input', {\n detail: Detail,\n });\n this.dispatchEvent(event);\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // get validity state from inputEl, combine customError flag if invalidText is provided\n const Validity =\n this.invalidText !== ''\n ? { ...this._inputEl.validity, customError: true }\n : this._inputEl.validity;\n // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n const ValidationMessage =\n this.invalidText !== ''\n ? this.invalidText\n : this._inputEl.validationMessage;\n\n // set validity on custom element, anchor to inputEl\n this._internals.setValidity(Validity, ValidationMessage, this._inputEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this._internalValidationMsg = this._inputEl.validationMessage;\n }\n\n // focus the form field to show validity\n if (report) {\n this._internals.reportValidity();\n }\n }\n\n override updated(changedProps: any) {\n // preserve FormMixin updated function\n this._onUpdated(changedProps);\n\n if (changedProps.has('value')) {\n // set value on input element\n this._inputEl.value = this.value;\n }\n }\n\n override firstUpdated() {\n this.determineIfSlotted();\n }\n\n private determineIfSlotted() {\n this.iconSlotted = this.iconSlot.length ? true : false;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n }\n }\n\n private _togglePasswordVisibility(e: MouseEvent) {\n e.stopPropagation();\n this.passwordVisible = !this.passwordVisible;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-text-input': TextInput;\n }\n}\n"],"names":["_defaultTextStrings","requiredText","clearAll","errorText","showPassword","hidePassword","TextInput","FormMixin","LitElement","constructor","this","label","type","size","caption","placeholder","required","disabled","readonly","iconRight","hideLabel","textStrings","_textStrings","iconSlotted","passwordVisible","render","html","name","_a","classMap","value","_isInvalid","ifDefined","pattern","minLength","maxLength","e","_handleInput","_togglePasswordVisibility","unsafeSVG","unlockIcon","lockIcon","_handleClear","clearIcon","errorIcon","invalidText","_internalValidationMsg","length","target","_validate","_emitValue","_inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","_internals","setValidity","reportValidity","updated","changedProps","_onUpdated","has","firstUpdated","determineIfSlotted","iconSlot","willUpdate","deepmerge","stopPropagation","styles","TextInputScss","__decorate","property","String","prototype","Boolean","Number","Object","state","query","queryAssignedElements","slot","customElement"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "2.40.1",
3
+ "version": "2.41.0",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
@@ -93,7 +93,7 @@
93
93
  "lint-staged": "^15.4.3",
94
94
  "lit-analyzer": "^2.0.3",
95
95
  "lit-css-loader": "^3.0.0",
96
- "playwright": "^1.52.0",
96
+ "playwright": "^1.53.0",
97
97
  "postcss": "^8.4.21",
98
98
  "prettier": "^2.8.2",
99
99
  "prismjs-components-importer": "^0.2.0",