scb-wc-test 0.1.109 → 0.1.111

package/mvc/scb-blazor-bridge.js

@@ -631,7 +631,7 @@
     bySource.get(r.from).push(r);
   }
 
-  /* Registrerar en global listener per käll-event.
+  /* Registrerar en global listener per source event.
      Varje listener hittar relevant komponent och triggar rätt normaliserat event. */
   bySource.forEach((rules, fromEvent) => {
     document.addEventListener(
@@ -1087,23 +1087,34 @@ window.SCBBlazor.getState = function () {
   });
 
   const checkboxesState = Array.from(checkboxes).map((cb) => {
-     const anyCb = cb;
-     const checked =
-     typeof anyCb.checked === 'boolean'
+    const anyCb = cb;
+    const checked =
+      typeof anyCb.checked === 'boolean'
         ? anyCb.checked
         : cb.hasAttribute('checked');
-     return !!checked;
-   });
 
+    return {
+      checked: !!checked,
+      name: cb.getAttribute('name') || '',
+      value: cb.getAttribute('value') || '',
+      label: cb.getAttribute('label') || '',
+    };
+  });
 
-  // Switchar på sidan hämtas som bool beroende på selected
+  // Switchar på sidan hämtas som objekt med selected, name, value och label
   const switchesState = Array.from(switches).map((sw) => {
     const anySw = sw;
     const selected =
       typeof anySw.selected === 'boolean'
         ? anySw.selected
         : sw.hasAttribute('selected');
-    return !!selected;
+
+    return {
+      selected: !!selected,
+      name: sw.getAttribute('name') || '',
+      value: sw.getAttribute('value') || '',
+      label: sw.getAttribute('label') || '',
+    };
   });
 
   // App bar, läser direkt från attributen
@@ -1447,11 +1458,25 @@ window.SCBBlazor.getState = function () {
         ? anyTf.error
         : tf.hasAttribute('error');
 
+    const name = (
+      anyTf.name ??
+      tf.getAttribute('name') ??
+      ''
+    ).toString();
+
+    const id = (
+      anyTf.id ??
+      tf.getAttribute('id') ??
+      ''
+    ).toString();
+
     return {
       value,
       label,
       supportingText,
       error,
+      name,
+      id,
     };
   });
 
@@ -1481,11 +1506,25 @@ window.SCBBlazor.getState = function () {
       ''
     ).toString();
 
+    const name = (
+      anyS.name ??
+      s.getAttribute('name') ??
+      ''
+    ).toString();
+
+    const id = (
+      anyS.id ??
+      s.getAttribute('id') ??
+      ''
+    ).toString();
+
     return {
       value,
       supportingText,
       fullScreen,
       size,
+      name,
+      id,
     };
   });
 
@@ -1920,3 +1959,559 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     });
   });
 };
+
+/* 
+   Styrkommandon från Blazor.
+   Dessa funktioner uppdaterar komponenternas state i DOM och triggar normaliserade events
+   så att SCBBlazor.getState och registerScbEventHandlers kan uppdatera Blazor-modellen.
+*/
+(function () {
+  'use strict';
+
+  function getByIndex(selector, index) {
+    const list = document.querySelectorAll(selector);
+    if (!list || list.length === 0) return null;
+    const i = typeof index === 'number' ? index : parseInt(index, 10);
+    if (Number.isNaN(i) || i < 0 || i >= list.length) return null;
+    return list[i];
+  }
+
+  function getById(id, selector) {
+    if (!id) return null;
+    const el = document.getElementById(String(id));
+    if (!el) return null;
+    if (selector && (!(el instanceof Element) || !el.matches(selector))) return null;
+    return el;
+  }
+
+  function toBool(value) {
+    return !!value;
+  }
+
+  function dispatchChange(el, name, detail) {
+    if (!el) return;
+    el.dispatchEvent(
+      new CustomEvent(name, {
+        bubbles: true,
+        composed: true,
+        detail: detail || {},
+      }),
+    );
+  }
+
+  const api = (window.SCBBlazor = window.SCBBlazor || {});
+
+  // Header
+
+  api.setHeaderActiveTab = function (index) {
+    const header = document.querySelector('scb-header');
+    if (!header) return;
+    const i = typeof index === 'number' ? index : parseInt(index, 10) || 0;
+    try {
+      header.activeTab = i;
+    } catch (_) {}
+    header.setAttribute('active-tab', String(i));
+    dispatchChange(header, 'tabchange', { index: i });
+  };
+
+  api.setHeaderDrawerOpen = function (open) {
+    const header = document.querySelector('scb-header');
+    if (!header) return;
+    const isOpen = toBool(open);
+    if (isOpen) header.setAttribute('drawer-open', '');
+    else header.removeAttribute('drawer-open');
+    dispatchChange(header, 'draweropen', { open: isOpen });
+  };
+
+  api.setHeaderSearchText = function (text) {
+    const header = document.querySelector('scb-header');
+    if (!header) return;
+    const value = text == null ? '' : String(text);
+    try {
+      header.searchText = value;
+    } catch (_) {}
+    if (value) header.setAttribute('search-text', value);
+    else header.removeAttribute('search-text');
+    dispatchChange(header, 'search', { value });
+  };
+
+  // Drawer och menu
+
+  api.setDrawerOpen = function (open) {
+    const drawer = document.querySelector('scb-drawer');
+    if (!drawer) return;
+    const isOpen = toBool(open);
+    try {
+      drawer.open = isOpen;
+    } catch (_) {}
+    if (isOpen) drawer.setAttribute('open', '');
+    else drawer.removeAttribute('open');
+    dispatchChange(drawer, 'openchange', { open: isOpen });
+  };
+
+  api.setDrawerText = function (label, subLabel) {
+    const drawer = document.querySelector('scb-drawer');
+    if (!drawer) return;
+    const l = label == null ? '' : String(label);
+    const s = subLabel == null ? '' : String(subLabel);
+    drawer.setAttribute('label', l);
+    drawer.setAttribute('sub-label', s);
+  };
+
+  api.setMenuOpen = function (open) {
+    const menu = document.querySelector('scb-menu');
+    if (!menu) return;
+    const isOpen = toBool(open);
+    try {
+      menu.open = isOpen;
+    } catch (_) {}
+    if (isOpen) menu.setAttribute('open', '');
+    else menu.removeAttribute('open');
+    dispatchChange(menu, 'openchange', { open: isOpen });
+  };
+
+  api.setSubMenuOpen = function (index, open) {
+    const subMenu = getByIndex('scb-sub-menu', index);
+    if (!subMenu) return;
+    const isOpen = toBool(open);
+    try {
+      subMenu.open = isOpen;
+    } catch (_) {}
+    if (isOpen) subMenu.setAttribute('open', '');
+    else subMenu.removeAttribute('open');
+    dispatchChange(subMenu, 'openchange', { open: isOpen });
+  };
+
+  api.setSubMenuOpenById = function (id, open) {
+    const subMenu = getById(id, 'scb-sub-menu');
+    if (!subMenu) return;
+    const isOpen = toBool(open);
+    try {
+      subMenu.open = isOpen;
+    } catch (_) {}
+    if (isOpen) subMenu.setAttribute('open', '');
+    else subMenu.removeAttribute('open');
+    dispatchChange(subMenu, 'openchange', { open: isOpen });
+  };
+
+  // Breadcrumb
+
+  api.setBreadcrumbShowAll = function (showAll) {
+    const breadcrumb = document.querySelector('scb-breadcrumb');
+    if (!breadcrumb) return;
+    const value = toBool(showAll);
+    try {
+      breadcrumb.showAll = value;
+    } catch (_) {}
+    if (value) breadcrumb.setAttribute('show-all', '');
+    else breadcrumb.removeAttribute('show-all');
+    dispatchChange(breadcrumb, 'showallchange', { value });
+  };
+
+  // Accordion
+
+  api.setAccordionItemOpen = function (accordionIndex, itemIndex, open) {
+    const acc = getByIndex('scb-accordion', accordionIndex);
+    if (!acc) return;
+    const items = acc.querySelectorAll('scb-accordion-item');
+    if (!items || items.length === 0) return;
+    const i = typeof itemIndex === 'number' ? itemIndex : parseInt(itemIndex, 10) || 0;
+    if (i < 0 || i >= items.length) return;
+    const item = items[i];
+    const isOpen = toBool(open);
+    try {
+      item.open = isOpen;
+    } catch (_) {}
+    if (isOpen) item.setAttribute('open', '');
+    else item.removeAttribute('open');
+    dispatchChange(item, 'openchange', { open: isOpen });
+  };
+
+  api.setAccordionItemOpenById = function (itemId, open) {
+    const item = getById(itemId, 'scb-accordion-item');
+    if (!item) return;
+    const isOpen = toBool(open);
+    try {
+      item.open = isOpen;
+    } catch (_) {}
+    if (isOpen) item.setAttribute('open', '');
+    else item.removeAttribute('open');
+    dispatchChange(item, 'openchange', { open: isOpen });
+  };
+
+  // Checkbox och switch
+
+  api.setCheckboxChecked = function (index, checked) {
+    const cb = getByIndex('scb-checkbox', index);
+    if (!cb) return;
+    const isChecked = toBool(checked);
+    try {
+      cb.checked = isChecked;
+    } catch (_) {}
+    if (isChecked) cb.setAttribute('checked', '');
+    else cb.removeAttribute('checked');
+    dispatchChange(cb, 'checkedchange', { checked: isChecked });
+  };
+
+  api.setCheckboxCheckedById = function (id, checked) {
+    const cb = getById(id, 'scb-checkbox');
+    if (!cb) return;
+    const isChecked = toBool(checked);
+    try {
+      cb.checked = isChecked;
+    } catch (_) {}
+    if (isChecked) cb.setAttribute('checked', '');
+    else cb.removeAttribute('checked');
+    dispatchChange(cb, 'checkedchange', { checked: isChecked });
+  };
+
+  api.setSwitchSelected = function (index, selected) {
+    const sw = getByIndex('scb-switch', index);
+    if (!sw) return;
+    const isSelected = toBool(selected);
+    try {
+      sw.selected = isSelected;
+    } catch (_) {}
+    if (isSelected) sw.setAttribute('selected', '');
+    else sw.removeAttribute('selected');
+    dispatchChange(sw, 'selectedchange', { selected: isSelected });
+  };
+
+  api.setSwitchSelectedById = function (id, selected) {
+    const sw = getById(id, 'scb-switch');
+    if (!sw) return;
+    const isSelected = toBool(selected);
+    try {
+      sw.selected = isSelected;
+    } catch (_) {}
+    if (isSelected) sw.setAttribute('selected', '');
+    else sw.removeAttribute('selected');
+    dispatchChange(sw, 'selectedchange', { selected: isSelected });
+  };
+
+  // Segmented button
+
+  api.setSegmentedValue = function (value) {
+    const seg = document.querySelector('scb-segmented-button');
+    if (!seg) return;
+    const v = value == null ? '' : String(value);
+    try {
+      seg.value = v;
+    } catch (_) {}
+    if (v) seg.setAttribute('value', v);
+    else seg.removeAttribute('value');
+    dispatchChange(seg, 'valuechange', { value: v });
+  };
+
+  api.setSegmentedValues = function (values) {
+    const seg = document.querySelector('scb-segmented-button');
+    if (!seg) return;
+    const arr = Array.isArray(values) ? values.map((v) => String(v)) : [];
+    try {
+      seg.values = arr;
+    } catch (_) {}
+    if (arr.length > 0) {
+      seg.setAttribute('value', arr[0]);
+    } else {
+      seg.removeAttribute('value');
+    }
+    dispatchChange(seg, 'valueschange', { values: arr });
+  };
+
+  api.setSegmentedValueById = function (id, value) {
+    const seg = getById(id, 'scb-segmented-button');
+    if (!seg) return;
+    const v = value == null ? '' : String(value);
+    try {
+      seg.value = v;
+    } catch (_) {}
+    if (v) seg.setAttribute('value', v);
+    else seg.removeAttribute('value');
+    dispatchChange(seg, 'valuechange', { value: v });
+  };
+
+  api.setSegmentedValuesById = function (id, values) {
+    const seg = getById(id, 'scb-segmented-button');
+    if (!seg) return;
+    const arr = Array.isArray(values) ? values.map((v) => String(v)) : [];
+    try {
+      seg.values = arr;
+    } catch (_) {}
+    if (arr.length > 0) {
+      seg.setAttribute('value', arr[0]);
+    } else {
+      seg.removeAttribute('value');
+    }
+    dispatchChange(seg, 'valueschange', { values: arr });
+  };
+
+  // Tabs
+
+  api.setTabsActiveIndex = function (tabsIndex, activeIndex) {
+    const tabs = getByIndex('scb-tabs', tabsIndex);
+    if (!tabs) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyTabs = tabs;
+    try {
+      anyTabs.activeTabIndex = i;
+    } catch (_) {}
+    tabs.setAttribute('active-tab-index', String(i));
+    dispatchChange(tabs, 'tabschange', { activeIndex: i });
+  };
+
+  api.setTabsActiveIndexById = function (id, activeIndex) {
+    const tabs = getById(id, 'scb-tabs');
+    if (!tabs) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyTabs = tabs;
+    try {
+      anyTabs.activeTabIndex = i;
+    } catch (_) {}
+    tabs.setAttribute('active-tab-index', String(i));
+    dispatchChange(tabs, 'tabschange', { activeIndex: i });
+  };
+
+  // Dialog, notification och snackbar
+
+  api.setDialogOpen = function (open) {
+    const dialog = document.querySelector('scb-dialog');
+    if (!dialog) return;
+    const isOpen = toBool(open);
+    try {
+      dialog.open = isOpen;
+    } catch (_) {}
+    if (isOpen) dialog.setAttribute('open', '');
+    else dialog.removeAttribute('open');
+    dispatchChange(dialog, 'openchange', { open: isOpen });
+  };
+
+  api.setNotificationOpen = function (index, open) {
+    const card = getByIndex('scb-notification-card', index);
+    if (!card) return;
+    const isOpen = toBool(open);
+    if (isOpen) card.setAttribute('open', '');
+    else card.removeAttribute('open');
+    dispatchChange(card, 'openchange', { open: isOpen });
+  };
+
+  api.setNotificationOpenById = function (id, open) {
+    const card = getById(id, 'scb-notification-card');
+    if (!card) return;
+    const isOpen = toBool(open);
+    if (isOpen) card.setAttribute('open', '');
+    else card.removeAttribute('open');
+    dispatchChange(card, 'openchange', { open: isOpen });
+  };
+
+  api.setSnackbarOpen = function (index, open) {
+    const sb = getByIndex('scb-snackbar', index);
+    if (!sb) return;
+    const isOpen = toBool(open);
+    if (isOpen) sb.setAttribute('open', '');
+    else sb.removeAttribute('open');
+    dispatchChange(sb, 'openchange', { open: isOpen });
+  };
+
+  api.setSnackbarOpenById = function (id, open) {
+    const sb = getById(id, 'scb-snackbar');
+    if (!sb) return;
+    const isOpen = toBool(open);
+    if (isOpen) sb.setAttribute('open', '');
+    else sb.removeAttribute('open');
+    dispatchChange(sb, 'openchange', { open: isOpen });
+  };
+
+  // Stepper och pagination
+
+  api.setStepperActiveIndex = function (activeIndex) {
+    const stepper = document.querySelector('scb-stepper');
+    if (!stepper) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyStepper = stepper;
+    try {
+      anyStepper.activeIndex = i;
+    } catch (_) {}
+    stepper.setAttribute('active-index', String(i));
+    dispatchChange(stepper, 'stepchange', { activeIndex: i });
+  };
+
+  api.setStepperActiveIndexById = function (id, activeIndex) {
+    const stepper = getById(id, 'scb-stepper');
+    if (!stepper) return;
+    const i = typeof activeIndex === 'number' ? activeIndex : parseInt(activeIndex, 10) || 0;
+    const anyStepper = stepper;
+    try {
+      anyStepper.activeIndex = i;
+    } catch (_) {}
+    stepper.setAttribute('active-index', String(i));
+    dispatchChange(stepper, 'stepchange', { activeIndex: i });
+  };
+
+  api.setPaginationPage = function (paginationIndex, page) {
+    const p = getByIndex('scb-pagination', paginationIndex);
+    if (!p) return;
+    const i = typeof page === 'number' ? page : parseInt(page, 10) || 0;
+    const anyP = p;
+    try {
+      anyP.page = i;
+    } catch (_) {}
+    p.setAttribute('page', String(i));
+    dispatchChange(p, 'pagechange', { page: i });
+  };
+
+  api.setPaginationPageById = function (id, page) {
+    const p = getById(id, 'scb-pagination');
+    if (!p) return;
+    const i = typeof page === 'number' ? page : parseInt(page, 10) || 0;
+    const anyP = p;
+    try {
+      anyP.page = i;
+    } catch (_) {}
+    p.setAttribute('page', String(i));
+    dispatchChange(p, 'pagechange', { page: i });
+  };
+
+  // Radio group
+
+  api.setRadioGroupValueByIndex = function (groupIndex, value) {
+    const group = getByIndex('scb-radio-group', groupIndex);
+    if (!group) return;
+    const v = value == null ? '' : String(value);
+    try {
+      group.value = v;
+    } catch (_) {}
+    group.setAttribute('value', v);
+    dispatchChange(group, 'valuechange', { value: v });
+  };
+
+  api.setRadioGroupValueByName = function (name, value) {
+    if (!name) return;
+    const selector = 'scb-radio-group[name="' + String(name) + '"]';
+    const group = document.querySelector(selector);
+    if (!group) return;
+    const v = value == null ? '' : String(value);
+    try {
+      group.value = v;
+    } catch (_) {}
+    group.setAttribute('value', v);
+    dispatchChange(group, 'valuechange', { value: v });
+  };
+
+  api.setRadioGroupValueById = function (id, value) {
+    const group = getById(id, 'scb-radio-group');
+    if (!group) return;
+    const v = value == null ? '' : String(value);
+    try {
+      group.value = v;
+    } catch (_) {}
+    group.setAttribute('value', v);
+    dispatchChange(group, 'valuechange', { value: v });
+  };
+
+  // Textfield och search
+
+  api.setTextfieldValue = function (index, value) {
+    const tf = getByIndex('scb-textfield', index);
+    if (!tf) return;
+    const v = value == null ? '' : String(value);
+    const anyTf = tf;
+    try {
+      anyTf.value = v;
+    } catch (_) {}
+    tf.setAttribute('value', v);
+    dispatchChange(tf, 'valuechange', { value: v });
+  };
+
+  api.setTextfieldValueById = function (id, value) {
+    const tf = getById(id, 'scb-textfield');
+    if (!tf) return;
+    const v = value == null ? '' : String(value);
+    const anyTf = tf;
+    try {
+      anyTf.value = v;
+    } catch (_) {}
+    tf.setAttribute('value', v);
+    dispatchChange(tf, 'valuechange', { value: v });
+  };
+
+  api.setSearchValue = function (index, value) {
+    const s = getByIndex('scb-search', index);
+    if (!s) return;
+    const v = value == null ? '' : String(value);
+    const anyS = s;
+    try {
+      anyS.value = v;
+    } catch (_) {}
+    s.setAttribute('value', v);
+    dispatchChange(s, 'valuechange', { value: v });
+  };
+
+  api.setSearchValueById = function (id, value) {
+    const s = getById(id, 'scb-search');
+    if (!s) return;
+    const v = value == null ? '' : String(value);
+    const anyS = s;
+    try {
+      anyS.value = v;
+    } catch (_) {}
+    s.setAttribute('value', v);
+    dispatchChange(s, 'valuechange', { value: v });
+  };
+
+  // TOC
+
+  api.setTocItemExpanded = function (tocIndex, itemIndex, expanded) {
+    const toc = getByIndex('scb-toc', tocIndex);
+    if (!toc) return;
+    const items = toc.querySelectorAll('scb-toc-item');
+    if (!items || items.length === 0) return;
+    const i = typeof itemIndex === 'number' ? itemIndex : parseInt(itemIndex, 10) || 0;
+    if (i < 0 || i >= items.length) return;
+    const item = items[i];
+    const isExpanded = toBool(expanded);
+    const anyItem = item;
+    try {
+      anyItem.expanded = isExpanded;
+    } catch (_) {}
+    if (isExpanded) item.setAttribute('expanded', '');
+    else item.removeAttribute('expanded');
+    dispatchChange(item, 'expandedchange', { expanded: isExpanded });
+  };
+
+  api.setTocItemExpandedById = function (itemId, expanded) {
+    const item = getById(itemId, 'scb-toc-item');
+    if (!item) return;
+    const isExpanded = toBool(expanded);
+    const anyItem = item;
+    try {
+      anyItem.expanded = isExpanded;
+    } catch (_) {}
+    if (isExpanded) item.setAttribute('expanded', '');
+    else item.removeAttribute('expanded');
+    dispatchChange(item, 'expandedchange', { expanded: isExpanded });
+  };
+
+  // Viz
+
+  api.setVizSelectedChip = function (index, selectedChip) {
+    const viz = getByIndex('scb-viz', index);
+    if (!viz) return;
+    const value = selectedChip == null ? '' : String(selectedChip);
+    const anyViz = viz;
+    try {
+      anyViz.selectedChip = value;
+    } catch (_) {}
+    dispatchChange(viz, 'valuechange', { value });
+  };
+
+  api.setVizSelectedChipById = function (id, selectedChip) {
+    const viz = getById(id, 'scb-viz');
+    if (!viz) return;
+    const value = selectedChip == null ? '' : String(selectedChip);
+    const anyViz = viz;
+    try {
+      anyViz.selectedChip = value;
+    } catch (_) {}
+    dispatchChange(viz, 'valuechange', { value });
+  };
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.109",
+    "version":  "0.1.111",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -341,5 +341,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "FE1F2C82B9DDE76C0E2956F57BC7B6E22824F0F60304C6FD2E9DC7DCF2FA71B7"
+    "buildHash":  "F453A993B52781DB4833FB0A7627C0B71D023A5C1FBBBF9B74FEA6B871E7F367"
 }

package/scb-search/scb-search.js

@@ -427,7 +427,7 @@ a.styles = y`
       line-height: var(--scb-search-line-height);
 
       color: var(--md-sys-color-on-surface);
-      background: var(--md-sys-color-surface);
+      background: transparent;
 
       position: relative;
       z-index: 1;
@@ -473,7 +473,7 @@ a.styles = y`
       left: 0;
       width: 100%;
       z-index: 10;
-      background: var(--md-sys-color-surface);
+      background: var(--md-sys-color-surface-container-lowest);
       border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
       border-top: 0;
       border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);

package/scb-textfield/scb-textfield.d.ts

@@ -3,6 +3,10 @@ export declare class ScbTextField extends LitElement {
     #private;
     static formAssociated: boolean;
     private _internals;
+    private _inputFocused;
+    private _kbShouldShowRing;
+    private _onGlobalKeydown;
+    private _onGlobalPointerDown;
     constructor();
     type: 'number' | 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'textarea' | 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
     label: string;