@kyndryl-design-system/shidoka-applications 2.76.0 → 2.76.1
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.
|
@@ -240,12 +240,10 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
240
240
|
gap: 8px;
|
|
241
241
|
text-decoration: none;
|
|
242
242
|
color: var(--kd-color-text-level-primary);
|
|
243
|
-
white-space: nowrap;
|
|
244
243
|
border-radius: 4px;
|
|
245
244
|
transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
|
|
246
245
|
outline: 2px solid transparent;
|
|
247
246
|
outline-offset: -2px;
|
|
248
|
-
height: 30px;
|
|
249
247
|
padding: 6px 12px 6px 8px;
|
|
250
248
|
font-family: var(--kd-font-family-secondary);
|
|
251
249
|
font-size: var(--kd-font-size-utility-2-sm);
|
|
@@ -359,6 +357,7 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
359
357
|
padding: 16px;
|
|
360
358
|
background-color: var(--kd-color-background-opacity-1);
|
|
361
359
|
border-radius: 8px;
|
|
360
|
+
flex-grow: 1;
|
|
362
361
|
}
|
|
363
362
|
}
|
|
364
363
|
.menu__content {
|
|
@@ -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, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss?inline';\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\nexport type HeaderLinkTarget = '_self' | '_blank' | '_parent' | '_top';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details. `detail:{ origEvent: Event ,defaultPrevented: boolean}`\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 = unsafeCSS(HeaderLinkScss);\n\n /** Link open state.\n * @internal\n */\n @property({ type: Boolean, reflect: true })\n accessor open = false;\n\n /** Link url. */\n @property({ type: String })\n accessor 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 accessor target: HeaderLinkTarget = '_self';\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 accessor rel = '';\n\n /** Link active state, for example when URL path matches link href. */\n @property({ type: Boolean })\n accessor isActive = false;\n\n /** Link level, supports two levels.\n * @ignore\n */\n @state()\n accessor level = 1;\n\n /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n @property({ type: Boolean })\n accessor divider = false;\n\n /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n @property({ type: String })\n accessor searchLabel = 'Search';\n\n /** Number of child links required to show search input. */\n @property({ type: Number })\n accessor searchThreshold = 6;\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n accessor 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 accessor leftPadding = false;\n\n /** Text for mobile \"Back\" button. */\n @state()\n accessor _searchTerm = '';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links' })\n accessor 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 accessor _leaveTimer: any;\n\n /** Menu positioning\n * @internal\n */\n @state()\n accessor 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 || (this.level === 1 && this.isActive),\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=${styleMap(this.menuPosition)}\n >\n <div class=\"wrapper\">\n <button\n class=\"go-back\"\n type=\"button\"\n @click=${(e: Event) => this._handleBack(e)}\n >\n <span>${unsafeSVG(backIcon)}</span>\n ${this.backText}\n </button>\n ${Links.length >= this.searchThreshold\n ? html`\n <kyn-text-input\n hideLabel\n size=\"sm\"\n type=\"search\"\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\n name=\"links\"\n @slotchange=${this._handleLinksSlotChange}\n ></slot>\n </div>\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(e?: Event) {\n if (e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n // detect if we're inside the categorized/mega nav variant\n const headerCategories = this.closest('kyn-header-categories') as\n | (HTMLElement & { handleBackClick?: (evt?: Event) => void })\n | null;\n\n if (headerCategories?.handleBackClick) {\n headerCategories.handleBackClick(e);\n\n // Close any open header links under this nav\n const navRoot =\n (this.closest('kyn-header-nav') as HTMLElement | null) ??\n headerCategories;\n\n const links = navRoot.querySelectorAll<HTMLElement & { open?: boolean }>(\n 'kyn-header-link[open]'\n );\n\n links.forEach((link) => {\n link.removeAttribute('open');\n if ('open' in link) {\n (link as any).open = false;\n }\n });\n\n // Clear local search for this column\n this._searchTerm = '';\n this._searchFilter();\n\n return;\n }\n\n // BASIC NAV:\n // Preserve original behavior: go up one level\n this.open = false;\n this._searchTerm = '';\n this._searchFilter();\n }\n\n private _handleLinksSlotChange() {\n this.requestUpdate();\n }\n\n private get _isDesktopViewport(): boolean {\n if (typeof window === 'undefined') return true;\n return window.innerWidth >= 672;\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (\n e.pointerType === 'mouse' &&\n this.slottedEls.length &&\n this._isDesktopViewport\n ) {\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 this._isDesktopViewport\n ) {\n clearTimeout(this._enterTimer);\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 let level = 1;\n let node: any = this.parentNode;\n\n // Traverse up the DOM tree\n while (node) {\n if (node.nodeName === 'KYN-HEADER-LINK') {\n level = (node.level ?? 1) + 1;\n break;\n } else if (\n node.nodeName === 'KYN-HEADER-CATEGORY' &&\n node.parentNode?.nodeName === 'KYN-HEADER-LINK'\n ) {\n level = (node.parentNode.level ?? 1) + 1;\n break;\n } else if (\n window.innerWidth < 672 &&\n node.nodeName === 'KYN-HEADER-FLYOUT'\n ) {\n level = 2;\n break;\n }\n node = node.parentNode;\n }\n\n this.level = level;\n }\n\n private _positionMenu() {\n const linkBounds = this.getBoundingClientRect?.();\n const menuEl =\n this.shadowRoot?.querySelector<HTMLElement>('.menu__content');\n const menuBounds = menuEl?.getBoundingClientRect?.();\n\n if (!linkBounds || !menuBounds) {\n return;\n }\n\n const Padding = 12;\n const HeaderHeight = 64;\n\n const linkHalf = linkBounds.top + linkBounds.height / 2;\n const menuHalf = menuBounds.height / 2;\n\n const topCandidate =\n linkHalf + menuHalf > window.innerHeight\n ? linkHalf - menuHalf - (linkHalf + menuHalf - window.innerHeight) - 16\n : linkHalf - menuHalf;\n\n if (this.level === 1) {\n // get the height of the level 1 menu to use as submenu min-height\n let navMenuHeight = 0;\n const headerNav = this.closest('kyn-header-nav') as HTMLElement | null;\n if (headerNav) {\n const navMenu = headerNav.shadowRoot?.querySelector(\n '.menu__content'\n ) as HTMLElement | null;\n if (navMenu) {\n navMenuHeight = navMenu.offsetHeight;\n }\n }\n\n this.menuPosition = {\n top: HeaderHeight + 'px',\n left: '0px',\n minHeight: navMenuHeight + 'px',\n };\n } else {\n const top = topCandidate < HeaderHeight ? HeaderHeight : topCandidate;\n this.menuPosition = {\n top: top + 'px',\n left: linkBounds.right + Padding + 'px',\n };\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 private _handleDocumentClick = (e: Event) => this.handleClickOut(e);\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this._handleDocumentClick);\n window.addEventListener('resize', this._debounceResize);\n }\n\n override disconnectedCallback() {\n // clear timers to avoid callbacks after unmount\n if (this._enterTimer) {\n clearTimeout(this._enterTimer);\n this._enterTimer = undefined;\n }\n if (this._leaveTimer) {\n clearTimeout(this._leaveTimer);\n this._leaveTimer = undefined;\n }\n\n document.removeEventListener('click', this._handleDocumentClick);\n window.removeEventListener('resize', this._debounceResize);\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-link': HeaderLink;\n }\n}\n"],"names":["HeaderLink","customElement","LitElement","_classThis","_classSuper","_HeaderLink_open_accessor_storage","set","this","__runInitializers","_open_initializers","_HeaderLink_href_accessor_storage","_open_extraInitializers","_href_initializers","_HeaderLink_target_accessor_storage","_href_extraInitializers","_target_initializers","_HeaderLink_rel_accessor_storage","_target_extraInitializers","_rel_initializers","_HeaderLink_isActive_accessor_storage","_rel_extraInitializers","_isActive_initializers","_HeaderLink_level_accessor_storage","_isActive_extraInitializers","_level_initializers","_HeaderLink_divider_accessor_storage","_level_extraInitializers","_divider_initializers","_HeaderLink_searchLabel_accessor_storage","_divider_extraInitializers","_searchLabel_initializers","_HeaderLink_searchThreshold_accessor_storage","_searchLabel_extraInitializers","_searchThreshold_initializers","_HeaderLink_backText_accessor_storage","_searchThreshold_extraInitializers","_backText_initializers","_HeaderLink_leftPadding_accessor_storage","_backText_extraInitializers","_leftPadding_initializers","_HeaderLink__searchTerm_accessor_storage","_leftPadding_extraInitializers","__searchTerm_initializers","_HeaderLink_slottedEls_accessor_storage","__searchTerm_extraInitializers","_slottedEls_initializers","_enterTimer","_slottedEls_extraInitializers","_HeaderLink__leaveTimer_accessor_storage","__leaveTimer_initializers","_HeaderLink_menuPosition_accessor_storage","__leaveTimer_extraInitializers","_menuPosition_initializers","_debounceResize","_menuPosition_extraInitializers","debounce","determineLevel","_handleDocumentClick","e","handleClickOut","open","__classPrivateFieldGet","value","__classPrivateFieldSet","href","target","rel","isActive","level","divider","searchLabel","searchThreshold","backText","leftPadding","_searchTerm","slottedEls","_leaveTimer","menuPosition","render","classes","menu","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","handlePointerLeave","handlePointerEnter","handleClick","unsafeSVG","arrowIcon","styleMap","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","preventDefault","stopPropagation","headerCategories","closest","handleBackClick","removeAttribute","requestUpdate","_isDesktopViewport","window","innerWidth","pointerType","clearTimeout","setTimeout","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","composedPath","node","parentNode","nodeName","_c","linkBounds","getBoundingClientRect","menuEl","menuBounds","call","linkHalf","top","height","menuHalf","topCandidate","innerHeight","navMenuHeight","headerNav","navMenu","_d","offsetHeight","HeaderHeight","left","minHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","undefined","removeEventListener","property","type","Boolean","reflect","_href_decorators","String","_target_decorators","_rel_decorators","_isActive_decorators","_level_decorators","state","_divider_decorators","_searchLabel_decorators","_searchThreshold_decorators","Number","_backText_decorators","_leftPadding_decorators","__searchTerm_decorators","_slottedEls_decorators","queryAssignedElements","slot","__leaveTimer_decorators","_menuPosition_decorators","__esDecorate","_open_decorators","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderLinkScss"],"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, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss?inline';\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\nexport type HeaderLinkTarget = '_self' | '_blank' | '_parent' | '_top';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details. `detail:{ origEvent: Event ,defaultPrevented: boolean}`\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 = unsafeCSS(HeaderLinkScss);\n\n /** Link open state.\n * @internal\n */\n @property({ type: Boolean, reflect: true })\n accessor open = false;\n\n /** Link url. */\n @property({ type: String })\n accessor 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 accessor target: HeaderLinkTarget = '_self';\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 accessor rel = '';\n\n /** Link active state, for example when URL path matches link href. */\n @property({ type: Boolean })\n accessor isActive = false;\n\n /** Link level, supports two levels.\n * @ignore\n */\n @state()\n accessor level = 1;\n\n /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n @property({ type: Boolean })\n accessor divider = false;\n\n /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n @property({ type: String })\n accessor searchLabel = 'Search';\n\n /** Number of child links required to show search input. */\n @property({ type: Number })\n accessor searchThreshold = 6;\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n accessor 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 accessor leftPadding = false;\n\n /** Text for mobile \"Back\" button. */\n @state()\n accessor _searchTerm = '';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links' })\n accessor 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 accessor _leaveTimer: any;\n\n /** Menu positioning\n * @internal\n */\n @state()\n accessor 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 || (this.level === 1 && this.isActive),\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=${styleMap(this.menuPosition)}\n >\n <div class=\"wrapper\">\n <button\n class=\"go-back\"\n type=\"button\"\n @click=${(e: Event) => this._handleBack(e)}\n >\n <span>${unsafeSVG(backIcon)}</span>\n ${this.backText}\n </button>\n ${Links.length >= this.searchThreshold\n ? html`\n <kyn-text-input\n hideLabel\n size=\"sm\"\n type=\"search\"\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\n name=\"links\"\n @slotchange=${this._handleLinksSlotChange}\n ></slot>\n </div>\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(e?: Event) {\n if (e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n // detect if we're inside the categorized/mega nav variant\n const headerCategories = this.closest('kyn-header-categories') as\n | (HTMLElement & { handleBackClick?: (evt?: Event) => void })\n | null;\n\n if (headerCategories?.handleBackClick) {\n headerCategories.handleBackClick(e);\n\n // Close any open header links under this nav\n const navRoot =\n (this.closest('kyn-header-nav') as HTMLElement | null) ??\n headerCategories;\n\n const links = navRoot.querySelectorAll<HTMLElement & { open?: boolean }>(\n 'kyn-header-link[open]'\n );\n\n links.forEach((link) => {\n link.removeAttribute('open');\n if ('open' in link) {\n (link as any).open = false;\n }\n });\n\n // Clear local search for this column\n this._searchTerm = '';\n this._searchFilter();\n\n return;\n }\n\n // BASIC NAV:\n // Preserve original behavior: go up one level\n this.open = false;\n this._searchTerm = '';\n this._searchFilter();\n }\n\n private _handleLinksSlotChange() {\n this.requestUpdate();\n }\n\n private get _isDesktopViewport(): boolean {\n if (typeof window === 'undefined') return true;\n return window.innerWidth >= 672;\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (\n e.pointerType === 'mouse' &&\n this.slottedEls.length &&\n this._isDesktopViewport\n ) {\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 this._isDesktopViewport\n ) {\n clearTimeout(this._enterTimer);\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 let level = 1;\n let node: any = this.parentNode;\n\n // Traverse up the DOM tree\n while (node) {\n if (node.nodeName === 'KYN-HEADER-LINK') {\n level = (node.level ?? 1) + 1;\n break;\n } else if (\n node.nodeName === 'KYN-HEADER-CATEGORY' &&\n node.parentNode?.nodeName === 'KYN-HEADER-LINK'\n ) {\n level = (node.parentNode.level ?? 1) + 1;\n break;\n } else if (\n window.innerWidth < 672 &&\n node.nodeName === 'KYN-HEADER-FLYOUT'\n ) {\n level = 2;\n break;\n }\n node = node.parentNode;\n }\n\n this.level = level;\n }\n\n private _positionMenu() {\n const linkBounds = this.getBoundingClientRect?.();\n const menuEl =\n this.shadowRoot?.querySelector<HTMLElement>('.menu__content');\n const menuBounds = menuEl?.getBoundingClientRect?.();\n\n if (!linkBounds || !menuBounds) {\n return;\n }\n\n const Padding = 12;\n const HeaderHeight = 64;\n\n const linkHalf = linkBounds.top + linkBounds.height / 2;\n const menuHalf = menuBounds.height / 2;\n\n const topCandidate =\n linkHalf + menuHalf > window.innerHeight\n ? linkHalf - menuHalf - (linkHalf + menuHalf - window.innerHeight) - 16\n : linkHalf - menuHalf;\n\n if (this.level === 1) {\n // get the height of the level 1 menu to use as submenu min-height\n let navMenuHeight = 0;\n const headerNav = this.closest('kyn-header-nav') as HTMLElement | null;\n if (headerNav) {\n const navMenu = headerNav.shadowRoot?.querySelector(\n '.menu__content'\n ) as HTMLElement | null;\n if (navMenu) {\n navMenuHeight = navMenu.offsetHeight;\n }\n }\n\n this.menuPosition = {\n top: HeaderHeight + 'px',\n left: '0px',\n minHeight: navMenuHeight + 'px',\n };\n } else {\n const top = topCandidate < HeaderHeight ? HeaderHeight : topCandidate;\n this.menuPosition = {\n top: top + 'px',\n left: linkBounds.right + Padding + 'px',\n };\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 private _handleDocumentClick = (e: Event) => this.handleClickOut(e);\n\n override connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this._handleDocumentClick);\n window.addEventListener('resize', this._debounceResize);\n }\n\n override disconnectedCallback() {\n // clear timers to avoid callbacks after unmount\n if (this._enterTimer) {\n clearTimeout(this._enterTimer);\n this._enterTimer = undefined;\n }\n if (this._leaveTimer) {\n clearTimeout(this._leaveTimer);\n this._leaveTimer = undefined;\n }\n\n document.removeEventListener('click', this._handleDocumentClick);\n window.removeEventListener('resize', this._debounceResize);\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-link': HeaderLink;\n }\n}\n"],"names":["HeaderLink","customElement","LitElement","_classThis","_classSuper","_HeaderLink_open_accessor_storage","set","this","__runInitializers","_open_initializers","_HeaderLink_href_accessor_storage","_open_extraInitializers","_href_initializers","_HeaderLink_target_accessor_storage","_href_extraInitializers","_target_initializers","_HeaderLink_rel_accessor_storage","_target_extraInitializers","_rel_initializers","_HeaderLink_isActive_accessor_storage","_rel_extraInitializers","_isActive_initializers","_HeaderLink_level_accessor_storage","_isActive_extraInitializers","_level_initializers","_HeaderLink_divider_accessor_storage","_level_extraInitializers","_divider_initializers","_HeaderLink_searchLabel_accessor_storage","_divider_extraInitializers","_searchLabel_initializers","_HeaderLink_searchThreshold_accessor_storage","_searchLabel_extraInitializers","_searchThreshold_initializers","_HeaderLink_backText_accessor_storage","_searchThreshold_extraInitializers","_backText_initializers","_HeaderLink_leftPadding_accessor_storage","_backText_extraInitializers","_leftPadding_initializers","_HeaderLink__searchTerm_accessor_storage","_leftPadding_extraInitializers","__searchTerm_initializers","_HeaderLink_slottedEls_accessor_storage","__searchTerm_extraInitializers","_slottedEls_initializers","_enterTimer","_slottedEls_extraInitializers","_HeaderLink__leaveTimer_accessor_storage","__leaveTimer_initializers","_HeaderLink_menuPosition_accessor_storage","__leaveTimer_extraInitializers","_menuPosition_initializers","_debounceResize","_menuPosition_extraInitializers","debounce","determineLevel","_handleDocumentClick","e","handleClickOut","open","__classPrivateFieldGet","value","__classPrivateFieldSet","href","target","rel","isActive","level","divider","searchLabel","searchThreshold","backText","leftPadding","_searchTerm","slottedEls","_leaveTimer","menuPosition","render","classes","menu","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","handlePointerLeave","handlePointerEnter","handleClick","unsafeSVG","arrowIcon","styleMap","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","preventDefault","stopPropagation","headerCategories","closest","handleBackClick","removeAttribute","requestUpdate","_isDesktopViewport","window","innerWidth","pointerType","clearTimeout","setTimeout","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","composedPath","node","parentNode","nodeName","_c","linkBounds","getBoundingClientRect","menuEl","menuBounds","call","linkHalf","top","height","menuHalf","topCandidate","innerHeight","navMenuHeight","headerNav","navMenu","_d","offsetHeight","HeaderHeight","left","minHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","undefined","removeEventListener","property","type","Boolean","reflect","_href_decorators","String","_target_decorators","_rel_decorators","_isActive_decorators","_level_decorators","state","_divider_decorators","_searchLabel_decorators","_searchThreshold_decorators","Number","_backText_decorators","_leftPadding_decorators","__searchTerm_decorators","_slottedEls_decorators","queryAssignedElements","slot","__leaveTimer_decorators","_menuPosition_decorators","__esDecorate","_open_decorators","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderLinkScss"],"mappings":"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"}
|
|
@@ -246,8 +246,12 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
246
246
|
|
|
247
247
|
.menu__content {
|
|
248
248
|
padding: 8px 12px;
|
|
249
|
-
|
|
250
|
-
|
|
249
|
+
}
|
|
250
|
+
@media (min-width: 42rem) {
|
|
251
|
+
.menu__content {
|
|
252
|
+
width: 230px;
|
|
253
|
+
}
|
|
254
|
+
}`;let f=(()=>{var n,f,x;let y,_,w,O,C,z=[c("kyn-header-nav")],j=[],M=s,S=[],$=[],E=[],H=[],L=[],V=[];return _=class extends M{constructor(){super(...arguments),n.set(this,i(this,S,!1)),f.set(this,(i(this,$),i(this,E,"left"))),x.set(this,(i(this,H),i(this,L,!1))),this._attrObserver=i(this,V),this._boundHandleClickOut=e=>this._handleClickOut(e)}get menuOpen(){return o(this,n,"f")}set menuOpen(e){r(this,n,e,"f")}get slot(){return o(this,f,"f")}set slot(e){r(this,f,e,"f")}get hasCategories(){return o(this,x,"f")}set hasCategories(e){r(this,x,e,"f")}get _isDesktop(){return"undefined"==typeof window||window.innerWidth>=672}render(){const e={"header-nav":!0,menu:!0,open:this.menuOpen},t={menu__content:!0,left:!0,"categories-open":this.hasCategories};return d`
|
|
251
255
|
<div class=${h(e)}>
|
|
252
256
|
<button
|
|
253
257
|
class="btn interactive"
|
|
@@ -262,5 +266,5 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
262
266
|
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
263
267
|
</div>
|
|
264
268
|
</div>
|
|
265
|
-
`}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_updateCategoriesVisibility(){const e=p("kyn-header-link",this),t=Array.from(e).some((e=>e.hasAttribute("open")||e.hasAttribute("isactive"))),i=Boolean(g("kyn-header-categories",this)),o=t||i;this.hasCategories!==o&&(this.hasCategories=o)}_handleSlotChange(){this._updateCategoriesVisibility()}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}firstUpdated(e){this._updateCategoriesVisibility()}willUpdate(e){var t;if(e.has("menuOpen")){const e={open:this.menuOpen};this.dispatchEvent(new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:e})),null===(t=this.ownerDocument)||void 0===t||t.dispatchEvent(new CustomEvent("on-nav-toggle",{detail:e}))}}updated(e){e.has("hasCategories")&&this.classList.toggle("categories-open",this.hasCategories)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._boundHandleClickOut),this._attrObserver=new MutationObserver((()=>{this._updateCategoriesVisibility()})),this._attrObserver.observe(this,{attributes:!0,subtree:!0,attributeFilter:["open"],childList:!0})}disconnectedCallback(){document.removeEventListener("click",this._boundHandleClickOut),this._attrObserver&&(this._attrObserver.disconnect(),this._attrObserver=void 0),super.disconnectedCallback()}},n=new WeakMap,f=new WeakMap,x=new WeakMap,e(
|
|
269
|
+
`}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_updateCategoriesVisibility(){const e=p("kyn-header-link",this),t=Array.from(e).some((e=>e.hasAttribute("open")||e.hasAttribute("isactive"))),i=Boolean(g("kyn-header-categories",this)),o=t||i;this.hasCategories!==o&&(this.hasCategories=o)}_handleSlotChange(){this._updateCategoriesVisibility()}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}firstUpdated(e){this._updateCategoriesVisibility()}willUpdate(e){var t;if(e.has("menuOpen")){const e={open:this.menuOpen};this.dispatchEvent(new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:e})),null===(t=this.ownerDocument)||void 0===t||t.dispatchEvent(new CustomEvent("on-nav-toggle",{detail:e}))}}updated(e){e.has("hasCategories")&&this.classList.toggle("categories-open",this.hasCategories)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._boundHandleClickOut),this._attrObserver=new MutationObserver((()=>{this._updateCategoriesVisibility()})),this._attrObserver.observe(this,{attributes:!0,subtree:!0,attributeFilter:["open"],childList:!0})}disconnectedCallback(){document.removeEventListener("click",this._boundHandleClickOut),this._attrObserver&&(this._attrObserver.disconnect(),this._attrObserver=void 0),super.disconnectedCallback()}},n=new WeakMap,f=new WeakMap,x=new WeakMap,e(_,"HeaderNav"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=M[Symbol.metadata])&&void 0!==e?e:null):void 0;w=[u()],O=[m({type:String,reflect:!0})],C=[u()],t(_,null,w,{kind:"accessor",name:"menuOpen",static:!1,private:!1,access:{has:e=>"menuOpen"in e,get:e=>e.menuOpen,set:(e,t)=>{e.menuOpen=t}},metadata:i},S,$),t(_,null,O,{kind:"accessor",name:"slot",static:!1,private:!1,access:{has:e=>"slot"in e,get:e=>e.slot,set:(e,t)=>{e.slot=t}},metadata:i},E,H),t(_,null,C,{kind:"accessor",name:"hasCategories",static:!1,private:!1,access:{has:e=>"hasCategories"in e,get:e=>e.hasCategories,set:(e,t)=>{e.hasCategories=t}},metadata:i},L,V),t(null,y={value:_},z,{kind:"class",name:_.name,metadata:i},null,j),_=y.value,i&&Object.defineProperty(_,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),_.styles=l(k),i(_,j),_})();export{f as HeaderNav};
|
|
266
270
|
//# sourceMappingURL=headerNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS, type PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n querySelectorAllDeep,\n querySelectorDeep,\n} from 'query-selector-shadow-dom';\nimport HeaderNavScss from './headerNav.scss?inline';\n\nimport menuIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/hamburger-menu.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n static override styles = unsafeCSS(HeaderNavScss);\n\n /** Small screen header nav visibility.\n * @ignore\n */\n @state()\n accessor menuOpen = false;\n\n /** Force correct slot\n * @internal\n */\n @property({ type: String, reflect: true })\n override accessor slot = 'left';\n\n /** Boolean value reflecting whether the navigation has categories.\n * @internal\n */\n @state()\n accessor hasCategories = false;\n\n /** Mutation observer for attribute changes.\n * @internal\n */\n private _attrObserver?: MutationObserver;\n\n /** Bound document click handler to allow proper add/remove of listener\n * @internal\n */\n private _boundHandleClickOut = (e: Event) => this._handleClickOut(e);\n\n /** @internal */\n private get _isDesktop(): boolean {\n if (typeof window === 'undefined') return true;\n return window.innerWidth >= 672;\n }\n\n override render() {\n const classes = {\n 'header-nav': true,\n menu: true,\n open: this.menuOpen,\n };\n\n const menuContentClasses = {\n menu__content: true,\n left: true,\n 'categories-open': this.hasCategories,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleMenuOpen()}\n >\n ${this.menuOpen\n ? html`<span>${unsafeSVG(closeIcon)}</span>`\n : html`<span>${unsafeSVG(menuIcon)}</span>`}\n </button>\n\n <div class=${classMap(menuContentClasses)}>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _toggleMenuOpen() {\n this.menuOpen = !this.menuOpen;\n }\n\n private _updateCategoriesVisibility(): void {\n const links = querySelectorAllDeep('kyn-header-link', this);\n\n const hasOpenCategory = Array.from(links).some((link) => {\n return link.hasAttribute('open') || link.hasAttribute('isactive');\n });\n\n const hasCategoriesElement = Boolean(\n querySelectorDeep('kyn-header-categories', this)\n );\n\n const nextHasCategories = hasOpenCategory || hasCategoriesElement;\n\n if (this.hasCategories !== nextHasCategories) {\n this.hasCategories = nextHasCategories;\n }\n }\n\n private _handleSlotChange() {\n this._updateCategoriesVisibility();\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.menuOpen = false;\n }\n }\n\n protected override firstUpdated(_changed: PropertyValueMap<this>): void {\n this._updateCategoriesVisibility();\n }\n\n override willUpdate(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('menuOpen')) {\n const detail = { open: this.menuOpen };\n\n this.dispatchEvent(\n new CustomEvent('on-nav-toggle', {\n composed: true,\n bubbles: true,\n detail,\n })\n );\n\n // dispatch to document for other components to listen\n this.ownerDocument?.dispatchEvent(\n new CustomEvent('on-nav-toggle', { detail })\n );\n }\n }\n\n override updated(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('hasCategories')) {\n this.classList.toggle('categories-open', this.hasCategories);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n document.addEventListener('click', this._boundHandleClickOut);\n\n this._attrObserver = new MutationObserver(() => {\n this._updateCategoriesVisibility();\n });\n\n this._attrObserver.observe(this, {\n attributes: true,\n subtree: true,\n attributeFilter: ['open'],\n childList: true,\n });\n }\n\n override disconnectedCallback(): void {\n document.removeEventListener('click', this._boundHandleClickOut);\n\n if (this._attrObserver) {\n this._attrObserver.disconnect();\n this._attrObserver = undefined;\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav': HeaderNav;\n }\n}\n"],"names":["HeaderNav","customElement","LitElement","_classThis","_classSuper","_HeaderNav_menuOpen_accessor_storage","set","this","__runInitializers","_menuOpen_initializers","_HeaderNav_slot_accessor_storage","_menuOpen_extraInitializers","_slot_initializers","_HeaderNav_hasCategories_accessor_storage","_slot_extraInitializers","_hasCategories_initializers","_attrObserver","_hasCategories_extraInitializers","_boundHandleClickOut","e","_handleClickOut","menuOpen","__classPrivateFieldGet","value","__classPrivateFieldSet","slot","hasCategories","_isDesktop","window","innerWidth","render","classes","menu","open","menuContentClasses","menu__content","left","html","classMap","_toggleMenuOpen","unsafeSVG","closeIcon","menuIcon","_handleSlotChange","_updateCategoriesVisibility","links","querySelectorAllDeep","hasOpenCategory","Array","from","some","link","hasAttribute","hasCategoriesElement","Boolean","querySelectorDeep","nextHasCategories","composedPath","includes","firstUpdated","_changed","willUpdate","changedProps","has","detail","dispatchEvent","CustomEvent","composed","bubbles","_a","ownerDocument","updated","classList","toggle","connectedCallback","super","document","addEventListener","MutationObserver","observe","attributes","subtree","attributeFilter","childList","disconnectedCallback","removeEventListener","disconnect","undefined","_menuOpen_decorators","state","property","type","String","reflect","_hasCategories_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_slot_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderNavScss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS, type PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n querySelectorAllDeep,\n querySelectorDeep,\n} from 'query-selector-shadow-dom';\nimport HeaderNavScss from './headerNav.scss?inline';\n\nimport menuIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/hamburger-menu.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n static override styles = unsafeCSS(HeaderNavScss);\n\n /** Small screen header nav visibility.\n * @ignore\n */\n @state()\n accessor menuOpen = false;\n\n /** Force correct slot\n * @internal\n */\n @property({ type: String, reflect: true })\n override accessor slot = 'left';\n\n /** Boolean value reflecting whether the navigation has categories.\n * @internal\n */\n @state()\n accessor hasCategories = false;\n\n /** Mutation observer for attribute changes.\n * @internal\n */\n private _attrObserver?: MutationObserver;\n\n /** Bound document click handler to allow proper add/remove of listener\n * @internal\n */\n private _boundHandleClickOut = (e: Event) => this._handleClickOut(e);\n\n /** @internal */\n private get _isDesktop(): boolean {\n if (typeof window === 'undefined') return true;\n return window.innerWidth >= 672;\n }\n\n override render() {\n const classes = {\n 'header-nav': true,\n menu: true,\n open: this.menuOpen,\n };\n\n const menuContentClasses = {\n menu__content: true,\n left: true,\n 'categories-open': this.hasCategories,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleMenuOpen()}\n >\n ${this.menuOpen\n ? html`<span>${unsafeSVG(closeIcon)}</span>`\n : html`<span>${unsafeSVG(menuIcon)}</span>`}\n </button>\n\n <div class=${classMap(menuContentClasses)}>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _toggleMenuOpen() {\n this.menuOpen = !this.menuOpen;\n }\n\n private _updateCategoriesVisibility(): void {\n const links = querySelectorAllDeep('kyn-header-link', this);\n\n const hasOpenCategory = Array.from(links).some((link) => {\n return link.hasAttribute('open') || link.hasAttribute('isactive');\n });\n\n const hasCategoriesElement = Boolean(\n querySelectorDeep('kyn-header-categories', this)\n );\n\n const nextHasCategories = hasOpenCategory || hasCategoriesElement;\n\n if (this.hasCategories !== nextHasCategories) {\n this.hasCategories = nextHasCategories;\n }\n }\n\n private _handleSlotChange() {\n this._updateCategoriesVisibility();\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.menuOpen = false;\n }\n }\n\n protected override firstUpdated(_changed: PropertyValueMap<this>): void {\n this._updateCategoriesVisibility();\n }\n\n override willUpdate(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('menuOpen')) {\n const detail = { open: this.menuOpen };\n\n this.dispatchEvent(\n new CustomEvent('on-nav-toggle', {\n composed: true,\n bubbles: true,\n detail,\n })\n );\n\n // dispatch to document for other components to listen\n this.ownerDocument?.dispatchEvent(\n new CustomEvent('on-nav-toggle', { detail })\n );\n }\n }\n\n override updated(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('hasCategories')) {\n this.classList.toggle('categories-open', this.hasCategories);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n document.addEventListener('click', this._boundHandleClickOut);\n\n this._attrObserver = new MutationObserver(() => {\n this._updateCategoriesVisibility();\n });\n\n this._attrObserver.observe(this, {\n attributes: true,\n subtree: true,\n attributeFilter: ['open'],\n childList: true,\n });\n }\n\n override disconnectedCallback(): void {\n document.removeEventListener('click', this._boundHandleClickOut);\n\n if (this._attrObserver) {\n this._attrObserver.disconnect();\n this._attrObserver = undefined;\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav': HeaderNav;\n }\n}\n"],"names":["HeaderNav","customElement","LitElement","_classThis","_classSuper","_HeaderNav_menuOpen_accessor_storage","set","this","__runInitializers","_menuOpen_initializers","_HeaderNav_slot_accessor_storage","_menuOpen_extraInitializers","_slot_initializers","_HeaderNav_hasCategories_accessor_storage","_slot_extraInitializers","_hasCategories_initializers","_attrObserver","_hasCategories_extraInitializers","_boundHandleClickOut","e","_handleClickOut","menuOpen","__classPrivateFieldGet","value","__classPrivateFieldSet","slot","hasCategories","_isDesktop","window","innerWidth","render","classes","menu","open","menuContentClasses","menu__content","left","html","classMap","_toggleMenuOpen","unsafeSVG","closeIcon","menuIcon","_handleSlotChange","_updateCategoriesVisibility","links","querySelectorAllDeep","hasOpenCategory","Array","from","some","link","hasAttribute","hasCategoriesElement","Boolean","querySelectorDeep","nextHasCategories","composedPath","includes","firstUpdated","_changed","willUpdate","changedProps","has","detail","dispatchEvent","CustomEvent","composed","bubbles","_a","ownerDocument","updated","classList","toggle","connectedCallback","super","document","addEventListener","MutationObserver","observe","attributes","subtree","attributeFilter","childList","disconnectedCallback","removeEventListener","disconnect","undefined","_menuOpen_decorators","state","property","type","String","reflect","_hasCategories_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_slot_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderNavScss"],"mappings":"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"}
|