scb-wc-test 0.1.133 → 0.1.134

package/blazor/ScbBlazorInteropBase.cs

@@ -110,6 +110,12 @@ namespace ScbBlazorDemo
         // Alla länkar (scb-link) på sidan
         protected LinkState[] Links { get; private set; } = Array.Empty<LinkState>();
 
+
+        // Alla nav (scb-nav) på sidan
+        protected NavState[] Navs { get; private set; } = Array.Empty<NavState>();
+
+        // Uppslag med alla nav (scb-nav) nycklade på id-attributet
+        protected Dictionary<string, NavState> NavsById { get; private set; } = new Dictionary<string, NavState>(StringComparer.Ordinal);
         // Alla innehållsförteckningar (scb-toc) på sidan
         protected TocState[] Tocs { get; private set; } = Array.Empty<TocState>();
 
@@ -781,6 +787,86 @@ namespace ScbBlazorDemo
                 Links = Array.Empty<LinkState>();
             }
 
+            // Nav
+            if (state.Navs is not null && state.Navs.Length > 0)
+            {
+                var navs = new NavState[state.Navs.Length];
+                for (var i = 0; i < state.Navs.Length; i++)
+                {
+                    var dto = state.Navs[i];
+                    navs[i] = new NavState
+                    {
+                        Id               = dto.Id               ?? string.Empty,
+                        Label            = dto.Label            ?? string.Empty,
+                        ActiveHref       = dto.ActiveHref       ?? string.Empty,
+                        ActivateOnClick  = dto.ActivateOnClick,
+                        Sticky           = dto.Sticky,
+                        StickyTop        = dto.StickyTop        ?? string.Empty,
+                        StickyZIndex     = dto.StickyZIndex,
+                        StickyBackground = dto.StickyBackground ?? string.Empty
+                    };
+                }
+
+                Navs = navs;
+            }
+            else
+            {
+                Navs = Array.Empty<NavState>();
+            }
+
+            // Uppslag med alla nav nycklade på id
+            if (state.NavsById is not null && state.NavsById.Count > 0)
+            {
+                var byId = new Dictionary<string, NavState>(state.NavsById.Count, StringComparer.Ordinal);
+                foreach (var kvp in state.NavsById)
+                {
+                    var id  = kvp.Key;
+                    var dto = kvp.Value;
+
+                    if (string.IsNullOrWhiteSpace(id) || dto is null)
+                    {
+                        continue;
+                    }
+
+                    byId[id] = new NavState
+                    {
+                        Id               = id,
+                        Label            = dto.Label            ?? string.Empty,
+                        ActiveHref       = dto.ActiveHref       ?? string.Empty,
+                        ActivateOnClick  = dto.ActivateOnClick,
+                        Sticky           = dto.Sticky,
+                        StickyTop        = dto.StickyTop        ?? string.Empty,
+                        StickyZIndex     = dto.StickyZIndex,
+                        StickyBackground = dto.StickyBackground ?? string.Empty
+                    };
+                }
+
+                NavsById = byId;
+            }
+            else if (Navs.Length > 0)
+            {
+                var byId = new Dictionary<string, NavState>(Navs.Length, StringComparer.Ordinal);
+                for (var i = 0; i < Navs.Length; i++)
+                {
+                    var nav = Navs[i];
+                    var id = nav.Id;
+
+                    if (string.IsNullOrWhiteSpace(id))
+                    {
+                        continue;
+                    }
+
+                    byId[id] = nav;
+                }
+
+                NavsById = byId;
+            }
+            else
+            {
+                NavsById = new Dictionary<string, NavState>(StringComparer.Ordinal);
+            }
+
+
             // TOC
             if (state.Tocs is not null && state.Tocs.Length > 0)
             {
@@ -1260,6 +1346,12 @@ namespace ScbBlazorDemo
             return JS.InvokeVoidAsync("SCBBlazor.setSearchValueById", id ?? string.Empty, value ?? string.Empty).AsTask();
         }
 
+
+        protected Task SetNavActiveHrefByIdAsync(string id, string activeHref)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setNavActiveHrefById", id ?? string.Empty, activeHref ?? string.Empty).AsTask();
+        }
+
         // TOC: index-baserad och id-baserad variant för items
         protected Task SetTocItemExpandedAsync(int tocIndex, int itemIndex, bool expanded)
         {
@@ -1555,6 +1647,19 @@ namespace ScbBlazorDemo
             public string Text      { get; set; } = string.Empty;
         }
 
+        protected sealed class NavState
+        {
+            public string Id { get; set; } = string.Empty;
+            public string Label { get; set; } = string.Empty;
+            public string ActiveHref { get; set; } = string.Empty;
+            public bool ActivateOnClick { get; set; }
+            public bool Sticky { get; set; }
+            public string StickyTop { get; set; } = string.Empty;
+            public int StickyZIndex { get; set; }
+            public string StickyBackground { get; set; } = string.Empty;
+        }
+
+
         protected sealed class TocState
         {
             public bool Detached { get; set; }
@@ -1661,6 +1766,10 @@ namespace ScbBlazorDemo
 
             public LinkDto[] Links { get; set; } = Array.Empty<LinkDto>();
 
+
+            public NavDto[] Navs { get; set; } = Array.Empty<NavDto>();
+
+            public Dictionary<string, NavDto> NavsById { get; set; } = new();
             public TocDto[] Tocs { get; set; } = Array.Empty<TocDto>();
 
             public ScrollspyDto Scrollspy { get; set; } = new();
@@ -1949,6 +2058,19 @@ namespace ScbBlazorDemo
             public string? ContentPadding  { get; set; }
         }
 
+        private sealed class NavDto
+        {
+            public string? Id { get; set; }
+            public string? Label { get; set; }
+            public string? ActiveHref { get; set; }
+            public bool ActivateOnClick { get; set; }
+            public bool Sticky { get; set; }
+            public string? StickyTop { get; set; }
+            public int StickyZIndex { get; set; }
+            public string? StickyBackground { get; set; }
+        }
+
+
         private sealed class TocDto
         {
             public bool Detached { get; set; }

package/blazor/scb-blazor-bridge.js

@@ -92,6 +92,16 @@
     else el.setAttribute('active-id', String(id));
   }
 
+  function mirrorNavSelect(el, ev) {
+    const href = (ev && ev.detail && ev.detail.href) ?? '';
+    try {
+      el.activeHref = href;
+    } catch (_) {}
+    if (!href) el.removeAttribute('active-href');
+    else el.setAttribute('active-href', String(href));
+  }
+
+
   /* Regler som beskriver hur komponenternas egna events ska översättas
      till enklare, Blazor-vänliga events (och ibland speglas till properties). */
   const RULES = [
@@ -676,6 +686,16 @@
       to: 'stepchange',
     },
 
+
+
+    // scb-nav
+    {
+      sel: 'scb-nav',
+      from: 'scb-nav-select',
+      to: 'navselect',
+      mirror: mirrorNavSelect,
+    },
+
     // scb-scrollspy
     {
       sel: 'scb-scrollspy',
@@ -1085,6 +1105,7 @@ window.SCBBlazor.getState = function () {
   const tooltips = document.querySelectorAll('scb-tooltip');
   const textfields = document.querySelectorAll('scb-textfield');
   const searches = document.querySelectorAll('scb-search');
+  const navs = document.querySelectorAll('scb-nav');
   const scrollspies = document.querySelectorAll('scb-scrollspy');
   const tocs = document.querySelectorAll('scb-toc');
   const vizs = document.querySelectorAll('scb-viz');
@@ -1661,6 +1682,72 @@ window.SCBBlazor.getState = function () {
   });
 
   // Alla scb-toc på sidan med sina scb-toc-item
+
+
+  const navsState = Array.from(navs).map((nav) => {
+    const anyNav = nav;
+
+    const id = (nav.getAttribute('id') || '').toString();
+
+    const label = (
+      anyNav.label ??
+      nav.getAttribute('label') ??
+      ''
+    ).toString();
+
+    const activeHref = (
+      anyNav.activeHref ??
+      nav.getAttribute('active-href') ??
+      ''
+    ).toString();
+
+    const activateOnClick =
+      typeof anyNav.activateOnClick === 'boolean'
+        ? anyNav.activateOnClick
+        : nav.hasAttribute('activate-on-click');
+
+    const sticky =
+      typeof anyNav.sticky === 'boolean'
+        ? anyNav.sticky
+        : nav.hasAttribute('sticky');
+
+    const stickyTop = (
+      anyNav.stickyTop ??
+      nav.getAttribute('sticky-top') ??
+      '0px'
+    ).toString();
+
+    let stickyZIndex = 0;
+    if (typeof anyNav.stickyZIndex === 'number') {
+      stickyZIndex = anyNav.stickyZIndex;
+    } else {
+      const v = parseInt(nav.getAttribute('sticky-z-index') || '0', 10);
+      stickyZIndex = Number.isFinite(v) ? v : 0;
+    }
+
+    const stickyBackground = (
+      anyNav.stickyBackground ??
+      nav.getAttribute('sticky-background') ??
+      ''
+    ).toString();
+
+    return {
+      id,
+      label,
+      activeHref,
+      activateOnClick: !!activateOnClick,
+      sticky: !!sticky,
+      stickyTop,
+      stickyZIndex,
+      stickyBackground,
+    };
+  });
+
+  const navsById = {};
+  for (const n of navsState) {
+    if (!n || !n.id) continue;
+    navsById[n.id] = n;
+  }
   const tocsState = Array.from(tocs).map((toc) => {
     const items = toc.querySelectorAll('scb-toc-item');
     return {
@@ -2127,6 +2214,8 @@ const subMenusState = Array.from(subMenus).map((sm) => {
     stepper: stepperState,
     textfields: textfieldsState,
     searches: searchesState,
+    navs: navsState,
+    navsById: navsById,
     tocs: tocsState,
     scrollspy: scrollspyState,
     scrollspies: scrollspiesState,
@@ -2148,6 +2237,8 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     'tabchange',
     'draweropen',
     'search',
+    'navselect',
+    'activehrefchange',
     'openchange',
     'checkedchange',
     'selectedchange',
@@ -2939,6 +3030,21 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     dispatchChange(s, 'valuechange', { value: v });
   };
 
+  // Nav
+
+  api.setNavActiveHrefById = function (id, activeHref) {
+    const nav = getById(id, 'scb-nav');
+    if (!nav) return;
+    const v = activeHref == null ? '' : String(activeHref);
+    const anyNav = nav;
+    try {
+      anyNav.activeHref = v;
+    } catch (_) {}
+    if (v) nav.setAttribute('active-href', v);
+    else nav.removeAttribute('active-href');
+    dispatchChange(nav, 'activehrefchange', { activeHref: v });
+  };
+
   // TOC
 
   api.setTocItemExpanded = function (tocIndex, itemIndex, expanded) {

package/mvc/components/scb-nav/scb-nav.js

@@ -8,7 +8,8 @@ import{a as p,n as d,i as v,x as h,t as f}from"../../vendor/vendor.js";import"..
     :host {
       display: block;
       color: var(--md-sys-color-on-surface);
-    }
+      font-family: var(--brand-font, Inter);  
+     }
 
     :host([sticky]) {
       position: sticky;

package/mvc/scb-blazor-bridge.js

@@ -92,6 +92,16 @@
     else el.setAttribute('active-id', String(id));
   }
 
+  function mirrorNavSelect(el, ev) {
+    const href = (ev && ev.detail && ev.detail.href) ?? '';
+    try {
+      el.activeHref = href;
+    } catch (_) {}
+    if (!href) el.removeAttribute('active-href');
+    else el.setAttribute('active-href', String(href));
+  }
+
+
   /* Regler som beskriver hur komponenternas egna events ska översättas
      till enklare, Blazor-vänliga events (och ibland speglas till properties). */
   const RULES = [
@@ -676,6 +686,16 @@
       to: 'stepchange',
     },
 
+
+
+    // scb-nav
+    {
+      sel: 'scb-nav',
+      from: 'scb-nav-select',
+      to: 'navselect',
+      mirror: mirrorNavSelect,
+    },
+
     // scb-scrollspy
     {
       sel: 'scb-scrollspy',
@@ -1085,6 +1105,7 @@ window.SCBBlazor.getState = function () {
   const tooltips = document.querySelectorAll('scb-tooltip');
   const textfields = document.querySelectorAll('scb-textfield');
   const searches = document.querySelectorAll('scb-search');
+  const navs = document.querySelectorAll('scb-nav');
   const scrollspies = document.querySelectorAll('scb-scrollspy');
   const tocs = document.querySelectorAll('scb-toc');
   const vizs = document.querySelectorAll('scb-viz');
@@ -1661,6 +1682,72 @@ window.SCBBlazor.getState = function () {
   });
 
   // Alla scb-toc på sidan med sina scb-toc-item
+
+
+  const navsState = Array.from(navs).map((nav) => {
+    const anyNav = nav;
+
+    const id = (nav.getAttribute('id') || '').toString();
+
+    const label = (
+      anyNav.label ??
+      nav.getAttribute('label') ??
+      ''
+    ).toString();
+
+    const activeHref = (
+      anyNav.activeHref ??
+      nav.getAttribute('active-href') ??
+      ''
+    ).toString();
+
+    const activateOnClick =
+      typeof anyNav.activateOnClick === 'boolean'
+        ? anyNav.activateOnClick
+        : nav.hasAttribute('activate-on-click');
+
+    const sticky =
+      typeof anyNav.sticky === 'boolean'
+        ? anyNav.sticky
+        : nav.hasAttribute('sticky');
+
+    const stickyTop = (
+      anyNav.stickyTop ??
+      nav.getAttribute('sticky-top') ??
+      '0px'
+    ).toString();
+
+    let stickyZIndex = 0;
+    if (typeof anyNav.stickyZIndex === 'number') {
+      stickyZIndex = anyNav.stickyZIndex;
+    } else {
+      const v = parseInt(nav.getAttribute('sticky-z-index') || '0', 10);
+      stickyZIndex = Number.isFinite(v) ? v : 0;
+    }
+
+    const stickyBackground = (
+      anyNav.stickyBackground ??
+      nav.getAttribute('sticky-background') ??
+      ''
+    ).toString();
+
+    return {
+      id,
+      label,
+      activeHref,
+      activateOnClick: !!activateOnClick,
+      sticky: !!sticky,
+      stickyTop,
+      stickyZIndex,
+      stickyBackground,
+    };
+  });
+
+  const navsById = {};
+  for (const n of navsState) {
+    if (!n || !n.id) continue;
+    navsById[n.id] = n;
+  }
   const tocsState = Array.from(tocs).map((toc) => {
     const items = toc.querySelectorAll('scb-toc-item');
     return {
@@ -2127,6 +2214,8 @@ const subMenusState = Array.from(subMenus).map((sm) => {
     stepper: stepperState,
     textfields: textfieldsState,
     searches: searchesState,
+    navs: navsState,
+    navsById: navsById,
     tocs: tocsState,
     scrollspy: scrollspyState,
     scrollspies: scrollspiesState,
@@ -2148,6 +2237,8 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     'tabchange',
     'draweropen',
     'search',
+    'navselect',
+    'activehrefchange',
     'openchange',
     'checkedchange',
     'selectedchange',
@@ -2939,6 +3030,21 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     dispatchChange(s, 'valuechange', { value: v });
   };
 
+  // Nav
+
+  api.setNavActiveHrefById = function (id, activeHref) {
+    const nav = getById(id, 'scb-nav');
+    if (!nav) return;
+    const v = activeHref == null ? '' : String(activeHref);
+    const anyNav = nav;
+    try {
+      anyNav.activeHref = v;
+    } catch (_) {}
+    if (v) nav.setAttribute('active-href', v);
+    else nav.removeAttribute('active-href');
+    dispatchChange(nav, 'activehrefchange', { activeHref: v });
+  };
+
   // TOC
 
   api.setTocItemExpanded = function (tocIndex, itemIndex, expanded) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.133",
+    "version":  "0.1.134",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -365,5 +365,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "92B641C59C710183D9C3078FB60FEF5EFD5F8AD1FA4001E7B2F5628816C6A691"
+    "buildHash":  "C49883F02635182880136D4B4A65C8E5759CB17C1964B8EFE298DC730881E459"
 }

package/scb-nav/scb-nav.js

@@ -114,7 +114,8 @@ a.styles = y`
     :host {
       display: block;
       color: var(--md-sys-color-on-surface);
-    }
+      font-family: var(--brand-font, Inter);  
+     }
 
     :host([sticky]) {
       position: sticky;

package/scb-wc-test.bundle.js

@@ -7188,7 +7188,8 @@ ${this.value}</textarea
     :host {
       display: block;
       color: var(--md-sys-color-on-surface);
-    }
+      font-family: var(--brand-font, Inter);  
+     }
 
     :host([sticky]) {
       position: sticky;