{"version":3,"file":"primary-navigation-main-menu-item.C3T8peSi.js","sources":["../../../../../packages/web-components/src/lib/components/primary-navigation-main-menu-item/primary-navigation-main-menu-item.ts"],"sourcesContent":["import { PropertyValueMap, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themedefault } from '@principal/design-system-tokens';\nimport { computePosition, offset, arrow, shift } from '@floating-ui/dom';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './primary-navigation-main-menu-item.scss?inline';\nimport '@principal/design-system-icons-web/chevron-down';\nimport '@principal/design-system-icons-web/arrow-right';\n\n/**\n * @summary A list item (li) element that contains a link (a), or a button\n *\n * @slot default Required: One or more pds-primary-navigation-dropdown-link elements\n *\n * @fires pds-primary-navigation-main-menu-dropdown-close A custom event dispatched on closing a dropdown\n * @fires pds-primary-navigation-main-menu-dropdown-open A custom event dispatched on opening a dropdown\n * @fires pds-primary-navigation-main-menu-link-click A custom event dispatched when a link inside the main-menu-item gets clicked\n */\n@customElement('pds-primary-navigation-main-menu-item', {\n category: 'component',\n type: 'component',\n state: 'stable',\n styles,\n})\nexport class PdsPrimaryNavigationMainMenuItem extends PdsElement {\n /**\n * Determines if the item should be a dropdown\n */\n @property({ type: Boolean })\n dropdown: boolean = false;\n\n /**\n * Determines if the item should be a megamenu\n */\n @property({ type: Boolean })\n megamenu: boolean = false;\n\n /**\n * Tracks the active class for dropdown items\n * @internal\n */\n @property({ type: Boolean })\n isActive: boolean = false;\n\n /**\n * If the item is not a dropdown or megamenu, the link for the item\n */\n @property()\n href?: string = undefined;\n\n /**\n * The item's text\n */\n @property()\n text?: string;\n\n /**\n * Determines if the item should have an arrow icon\n */\n @property({ type: Boolean })\n arrow: boolean = false;\n\n /**\n * Determines if the item should have a divider line\n */\n @property({ type: Boolean })\n divider: boolean = false;\n\n /**\n * Adds an aria-label to the main menu item dropdown/mega menu\n */\n @property()\n ariaLabel: string;\n\n /**\n * Initialize functions\n */\n constructor() {\n super();\n this.handleOnClickOutside = this.handleOnClickOutside.bind(this);\n }\n\n protected override firstUpdated() {\n super.firstUpdated();\n this.setWindowResizeHandler();\n }\n\n updated(\n changedProperties: PropertyValueMap | Map,\n ): void {\n if (\n changedProperties.has('isActive') ||\n changedProperties.has('responsiveViewportSize')\n ) {\n const poppedPanel = this.shadowRoot?.querySelector(\n `.${this.classEl('panel')}`,\n ) as HTMLElement;\n if (\n this.isActive &&\n (this.responsiveViewportSize === 'lg' ||\n this.responsiveViewportSize === 'xl')\n ) {\n const arrowEl = this.shadowRoot?.querySelector(\n `.${this.classEl('panel-arrow')}`,\n ) as HTMLElement;\n\n const placement = this.megamenu ? 'bottom-start' : 'bottom';\n if (poppedPanel) {\n computePosition(this, poppedPanel, {\n placement,\n middleware: [\n shift(),\n offset({ mainAxis: 40 }),\n arrow({ element: arrowEl }),\n ],\n }).then(({ x, y, middlewareData }) => {\n Object.assign(poppedPanel.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (middlewareData.arrow) {\n const { x: arrowX } = middlewareData.arrow;\n\n Object.assign(arrowEl.style, {\n left: `${arrowX}px`,\n top: `${-arrowEl.offsetHeight}px`,\n });\n }\n });\n }\n } else if (poppedPanel) {\n Object.assign(poppedPanel.style, { left: `0`, top: `0` });\n }\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('mouseup', this.handleOnClickOutside, false);\n document.addEventListener('keydown', this.handleKeydown, false);\n }\n\n /*\n * Disconnected callback lifecycle\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n // Remove window resize event listener\n document.removeEventListener('mouseup', this.handleOnClickOutside, false);\n document.removeEventListener('keydown', this.handleKeydown, false);\n }\n\n /**\n * Handle click outside the component\n */\n handleOnClickOutside(e: MouseEvent) {\n // If the nav is already closed then we don't care about outside clicks and we\n // can bail early\n if (!this.isActive) {\n return;\n }\n\n // Check to see if we clicked inside the active navigation item\n const didClickInside = e.composedPath().includes(this);\n\n // Only apply click outside breakpoint greater than or equal to 1024px to get better\n // accordion behavior on small screens\n if (window.innerWidth >= themedefault.BreakpointsPixelLg) {\n // If the navigation is active and we've clicked outside of the nav then it should be closed.\n if (this.isActive && !didClickInside) {\n const customEvent = new CustomEvent(\n 'pds-primary-navigation-main-menu-dropdown-close',\n {\n bubbles: true,\n composed: true,\n detail: {\n summary: this.text,\n },\n },\n );\n\n this.dispatchEvent(customEvent);\n\n this.isActive = false;\n }\n }\n }\n\n handleKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n this.isActive = false;\n const customEvent = new CustomEvent(\n `pds-primary-navigation-main-menu-dropdown-${\n this.isActive === false ? 'close' : 'open'\n }`,\n {\n bubbles: true,\n composed: true,\n detail: {\n summary: this.text,\n },\n },\n );\n this.dispatchEvent(customEvent);\n }\n }\n\n toggleIsActive() {\n if (this.parentNode) {\n const navItems =\n this.parentNode.querySelectorAll(\n 'pds-primary-navigation-main-menu-item',\n );\n navItems.forEach((element) => {\n if (element !== this) {\n // Close the show hide panel on click outside\n // eslint-disable-next-line no-param-reassign\n element.isActive = false;\n }\n });\n }\n this.isActive = !this.isActive;\n }\n\n handleClickButton() {\n const customEvent = new CustomEvent(\n `pds-primary-navigation-main-menu-dropdown-${\n this.isActive === false ? 'open' : 'close'\n }`,\n {\n bubbles: true,\n composed: true,\n detail: {\n summary: this.text,\n },\n },\n );\n\n this.dispatchEvent(customEvent);\n\n this.toggleIsActive();\n }\n\n handleClick() {\n const customEvent = new CustomEvent(\n 'pds-primary-navigation-main-menu-link-click',\n {\n bubbles: true,\n composed: true,\n detail: {\n summary: this.text,\n },\n },\n );\n\n this.dispatchEvent(customEvent);\n }\n\n /**\n * internal\n */\n get classNames() {\n return {\n megamenu: !!this.megamenu,\n dropdown: !!this.dropdown,\n 'is-active': !!this.isActive,\n arrow: !!this.arrow,\n divider: !!this.divider,\n };\n }\n\n render() {\n if (this.href) {\n return html`
  • \n \n ${this.text}\n ${this.arrow === true\n ? html``\n : html``}\n \n \n
    • `;\n }\n return html`
  • \n \n ${this.text}\n ${this.dropdown === true || this.megamenu === true\n ? html``\n : ''}\n \n ${this.dropdown === true || this.megamenu === true\n ? html`\n \n
    \n
    \n \n
    \n \n `\n : ''}\n
    • `;\n }\n}\n"],"names":["PdsPrimaryNavigationMainMenuItem","PdsElement","changedProperties","poppedPanel","_a","arrowEl","_b","placement","computePosition","shift","offset","arrow","x","y","middlewareData","arrowX","e","didClickInside","themedefault.BreakpointsPixelLg","customEvent","element","html","ifDefined","__decorateClass","property","customElement","styles"],"mappings":";;;;;;;;;;;;AA0Ba,IAAAA,IAAN,cAA+CC,EAAW;AAAA;AAAA;AAAA;AAAA,EAqD/D,cAAc;AACN,aAjDY,KAAA,WAAA,IAMA,KAAA,WAAA,IAOA,KAAA,WAAA,IAMJ,KAAA,OAAA,QAYC,KAAA,QAAA,IAME,KAAA,UAAA,IAajB,KAAK,uBAAuB,KAAK,qBAAqB,KAAK,IAAI;AAAA,EACjE;AAAA,EAEmB,eAAe;AAChC,UAAM,aAAa,GACnB,KAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,QACEC,GACM;;AACN,QACEA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,wBAAwB,GAC9C;AACM,YAAAC,KAAcC,IAAA,KAAK,eAAL,gBAAAA,EAAiB;AAAA,QACnC,IAAI,KAAK,QAAQ,OAAO,CAAC;AAAA;AAE3B,UACE,KAAK,aACJ,KAAK,2BAA2B,QAC/B,KAAK,2BAA2B,OAClC;AACM,cAAAC,KAAUC,IAAA,KAAK,eAAL,gBAAAA,EAAiB;AAAA,UAC/B,IAAI,KAAK,QAAQ,aAAa,CAAC;AAAA,WAG3BC,IAAY,KAAK,WAAW,iBAAiB;AACnD,QAAIJ,KACFK,EAAgB,MAAML,GAAa;AAAA,UACjC,WAAAI;AAAA,UACA,YAAY;AAAA,YACVE,EAAM;AAAA,YACNC,EAAO,EAAE,UAAU,IAAI;AAAA,YACvBC,EAAM,EAAE,SAASN,GAAS;AAAA,UAC5B;AAAA,QAAA,CACD,EAAE,KAAK,CAAC,EAAE,GAAAO,GAAG,GAAAC,GAAG,gBAAAC,QAAqB;AAMpC,cALO,OAAA,OAAOX,EAAY,OAAO;AAAA,YAC/B,MAAM,GAAGS,CAAC;AAAA,YACV,KAAK,GAAGC,CAAC;AAAA,UAAA,CACV,GAEGC,EAAe,OAAO;AACxB,kBAAM,EAAE,GAAGC,MAAWD,EAAe;AAE9B,mBAAA,OAAOT,EAAQ,OAAO;AAAA,cAC3B,MAAM,GAAGU,CAAM;AAAA,cACf,KAAK,GAAG,CAACV,EAAQ,YAAY;AAAA,YAAA,CAC9B;AAAA,UACH;AAAA,QAAA,CACD;AAAA,aAEMF,KACF,OAAA,OAAOA,EAAY,OAAO,EAAE,MAAM,KAAK,KAAK,IAAK,CAAA;AAAA,IAE5D;AAAA,EACF;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB,GACxB,SAAS,iBAAiB,WAAW,KAAK,sBAAsB,EAAK,GACrE,SAAS,iBAAiB,WAAW,KAAK,eAAe,EAAK;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB;AACrB,UAAM,qBAAqB,GAE3B,SAAS,oBAAoB,WAAW,KAAK,sBAAsB,EAAK,GACxE,SAAS,oBAAoB,WAAW,KAAK,eAAe,EAAK;AAAA,EACnE;AAAA;AAAA;AAAA;AAAA,EAKA,qBAAqBa,GAAe;AAG9B,QAAA,CAAC,KAAK;AACR;AAIF,UAAMC,IAAiBD,EAAE,aAAa,EAAE,SAAS,IAAI;AAIjD,QAAA,OAAO,cAAcE,KAEnB,KAAK,YAAY,CAACD,GAAgB;AACpC,YAAME,IAAc,IAAI;AAAA,QACtB;AAAA,QACA;AAAA,UACE,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ;AAAA,YACN,SAAS,KAAK;AAAA,UAChB;AAAA,QACF;AAAA,MAAA;AAGF,WAAK,cAAcA,CAAW,GAE9B,KAAK,WAAW;AAAA,IAClB;AAAA,EAEJ;AAAA,EAEA,cAAcH,GAAkB;AAC9B,QAAIA,EAAE,QAAQ,YAAYA,EAAE,QAAQ,OAAO;AACzC,WAAK,WAAW;AAChB,YAAMG,IAAc,IAAI;AAAA,QACtB,6CACE,KAAK,aAAa,KAAQ,UAAU,MACtC;AAAA,QACA;AAAA,UACE,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ;AAAA,YACN,SAAS,KAAK;AAAA,UAChB;AAAA,QACF;AAAA,MAAA;AAEF,WAAK,cAAcA,CAAW;AAAA,IAChC;AAAA,EACF;AAAA,EAEA,iBAAiB;AACf,IAAI,KAAK,cAEL,KAAK,WAAW;AAAA,MACd;AAAA,IAAA,EAEK,QAAQ,CAACC,MAAY;AAC5B,MAAIA,MAAY,SAGdA,EAAQ,WAAW;AAAA,IACrB,CACD,GAEE,KAAA,WAAW,CAAC,KAAK;AAAA,EACxB;AAAA,EAEA,oBAAoB;AAClB,UAAMD,IAAc,IAAI;AAAA,MACtB,6CACE,KAAK,aAAa,KAAQ,SAAS,OACrC;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACN,SAAS,KAAK;AAAA,QAChB;AAAA,MACF;AAAA,IAAA;AAGF,SAAK,cAAcA,CAAW,GAE9B,KAAK,eAAe;AAAA,EACtB;AAAA,EAEA,cAAc;AACZ,UAAMA,IAAc,IAAI;AAAA,MACtB;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACN,SAAS,KAAK;AAAA,QAChB;AAAA,MACF;AAAA,IAAA;AAGF,SAAK,cAAcA,CAAW;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa;AACR,WAAA;AAAA,MACL,UAAU,CAAC,CAAC,KAAK;AAAA,MACjB,UAAU,CAAC,CAAC,KAAK;AAAA,MACjB,aAAa,CAAC,CAAC,KAAK;AAAA,MACpB,OAAO,CAAC,CAAC,KAAK;AAAA,MACd,SAAS,CAAC,CAAC,KAAK;AAAA,IAAA;AAAA,EAEpB;AAAA,EAEA,SAAS;AACP,WAAI,KAAK,OACAE,eAAkB,KAAK,SAAA,CAAU;AAAA;AAAA,mBAE3B,KAAK,WAAW;AAAA,mBAChB,KAAK,QAAQ,MAAM,CAAC;AAAA;AAAA,iBAEtB,KAAK,IAAI;AAAA;AAAA,yBAED,KAAK,QAAQ,MAAM,CAAC,KAAK,KAAK,IAAI;AAAA,YAC/C,KAAK,UAAU,KACbA,iBAAoB,KAAK,QAAQ,OAAO,CAAC;AAAA;AAAA,0BAGzCA,iBAAoB,KAAK,QAAQ,eAAe,CAAC;AAAA;AAAA,uBAExC;AAAA;AAAA;AAAA,eAKZA,eAAkB,KAAK,SAAA,CAAU;AAAA;AAAA,iBAE3B,KAAK,iBAAiB;AAAA,wBACf,KAAK,aAAa,EAAI;AAAA,sBACxBC,EAAU,KAAK,SAAS,CAAC;AAAA,iBAC9B,KAAK,QAAQ,MAAM,CAAC;AAAA;AAAA,mBAElB,KAAK,aAAa;AAAA;AAAA,uBAEd,KAAK,QAAQ,MAAM,CAAC,KAAK,KAAK,IAAI;AAAA,UAC/C,KAAK,aAAa,MAAQ,KAAK,aAAa,KAC1CD;AAAAA,uBACW,KAAK,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,wBAI/B,EAAE;AAAA;AAAA,QAEN,KAAK,aAAa,MAAQ,KAAK,aAAa,KAC1CA;AAAAA;AAAAA,uBAEa,KAAK,QAAQ,OAAO,CAAC;AAAA;AAAA,yBAEnB,KAAK,aAAa;AAAA;AAAA,4BAEf,KAAK,QAAQ,aAAa,CAAC;AAAA,4BAC3B,KAAK,QAAQ,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA,cAK/C,EAAE;AAAA;AAAA,EAEV;AACF;AA1SEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GAJhBxB,EAKX,WAAA,YAAA,CAAA;AAMAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GAVhBxB,EAWX,WAAA,YAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GAjBhBxB,EAkBX,WAAA,YAAA,CAAA;AAMAuB,EAAA;AAAA,EADCC,EAAS;AAAA,GAvBCxB,EAwBX,WAAA,QAAA,CAAA;AAMAuB,EAAA;AAAA,EADCC,EAAS;AAAA,GA7BCxB,EA8BX,WAAA,QAAA,CAAA;AAMAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GAnChBxB,EAoCX,WAAA,SAAA,CAAA;AAMAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GAzChBxB,EA0CX,WAAA,WAAA,CAAA;AAMAuB,EAAA;AAAA,EADCC,EAAS;AAAA,GA/CCxB,EAgDX,WAAA,aAAA,CAAA;AAhDWA,IAANuB,EAAA;AAAA,EANNE,EAAc,yCAAyC;AAAA,IACtD,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EAAA,CACD;AAAA,GACY1B,CAAA;"}