1import { b as d } from "./lit-element.chunk-B6Olh1kf.js"; 2import { n as o } from "./state.chunk-B35jHvjT.js"; 3import { P as v, B as u } from "./PdsElement.chunk-BX0ldsof.js"; 4import { c as g, s as h, o as y, d as b } from "./floating-ui.dom.chunk-DV7ofceA.js"; 5import { o as f } from "./if-defined.chunk-BAezzJ8V.js"; 6import { pdsCustomElement as k } from "./pds-custom-element.C-DkuQLk.js"; 7import "./chevron-down.chunk-QgLPcZTC.js"; 8import "./arrow-right.chunk-40Dqosev.js"; 9import { d as l } from "./dispatch-pds-event.chunk-CbFus9jr.js"; 10const _ = '*,::slotted(*),*:before,*:after{box-sizing:border-box}.pds-c-primary-navigation-main-menu-item,.pds-c-primary-navigation-main-menu-item--dropdown,.pds-c-primary-navigation-main-menu-item--megamenu{position:relative}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item--divider{border-left:1px solid var(--pds-primary-navigation-main-menu-item-divider);padding-left:calc(var(--pds-base-unit) * 3)}}.pds-c-primary-navigation-main-menu-item__icon{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-icon-color );display:block;margin-left:auto;transition:transform .25s ease-in 0s;color:var(--pds-primary-navigation-main-menu-item-icon-color);align-self:center}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__icon{margin-left:calc(var(--pds-base-unit) * .5)}}.pds-c-primary-navigation-main-menu-item.pds-is-active .pds-c-primary-navigation-main-menu-item__icon{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-icon-active-color );transform:rotate(180deg);color:var(--pds-primary-navigation-main-menu-item-icon-active-color)}.pds-c-primary-navigation-main-menu-item__link{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-link-color );font-weight:var(--pds-semantic-type-label-default-font-weight);font-size:var(--pds-semantic-type-label-default-font-size);line-height:var(--pds-semantic-type-label-default-line-height);font-family:var(--pds-semantic-type-label-default-font-family);letter-spacing:var(--pds-semantic-type-label-default-letter-spacing);text-transform:var(--pds-semantic-type-label-default-text-transform);appearance:none;border:none;background:var(--pds-primary-navigation-main-menu-item-link-background);display:inline-flex;align-items:center;width:100%;text-decoration:none;text-underline-offset:calc(var(--pds-base-unit) * .75);padding:calc(var(--pds-base-unit) * 1.5);border-radius:calc(var(--pds-base-unit) * .5);color:var(--pds-primary-navigation-main-menu-item-link-color);cursor:pointer}@media all and (max-width:1024px){.pds-c-primary-navigation-main-menu-item__link:focus-visible{outline:calc(var(--pds-base-unit) * .25) solid var(--pds-primary-navigation-main-menu-item-link-outline-color);outline-offset:calc(var(--pds-base-unit) * .25)}}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__link{width:auto;border-radius:calc(var(--pds-base-unit) * 2.5);background:--pds-primary-navigation-main-menu-item-link-background;padding:calc(var(--pds-base-unit) * .25) calc(var(--pds-base-unit) * 1);color:var(--pds-primary-navigation-main-menu-item-link-color)}}@media(min-width:1024px)and (hover:hover)and (pointer:fine){.pds-c-primary-navigation-main-menu-item__link:hover{background-color:var(--pds-primary-navigation-main-menu-item-link-hover-background)}}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__link:focus-visible{background-color:var(--pds-primary-navigation-main-menu-item-link-hover-background)}.pds-c-primary-navigation-main-menu-item__link .pds-c-primary-navigation-main-menu-item__arrow--mobile{display:none}}@media(hover:hover)and (pointer:fine){.pds-c-primary-navigation-main-menu-item__link:hover{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-link-hover-color );color:var(--pds-primary-navigation-main-menu-item-link-hover-color);background-color:var(--pds-primary-navigation-main-menu-item-link-hover-background)}.pds-c-primary-navigation-main-menu-item__link:hover .pds-c-primary-navigation-main-menu-item__icon{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-icon-hover-color )}}.pds-c-primary-navigation-main-menu-item__link:focus-visible{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-link-hover-color );color:var(--pds-primary-navigation-main-menu-item-link-hover-color);background-color:var(--pds-primary-navigation-main-menu-item-link-hover-background)}.pds-c-primary-navigation-main-menu-item__link:focus-visible .pds-c-primary-navigation-main-menu-item__icon{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-icon-hover-color )}.pds-c-primary-navigation-main-menu-item__link:active{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-link-active-color );background-color:var(--pds-primary-navigation-main-menu-item-link-active-background)}.pds-c-primary-navigation-main-menu-item--megamenu .pds-c-primary-navigation-main-menu-item__link,.pds-c-primary-navigation-main-menu-item--dropdown .pds-c-primary-navigation-main-menu-item__link{position:relative;list-style:none}a.pds-c-primary-navigation-main-menu-item__link:focus-visible{outline:none}a.pds-c-primary-navigation-main-menu-item__link:focus-visible:before{content:"";position:absolute;inset:-2px;border:2px solid var(--pds-primary-navigation-main-menu-item-link-outline-color)}@media all and (min-width:1024px){button.pds-c-primary-navigation-main-menu-item__link:focus-visible{outline:none}button.pds-c-primary-navigation-main-menu-item__link:focus-visible:before{content:"";position:absolute;inset:-2px;border:2px solid var(--pds-primary-navigation-main-menu-item-link-outline-color)}}.pds-c-primary-navigation-main-menu-item__arrow,.pds-c-primary-navigation-main-menu-item__arrow--mobile{margin-left:calc(var(--pds-base-unit) * .5)}@media all and not (min-width:1024px){a.pds-c-primary-navigation-main-menu-item__link[href]{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-href-color );
10font-weight:var(--pds-semantic-type-body-bold-default-font-weight);font-size:var(--pds-semantic-type-body-bold-default-font-size);line-height:var(--pds-semantic-type-body-bold-default-line-height);font-family:var(--pds-semantic-type-body-bold-default-font-family);letter-spacing:var(--pds-semantic-type-body-bold-default-letter-spacing);text-transform:var(--pds-semantic-type-body-bold-default-text-transform);background:none;cursor:pointer;padding:0;color:var(--pds-primary-navigation-main-menu-item-href-color)}}@media(not (min-width:1024px))and (hover:hover)and (pointer:fine){a.pds-c-primary-navigation-main-menu-item__link[href]:hover .pds-c-primary-navigation-main-menu-item__arrow,a.pds-c-primary-navigation-main-menu-item__link[href]:hover .pds-c-primary-navigation-main-menu-item__arrow--mobile{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-href-hover-color );color:var(--pds-primary-navigation-main-menu-item-href-hover-color)}}@media(not (min-width:1024px))and (hover:hover)and (pointer:fine){a.pds-c-primary-navigation-main-menu-item__link[href]:hover .pds-c-primary-navigation-main-menu-item__text{--pds-icon-color-override: var( --pds-primary-navigation-main-menu-item-href-hover-color );text-decoration:underline;color:var(--pds-primary-navigation-main-menu-item-href-hover-color)}}.pds-c-primary-navigation-main-menu-item__link[aria-expanded=true]{background:var(--pds-primary-navigation-main-menu-item-link-active-background)}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__link[aria-expanded=true]{background:var(--pds-primary-navigation-main-menu-item-link-active-background)}}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item--active-section .pds-c-primary-navigation-main-menu-item__link[aria-expanded=true]{background-image:linear-gradient(to right,var(--pds-semantic-border-interactive-default),var(--pds-semantic-border-interactive-default));background-position:bottom;background-repeat:repeat-x;background-size:100% calc(var(--pds-base-unit) * .5);position:relative}}.pds-c-primary-navigation-main-menu-item__panel{display:none;padding:calc(var(--pds-base-unit) * 3);z-index:var(--pds-primary-navigation-main-menu-item-z-index, 1300)}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__panel{padding:0}}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__panel{max-width:calc(var(--pds-base-unit) * 50);width:max-content;border-radius:calc(var(--pds-base-unit) * 2);background:var(--pds-primary-navigation-main-menu-item-dropdown-background);box-shadow:var(--pds-semantic-shadow-outer-default-md);border:1px solid var(--pds-component-primary-nav-default-dropdown-border)}}.pds-c-primary-navigation-main-menu-item--megamenu .pds-c-primary-navigation-main-menu-item__panel{width:100%;padding:0}.pds-c-primary-navigation-main-menu-item.pds-is-active .pds-c-primary-navigation-main-menu-item__panel{display:block;position:relative}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item.pds-is-active .pds-c-primary-navigation-main-menu-item__panel{position:absolute}}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item--megamenu.pds-is-active .pds-c-primary-navigation-main-menu-item__panel{max-width:63.75rem;width:max-content}}.pds-c-primary-navigation-main-menu-item__panel-content{margin:calc(var(--pds-base-unit) * 2)}.pds-c-primary-navigation-main-menu-item--megamenu .pds-c-primary-navigation-main-menu-item__panel-content{margin:calc(var(--pds-base-unit) * 4)}@media all and (min-width:1024px){.pds-c-primary-navigation-main-menu-item__panel-arrow{position:absolute;width:20px;height:20px;transform:rotate(45deg);background:var(--pds-primary-navigation-main-menu-item-dropdown-background);border:1px solid var(--pds-primary-navigation-main-menu-item-dropdown-border);border-bottom:none;border-right:none}}'; 11var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (a, i, e, m) => { 12 for (var t = m > 1 ? void 0 : m ? x(i, e) : i, p = a.length - 1, s; p >= 0; p--) 13 (s = a[p]) && (t = (m ? s(i, e, t) : s(t)) || t); 14 return m && t && w(i, e, t), t; 15}; 16let n = class extends v { 17 /** 18 * Initialize functions 19 */ 20 constructor() { 21 super(), this.dropdown = !1, this.megamenu = !1, this.isActive = !1, this.href = void 0, this.arrow = !1, this.divider = !1, this.handleOnClickOutside = this.handleOnClickOutside.bind(this); 22 } 23 firstUpdated() { 24 super.firstUpdated(), this.setWindowResizeHandler(); 25 } 26 updated(a) { 27 if (a.has("isActive") || a.has("responsiveViewportSize")) { 28 const i = this.shadowRoot?.querySelector( 29 `.${this.classEl("panel")}` 30 ); 31 if (this.isActive && (this.responsiveViewportSize === "lg" || this.responsiveViewportSize === "xl")) { 32 const e = this.shadowRoot?.querySelector( 33 `.${this.classEl("panel-arrow")}` 34 ), m = this.megamenu ? "bottom-start" : "bottom"; 35 i && g(this, i, { 36 placement: m, 37 middleware: [ 38 h(), 39 y({ mainAxis: 40 }), 40 b({ element: e }) 41 ] 42 }).then(({ x: t, y: p, middlewareData: s }) => { 43 if (Object.assign(i.style, { 44 left: `${t}px`, 45 top: `${p}px` 46 }), s.arrow) { 47 const { x: c } = s.arrow; 48 Object.assign(e.style, { 49 left: `${c}px`, 50 top: `${-e.offsetHeight / 2 - 1}px` 51 // account for half triangle and its 1px border 52 }); 53 } 54 }); 55 } else i && Object.assign(i.style, { left: "0", top: "0" }); 56 } 57 } 58 connectedCallback() { 59 super.connectedCallback(), document.addEventListener("mouseup", this.handleOnClickOutside, !1), document.addEventListener("keydown", this.handleKeydown, !1); 60 } 61 /* 62 * Disconnected callback lifecycle 63 */ 64 disconnectedCallback() { 65 super.disconnectedCallback(), document.removeEventListener("mouseup", this.handleOnClickOutside, !1), document.removeEventListener("keydown", this.handleKeydown, !1); 66 } 67 /** 68 * Handle click outside the component 69 */ 70 handleOnClickOutside(a) { 71 if (!this.isActive) 72 return; 73 const i = a.composedPath().includes(this); 74 if (window.innerWidth >= u && this.isActive && !i) { 75 const e = new CustomEvent( 76 "PdsPrimaryNavigationMainMenuDropdownClose", 77 { 78 bubbles: !0, 79 composed: !0, 80 detail: { 81 summary: this.text 82 } 83 } 84 ); 85 l(e, this), this.isActive = !1; 86 } 87 } 88 handleKeydown(a) { 89 if (a.key === "Escape" || a.key === "Esc") { 90 this.isActive = !1; 91 const i = new CustomEvent( 92 `PdsPrimaryNavigationMainMenuDropdown${this.isActive === !1 ? "Close" : "Open"}`, 93 { 94 bubbles: !0, 95 composed: !0, 96 detail: { 97 summary: this.text 98 } 99 } 100 ); 101 l(i, this); 102 } 103 } 104 toggleIsActive() { 105 this.parentNode && this.parentNode.querySelectorAll( 106 "pds-primary-navigation-main-menu-item" 107 ).forEach((i) => { 108 i !== this && (i.isActive = !1); 109 }), this.isActive = !this.isActive; 110 } 111 handleClickButton() { 112 const a = new CustomEvent( 113 `PdsPrimaryNavigationMainMenuDropdown${this.isActive === !1 ? "Open" : "Close"}`, 114 { 115 bubbles: !0, 116 composed: !0, 117 detail: { 118 summary: this.text 119 } 120 } 121 ); 122 l(a, this), this.toggleIsActive(); 123 } 124 handleClick(a) { 125 const i = new CustomEvent( 126 "PdsPrimaryNavigationMainMenuLinkClick", 127 { 128 bubbles: !0, 129 composed: !0, 130 cancelable: !0, 131 detail: { 132 summary: this.text 133 } 134 } 135 ); 136 l(i, this), i.defaultPrevented && a.preventDefault(); 137 } 138 /** 139 * internal 140 */ 141 get classNames() { 142 return { 143 megamenu: !!this.megamenu, 144 dropdown: !!this.dropdown, 145 "is-active": !!this.isActive, 146 arrow: !!this.arrow, 147 divider: !!this.divider 148 }; 149 } 150 render() { 151 return this.href ? d` <li class=${this.getClass()} role="menuitem"> 152 <a 153 @click=${this.handleClick} 154 class="${this.classEl("link")}" 155 part="primary-navigation-main-menu-item-link" 156 href=${this.href} 157 >
158 <span class="${this.classEl("text")}">${this.text}</span> 159 ${this.arrow === !0 ? d`<span class="${this.classEl("arrow")}" 160 ><pds-icon-arrow-right size="sm"></pds-icon-arrow-right 161 ></span>` : d`<span class="${this.classEl("arrow--mobile")}" 162 ><pds-icon-arrow-right size="sm"></pds-icon-arrow-right 163 ></span>`} 164 </a> 165 <slot></slot> 166 </li>` : d` <li class=${this.getClass()} role="menuitem"> 167 <button 168 @click=${this.handleClickButton} 169 aria-expanded=${this.isActive === !0} 170 aria-label="${f(this.ariaLabel)}" 171 class="${this.classEl("link")}" 172 part="primary-navigation-main-menu-item-link" 173 @keydown=${this.handleKeydown} 174 > 175 <span class="${this.classEl("text")}">${this.text}</span> 176 ${this.dropdown === !0 || this.megamenu === !0 ? d`<span 177 class="${this.classEl("icon")}" 178 part="primary-navigation-main-menu-item-link-icon" 179 ><pds-icon-chevron-down size="sm"></pds-icon-chevron-down 180 ></span>` : ""} 181 </button> 182 ${this.dropdown === !0 || this.megamenu === !0 ? d` 183 <div 184 class="${this.classEl("panel")}" 185 part="primary-navigation-main-menu-item-panel" 186 @keydown=${this.handleKeydown} 187 > 188 <div class="${this.classEl("panel-arrow")}"></div> 189 <div class="${this.classEl("panel-content")}"> 190 <slot></slot> 191 </div> 192 </div> 193 ` : ""} 194 </li>`; 195 } 196}; 197r([
198 o({ type: Boolean }) 199], n.prototype, "dropdown", 2); 200r([ 201 o({ type: Boolean }) 202], n.prototype, "megamenu", 2); 203r([ 204 o({ type: Boolean }) 205], n.prototype, "isActive", 2); 206r([ 207 o() 208], n.prototype, "href", 2); 209r([ 210 o() 211], n.prototype, "text", 2); 212r([ 213 o({ type: Boolean }) 214], n.prototype, "arrow", 2); 215r([ 216 o({ type: Boolean }) 217], n.prototype, "divider", 2); 218r([ 219 o() 220], n.prototype, "ariaLabel", 2); 221n = r([ 222 k("pds-primary-navigation-main-menu-item", { 223 category: "component", 224 type: "component", 225 state: "stable", 226 styles: _ 227 }) 228], n); 229export { 230 n as PdsPrimaryNavigationMainMenuItem 231}; 232//# sourceMappingURL=primary-navigation-main-menu-item.BPnRuYsh.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.