scb-wc-test 0.1.110 → 0.1.112

package/blazor/ScbBlazorInteropBase.cs

@@ -1038,6 +1038,17 @@ namespace ScbBlazorDemo
             return JS.InvokeVoidAsync("SCBBlazor.setVizSelectedChipById", id ?? string.Empty, selectedChip ?? string.Empty).AsTask();
         }
 
+
+        protected Task SetVizViewAsync(int index, string view)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setVizView", index, view ?? string.Empty).AsTask();
+        }
+
+        protected Task SetVizViewByIdAsync(string id, string view)
+        {
+            return JS.InvokeVoidAsync("SCBBlazor.setVizViewById", id ?? string.Empty, view ?? string.Empty).AsTask();
+        }
+
 // Nedan följer alla state-klasser som används i Razor views
 
         protected sealed class HeaderState

package/blazor/scb-blazor-bridge.js

@@ -58,6 +58,18 @@
   function mirrorHeaderDrawer(el, isOpen) {
     if (isOpen) el.setAttribute('drawer-open', '');
     else el.removeAttribute('drawer-open');
+
+    // Spegla aria-expanded på menyknappen i headerns shadow DOM så att läget blir rätt även vid overlay-stängning
+    try {
+      const sr = el.shadowRoot;
+      if (sr) {
+        const btn =
+          sr.querySelector('.menu-trigger') ||
+          sr.querySelector('[data-drawer-toggle]') ||
+          sr.querySelector('[aria-controls]');
+        if (btn) btn.setAttribute('aria-expanded', String(!!isOpen));
+      }
+    } catch (_) {}
   }
 
   function mirrorHeaderSearch(el, ev) {
@@ -91,6 +103,19 @@
       to: 'draweropen',
       mirror: (el) => mirrorHeaderDrawer(el, false),
     },
+    // Speglar headerns drawer-state även när drawern stängs/öppnas via overlay eller ESC
+    {
+      sel: 'scb-header',
+      from: 'scb-drawer-opened',
+      to: 'scb-drawer-opened',
+      mirror: (el) => mirrorHeaderDrawer(el, true),
+    },
+    {
+      sel: 'scb-header',
+      from: 'scb-drawer-closed',
+      to: 'scb-drawer-closed',
+      mirror: (el) => mirrorHeaderDrawer(el, false),
+    },
     { sel: 'scb-header', from: 'drawer-select', to: 'select' },
     { sel: 'scb-header', from: 'menu-click', to: 'menuclick' },
     {
@@ -1968,6 +1993,46 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
 (function () {
   'use strict';
 
+  function buildAttrSelector(attr, value) {
+    const v = String(value ?? '')
+      .replace(/\\/g, '\\\\')
+      .replace(/"/g, '\\"');
+    return `[${attr}="${v}"]`;
+  }
+
+  function getOpenState(el) {
+    if (!el) return false;
+    try {
+      if (typeof el.open === 'boolean') return el.open;
+    } catch (_) {}
+    return el.hasAttribute && el.hasAttribute('open');
+  }
+
+  function safeClick(el) {
+    if (!el) return false;
+    try {
+      el.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, composed: true }),
+      );
+      return true;
+    } catch (_) {}
+    try {
+      el.click();
+      return true;
+    } catch (_) {}
+    return false;
+  }
+
+  function findTrigger(kind, id, wantOpen) {
+    if (!id) return null;
+    const selectors = [];
+    if (wantOpen) selectors.push(buildAttrSelector(`data-${kind}-open`, id));
+    else selectors.push(buildAttrSelector(`data-${kind}-close`, id));
+    selectors.push(buildAttrSelector(`data-${kind}-toggle`, id));
+    selectors.push(buildAttrSelector('aria-controls', id));
+    return document.querySelector(selectors.join(','));
+  }
+
   function getByIndex(selector, index) {
     const list = document.querySelectorAll(selector);
     if (!list || list.length === 0) return null;
@@ -2018,8 +2083,50 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     const header = document.querySelector('scb-header');
     if (!header) return;
     const isOpen = toBool(open);
-    if (isOpen) header.setAttribute('drawer-open', '');
-    else header.removeAttribute('drawer-open');
+
+    // Markör på hosten används av getState för Header.DrawerOpen
+    try {
+      mirrorHeaderDrawer(header, isOpen);
+    } catch (_) {
+      if (isOpen) header.setAttribute('drawer-open', '');
+      else header.removeAttribute('drawer-open');
+    }
+
+    // Styr drawern som ligger inuti headerns shadow DOM (standard id: main-drawer)
+    try {
+      const sr = header.shadowRoot;
+      if (sr) {
+        const btn =
+          sr.querySelector('.menu-trigger') ||
+          sr.querySelector('[data-drawer-toggle]') ||
+          sr.querySelector('[aria-controls]');
+
+        const drawerId =
+          (btn &&
+            (btn.getAttribute('aria-controls') ||
+              btn.getAttribute('data-drawer-toggle'))) ||
+          'main-drawer';
+
+        const safeId =
+          window.CSS && typeof window.CSS.escape === 'function'
+            ? window.CSS.escape(String(drawerId))
+            : String(drawerId);
+
+        const drawer =
+          sr.querySelector(`#${safeId}`) ||
+          sr.querySelector('scb-drawer');
+
+        if (drawer) {
+          try {
+            drawer.open = isOpen;
+          } catch (_) {}
+          if (isOpen) drawer.setAttribute('open', '');
+          else drawer.removeAttribute('open');
+        }
+      }
+    } catch (_) {}
+
+    // Trigga state-refresh i Blazor
     dispatchChange(header, 'draweropen', { open: isOpen });
   };
 
@@ -2037,16 +2144,28 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
 
   // Drawer och menu
 
-  api.setDrawerOpen = function (open) {
+      api.setDrawerOpen = function (open) {
     const drawer = document.querySelector('scb-drawer');
     if (!drawer) return;
+
     const isOpen = toBool(open);
+    const prev = getOpenState(drawer);
+    if (prev === isOpen) return;
+
+    // Primärt: använd samma trigger-logik som i UI:t (aria-controls / data-drawer-*)
+    const id = drawer.id;
+    const trigger = findTrigger('drawer', id, isOpen);
+    if (trigger) {
+      safeClick(trigger);
+      if (getOpenState(drawer) === isOpen) return;
+    }
+
+    // Fallback: sätt open direkt
     try {
       drawer.open = isOpen;
     } catch (_) {}
     if (isOpen) drawer.setAttribute('open', '');
     else drawer.removeAttribute('open');
-    dispatchChange(drawer, 'openchange', { open: isOpen });
   };
 
   api.setDrawerText = function (label, subLabel) {
@@ -2273,15 +2392,40 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
 
   // Dialog, notification och snackbar
 
-  api.setDialogOpen = function (open) {
+      api.setDialogOpen = function (open) {
     const dialog = document.querySelector('scb-dialog');
     if (!dialog) return;
+
     const isOpen = toBool(open);
+    const prev = getOpenState(dialog);
+    if (prev === isOpen) return;
+
+    // Primärt: använd samma trigger-logik som i UI:t (aria-controls / data-dialog-*)
+    const id = dialog.id;
+    const trigger = findTrigger('dialog', id, isOpen);
+    if (trigger) {
+      safeClick(trigger);
+      if (getOpenState(dialog) === isOpen) {
+        // Dialogen behöver en normaliserad event-signal för att Blazor ska uppdatera state
+        dispatchChange(dialog, 'openchange', { open: isOpen });
+        return;
+      }
+    }
+
+    // Fallback: försök komponentens API om det finns
+    try {
+      if (isOpen && typeof dialog.showModal === 'function') dialog.showModal();
+      else if (isOpen && typeof dialog.show === 'function') dialog.show();
+      else if (!isOpen && typeof dialog.close === 'function') dialog.close();
+    } catch (_) {}
+
+    // Sista fallback: sätt open direkt
     try {
       dialog.open = isOpen;
     } catch (_) {}
     if (isOpen) dialog.setAttribute('open', '');
     else dialog.removeAttribute('open');
+
     dispatchChange(dialog, 'openchange', { open: isOpen });
   };
 
@@ -2514,4 +2658,148 @@ window.SCBBlazor.registerScbEventHandlers = function (dotNetRef) {
     } catch (_) {}
     dispatchChange(viz, 'valuechange', { value });
   };
+
+  api.setVizView = function (index, view) {
+    const viz = getByIndex('scb-viz', index);
+    if (!viz) return;
+    setVizViewOnElement(viz, view);
+  };
+
+  api.setVizViewById = function (id, view) {
+    const viz = getById(id, 'scb-viz');
+    if (!viz) return;
+    setVizViewOnElement(viz, view);
+  };
+
+  function setVizViewOnElement(viz, view) {
+    const raw = view == null ? '' : String(view);
+    const v = raw.trim().toLowerCase();
+    const showTable = v === 'table' || v === 'tabell';
+
+    // Försöker först styra via viz egna UI (segmented) så att både vy och vald knapp hamnar i synk.
+    try {
+      const sr = viz.shadowRoot;
+      if (sr) {
+        const scbSegmented = sr.querySelector('scb-segmented-button');
+        if (scbSegmented) {
+          const targetLabel = showTable ? 'tabell' : 'diagram';
+          const targetLabelAlt = showTable ? 'table' : 'chart';
+
+          const items = Array.from(
+            scbSegmented.querySelectorAll('scb-segmented-item, button, [role="button"]'),
+          );
+
+          const pickByLabel = (el) => {
+            const label = (
+              el.getAttribute('label') ||
+              el.getAttribute('aria-label') ||
+              (el.label ?? '')
+            )
+              .toString()
+              .trim()
+              .toLowerCase();
+            const text = (el.textContent ?? '').toString().trim().toLowerCase();
+            const s = `${label} ${text}`.trim();
+            return s.includes(targetLabel) || s.includes(targetLabelAlt);
+          };
+
+          let targetEl = items.find(pickByLabel);
+          if (!targetEl && items.length >= 2) {
+            targetEl = items[showTable ? 1 : 0];
+          }
+
+          if (targetEl) {
+            const itemValue = (
+              targetEl.getAttribute('value') ||
+              targetEl.getAttribute('data-value') ||
+              (targetEl.value ?? '')
+            )
+              .toString()
+              .trim();
+
+            if (itemValue) {
+              try {
+                scbSegmented.value = itemValue;
+              } catch (_) {}
+            }
+
+            if (typeof targetEl.click === 'function') {
+              targetEl.click();
+            }
+
+            return;
+          }
+        }
+
+        // Fallback för Material/Web eller annan intern implementation där knapparna ligger direkt i shadowRoot.
+        const mdButtons = Array.from(sr.querySelectorAll('md-segmented-button'));
+        const buttons = mdButtons.length
+          ? mdButtons
+          : Array.from(sr.querySelectorAll('button, [role="button"]'));
+
+        if (buttons.length) {
+          const targetLabel = showTable ? 'tabell' : 'diagram';
+          const targetLabelAlt = showTable ? 'table' : 'chart';
+
+          const pickByLabel = (el) => {
+            const label = (
+              el.getAttribute('label') ||
+              el.getAttribute('aria-label') ||
+              (el.label ?? '')
+            )
+              .toString()
+              .trim()
+              .toLowerCase();
+            const text = (el.textContent ?? '').toString().trim().toLowerCase();
+            const s = `${label} ${text}`.trim();
+            return s.includes(targetLabel) || s.includes(targetLabelAlt);
+          };
+
+          let targetEl = buttons.find(pickByLabel);
+          if (!targetEl && buttons.length >= 2) {
+            targetEl = buttons[showTable ? 1 : 0];
+          }
+
+          if (targetEl) {
+            if (typeof targetEl.click === 'function') {
+              targetEl.click();
+              return;
+            }
+
+            try {
+              targetEl.dispatchEvent(
+                new MouseEvent('click', { bubbles: true, composed: true }),
+              );
+              return;
+            } catch (_) {}
+          }
+        }
+      }
+    } catch (_) {}
+
+    // Sista fallback: växlar synlighet på slottat innehåll.
+    const diagramSlot = viz.querySelector('[slot="diagram"]');
+    const tableSlot = viz.querySelector('[slot="table"]');
+
+    if (diagramSlot) {
+      if (showTable) {
+        diagramSlot.setAttribute('hidden', '');
+        diagramSlot.style.setProperty('display', 'none', 'important');
+      } else {
+        diagramSlot.removeAttribute('hidden');
+        diagramSlot.style.removeProperty('display');
+      }
+    }
+
+    if (tableSlot) {
+      if (showTable) {
+        tableSlot.removeAttribute('hidden');
+        tableSlot.style.removeProperty('display');
+      } else {
+        tableSlot.setAttribute('hidden', '');
+        tableSlot.style.setProperty('display', 'none', 'important');
+      }
+    }
+  };
+
 })();

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

@@ -1,4 +1,4 @@
-import{a as v,n as a,i as x,x as h,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,o,l){try{customElements.get(i)||e(i,o,l)}catch(p){var c=String(p||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var g=Object.defineProperty,_=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,o)=>{for(var l=o>1?void 0:o?_(e,i):e,c=t.length-1,p;c>=0;c--)(p=t[c])&&(l=(o?p(e,i,l):p(l))||l);return o&&l&&g(e,i,l),l},w=(t,e,i)=>e.has(t)||m("Cannot "+i),k=(t,e,i)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),d=(t,e,i)=>(w(t,e,"access private method"),i),n,f,b,u;let s=class extends x{constructor(){super(),k(this,n),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&d(this,n,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&d(this,n,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{this.value=t.detail.value,this._showDatepicker=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,o=this.type==="search"&&this.value?h`
+import{a as v,n as a,r as x,i as g,x as h,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,n,o){try{customElements.get(i)||e(i,n,o)}catch(p){var c=String(p||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,n)=>{for(var o=n>1?void 0:n?w(e,i):e,c=t.length-1,p;c>=0;c--)(p=t[c])&&(o=(n?p(e,i,o):p(o))||o);return n&&o&&_(e,i,o),o},k=(t,e,i)=>e.has(t)||m("Cannot "+i),$=(t,e,i)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),d=(t,e,i)=>(k(t,e,"access private method"),i),l,f,b,u;let s=class extends g{constructor(){super(),$(this,l),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&d(this,l,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&d(this,l,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}if(this.pattern){const e=new RegExp(this.pattern);this.error=!e.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,n=this.type==="search"&&this.value?h`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -39,20 +39,22 @@ import{a as v,n as a,i as x,x as h,t as y}from"../../vendor/vendor.js";import"..
           id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
           >${this.underLabel}</span
         >
-        <div class="scb-textfield-wrapper ripple-wrapper">
-          <textarea
-            class="scb-textfield"
-            ?disabled=${this.disabled}
-            name="${this.name}"
-            id="${this._inputId}"
-            ?required=${this.required}
-            aria-invalid=${this.error?"true":"false"}
-            aria-describedby=${i}
-          >
+        <div class="scb-textfield-wrapper">
+          <div class="ripple-wrapper">
+            <textarea
+              class="scb-textfield"
+              ?disabled=${this.disabled}
+              name="${this.name}"
+              id="${this._inputId}"
+              ?required=${this.required}
+              aria-invalid=${this.error?"true":"false"}
+              aria-describedby=${i}
+            >
 ${this.value}</textarea
-          >
-          <md-ripple></md-ripple>
-          <md-focus-ring class="input-ring"></md-focus-ring>
+            >
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
         </div>
       `:this.type==="date"?h`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
@@ -61,28 +63,37 @@ ${this.value}</textarea
           id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
           >${this.underLabel}</span
         >
-        <div class="scb-textfield-wrapper" style="position:relative;">
+        <div class="scb-textfield-wrapper">
           ${t}
-          <input
-            class="scb-textfield${this.error?" has-error-icon":""}"
-            .value=${this.value}
-            type="text"
-            name="${this.name}"
-            id="${this._inputId}"
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            aria-invalid=${this.error?"true":"false"}
-            aria-describedby=${i}
-            readonly
-          />
-          <scb-icon-button icon="calendar_today" @click=${this._toggleDatepicker} aria-label="Välj datum" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);"></scb-icon-button>
+          <div class="ripple-wrapper">
+            <input
+              class="scb-textfield${this.error?" has-error-icon":""}"
+              .value=${this.value}
+              type="text"
+              name="${this.name}"
+              id="${this._inputId}"
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              aria-invalid=${this.error?"true":"false"}
+              aria-describedby=${i}
+              readonly
+            />
+            ${e}
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+          <scb-icon-button
+            class="scb-textfield-datepicker-button"
+            icon="calendar_today"
+            @click=${this._toggleDatepicker}
+            aria-label="Välj datum"
+          ></scb-icon-button>
           <scb-datepicker
             variant="popup"
             .selectedValue=${this.value}
             .open=${this._showDatepicker}
             @date-selected=${this._onDateSelected}
           ></scb-datepicker>
-          ${e}
         </div>
       `:h`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
@@ -91,25 +102,27 @@ ${this.value}</textarea
         id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
         >${this.underLabel}</span
       >
-      <div class="scb-textfield-wrapper ripple-wrapper">
+      <div class="scb-textfield-wrapper">
         ${t}
-        <input
-          class="scb-textfield${this.error?" has-error-icon":""}"
-          .value=${this.value}
-          type="${this.type}"
-          name="${this.name}"
-          id="${this._inputId}"
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-invalid=${this.error?"true":"false"}
-          aria-describedby=${i}
-        />
-        ${o}
-        ${e}
-        <md-ripple></md-ripple>
-        <md-focus-ring class="input-ring"></md-focus-ring>
+        <div class="ripple-wrapper">
+          <input
+            class="scb-textfield${this.error?" has-error-icon":""}"
+            .value=${this.value}
+            type="${this.type}"
+            name="${this.name}"
+            id="${this._inputId}"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error?"true":"false"}
+            aria-describedby=${i}
+          />
+          ${n}
+          ${e}
+          <md-ripple></md-ripple>
+          <md-focus-ring class="input-ring"></md-focus-ring>
+        </div>
       </div>
-    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const o=this.disabled?null:this.value;this._internals.setFormValue(o)}if(this.pattern){const o=new RegExp(this.pattern);this.error=!o.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,d(this,n,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,d(this,n,u).call(this)})),d(this,n,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&d(this,n,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};n=new WeakSet;f=function(){const t=d(this,n,b).call(this,this.spacing),e=d(this,n,b).call(this,this.spacingTop)??t,i=d(this,n,b).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
+    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const n=this.disabled?null:this.value;this._internals.setFormValue(n)}if(this.pattern){const n=new RegExp(this.pattern);this.error=!n.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,d(this,l,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,d(this,l,u).call(this)})),d(this,l,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&d(this,l,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};l=new WeakSet;f=function(){const t=d(this,l,b).call(this,this.spacing),e=d(this,l,b).call(this,this.spacingTop)??t,i=d(this,l,b).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -135,9 +148,6 @@ ${this.value}</textarea
       :host([type='text']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
-      :host([type='date']) {
-        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
-      }
       :host([type='search']) {
         --scb-textfield-max-width: var(--scb-textfield-search-max-width);
       }
@@ -156,6 +166,9 @@ ${this.value}</textarea
       :host([type='textarea']) {
         --scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
       }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
 
       :host {
         display: flex;
@@ -214,6 +227,10 @@ ${this.value}</textarea
         padding-right: var(--spacing-11);
       }
 
+      :host([type='date']) .scb-textfield {
+        padding-right: var(--spacing-11);
+      }
+
       md-icon + .scb-textfield {
         padding-left: var(--spacing-10);
       }
@@ -325,4 +342,13 @@ ${this.value}</textarea
         height: 100%;
         display: block;
       }
-    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([y("scb-textfield")],s);
+
+      /* Datumknappen ovanför input/ripple */
+      .scb-textfield-datepicker-button {
+        position: absolute;
+        right: var(--spacing-4);
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 4;
+      }
+    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([x()],s.prototype,"_showDatepicker",2);s=r([y("scb-textfield")],s);