@visma-swno/vsn-navigation 1.1.0 → 1.2.0-beta.2
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.
- package/dist/assets/vsn-navigation.js +57 -37
- package/package.json +1 -1
|
@@ -461,9 +461,9 @@ var P, F = class extends e {
|
|
|
461
461
|
render() {
|
|
462
462
|
let e = this.tree && _(this.tree) ? this.tree.items : [];
|
|
463
463
|
return n`
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
464
|
+
${this.menuItemMarkup()}
|
|
465
|
+
${u(this._isExpanded && e.length > 0, () => d(e, (e) => this.menuItem(e, this.level + 1)))}
|
|
466
|
+
`;
|
|
467
467
|
}
|
|
468
468
|
menuItemMarkup() {
|
|
469
469
|
let e = this.tree !== void 0 && _(this.tree), t = this.tree?.["data-qa-id"], r = {
|
|
@@ -483,10 +483,18 @@ var P, F = class extends e {
|
|
|
483
483
|
<div class="ga-side-navigation__item-label">${this.tree?.label}</div>
|
|
484
484
|
</div>
|
|
485
485
|
`;
|
|
486
|
-
return e ? n
|
|
486
|
+
return e ? n`
|
|
487
|
+
<div class="${f(r)}" aria-describedby="${this._tooltipId}" data-qa-id="${ee(t)}"
|
|
488
|
+
@click=${this._handleItemClick} @mouseenter=${this._onItemMouseEnter}
|
|
489
|
+
@mouseleave=${this._onItemMouseLeave}>${i}
|
|
490
|
+
</div>` : n`<a class="${f(r)}" aria-describedby="${this._tooltipId}"
|
|
491
|
+
href="${this.tree && g(this.tree) ? this.tree.url : ""}" data-qa-id="${ee(t)}"
|
|
492
|
+
@click=${this._handleItemClick} @mouseenter=${this._onItemMouseEnter}
|
|
493
|
+
@mouseleave=${this._onItemMouseLeave}>${i}</a>`;
|
|
487
494
|
}
|
|
488
495
|
menuItem(e, t) {
|
|
489
|
-
return n
|
|
496
|
+
return n`
|
|
497
|
+
<vsn-menu-item .tree=${e} .level=${t}></vsn-menu-item>`;
|
|
490
498
|
}
|
|
491
499
|
isActiveNode(e) {
|
|
492
500
|
if (e.id === this._currentActiveId) return e;
|
|
@@ -498,16 +506,19 @@ var P, F = class extends e {
|
|
|
498
506
|
}
|
|
499
507
|
_handleItemClick(e) {
|
|
500
508
|
let t = this.tree;
|
|
501
|
-
if (t
|
|
502
|
-
|
|
503
|
-
e.preventDefault();
|
|
504
|
-
|
|
505
|
-
bubbles: !0,
|
|
506
|
-
composed: !0,
|
|
507
|
-
detail: t
|
|
508
|
-
});
|
|
509
|
-
this.dispatchEvent(n);
|
|
509
|
+
if (t === void 0) return;
|
|
510
|
+
if (_(t)) {
|
|
511
|
+
this._isExpanded = !this._isExpanded, e.preventDefault(), e.stopPropagation();
|
|
512
|
+
return;
|
|
510
513
|
}
|
|
514
|
+
if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
|
|
515
|
+
e.preventDefault(), e.stopPropagation();
|
|
516
|
+
let n = new CustomEvent("vsn-menu-item-changed", {
|
|
517
|
+
bubbles: !0,
|
|
518
|
+
composed: !0,
|
|
519
|
+
detail: t
|
|
520
|
+
});
|
|
521
|
+
this.dispatchEvent(n);
|
|
511
522
|
}
|
|
512
523
|
};
|
|
513
524
|
N([s({ attribute: !1 })], F.prototype, "tree", void 0), N([s({ type: Number })], F.prototype, "level", void 0), N([ue({
|
|
@@ -2101,16 +2112,18 @@ var K, q = class extends e {
|
|
|
2101
2112
|
}, this._onItemMouseLeave = () => {
|
|
2102
2113
|
this._showTooltip = !1;
|
|
2103
2114
|
}, this._onClick = (e) => {
|
|
2104
|
-
if (this._isParent())
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
let t = [...this.ancestorPath, this.tree];
|
|
2108
|
-
this.dispatchEvent(new CustomEvent("vsn-breadcrumb-menu-leaf-select", {
|
|
2109
|
-
detail: { path: t },
|
|
2110
|
-
bubbles: !0,
|
|
2111
|
-
composed: !0
|
|
2112
|
-
}));
|
|
2115
|
+
if (this._isParent()) {
|
|
2116
|
+
e.preventDefault(), e.stopPropagation(), this._isExpanded = !this._isExpanded;
|
|
2117
|
+
return;
|
|
2113
2118
|
}
|
|
2119
|
+
if (!this.tree || e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
|
|
2120
|
+
e.preventDefault(), e.stopPropagation();
|
|
2121
|
+
let t = [...this.ancestorPath, this.tree];
|
|
2122
|
+
this.dispatchEvent(new CustomEvent("vsn-breadcrumb-menu-leaf-select", {
|
|
2123
|
+
detail: { path: t },
|
|
2124
|
+
bubbles: !0,
|
|
2125
|
+
composed: !0
|
|
2126
|
+
}));
|
|
2114
2127
|
}, this._tooltipId = `vsn-menu-item-tooltip-${K._idCounter++}`;
|
|
2115
2128
|
}
|
|
2116
2129
|
createRenderRoot() {
|
|
@@ -2118,34 +2131,41 @@ var K, q = class extends e {
|
|
|
2118
2131
|
}
|
|
2119
2132
|
render() {
|
|
2120
2133
|
return n`
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2134
|
+
${this._menuItemMarkup()}
|
|
2135
|
+
${u(this._isExpanded, () => n`${this._getExpandedMenu()}`)}
|
|
2136
|
+
`;
|
|
2124
2137
|
}
|
|
2125
2138
|
_getExpandedMenu() {
|
|
2126
2139
|
return n`
|
|
2127
|
-
|
|
2128
|
-
|
|
2140
|
+
${d(this._getTreeItems(this.tree), (e) => this._menuItem(e, this.level + 1))}
|
|
2141
|
+
`;
|
|
2129
2142
|
}
|
|
2130
2143
|
_menuItemMarkup() {
|
|
2131
2144
|
let e = this.tree?.label ?? "", t = {
|
|
2132
2145
|
"ga-side-navigation__item": !0,
|
|
2133
2146
|
[`ga-side-navigation__item--level-${this.level}`]: this.level > 1
|
|
2134
2147
|
}, r = n`
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2148
|
+
<div id="${this._tooltipId}" role="tooltip"
|
|
2149
|
+
style="position: fixed; left: ${this._tooltipPos.x}px; top: ${this._tooltipPos.y}px; transform: translateY(-50%); visibility: ${this._showTooltip ? "visible" : "hidden"}; pointer-events: none; z-index: 9999;">
|
|
2150
|
+
<div class="ga-tooltip ga-tooltip--right-start" style="white-space: nowrap">${e}</div>
|
|
2151
|
+
</div>
|
|
2138
2152
|
<span class="ga-side-navigation__item-icon">
|
|
2139
2153
|
${this._isParent() ? this._isExpanded ? j(M, 16) : j(ot, 16) : ""}
|
|
2140
2154
|
</span>
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
return this._isParent() ? n
|
|
2155
|
+
<div class="ga-side-navigation__item-content">
|
|
2156
|
+
<div class="ga-side-navigation__item-label">${e}</div>
|
|
2157
|
+
</div>
|
|
2158
|
+
`;
|
|
2159
|
+
return this._isParent() ? n`
|
|
2160
|
+
<div class="${f(t)}" aria-describedby="${this._tooltipId}" @click=${this._onClick}
|
|
2161
|
+
@mouseenter=${this._onItemMouseEnter} @mouseleave=${this._onItemMouseLeave}>${r}
|
|
2162
|
+
</div>` : n`<a class="${f(t)}" aria-describedby="${this._tooltipId}"
|
|
2163
|
+
href="${this.tree && g(this.tree) ? this.tree.url : ""}" @click=${this._onClick}
|
|
2164
|
+
@mouseenter=${this._onItemMouseEnter} @mouseleave=${this._onItemMouseLeave}>${r}</a>`;
|
|
2146
2165
|
}
|
|
2147
2166
|
_menuItem(e, t) {
|
|
2148
|
-
return n
|
|
2167
|
+
return n`
|
|
2168
|
+
<vsn-breadcrumb-menu-item .tree=${e} .level=${t} .ancestorPath=${this.tree ? [...this.ancestorPath, this.tree] : this.ancestorPath}></vsn-breadcrumb-menu-item>`;
|
|
2149
2169
|
}
|
|
2150
2170
|
_getTreeItems(e) {
|
|
2151
2171
|
if (e !== void 0 && _(e)) return e.items;
|