scb-wc-test 0.1.1

package/mvc/components/scb-list/scb-list-item.js

@@ -0,0 +1,38 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../scb-checkbox/scb-checkbox.js","../scb-switch/scb-switch.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
+import{_ as g}from"../../vendor/preload-helper.js";import{n as s,t as I,i as V,b as $,x as c,E as h}from"../../vendor/vendor.js";var L=Object.defineProperty,E=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},r=(t,i,e,n)=>{for(var l=n>1?void 0:n?E(i,e):i,o=t.length-1,b;o>=0;o--)(b=t[o])&&(l=(n?b(i,e,l):b(l))||l);return n&&l&&L(i,e,l),l},x=(t,i,e)=>i.has(t)||S("Cannot "+e),d=(t,i,e)=>(x(t,i,"read from private field"),i.get(t)),p=(t,i,e)=>i.has(t)?S("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(t):i.set(t,e),v=(t,i,e,n)=>(x(t,i,"write to private field"),i.set(t,e),e),k=(t,i,e)=>(x(t,i,"access private method"),e),m,y,u,_,f,w;let a=class extends V{constructor(){super(...arguments),p(this,f),this.type="text",this.href="",this.itemHref="",this.target="",this.disabled=!1,this.label="",this.supportingText="",this.overline="",this.leading=!1,this.leadingIcon="",this.imgHrefAvatar="https://www.scb.se/img/scb-logo.svg",this.imgHrefImage="https://www.scb.se/img/scb-logo.svg",this.leadingVariant="image",this.trailing=!1,this.trailingIcon="",this.trailingVariant="icon",p(this,m,!1),p(this,y,!1),p(this,u,!1),p(this,_,!1)}static get styles(){return $`
+      :host { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
+      .scb-list-item { display: flex; }
+      .leading-content { margin-right: 16px; align-self: center; }
+      .trailing-content { margin-left: auto; align-self: center; }
+      .trailing-content scb-checkbox { margin-right: 11px; }
+      .label { line-height: 27px; }
+      .overline { font-size: 14px; color: var(--md-sys-color-on-surface-variant); line-height: 21px; }
+      .supporting-text { font-size: 16px; color: var(--md-sys-color-on-surface-variant); line-height: 24px; }
+
+      .leading-content:has(.avatar) {
+        width: 40px; height: 40px;
+        background: var(--md-sys-color-primary-container);
+        border-radius: 50%;
+        align-content: center; justify-items: center;
+      }
+      .avatar { width: 24px; height: 24px; position: relative; display: flex; }
+      .img { width: 56px; height: 56px; }
+    `}async firstUpdated(){await k(this,f,w).call(this)}updated(t){super.updated(t),(t.has("leading")||t.has("leadingVariant")||t.has("trailing")||t.has("trailingVariant")||t.has("type")||t.has("target"))&&k(this,f,w).call(this)}onListClick(){if(this.type==="link"&&(this.href||this.itemHref))return;const t=this.shadowRoot?.querySelector("scb-checkbox"),i=this.shadowRoot?.querySelector("scb-switch");t&&(t.checked=!t.checked),i&&(i.selected=!i.selected)}render(){const t=this.leadingVariant==="icon"?c`<div class="leading-content"><md-icon>${this.leadingIcon}</md-icon></div>`:this.leadingVariant==="avatar"?c`<div class="leading-content"><img class="avatar" src="${this.imgHrefAvatar}" /></div>`:this.leadingVariant==="image"?c`<div class="leading-content"><img class="img" src="${this.imgHrefImage}" /></div>`:h,i=this.href||this.itemHref||"",e=this.target==="_blank"?"open_in_new":"chevron_right";let n=h;if(this.trailing)if(this.trailingVariant==="icon"){const o=this.trailingIcon||(this.type==="link"?e:"");n=o?c`<div class="trailing-content"><md-icon>${o}</md-icon></div>`:h}else this.trailingVariant==="checkbox"?n=c`<div class="trailing-content"><scb-checkbox @click=${o=>o.stopPropagation()}></scb-checkbox></div>`:this.trailingVariant==="switch"&&(n=c`<div class="trailing-content"><scb-switch @click=${o=>o.stopPropagation()}></scb-switch></div>`);else this.type==="link"&&(n=c`<div class="trailing-content"><md-icon>${e}</md-icon></div>`);const l=this.type==="link"&&this.target==="_blank"?"noopener noreferrer":h;return c`
+      <md-list-item
+        type=${this.type}
+        href=${this.type==="link"&&i?i:h}
+        target=${this.type==="link"&&this.target?this.target:h}
+        rel=${l}
+        ?disabled=${this.disabled}
+      >
+        <div class="scb-list-item" @click=${this.onListClick}>
+            ${this.leading?t:h}
+          <div>
+            <div class="overline">${this.overline}</div>
+            <div class="label">${this.label}</div>
+            <div class="supporting-text">${this.supportingText}</div>
+          </div>
+            ${n}
+        </div>
+      </md-list-item>
+    `}};m=new WeakMap;y=new WeakMap;u=new WeakMap;_=new WeakMap;f=new WeakSet;w=async function(){d(this,m)||(await g(()=>import("../../vendor/vendor-material.js").then(e=>e.l),__vite__mapDeps([0,1]),import.meta.url),v(this,m,!0));const t=this.type==="link"&&(!this.trailing||this.trailingVariant==="icon");(this.leading&&this.leadingVariant==="icon"||this.trailing&&this.trailingVariant==="icon"||t)&&!d(this,y)&&(await g(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),v(this,y,!0)),this.trailing&&this.trailingVariant==="checkbox"&&!d(this,u)&&(await g(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([2,1,0]),import.meta.url),v(this,u,!0)),this.trailing&&this.trailingVariant==="switch"&&!d(this,_)&&(await g(()=>import("../scb-switch/scb-switch.js"),__vite__mapDeps([3,4,1]),import.meta.url),v(this,_,!0))};r([s({type:String,reflect:!0,attribute:"type"})],a.prototype,"type",2);r([s({type:String})],a.prototype,"href",2);r([s({type:String,attribute:"item-href"})],a.prototype,"itemHref",2);r([s({type:String,attribute:"target"})],a.prototype,"target",2);r([s({type:Boolean,attribute:"disabled"})],a.prototype,"disabled",2);r([s({type:String,reflect:!0})],a.prototype,"label",2);r([s({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);r([s({type:String,attribute:"overline"})],a.prototype,"overline",2);r([s({type:Boolean})],a.prototype,"leading",2);r([s({type:String,attribute:"leading-icon"})],a.prototype,"leadingIcon",2);r([s({type:String,reflect:!0,attribute:"img-href-avatar"})],a.prototype,"imgHrefAvatar",2);r([s({type:String,reflect:!0,attribute:"img-href-image"})],a.prototype,"imgHrefImage",2);r([s({type:String,reflect:!0,attribute:"leading-variant"})],a.prototype,"leadingVariant",2);r([s({type:Boolean})],a.prototype,"trailing",2);r([s({type:String,attribute:"trailing-icon"})],a.prototype,"trailingIcon",2);r([s({type:String,reflect:!0,attribute:"trailing-variant"})],a.prototype,"trailingVariant",2);a=r([I("scb-list-item")],a);

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

@@ -0,0 +1,10 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
+import{_ as n}from"../../vendor/preload-helper.js";import{b as v,i as c,x as f,t as h}from"../../vendor/vendor.js";import"./scb-list-item.js";var m=Object.getOwnPropertyDescriptor,l=t=>{throw TypeError(t)},u=(t,r,e,i)=>{for(var s=i>1?void 0:i?m(r,e):r,o=t.length-1,_;o>=0;o--)(_=t[o])&&(s=_(s)||s);return s},p=(t,r,e)=>r.has(t)||l("Cannot "+e),y=(t,r,e)=>(p(t,r,"read from private field"),r.get(t)),w=(t,r,e)=>r.has(t)?l("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),g=(t,r,e,i)=>(p(t,r,"write to private field"),r.set(t,e),e),a;let d=class extends c{constructor(){super(...arguments),w(this,a,!1)}async firstUpdated(){y(this,a)||(await n(()=>import("../../vendor/vendor-material.js").then(t=>t.e),__vite__mapDeps([0,1]),import.meta.url),g(this,a,!0))}render(){return f`
+      <md-list role="list">
+        <slot></slot>
+      </md-list>
+    `}};a=new WeakMap;d.styles=[v`
+      ::slotted(scb-list-item:first-of-type) {
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+    `];d=u([h("scb-list")],d);

package/mvc/components/scb-menu/scb-menu-item.js

@@ -0,0 +1,44 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
+import{_ as h}from"../../vendor/preload-helper.js";import{b as c,n as r,i as m,x as i,t as u}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,n=(e,s,l,a)=>{for(var o=a>1?void 0:a?g(s,l):s,p=e.length-1,d;p>=0;p--)(d=e[p])&&(o=(a?d(s,l,o):d(o))||o);return a&&o&&f(s,l,o),o};let t=class extends m{constructor(){super(...arguments),this.label="",this.hasSubMenu=!1,this.openLeft=!1,this.divider=!1,this.leadingIcon="",this.trailingIcon="",this.itemHref="",this.handleClick=e=>{this.itemHref?this._navigateToHref(e):this._toggleSubMenu()},this._onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e))}}async firstUpdated(){t.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),t.__iconLoaded=!0),t.__rippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),t.__rippleLoaded=!0)}updated(){const e=this.nextElementSibling;this.hasSubMenu=!!(e&&e.tagName==="SCB-SUB-MENU"),this.openLeft=!!(this.hasSubMenu&&e&&e.hasAttribute("open-left"))}render(){return i`
+      ${this.divider?i`<scb-divider></scb-divider>`:""}
+      <li @click=${this.handleClick} @keydown=${this._onKeyDown} role="menuitem" tabindex="0">
+        ${this.itemHref?i`<a href="${this.itemHref}" tabindex="-1">
+              ${this.leadingIcon?i`<md-icon>${this.leadingIcon}</md-icon>`:""}
+              <div>${this.label}</div>
+              ${this.trailingIcon?i`<md-icon>${this.trailingIcon}</md-icon>`:""}
+              <md-ripple></md-ripple>
+            </a>`:i`
+              ${this.leadingIcon?i`<md-icon>${this.leadingIcon}</md-icon>`:""}
+              <div>${this.label}</div>
+              ${this.trailingIcon?i`<md-icon>${this.trailingIcon}</md-icon>`:""}
+              <md-ripple></md-ripple>
+            `}
+      </li>
+    `}_navigateToHref(e){this.itemHref&&(window.location.href=this.itemHref),e.stopPropagation()}_toggleSubMenu(){const e=this.nextElementSibling;e&&e.tagName==="SCB-SUB-MENU"&&(e.hasAttribute("open")?e.dispatchEvent(new CustomEvent("hide-submenu",{bubbles:!0,composed:!0})):e.dispatchEvent(new CustomEvent("show-submenu",{bubbles:!0,composed:!0})))}};t.__iconLoaded=!1;t.__rippleLoaded=!1;t.styles=c`
+    :host { display: block; }
+    :host li{
+      position: relative;
+      list-style: none;
+      padding: 8px 16px;
+      cursor: pointer;
+      min-height: 56px;
+      font-size: 18px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      max-width: 300px;
+      min-width: 112px; 
+    }
+    :host li a {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      color: var(--md-sys-color-on-surface);
+      text-decoration: none;
+    }
+    li:hover md-ripple {
+      --md-ripple-hover-color: transparent;
+      --md-ripple-hover-opacity: 0;
+    }
+    li:hover { background: var(--md-sys-color-secondary-container, #D6F1FF); }
+  `;n([r({type:String})],t.prototype,"label",2);n([r({type:Boolean})],t.prototype,"hasSubMenu",2);n([r({type:Boolean})],t.prototype,"openLeft",2);n([r({type:Boolean})],t.prototype,"divider",2);n([r({type:String,attribute:"leading-icon"})],t.prototype,"leadingIcon",2);n([r({type:String,attribute:"trailing-icon"})],t.prototype,"trailingIcon",2);n([r({type:String,attribute:"item-href"})],t.prototype,"itemHref",2);t=n([u("scb-menu-item")],t);

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

@@ -0,0 +1,17 @@
+import{b as c,n as d,i as u,x as p,t as _}from"../../vendor/vendor.js";import"./scb-menu-item.js";import"./scb-sub-menu.js";import"../../vendor/preload-helper.js";import"../scb-divider/scb-divider.js";var h=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(e,t,n,i)=>{for(var s=i>1?void 0:i?f(t,n):t,r=e.length-1,a;r>=0;r--)(a=e[r])&&(s=(i?a(t,n,s):a(s))||s);return i&&s&&h(t,n,s),s};let o=class extends u{constructor(){super(...arguments),this.open=!1,this.__lastTriggerEl=null,this.__onDocumentClick=e=>{const t=this.__getActionFromEvent(e);if(t){t==="open"&&this.__setOpen(!0),t==="close"&&this.__setOpen(!1),t==="toggle"&&this.__setOpen(!this.open),e.stopPropagation();return}},this.__onDocumentKeydown=e=>{if(this.open&&e.key==="Escape"){this.__setOpen(!1);return}}}render(){return p`
+      <div style="display:${this.open?"block":"none"};">
+        <slot></slot>
+      </div>
+    `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),super.disconnectedCallback()}__setOpen(e){this.open=e}__getActionFromEvent(e){if(!this.id)return null;const t=e.composedPath();for(const n of t)if(n instanceof Element){if(n.getAttribute("data-menu-open")===this.id)return this.__lastTriggerEl=n,"open";if(n.getAttribute("data-menu-close")===this.id)return this.__lastTriggerEl=n,"close";if(n.getAttribute("data-menu-toggle")===this.id)return this.__lastTriggerEl=n,"toggle";if(n.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=n,"toggle"}return null}updated(e){e.has("open")&&this.__applyOpenSideEffects()}__applyOpenSideEffects(){this.__updateTriggersExpanded()}__updateTriggersExpanded(){if(!this.id)return;document.querySelectorAll(`[aria-controls="${this.id}"], [data-menu-open="${this.id}"], [data-menu-close="${this.id}"], [data-menu-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}};o.styles=c`
+    :host {
+      position: absolute;
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      border-radius: var(--Radius-Extra-small, 4px);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+    }
+    :host div {
+      background: var(--md-sys-color-surface, #FFF);
+    }
+  `;l([d({type:Boolean,reflect:!0})],o.prototype,"open",2);o=l([_("scb-menu")],o);

package/mvc/components/scb-menu/scb-sub-menu.js

@@ -0,0 +1,29 @@
+import{b as l,n as u,i as h,x as b,t as d}from"../../vendor/vendor.js";var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,a=(t,e,i,n)=>{for(var s=n>1?void 0:n?m(e,i):e,r=t.length-1,p;r>=0;r--)(p=t[r])&&(s=(n?p(e,i,s):p(s))||s);return n&&s&&c(e,i,s),s};let o=class extends h{constructor(){super(...arguments),this.open=!1,this._show=()=>{this.setAttribute("open",""),this.open=!0},this._hide=t=>{this.removeAttribute("open"),this.open=!1,t&&t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("show-submenu",this._show),this.addEventListener("hide-submenu",this._hide)}disconnectedCallback(){this.removeEventListener("show-submenu",this._show),this.removeEventListener("hide-submenu",this._hide),super.disconnectedCallback()}firstUpdated(){let t=0,e=this.parentElement;for(;e;)e.tagName==="SCB-SUB-MENU"&&t++,e=e.parentElement;t%2===1?this.setAttribute("open-left",""):this.removeAttribute("open-left")}render(){return b`
+      <div class="submenu${this.open?" open":""}">
+        <slot></slot>
+      </div>
+    `}};o.styles=l`
+    :host {
+      display: block;
+      position: relative;
+
+    }
+    .submenu {
+      display: none;
+      position: absolute;
+      left: 100%;
+      top: -44px;
+      z-index: 100;
+      border-radius: var(--Radius-Extra-small, 4px);
+      background: var(--md-sys-color-surface, #FFF);
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
+    }
+    :host([open-left]) .submenu {
+      left: auto;
+      right: 100%;
+    }
+    :host([open]) .submenu,
+    .submenu.open {
+      display: block;
+    }
+  `;a([u({type:Boolean,reflect:!0})],o.prototype,"open",2);o=a([d("scb-sub-menu")],o);

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

@@ -0,0 +1,120 @@
+import{b as h,n as i,i as f,x as n,t as d}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";var x=Object.defineProperty,u=Object.getOwnPropertyDescriptor,o=(r,s,a,c)=>{for(var e=c>1?void 0:c?u(s,a):s,l=r.length-1,p;l>=0;l--)(p=r[l])&&(e=(c?p(s,a,e):p(e))||e);return c&&e&&x(s,a,e),e};let t=class extends f{constructor(){super(...arguments),this.open=!1,this.label="",this.type="success",this.linkText="",this.linkhref="#",this.showIcon=!1,this.showCloseButton=!1,this._closeNotification=()=>{this.open=!1;const r=new CustomEvent("close",{detail:{open:this.open}});this.dispatchEvent(r)}}_iconForType(){switch(this.type){case"success":return"check_circle";case"error":return"error";case"warning":return"warning";case"info":return"info";default:return"info"}}render(){return n`
+            <div class="notification" type=${this.type} role="alert" aria-live="assertive" aria-atomic="true" style="display: ${this.open?"flex":"none"};">
+                ${this.showIcon||this.showCloseButton?n`<div class="notification-header">
+                    ${this.showIcon?n`<md-icon>${this._iconForType()}</md-icon>`:""}
+                    ${this.showCloseButton?n`<scb-icon-button icon="close" @click=${this._closeNotification}></scb-icon-button>`:""}
+                </div>`:""}
+                <div class="notification-content">
+                    ${this.label?n`<div class="notification-label">${this.label}</div>`:""}
+                    <slot></slot>
+                    ${this.linkText?n`
+                    <div class="notification-footer">
+                        <a class="footer-link" href="${this.linkhref}">${this.linkText}</a>
+                    </div>
+                    `:""}
+                <div>
+            </div>
+        `}};t.styles=[h`
+            :host {
+                display: block;
+                position: relative;
+                container-type: inline-size;
+                container-name: notification-container;
+            }
+
+            .notification {
+                border-radius: 12px;
+                padding: 16px;
+                display: flex;
+                gap: 12px;
+                flex-direction: column;
+
+            }
+            @container notification-container (min-width: 400px) {
+                .notification {
+                    flex-direction: row;
+                }
+                .notification-label {
+                    margin-right: 40px;
+                }
+            }
+            .notification-label {
+                font-weight: 600;
+                font-size: 20px;
+                line-height: 28px; /* 140% */
+                letter-spacing: -0.4px;
+            }
+            .notification[type="success"] {
+                background: var(--md-sys-color-success-container);
+                color: var(--md-sys-color-on-success-container);   
+
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-success-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification[type="error"] {
+                background: var(--md-sys-color-error-container);
+                color: var(--md-sys-color-on-error-container);
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-error-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification[type="warning"] {
+                background: var(--md-sys-color-warning-container);
+                color: var(--md-sys-color-on-warning-container);
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-warning-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification[type="info"] {
+                background: var(--md-sys-color-info-container);
+                color: var(--md-sys-color-on-info-container);
+                a{
+                    text-decoration: underline;
+                    text-decoration-thickness: 1px;
+                    text-underline-offset: .1578em;
+                    color: var(--md-sys-color-on-info-container);
+                    &:hover {text-decoration-thickness: 2px;}
+                }
+            }
+            .notification-header scb-icon-button {
+                position: absolute;
+                right: 8px;
+                top: 8px;
+            }
+            .notification-content{
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+            }
+            slot{
+                font-size: 18px;
+                line-height: 26px; 
+            }
+            .notification-footer {
+                font-size: 18px;
+                margin-top: 4px;
+                line-height: 26px; /* 133% */
+            }
+
+            :host([open]) .notification {
+                opacity: 1;
+            }
+
+            :host(:not([open])) .notification {
+                opacity: 0;
+                pointer-events: none;
+            }
+        `];o([i({type:Boolean,reflect:!0})],t.prototype,"open",2);o([i({type:String})],t.prototype,"label",2);o([i({type:String})],t.prototype,"type",2);o([i({type:String,attribute:"link-text"})],t.prototype,"linkText",2);o([i({type:String,attribute:"link-href"})],t.prototype,"linkhref",2);o([i({type:Boolean,attribute:"show-icon"})],t.prototype,"showIcon",2);o([i({type:Boolean,attribute:"show-close-button"})],t.prototype,"showCloseButton",2);t=o([d("scb-notification")],t);

package/mvc/components/scb-progress-indicator/scb-progress-indicator.js

@@ -0,0 +1,84 @@
+import{b as d,n as s,i as f,x as i,t as h}from"../../vendor/vendor.js";var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,t=(p,a,c,o)=>{for(var e=o>1?void 0:o?u(a,c):a,l=p.length-1,n;l>=0;l--)(n=p[l])&&(e=(o?n(a,c,e):n(e))||e);return o&&e&&g(a,c,e),e};let r=class extends f{constructor(){super(...arguments),this.label="",this.type="circular",this.color="#1f44ff",this.progress=25,this.isStatic=!0}render(){return console.log("scb-progress-indicator isStatic:",this.isStatic),i`
+      <div class="scb-progress-indicator">
+        ${this.type==="circular"?i`
+          <div class="circular">
+            <svg class="circular-spin" viewBox="0 0 40 40">
+              <circle class="circular-bg" cx="20" cy="20" r="16" fill="none" stroke-width="4" />
+              <circle
+                class="circular-fg"
+                cx="20" cy="20" r="16" fill="none" stroke-width="4"
+                stroke="${this.color}"
+                stroke-dasharray="${2*Math.PI*16}"
+                stroke-dashoffset="${(1-this.progress/100)*2*Math.PI*16}"
+              />
+            </svg>
+          </div>
+        `:i`
+          <div class="linear">
+            ${this.isStatic?i`<div class="linear-static" style="width: ${this.progress}%; background: ${this.color};"></div>`:i`<div class="linear-loader" style="background: ${this.color};"></div>`}
+          </div>
+        `}
+      </div>
+    `}};r.styles=[d`
+      :host {
+        display: block;
+        font-family: var(--brand-font, sans-serif);
+        color: var(--md-sys-color-on-surface, #222);
+      }
+      .circular {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        position: relative;
+      }
+      .circular-spin {
+        animation: spin 1s linear infinite;
+        width: 46px;
+        height: 46px;
+        position: relative;
+        z-index: 1;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .circular-bg {
+        stroke: #eee;
+      }
+      .circular-fg {
+        transition: stroke-dashoffset 0.3s ease;
+      }
+      .circular-bg {
+        stroke: #eee;
+      }
+      .circular-fg {
+        transition: stroke-dashoffset 0.3s ease;
+      }
+      .linear {
+        width: 100%;
+        height: 6px;
+        background: #eee;
+        border-radius: 3px;
+        overflow: hidden;
+        position: relative;
+      }
+      .linear-loader {
+        height: 100%;
+        width: 40%;
+        background: var(--p-40, #1f44ff);
+        border-radius: 3px;
+        animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
+      }
+      .linear-static {
+        height: 100%;
+        border-radius: 3px;
+        transition: width 0.3s ease;
+      }
+      @keyframes linear-progress {
+        0% { margin-left: -40%; width: 40%; }
+        50% { margin-left: 30%; width: 60%; }
+        100% { margin-left: 100%; width: 40%; }
+      }
+    `];t([s({type:String})],r.prototype,"label",2);t([s({type:String,reflect:!0})],r.prototype,"type",2);t([s({type:String,reflect:!0})],r.prototype,"color",2);t([s({type:Number,reflect:!0})],r.prototype,"progress",2);t([s({type:Boolean,reflect:!0})],r.prototype,"isStatic",2);r=t([h("scb-progress-indicator")],r);

package/mvc/components/scb-radio-button/scb-radio-button.js

@@ -0,0 +1,95 @@
+import{i as c,x as p,b as h,n as s,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";var b=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(e,i,n,o)=>{for(var a=o>1?void 0:o?g(i,n):i,d=e.length-1,l;d>=0;d--)(l=e[d])&&(a=(o?l(i,n,a):l(a))||a);return o&&a&&b(i,n,a),a};let t=class extends c{constructor(){super(...arguments),this.disabled=!1,this.checked=!1,this.name="",this.value="",this.label="",this.supportingText="",this._radioId="",this._onMdRadioChange=e=>{if(this.disabled)return;const i=e.target;i&&i.checked&&(this.checked=!0,this.dispatchEvent(new CustomEvent("scb-radio-change",{detail:{name:this.name,source:this},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:this.value},bubbles:!0,composed:!0})))},this._onRadioChange=e=>{e.detail.name===this.name&&e.detail.source!==this&&(this.checked=!1)}}connectedCallback(){super.connectedCallback(),this._radioId=this.id||`scb-radio-${Math.random().toString(36).substr(2,9)}`,document.addEventListener("scb-radio-change",this._onRadioChange)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("scb-radio-change",this._onRadioChange)}firstUpdated(){const e=this.shadowRoot?.querySelector("md-radio");e&&e.addEventListener("input",()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))})}updated(e){super.updated(e),e.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled)}render(){const e=this.supportingText?`${this._radioId}-supporting-text`:void 0;return p`
+      <label class="wrap">
+        <div class="radio-wrap">
+          <md-radio
+            id="${this._radioId}"
+            ?disabled=${this.disabled}
+            ?checked=${this.checked}
+            name="${this.name}"
+            value="${this.value}"
+            aria-describedby=${e}
+            @change=${this._onMdRadioChange}
+          ></md-radio>
+        </div>
+        ${this.label?p`<span class="lbl">${this.label}</span>`:""}
+      </label>
+      ${this.supportingText?p`<div
+            id="${this._radioId}-supporting-text"
+            class="supporting-text"
+          >
+            ${this.supportingText}
+          </div>`:""}
+      <slot></slot>
+    `}};t.styles=h`
+    /* layout med inline-grid */
+    :host {
+      display: inline-grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto auto;
+      row-gap: 4px;
+      font-family: var(--brand-font, 'Inter', sans-serif);
+    }
+
+    /* Wrapper för md-radio + label */
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      /* låt ripple/state-layer synas */
+      overflow: visible;
+    }
+    :host([disabled]) .wrap {
+      cursor: default;
+    }
+
+    /* Hit-yta runt md-radio (styr via variabel) */
+    .radio-wrap {
+      height: var(--scb-radio-target, 48px);
+      width: var(--scb-radio-target, 48px);
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      overflow: visible;
+    }
+
+    /* Nollställ md-radio marginal */
+    md-radio {
+      margin: 0;
+    }
+
+    /* Label-styling */
+    .lbl {
+      color: var(--md-sys-color-on-surface);
+      line-height: 1.2;
+      margin-top: 2px;
+    }
+    :host([disabled]) .lbl {
+      color: var(--n-60);
+    }
+
+    /* Supporting text styling */
+    .supporting-text {
+      color: var(--md-sys-color-on-surface-variant);
+      line-height: 1.2;
+      /* 12px gap + wrapperbredd (inte ikonstorlek) så texten linjerar med labeln */
+      margin-left: calc(12px + var(--scb-radio-target, 48px));
+    }
+    :host([disabled]) .supporting-text {
+      color: var(--n-60);
+    }
+
+      :host([orientation="horizontal"]) {
+    margin-inline-end: var(--scb-radio-gap, 24px); /* tweakable */
+  }
+
+    /* Anpassning för mörkt läge */
+    @media (prefers-color-scheme: dark) {
+      .lbl {
+        color: var(--md-sys-color-on-surface);
+      }
+      .supporting-text {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    }
+  `;r([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2);r([s({type:Boolean,reflect:!0})],t.prototype,"checked",2);r([s({type:String,reflect:!0})],t.prototype,"name",2);r([s({type:String,reflect:!0})],t.prototype,"value",2);r([s({type:String})],t.prototype,"label",2);r([s({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);t=r([u("scb-radio-button")],t);export{t as ScbRadioButton};

package/mvc/components/scb-radio-button/scb-radio-group.js

@@ -0,0 +1,28 @@
+import{b as g,n,i as u,x as f,t as b}from"../../vendor/vendor.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,h=t=>{throw TypeError(t)},s=(t,a,e,l)=>{for(var i=l>1?void 0:l?y(a,e):a,p=t.length-1,d;p>=0;p--)(d=t[p])&&(i=(l?d(a,e,i):d(i))||i);return l&&i&&v(a,e,i),i},m=(t,a,e)=>a.has(t)||h("Cannot "+e),c=(t,a,e)=>(m(t,a,"read from private field"),e?e.call(t):a.get(t)),_=(t,a,e)=>a.has(t)?h("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(t):a.set(t,e),o;let r=class extends u{constructor(){super(...arguments),this.name="",this.orientation="vertical",this.disabled=!1,this.ariaLabel=null,this.spacing="item",_(this,o,()=>{const t=this.shadowRoot?.querySelector("slot");if(!t)return;const a=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-radio-button");for(const e of a)this.name&&e.setAttribute("name",this.name),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation"),this.spacing==="group"?e.style.setProperty("--scb-radio-gap","0"):e.style.removeProperty("--scb-radio-gap")})}render(){const t=this.orientation==="horizontal"?"row":"column";return f`
+      <div
+        class="g"
+        role="radiogroup"
+        aria-disabled=${String(this.disabled)}
+        aria-label=${this.ariaLabel??""}
+        style=${`--_dir:${t}`}
+      >
+        <slot @slotchange=${c(this,o)}></slot>
+      </div>
+    `}firstUpdated(){c(this,o).call(this)}updated(t){(t.has("name")||t.has("disabled")||t.has("orientation"))&&c(this,o).call(this)}};o=new WeakMap;r.styles=g`
+    :host { display: block; }
+
+    .g {
+      display: flex;
+      flex-direction: var(--_dir, column);
+      gap: 0; /* default: inget extra gap */
+      align-items: flex-start;
+    }
+
+    /* Om gruppen ska äga spacing: använder gap och nollar radios egen syskonmarginal */
+    :host([spacing="group"]) .g {
+      gap: var(--scb-radio-gap, 12px);
+    }
+    :host([spacing="group"]) ::slotted(scb-radio-button) {
+      --scb-radio-gap: 0;
+    }
+  `;s([n({type:String})],r.prototype,"name",2);s([n({type:String,reflect:!0})],r.prototype,"orientation",2);s([n({type:Boolean,reflect:!0})],r.prototype,"disabled",2);s([n({type:String,attribute:"aria-label"})],r.prototype,"ariaLabel",2);s([n({type:String,reflect:!0})],r.prototype,"spacing",2);r=s([b("scb-radio-group")],r);