https://www.principal.com/profiles/contrib/houston/modules/pfg_pds…/5.22.1/es/global-header-utility-menu.js

1import { nothing as i, html as a } from "lit";
2import { property as p, state as u, queryAssignedElements as m } from "lit/decorators.js";
3import { c as b } from "./focus-trap.esm.CephQZgz.js";
4import { pdsCustomElement as c } from "./pds-custom-element.js";
5import { P as M } from "./PdsElement.BuTF7VEW.js";
6import "./global-header-dropdown-item.js";
7import "./global-header-mobile-tray.js";
8import { d as g } from "./dispatch-pds-event.CbFus9jr.js";
9import { p as f } from "./pds-debug-mode-error-message.Ce6plIld.js";
10const w = "*,::slotted(*),*:before,*:after{box-sizing:border-box}:host{display:block}slot::slotted(*){white-space:normal}";
11var y = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (e, t, n, l) => {
12  for (var s = l > 1 ? void 0 : l ? O(t, n) : t, h = e.length - 1, d; h >= 0; h--)
13    (d = e[h]) && (s = (l ? d(t, n, s) : d(s)) || s);
14  return l && s && y(t, n, s), s;
15};
16let o = class extends M {
17  constructor() {
18    super(), this.current = !1, this.megamenu = !1, this.hideMobileView = !1, this.isDesktopMenuOpen = !1, this.isMobileMenuOpen = !1, this.isMegamenuValid = !0, this.isDesktopMenuOpenChangedByEventListener = !1, this.errorDetailsMessage = "", this.addEventListener(
19      "PdsGlobalHeaderDropdownTriggerClick",
20      this.handleClick
21    ), this.addEventListener("PdsGlobalHeaderDropdownItemClose", () => {
22      this.isDesktopMenuOpen = !1, this.isMobileMenuOpen = !1, this.isDesktopMenuOpenChangedByEventListener = !0;
23    }), this.addEventListener("PdsGlobalHeaderMobileTrayClose", (e) => {
24      e.stopPropagation();
25      const t = e;
26      if (g(
27        new CustomEvent("PdsGlobalHeaderUtilityMenuClose", {
28          bubbles: !0,
29          composed: !0,
30          detail: t.detail
31        }),
32        this
33      ), this.isMobileMenuOpen = !1, this.isMobile() && this.focusTrap?.deactivate(), this.triggerElements[0] && this.triggerElements[0].shadowRoot && this.triggerElements[0].shadowRoot.querySelector("button")) {
34        const n = this.triggerElements[0].shadowRoot.querySelector("button");
35        n && n.setAttribute("aria-expanded", "false");
36      }
37    });
38  }
39  firstUpdated() {
40    super.firstUpdated(), this.setWindowResizeHandler(), this.megamenu && setTimeout(async () => {
41      await this.checkMegamenuView();
42    }, 500);
43  }
44  updated(e) {
45    e.has("responsiveViewportSize") && e.has("responsiveViewportSize") && this.isMobile() && this.isDesktopMenuOpen && (this.isDesktopMenuOpen = !1);
46  }
47  /**
48   * Sets flag that prevents rendering of the component if the megamenu and hideMobileView attributes are used together
49   * @internal
50   */
51  async checkMegamenuView() {
52    this.megamenu && this.hideMobileView && (this.errorDetailsMessage = "The megamenu and hideMobileView attributes cannot be used together.", console.error(this.errorDetailsMessage, this), this.isMegamenuValid = !1);
53  }
54  /**
55   * Flag for mobile view
56   * @internal
57   */
58  isMobile() {
59    return this.responsiveViewportSize === "xs" || this.responsiveViewportSize === "sm" || this.responsiveViewportSize === "md";
60  }
61  /**
62   * @internal
63   */
64  get classNames() {
65    return {
66      current: !!this.current,
67      "is-megamenu": !!this.megamenu
68    };
69  }
70  handleSlotChange() {
71    this.handleSlotValidation(), this.isMobile() && this.current && this.triggerElements[0].setAttribute("current", "true");
72  }
73  /**
74   * Initialize focus trap for the user menu
75   */
76  initializeMobileFocusTrap() {
77    let e = null;
78    if (this.isMobile() && this.shadowRoot) {
79      const t = this.shadowRoot.querySelector(
80        "pds-global-header-mobile-tray"
81      );
82      if (t && t.shadowRoot) {
83        if (this.triggerElements[0] && this.triggerElements[0].shadowRoot) {
84          const s = this.triggerElements[0];
85          s.shadowRoot && (e = s.shadowRoot.querySelector(
86            "button"
87          ));
88        }
89        const l = t.shadowRoot.querySelector(
90          ".pds-c-global-header-mobile-tray__close-button"
91        )?.shadowRoot?.querySelector(
92          "button"
93        );
94        e !== null && (this.focusTrap = b(t, {
95          initialFocus: l,
96          allowOutsideClick: !0,
97          clickOutsideDeactivates: !0,
98          returnFocusOnDeactivate: !0,
99          fallbackFocus: e,
100          setReturnFocus: e,
101          tabbableOptions: {
102            getShadowRoot: !0,
103            displayCheck: "none"
104          }
105        }), this.focusTrap.activate());
106      }
107    }
108  }
109  getMobileMarkup() {
110    return a`
111    <div class=${this.getClass()}>
112        ${this.slotEmpty("trigger") && !this.isMobileMenuOpen ? a`<pds-global-header-dropdown-item
113                current=${this.current || i}
114                megamenu=${this.megamenu || i}
115                open=${this.isMobileMenuOpen ? "true" : i}
116                hideMobileView=${this.hideMobileView || i}
117                label="Dropdown item"
118              ></pds-global-header-dropdown-item>` : i}
119          <slot
120            name="trigger"
121            slot="trigger"
122            allowed-elements="pds-global-header-dropdown-trigger"

123            @slotchange=${this.handleSlotChange}
124          ></slot>
125          <pds-global-header-mobile-tray
126            variant="right"
127            open="${this.isMobileMenuOpen ? !0 : i}"
128            style="--pds-global-header-tray-padding: 16px"
129            >
130            ${/* Slot in content only meant for mobile view, otherwise
131    * the default slot content will be used
132    */
133    ""}
134            <slot name="mobile-only-content" slot="main">
135              <slot></slot>
136            </slot>
137            <slot name="header" slot="header"></slot>
138            <slot name="footer" slot="footer"></slot>
139          ></pds-global-header-mobile-tray>
140        </slot>
141    </div>
142      `;
143  }
144  handleClick() {
145    if (this.isMobile()) {
146      if (this.isMobileMenuOpen = !this.isMobileMenuOpen, this.isMobileMenuOpen && this.initializeMobileFocusTrap(), this.triggerElements[0] && this.triggerElements[0].shadowRoot && this.triggerElements[0].shadowRoot.querySelector("button")) {
147        const e = this.triggerElements[0].shadowRoot.querySelector("button");
148        e && e.setAttribute("aria-expanded", String(this.isMobileMenuOpen));
149      }
150    } else
151      this.isDesktopMenuOpenChangedByEventListener || (this.isDesktopMenuOpen = !this.isDesktopMenuOpen), this.isDesktopMenuOpenChangedByEventListener = !1;
152    setTimeout(() => {
153      g(
154        new CustomEvent(
155          `PdsGlobalHeaderUtilityMenu${this.isMobileMenuOpen || this.isDesktopMenuOpen ? "Open" : "Close"}`,
156          {
157            bubbles: !0,
158            composed: !0
159          }
160        ),
161        this
162      );
163    }, 250);
164  }
165  // TODO: need to mark the default and trigger slots as required, but the slot validation logic needs to be
166  // updated to allow for other types of elements in the slots besides icons and images
167  render() {
168    return this.isMegamenuValid ? a`${this.isMobile() && !this.hideMobileView ? this.getMobileMarkup() : a`<div class=${this.getClass()}>
169          <pds-global-header-dropdown-item
170            current=${this.current || i}
171            megamenu=${this.megamenu || i}
172            open=${this.isDesktopMenuOpen ? "true" : i}
173            hideMobileView=${this.hideMobileView || i}
174            label="Dropdown item"
175            style="--pds-global-header-dropdown-item-menu-width: max-content"
176          >
177            <slot
178              name="trigger"
179              slot="trigger"
180              allowed-elements="pds-global-header-dropdown-trigger"
181              @slotchange=${this.handleSlotValidation}
182            ></slot>
183            <slot></slot>
184          </pds-global-header-dropdown-item>
185        </div>`}` : f(
186      "pds-global-header-utility-menu",
187      this.errorDetailsMessage
188    );
189  }
190};
191r([
192  p({ type: Boolean })
193], o.prototype, "current", 2);
194r([
195  p({ type: Boolean })
196], o.prototype, "megamenu", 2);
197r([
198  p({ type: Boolean })
199], o.prototype, "hideMobileView", 2);
200r([
201  u()
202], o.prototype, "isDesktopMenuOpen", 2);
203r([
204  u()
205], o.prototype, "isMobileMenuOpen", 2);
206r([
207  u()
208], o.prototype, "isMegamenuValid", 2);
209r([
210  m({ slot: "trigger" })
211], o.prototype, "triggerElements", 2);
212o = r([
213  c("pds-global-header-utility-menu", {
214    category: "component",
215    type: "component",
216    styles: w
217  })
218], o);
219export {
220  o as PdsGlobalHeaderUtilityMenu
221};
222//# sourceMappingURL=global-header-utility-menu.js.map