@visma-swno/vsn-navigation 1.1.0-beta.27 → 1.1.0-beta.29

package/dist/assets/vsn-navigation.js

@@ -924,7 +924,7 @@ var ht = class {
 		this.onSwitcherKeydown = (e) => {
 			if (e.key === "Enter" || e.key === " ") {
 				if (e.preventDefault(), this.host.expanded && !this.host.canClose) return;
-				(this.host.expanded || this.host.hasAvailableItems) && (this.host.expanded = !this.host.expanded);
+				(this.host.expanded || this.host.hasAvailableItems || this.host.modulesLoading) && (this.host.expanded = !this.host.expanded);
 				return;
 			}
 			if (e.key === "ArrowDown" && !this.host.expanded) {
@@ -1174,6 +1174,47 @@ var V = class extends e {
 			this.canClose && (this.expanded = !1);
 		});
 	}
+	render() {
+		let e = this._state;
+		return n`
+      <div class="ga-side-navigation__header">
+        <div class="vsn-switcher-anchor">
+          <div class="ga-side-navigation__switcher ${this.expanded ? "ga-side-navigation__switcher--active" : ""}"
+               tabindex="0"
+               role="button"
+               aria-expanded="${this.expanded}"
+               aria-haspopup="menu"
+               @click=${this._toggle}
+               @keydown=${this._keyboard.onSwitcherKeydown}
+               title="">
+            <span class="ga-side-navigation__switcher-title">${e.title}</span>
+            ${u(this.canClose, () => n`
+              <span class="ga-side-navigation__switcher-action">
+                ${this.expanded ? j(M, 16) : j(tt, 16)}
+              </span>
+            `)}
+          </div>
+
+          ${u(this.expanded, () => n`
+            <vsn-switcher-menu
+                .items=${e.kind === "loading" ? [] : e.available}
+                .loading=${e.kind === "loading"}
+                @item-select=${this._onItemSelect}
+                @close-request=${this._onCloseRequest}
+                @focus-switcher=${this._onFocusSwitcher}
+                @tab-exit=${this._onTabExit}>
+            </vsn-switcher-menu>`)}
+        </div>
+
+        ${u(this.search?.enabled, () => n`
+          <vsn-search
+              .shortcut=${this.search?.shortcut ?? Le()}
+              .value=${this.searchValue}
+              .loading=${this.searchLoading}>
+          </vsn-search>`)}
+      </div>
+    `;
+	}
 	get _state() {
 		if (this.modulesLoading) return {
 			kind: "loading",
@@ -1199,11 +1240,7 @@ var V = class extends e {
 	}
 	willUpdate() {
 		let e = this._state;
-		if (e.kind === "loading") {
-			this.expanded = !0;
-			return;
-		}
-		this.hasMenu || e.kind !== "no-active" || e.available.length === 0 || (this.expanded = !0);
+		e.kind !== "loading" && (this.hasMenu || e.kind !== "no-active" || e.available.length === 0 || (this.expanded = !0));
 	}
 	reset() {
 		this.expanded = !1;
@@ -1233,47 +1270,6 @@ var V = class extends e {
 	_onTabExit() {
 		this.canClose && (this.expanded = !1);
 	}
-	render() {
-		let e = this._state;
-		return n`
-      <div class="ga-side-navigation__header">
-        <div class="vsn-switcher-anchor">
-          <div class="ga-side-navigation__switcher ${this.expanded ? "ga-side-navigation__switcher--active" : ""}"
-               tabindex="0"
-               role="button"
-               aria-expanded="${this.expanded}"
-               aria-haspopup="menu"
-               @click=${this._toggle}
-               @keydown=${this._keyboard.onSwitcherKeydown}
-               title="">
-            <span class="ga-side-navigation__switcher-title">${e.title}</span>
-            ${u(this.canClose, () => n`
-              <span class="ga-side-navigation__switcher-action">
-                ${this.expanded ? j(M, 16) : j(tt, 16)}
-              </span>
-            `)}
-          </div>
-
-          ${u(this.expanded, () => n`
-            <vsn-switcher-menu
-              .items=${e.kind === "loading" ? [] : e.available}
-              .loading=${e.kind === "loading"}
-              @item-select=${this._onItemSelect}
-              @close-request=${this._onCloseRequest}
-              @focus-switcher=${this._onFocusSwitcher}
-              @tab-exit=${this._onTabExit}>
-            </vsn-switcher-menu>`)}
-        </div>
-
-        ${u(this.search?.enabled, () => n`
-          <vsn-search
-            .shortcut=${this.search?.shortcut ?? Le()}
-            .value=${this.searchValue}
-            .loading=${this.searchLoading}>
-          </vsn-search>`)}
-      </div>
-    `;
-	}
 };
 N([s({ attribute: !1 })], V.prototype, "modules", void 0), N([s()], V.prototype, "activeModuleId", void 0), N([s()], V.prototype, "activeModuleLabel", void 0), N([s({ type: Boolean })], V.prototype, "modulesLoading", void 0), N([s({ type: Boolean })], V.prototype, "hasMenu", void 0), N([s({ attribute: !1 })], V.prototype, "search", void 0), N([s()], V.prototype, "searchValue", void 0), N([s({ type: Boolean })], V.prototype, "searchLoading", void 0), N([s({
 	type: Boolean,
@@ -2724,6 +2720,7 @@ var Q = class extends e {
 
       .ga-page-header__context-selector {
         margin-left: auto;
+        margin-right: calc(calc(.25rem * var(--ga-base-scaling-factor, 1)) * 2);
       }
 
       .ga-page-header__header-actions {
@@ -2759,6 +2756,7 @@ var Q = class extends e {
         .ga-page-header__context-selector {
           order: 6;
           margin-left: 0;
+          margin-right: 0;
         }
 
         vsn-home {
@@ -2853,6 +2851,11 @@ var $ = class extends e {
         min-height: 0;
         overflow: hidden;
       }
+
+      .vsn-navigation__page-content {
+        height: 100%;
+        overflow-y: auto;
+      }
     `];
 	}
 	willUpdate(e) {
@@ -2933,7 +2936,9 @@ var $ = class extends e {
         >
           <slot name="nav-footer" slot="nav-footer"></slot>
         </vsn-side-bar>
-        <slot></slot>
+        <div class="vsn-navigation__page-content">
+          <slot></slot>
+        </div>
       </div>
     `;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visma-swno/vsn-navigation",
-  "version": "1.1.0-beta.27",
+  "version": "1.1.0-beta.29",
   "type": "module",
   "customElements": "dist/custom-elements.json",
   "exports": {