dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
767 lines (766 loc) • 29.2 kB
JavaScript
var x = Object.getPrototypeOf;
var C = Reflect.get;
var I = (f, t, e) => C(x(f), e, t);
var v = (f, t, e) => new Promise((s, o) => {
var i = (p) => {
try {
l(e.next(p));
} catch (d) {
o(d);
}
}, a = (p) => {
try {
l(e.throw(p));
} catch (d) {
o(d);
}
}, l = (p) => p.done ? s(p.value) : Promise.resolve(p.value).then(i, a);
l((e = e.apply(f, t)).next());
});
import { autoUpdate as A, computePosition as k, offset as S, flip as E, shift as P, size as T } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
import { clsx as w } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as D } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as N } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { queryAssignedElements as L } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { ifDefined as g } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as m } from "../../node_modules/lit-html/static.js";
import { watch as _ } from "../../common/decorators.js";
import { DdsElement as H } from "../../internal/dds-hu-element.js";
import { SizedMixin as $ } from "../../internal/mixin/sizedMixin.js";
import R from "../button/button.component.js";
import B from "../icon/icon.component.js";
import O from "../popup/popup.scss.js";
import q from "../stack/stack.component.js";
import F from "./navigation-menu-item.scss.js";
import { SubmenuController as U } from "./submenu-controller.js";
import { unsafeCSS as W } from "../../node_modules/@lit/reactive-element/css-tag.js";
var M = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (f, t, e, s) => {
for (var o = s > 1 ? void 0 : s ? K(t, e) : t, i = f.length - 1, a; i >= 0; i--)
(a = f[i]) && (o = (s ? a(t, e, o) : a(o)) || o);
return s && o && M(t, e, o), o;
};
const y = class y extends $(H) {
constructor() {
super(), this.triggerElement = null, this.disabled = !1, this.opened = !1, this.placement = "bottom-start", this.floatingStrategy = "fixed", this.offset = 0, this.sync = !1, this.maxHeight = 250, this.maxWidth = "auto", this.hasArrow = !1, this.overflow = !0, this.fullWidth = !1, this.exactHref = !1, this.level = 0, this.orientation = "horizontal", this.tabMode = "group", this.triggerButtonTestId = "navigation-menu-item-trigger-button", this.hasContent = !1, this.hasLink = !1, this.hasTitleSlot = !1, this._titleText = "", this.active = !1, this.openedByHover = !1, this._isRovingActive = !1, this._handleLinkSlotChange = (t) => {
const e = t.target;
if (e) {
const s = e.assignedElements();
this.hasLink = s.length > 0, s.forEach((o) => o.setAttribute("tabindex", "-1"));
}
this._updateActiveState();
}, this._handleTitleSlotChange = (t) => {
const e = t.target;
if (e) {
const s = e.assignedNodes({ flatten: !0 });
this.hasTitleSlot = s.some(
(o) => {
var i;
return (o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && ((i = o.textContent) == null ? void 0 : i.trim().length)) && o !== e;
}
), this._titleText = s.map((o) => {
var i, a;
return (a = (i = o.textContent) == null ? void 0 : i.trim()) != null ? a : "";
}).join(" ").trim();
}
}, this._handleClick = (t) => {
var s, o, i;
if (this.disabled) {
t.preventDefault(), t.stopImmediatePropagation();
return;
}
if (this.hasContent || this.hasNestedItems) {
const a = this._trigger, l = t.composedPath();
a.some(
(d) => l.includes(d)
) ? (t.preventDefault(), t.stopPropagation(), this.opened && this.openedByHover ? this.openedByHover = !1 : this.opened ? this.hideDropDown() : this.showDropDown(!1)) : this.opened && l.some((c) => {
if (!(c instanceof Element)) return !1;
const b = c.tagName.toUpperCase();
return b === "A" || b === "DAP-DS-LINK";
}) && this.hideDropDown();
} else if (this.hasLink) {
const a = this._trigger, l = t.composedPath();
if (a.some(
(d) => l.includes(d)
)) {
t.preventDefault();
const d = this._getLinkElement();
if (d) {
const b = d.getAttribute("href");
d.click(), b && this.emit("dds-navigation-item-click", { href: b, event: t });
}
let c = (s = this.parentElement) == null ? void 0 : s.closest(
"dap-ds-navigation-menu-item"
);
for (; c; )
c.opened && c.hideDropDown(), c = (o = c.parentElement) == null ? void 0 : o.closest(
"dap-ds-navigation-menu-item"
);
}
} else {
const l = (i = this._trigger[0]) == null ? void 0 : i.getAttribute("href");
l && this.emit("dds-navigation-item-click", {
href: l,
event: t
});
}
}, this._handleMouseOver = (t) => {
const e = this.parentElement;
e && (e.querySelectorAll(":scope > dap-ds-navigation-menu-item") || []).forEach((o) => {
if (o !== this) {
const i = o;
i.submenuController.cancelPendingOpen(), i.opened && i.hideDropDown();
}
}), t.stopPropagation();
}, this._handleMouseLeave = (t) => {
this.opened || this.submenuController.cancelPendingOpen();
}, this._handleKeyDown = (t) => {
if (this.opened && (this.hasNestedItems || this.hasContent)) {
const e = Array.from(
this.querySelectorAll(":scope > dap-ds-navigation-menu-item")
);
if (e.length > 0) {
const s = t.target, o = e.findIndex(
(i) => i.contains(s) || i === s
);
if (t.key === "ArrowDown") {
t.preventDefault(), t.stopPropagation();
const i = o < e.length - 1 ? o + 1 : 0;
e[i].focus();
return;
} else if (t.key === "ArrowUp") {
t.preventDefault(), t.stopPropagation();
const i = o > 0 ? o - 1 : e.length - 1;
e[i].focus();
return;
} else if (t.key === "ArrowRight" && o >= 0) {
const i = e[o];
if (i.hasNestedItems || i.hasContent) {
t.preventDefault(), t.stopPropagation(), i.opened || (i.showDropDown(), i.updateComplete.then(() => {
const a = i.querySelector(
"dap-ds-navigation-menu-item"
);
a && a.focus();
}));
return;
}
} else if ((t.key === "Enter" || t.key === " ") && o >= 0) {
const i = e[o], a = i.querySelector(
'[slot="trigger"]'
), l = [
"A",
"DAP-DS-LINK",
"DAP-DS-BUTTON",
"BUTTON",
"LINK"
], p = l.includes(a == null ? void 0 : a.tagName.toLowerCase()) || l.includes(a == null ? void 0 : a.tagName);
(!p || t.key === " ") && (t.preventDefault(), t.stopPropagation()), i.hasNestedItems || i.hasContent ? (t.preventDefault(), t.stopPropagation(), i.opened || i.showDropDown()) : (!p || t.key === " ") && (a == null || a.click());
return;
}
} else if (this.hasContent) {
const s = this._getFocusablePopupItems();
if (s.length > 0) {
const o = t.target, i = s.findIndex(
(a) => a === o || a.contains(o)
);
if (t.key === "ArrowDown") {
t.preventDefault(), t.stopPropagation();
const a = i < 0 ? 0 : i < s.length - 1 ? i + 1 : 0;
this._focusPopupItem(s[a]);
return;
} else if (t.key === "ArrowUp") {
t.preventDefault(), t.stopPropagation();
const a = i < 0 ? s.length - 1 : i > 0 ? i - 1 : s.length - 1;
this._focusPopupItem(s[a]);
return;
} else if (t.key === "Home") {
t.preventDefault(), t.stopPropagation(), this._focusPopupItem(s[0]);
return;
} else if (t.key === "End") {
t.preventDefault(), t.stopPropagation(), this._focusPopupItem(s[s.length - 1]);
return;
} else if ((t.key === "Enter" || t.key === " ") && i >= 0) {
t.preventDefault(), t.stopPropagation(), this._activateFocusableItem(s[i]);
return;
}
}
}
}
if (this.level > 0) {
const e = this.parentElement;
if (!e) return;
const s = Array.from(
e.querySelectorAll(":scope > dap-ds-navigation-menu-item")
);
if (s.length === 0) return;
const o = s.indexOf(this);
if (t.key === "ArrowDown") {
t.preventDefault(), t.stopPropagation();
const i = o < s.length - 1 ? o + 1 : 0;
s[i].focus();
} else if (t.key === "ArrowUp") {
t.preventDefault(), t.stopPropagation();
const i = o > 0 ? o - 1 : s.length - 1;
s[i].focus();
} else if (t.key === "ArrowRight")
(this.hasNestedItems || this.hasContent) && (t.preventDefault(), t.stopPropagation(), this.opened ? this.focusFirstDropdownChild() : (this.showDropDown(), this.updateComplete.then(() => {
this.focusFirstDropdownChild();
})));
else if (t.key === "ArrowLeft") {
t.preventDefault(), t.stopPropagation();
const i = e.closest(
"dap-ds-navigation-menu-item"
);
i && (i.hideDropDown(), i.focus());
} else if (t.key === "Escape") {
t.preventDefault(), t.stopPropagation();
const i = e.closest(
"dap-ds-navigation-menu-item"
);
i && (i.hideDropDown(), i.focus());
} else if (t.key === "Enter" || t.key === " ") {
const i = this.querySelector('[slot="trigger"]'), a = ["A", "DAP-DS-LINK", "LINK"], l = i && (a.includes(i.tagName.toLowerCase()) || a.includes(i.tagName));
if ((!l || t.key === " ") && (t.preventDefault(), t.stopPropagation()), this.hasNestedItems || this.hasContent)
t.preventDefault(), t.stopPropagation(), this.opened || this.showDropDown(!1);
else if (this.hasLink) {
t.preventDefault(), t.stopPropagation();
const p = this._getLinkElement();
if (p) {
const d = p.getAttribute("href");
p.click(), d && this.emit("dds-navigation-item-click", { href: d, event: t });
}
} else (!l || t.key === " ") && (i == null || i.click());
}
}
}, this.handleDocumentMouseDown = (t) => {
const e = t.target, o = t.composedPath().includes(this), i = this._isWithinNestedItems(e);
!o && !i && this.hideDropDown();
}, this.submenuController = new U(this);
}
/** Computed property to detect if this item contains nested navigation menu items. */
get hasNestedItems() {
return this.querySelectorAll("dap-ds-navigation-menu-item").length > 0;
}
get _trigger() {
var e;
if (this._assignedTrigger && this._assignedTrigger.length > 0) {
const s = this._assignedTrigger.filter(
(o) => o.parentElement === this
);
if (s.length > 0)
return s;
}
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("dap-ds-button");
return t ? [t] : [];
}
/** Get the element slotted into the `link` slot, if any. */
_getLinkElement() {
var s;
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
'slot[name="link"]'
);
if (!t) return null;
const e = t.assignedElements();
return e.length > 0 ? e[0] : null;
}
connectedCallback() {
super.connectedCallback(), this.addEventListener("click", this._handleClick), this.addEventListener("mouseover", this._handleMouseOver), this.addEventListener("mouseleave", this._handleMouseLeave), this.addEventListener("keydown", this._handleKeyDown), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this._updatePlacementForLevel(), this.startPositionUpdate();
}
disconnectedCallback() {
super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("mouseover", this._handleMouseOver), this.removeEventListener("mouseleave", this._handleMouseLeave), this.removeEventListener("keydown", this._handleKeyDown), document.removeEventListener("mousedown", this.handleDocumentMouseDown), this.stopPositionUpdate();
}
firstUpdated(t) {
return v(this, null, function* () {
I(y.prototype, this, "firstUpdated").call(this, t), this._updateNestedItems(), this._handleTriggerSlotChangeCallback();
});
}
handleOpenedChange() {
this.opened && (this.hasNestedItems || this.hasContent) && (this._applyZIndex(), this.updateComplete.then(() => {
this.updatePosition(), this.submenuController.updateSafeTriangle();
}));
}
handleActiveHrefChange() {
this._updateActiveState(), this._updateNestedItems();
}
handleHrefChange() {
this._updateActiveState();
}
handleLayoutChange() {
this._updateNestedItems(), this._updatePlacementForLevel();
}
/** Update nested navigation menu items with current properties. */
_updateNestedItems() {
const t = this.querySelectorAll(
"dap-ds-navigation-menu-item"
);
Array.from(t).filter((s) => {
var i;
return ((i = s.parentElement) == null ? void 0 : i.closest(
"dap-ds-navigation-menu-item"
)) === this;
}).forEach((s) => {
s.level = this.level + 1, s.orientation = this.orientation, this.activeHref && (s.activeHref = this.activeHref);
});
}
/** Update placement based on nesting level and orientation. */
_updatePlacementForLevel() {
this.level === 0 ? this.placement = this.orientation === "horizontal" ? "bottom-start" : "right-start" : this.placement = "right-start";
}
/** Calculate z-index based on nesting level. */
_calculateZIndex() {
return 1e3 + this.level * 10;
}
/** Apply z-index based on nesting level. */
_applyZIndex() {
if (this.popup) {
const t = this._calculateZIndex();
this.popup.style.zIndex = String(t);
}
}
/** Start automatic position updates using Floating UI. */
startPositionUpdate() {
!this.triggerElement || !this.popup || (this.cleanup = A(this.triggerElement, this.popup, () => {
this.updatePosition();
}));
}
/** Stop automatic position updates. */
stopPositionUpdate() {
this.cleanup && (this.cleanup(), this.cleanup = void 0);
}
/** Update popup position using Floating UI. */
updatePosition() {
return v(this, null, function* () {
if (!this.triggerElement || !this.popup) return;
const t = this.floatingStrategy === "fixed" ? void 0 : this.closest("dap-ds-navigation-menu") || void 0, { x: e, y: s } = yield k(this.triggerElement, this.popup, {
placement: this.placement,
strategy: this.floatingStrategy,
middleware: [
S(this.offset),
E({
boundary: t
}),
P({
padding: this.fullWidth ? 0 : 8,
boundary: t
}),
T({
apply: ({ availableHeight: o, rects: i }) => {
this.sync && (this.popup.style.width = `${i.reference.width}px`), this.maxHeight !== "auto" && (this.popup.style.maxHeight = `${Math.min(this.maxHeight, o)}px`), this.maxWidth !== "auto" && (this.popup.style.maxWidth = `${this.maxWidth}px`), this.fullWidth && (this.popup.style.width = "100vw");
}
})
]
});
Object.assign(this.popup.style, {
left: this.fullWidth ? "0px" : `${e}px`,
top: `${s}px`
});
});
}
/** Check if target is within any nested navigation menu items. */
_isWithinNestedItems(t) {
return Array.from(
this.querySelectorAll("dap-ds-navigation-menu-item")
).some((s) => s.contains(t) || s.shadowRoot && s.shadowRoot.contains(t));
}
focus() {
var e;
const t = (e = this._trigger) == null ? void 0 : e[0];
if (t) {
if (!t.shadowRoot) {
const s = this._getInnerLightDomFocusable(t);
if (s) {
s.focus();
return;
}
}
t.focus();
}
}
/**
* Sets this item as the active (or inactive) roving tabindex target.
* Only the active item's trigger is in the sequential tab order (tabindex="0").
* All others are removed (tabindex="-1") so Tab exits the whole nav in one step.
*/
setRovingTabIndex(t) {
var s;
t ? this.setAttribute("data-nav-current", "") : this.removeAttribute("data-nav-current"), this._isRovingActive = t;
const e = (s = this._trigger) == null ? void 0 : s[0];
e ? this._applyTriggerTabIndex(e, t) : this.updateComplete.then(() => {
var i;
const o = (i = this._trigger) == null ? void 0 : i[0];
o && this._applyTriggerTabIndex(o, t);
});
}
/** Apply tabindex to a trigger element and its inner focusable element. */
_applyTriggerTabIndex(t, e) {
if (t.shadowRoot) {
const s = t.shadowRoot.querySelector(
"a[href], button:not([disabled])"
);
if (s) {
t.removeAttribute("tabindex"), s.setAttribute("tabindex", e ? "0" : "-1");
return;
}
} else {
const s = this._getInnerLightDomFocusable(t);
if (s) {
t.removeAttribute("tabindex"), s.setAttribute("tabindex", e ? "0" : "-1");
return;
}
}
t.setAttribute("tabindex", e ? "0" : "-1");
}
/**
* Returns the inner light-DOM focusable element of a non-focusable wrapper
* trigger, or null when the trigger itself should be the tab stop.
*/
_getInnerLightDomFocusable(t) {
return ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(t.tagName) ? null : t.querySelector("a[href], button:not([disabled])");
}
/** Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content). */
focusFirstDropdownChild() {
const t = this.querySelector(
"dap-ds-navigation-menu-item"
);
if (t) {
t.focus();
return;
}
const e = this._getFocusablePopupItems();
e.length > 0 && this._focusPopupItem(e[0]);
}
/** Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content). */
focusLastDropdownChild() {
const t = Array.from(
this.querySelectorAll(":scope > dap-ds-navigation-menu-item")
);
if (t.length > 0) {
t[t.length - 1].focus();
return;
}
const e = this._getFocusablePopupItems();
e.length > 0 && this._focusPopupItem(e[e.length - 1]);
}
/** Get all top-level focusable items inside the popup slot content (for mega menu arrow navigation). */
_getFocusablePopupItems() {
var o;
if (!this.popup) return [];
const t = this.popup.querySelector(
"slot:not([name])"
), e = (o = t == null ? void 0 : t.assignedElements({ flatten: !0 })) != null ? o : [], s = [];
for (const i of e)
this._collectFocusableItems(i, s);
return s;
}
_collectFocusableItems(t, e) {
if (t.shadowRoot && t.shadowRoot.querySelector(
'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"])'
)) {
e.push(t);
return;
}
if (["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(t.tagName) && !t.hasAttribute("disabled") && t.getAttribute("tabindex") !== "-1") {
e.push(t);
return;
}
for (const s of t.children)
this._collectFocusableItems(s, e);
}
_activateFocusableItem(t) {
if (t.shadowRoot) {
const e = t.shadowRoot.querySelector(
"a[href], button:not([disabled])"
);
if (e) {
e.click();
return;
}
}
t.click();
}
_focusPopupItem(t) {
if (t.shadowRoot) {
const e = t.shadowRoot.querySelector(
"a[href], button:not([disabled])"
);
if (e) {
e.focus();
return;
}
}
t.focus();
}
showDropDown(t = !1) {
return v(this, null, function* () {
var o;
const e = this.hasContent || this.hasNestedItems;
if (this.opened || !e)
return;
this._updatePlacementForLevel(), this.emit("dds-navigation-dropdown-open", { item: this }), this.opened = !0, this.openedByHover = t, (o = this._trigger[0]) == null || o.setAttribute("aria-expanded", "true"), document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, this._applyZIndex();
});
}
hideDropDown() {
return v(this, null, function* () {
var s;
if (!this.opened)
return;
this.querySelectorAll("dap-ds-navigation-menu-item").forEach((o) => {
o.opened && o.hideDropDown();
}), this.opened = !1, this.openedByHover = !1, (s = this._trigger[0]) == null || s.setAttribute("aria-expanded", "false"), document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete;
});
}
/** Handle trigger slot change events. */
_handleTriggerSlotChange() {
this._handleTriggerSlotChangeCallback(), this.stopPositionUpdate(), this.updateComplete.then(() => {
this.triggerElement && this.startPositionUpdate();
});
}
/** Update trigger element attributes and properties. */
_handleTriggerSlotChangeCallback() {
this.updateComplete.then(() => {
const t = this._trigger;
t && t.length > 0 && (this.triggerElement = t[0], t[0].setAttribute("aria-controls", "dropdown"), this.hasContent || this.hasNestedItems ? (t[0].setAttribute(
"aria-expanded",
this.opened ? "true" : "false"
), t[0].setAttribute("aria-haspopup", "true")) : t[0].removeAttribute("aria-expanded"), t[0].style.display = "flex", this._updateActiveState(), this._applyTriggerTabIndex(t[0], this._isRovingActive));
});
}
_updateActiveState() {
var e, s;
const t = this._trigger;
if ((!t || t.length === 0 || !this.activeHref) && !this.baseHref)
this.active = !1;
else if (this.baseHref)
this.exactHref ? this.active = this.baseHref === this.activeHref : this.active = ((e = this.activeHref) == null ? void 0 : e.startsWith(this.baseHref)) || !1;
else {
const o = ((s = t[0]) == null ? void 0 : s.getAttribute("href")) || this.href;
this.active = o === this.activeHref, t[0].active = this.active;
}
if (!this.active && this.hasLink && this.activeHref) {
const o = this._getLinkElement(), i = o == null ? void 0 : o.getAttribute("href");
i && (this.active = this.exactHref ? i === this.activeHref : this.activeHref.startsWith(i));
}
t && t.length > 0 && (this.active ? t[0].setAttribute("aria-current", "page") : t[0].removeAttribute("aria-current"));
}
_handleContentSlotChange(t) {
const e = t.target;
if (e) {
const s = e.assignedElements();
this.hasContent = s.length > 0;
}
this._updateNestedItems();
}
/** Render expand indicator icon based on nesting level and orientation. */
renderExpandIndicator() {
return !this.hasNestedItems && !this.hasContent ? m`` : m`
<span class="navigation-item__indicator" part="indicator">
<slot name="indicator">
<dap-ds-icon
part="indicator-icon"
exportparts="base:indicator-icon-base,icon:indicator-icon-icon"
name=${this._getDefaultIconName()}
aria-hidden="true"></dap-ds-icon>
</slot>
</span>
`;
}
/** Get the default icon name based on orientation and level. */
_getDefaultIconName() {
return this.orientation === "vertical" ? "arrow-right-s-line" : this.level === 0 ? "arrow-down-s-line" : "arrow-right-s-line";
}
renderTrigger() {
const t = this.hasContent || this.hasNestedItems, e = t ? this.opened ? "true" : "false" : void 0, s = this._titleText || this.label || void 0;
return m`
<dap-ds-button
variant="subtle-menu"
tabindex=${this._isRovingActive ? "0" : "-1"}
?active=${this.active}
aria-expanded=${g(e)}
aria-label=${g(s)}
href=${g(this.href)}
target=${g(this.target)}
rel=${g(this.rel)}
forceRole=${g(!t && this.hasLink ? "link" : void 0)}
part="trigger"
data-testid=${this.triggerButtonTestId}
exportparts="base:trigger-base,content:trigger-content,high-contrast:trigger-high-contrast">
<dap-ds-stack direction="row" exportparts="base:trigger-stack-base">
<span part="title">
<slot name="title" =${this._handleTitleSlotChange}>
${this.hasTitleSlot ? D : this.label || D}
</slot>
</span>
${this.renderExpandIndicator()}
</dap-ds-stack>
</dap-ds-button>
`;
}
renderPopup() {
return m`
<slot name="trigger" =${this._handleTriggerSlotChange}>
${this.renderTrigger()}
</slot>
<!-- Link slot: outside inert popup, visually hidden, for SPA router links -->
<div class="navigation-item__link-wrapper" aria-hidden="true">
<slot name="link" =${this._handleLinkSlotChange}></slot>
</div>
<div
part="popup"
id="popup"
?inert=${!this.opened}
class=${w("popup", `popup--${this.effectiveSize}`, {
"popup--opened": this.opened,
"popup--fixed": this.floatingStrategy === "fixed",
"popup--has-arrow": this.hasArrow,
"popup--overflow": this.overflow,
"popup--full-width": this.fullWidth
})}>
<div part="content">
<slot =${this._handleContentSlotChange}></slot>
</div>
${this.hasArrow ? m`<div
part="arrow"
class=${w("popup__arrow")}
role="presentation"></div>` : ""}
</div>
`;
}
render() {
const t = this.hasContent || this.hasNestedItems;
return m`
<div
part="base"
class=${w("navigation-item", {
"navigation-item--has-content": t,
"navigation-item--opened": this.opened,
[`navigation-item--level-${this.level}`]: !0
})}>
${this.renderPopup()}
</div>
`;
}
};
y.tagName = "dap-ds-navigation-menu-item", y.dependencies = {
"dap-ds-icon": B,
"dap-ds-button": R,
"dap-ds-stack": q
}, y.styles = W(`${F}${O}`);
let n = y;
r([
N(".popup")
], n.prototype, "popup", 2);
r([
L({ slot: "trigger" })
], n.prototype, "_assignedTrigger", 2);
r([
h({ reflect: !0, type: Boolean })
], n.prototype, "disabled", 2);
r([
h({ reflect: !0, type: Boolean })
], n.prototype, "opened", 2);
r([
h({ reflect: !0 })
], n.prototype, "placement", 2);
r([
h({ reflect: !0 })
], n.prototype, "floatingStrategy", 2);
r([
h({ type: Number })
], n.prototype, "offset", 2);
r([
h({ type: Boolean })
], n.prototype, "sync", 2);
r([
h({ type: Number })
], n.prototype, "maxHeight", 2);
r([
h({ type: Number })
], n.prototype, "maxWidth", 2);
r([
h({ type: Boolean })
], n.prototype, "hasArrow", 2);
r([
h({ type: Boolean })
], n.prototype, "overflow", 2);
r([
h({ type: Boolean })
], n.prototype, "fullWidth", 2);
r([
h({ type: String, reflect: !0 })
], n.prototype, "icon", 2);
r([
h({ type: String, attribute: "aria-labelledby" })
], n.prototype, "ariaLabelledBy", 2);
r([
h({ type: String, reflect: !0 })
], n.prototype, "activeHref", 2);
r([
h({ type: String, reflect: !0 })
], n.prototype, "baseHref", 2);
r([
h({ type: Boolean, reflect: !0 })
], n.prototype, "exactHref", 2);
r([
h({ type: String, reflect: !0 })
], n.prototype, "href", 2);
r([
h({ type: String, reflect: !0 })
], n.prototype, "target", 2);
r([
h({ type: String, reflect: !0 })
], n.prototype, "rel", 2);
r([
h({ type: String })
], n.prototype, "label", 2);
r([
h({ type: Number, reflect: !0 })
], n.prototype, "level", 2);
r([
h({ reflect: !0 })
], n.prototype, "orientation", 2);
r([
h({ type: String })
], n.prototype, "tabMode", 2);
r([
h()
], n.prototype, "triggerButtonTestId", 2);
r([
u()
], n.prototype, "hasContent", 2);
r([
u()
], n.prototype, "hasLink", 2);
r([
u()
], n.prototype, "hasTitleSlot", 2);
r([
u()
], n.prototype, "_titleText", 2);
r([
u()
], n.prototype, "active", 2);
r([
u()
], n.prototype, "openedByHover", 2);
r([
u()
], n.prototype, "_isRovingActive", 2);
r([
_("opened")
], n.prototype, "handleOpenedChange", 1);
r([
_("activeHref")
], n.prototype, "handleActiveHrefChange", 1);
r([
_("href")
], n.prototype, "handleHrefChange", 1);
r([
_(["level", "orientation"])
], n.prototype, "handleLayoutChange", 1);
export {
n as default
};
//# sourceMappingURL=navigation-menu-item.component.js.map