scb-wc 0.1.2 → 0.1.4

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

@@ -0,0 +1,296 @@
+import"../../vendor/vendor-material.js";import{_ as x,b as $,g as M,h as m,m as h,y as c}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as l}from"../../vendor/decorate.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-divider/scb-divider.js";(function(){try{var g=typeof globalThis<"u"?globalThis:window;if(!g.__scb_ce_guard_installed__){g.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,o,d){try{customElements.get(e)||t(e,o,d)}catch(r){var a=String(r||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var w,p=(w=class extends x{constructor(...t){super(...t),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="date",this.lang="sv",this.selectedValue="",this.open=!0,this._selectedHour=0,this._selectedMinute=0,this._viewportMargin=8,this._popupOffset=4,this._onWindowReposition=()=>{this._positionPopupWithinViewport()},this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._outsideClickHandler=e=>{this.open&&(e.composedPath().includes(this)||this._close())},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),o=this._currentDate.getMonth();o===0?this._currentDate=new Date(e-1,11,1):this._currentDate=new Date(e,o-1,1)},this._prevYear=()=>{const e=this._currentDate.getFullYear(),o=this._currentDate.getMonth();this._currentDate=new Date(e-1,o,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),o=this._currentDate.getMonth();o===11?this._currentDate=new Date(e+1,0,1):this._currentDate=new Date(e,o+1,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),o=this._currentDate.getMonth();this._currentDate=new Date(e+1,o,1)},this._onTimeChange=e=>{const[o,d]=e.target.value.split(":"),a=parseInt(o,10),r=parseInt(d,10);this._selectedHour=isNaN(a)?0:Math.max(0,Math.min(23,a)),this._selectedMinute=isNaN(r)?0:Math.max(0,Math.min(59,r)),this._fireDateTimeChange()},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}_isRenderedInsideDialog(){const t=this.getRootNode(),e=t instanceof ShadowRoot?t.host:null;return e instanceof HTMLElement&&e.closest("scb-dialog")?!0:!!this.closest("scb-dialog")}_positionPopupWithinViewport(){if(!this.open)return;const t=this.renderRoot.querySelector(".datepicker-popup");if(!t)return;const e=this.parentElement?.getBoundingClientRect();if(!e)return;const o=window.innerWidth,d=window.innerHeight,a=Math.max(220,o-this._viewportMargin*2);if(this._isRenderedInsideDialog()){const v=Math.min(t.offsetWidth||380,a),_=t.offsetHeight||420,f=(o-v)/2,y=(d-_)/2,D=f-e.left,k=y-e.top;this.style.setProperty("--scb-datepicker-position","absolute"),this.style.setProperty("--scb-datepicker-top",`${k}px`),this.style.setProperty("--scb-datepicker-bottom","auto"),this.style.setProperty("--scb-datepicker-left",`${D}px`),this.style.setProperty("--scb-datepicker-transform","none"),this.style.setProperty("--scb-datepicker-computed-width",`${v}px`),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(220,d-this._viewportMargin*2)}px`);return}const r=Math.min(t.offsetWidth||380,a),s=t.offsetHeight||420,i=Math.min(Math.max(e.left,this._viewportMargin),o-this._viewportMargin-r)-e.left,n=d-e.bottom-this._viewportMargin,u=e.top-this._viewportMargin,b=n<s+this._popupOffset&&u>n;this.style.setProperty("--scb-datepicker-position","absolute"),this.style.setProperty("--scb-datepicker-computed-width",`${r}px`),this.style.setProperty("--scb-datepicker-left","0"),this.style.setProperty("--scb-datepicker-transform",`translateX(${i}px)`),b?(this.style.setProperty("--scb-datepicker-top","auto"),this.style.setProperty("--scb-datepicker-bottom",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,u-this._popupOffset)}px`)):(this.style.setProperty("--scb-datepicker-top",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-bottom","auto"),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,n-this._popupOffset)}px`))}updated(t){if(super.updated(t),this.open?(window.addEventListener("mousedown",this._outsideClickHandler),window.addEventListener("resize",this._onWindowReposition,{passive:!0}),window.addEventListener("scroll",this._onWindowReposition,{passive:!0,capture:!0}),requestAnimationFrame(()=>this._positionPopupWithinViewport())):(window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0)),t.has("selectedValue")&&this.selectedValue){const e=new Date(this.selectedValue);isNaN(e.getTime())||(this._selectedDate=e,this._currentDate=new Date(e.getFullYear(),e.getMonth(),1),this.variant==="datetime-local"&&(this._selectedHour=e.getHours(),this._selectedMinute=e.getMinutes()))}this.open&&requestAnimationFrame(()=>this._positionPopupWithinViewport())}disconnectedCallback(){window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0),super.disconnectedCallback()}render(){if(!this.open)return c``;const t=this._currentDate.getFullYear(),e=this._currentDate.getMonth(),o=new Date,d=this._getMonthDays(t,e),a=Array.from({length:101},(s,i)=>o.getFullYear()-50+i),r=this.variant==="datetime-local"&&!this._showMonthDropdown&&!this._showYearDropdown;return c`
+      <div class="datepicker-popup popup">
+        <div class="header">
+            <div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang=="sv"?"Föregående månad":"Previous month"}></scb-icon-button>
+                <div class="custom-dropdown month-dropdown">
+                      <div
+                        tabindex=${this._showYearDropdown?-1:0}
+                        class="dropdown-selected"
+                        @click=${()=>this._toggleMonthDropdown()}
+                        @keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._toggleMonthDropdown())}}
+                      >
+                        ${this._monthNames[e].slice(0,3)}
+                        <md-icon>arrow_drop_down</md-icon>
+                        <md-focus-ring></md-focus-ring>
+                        <md-ripple></md-ripple>
+                      </div>
+                </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang=="sv"?"Nästa månad":"Next month"}></scb-icon-button>
+            </div>
+            <div class="year-selector ${this._showMonthDropdown?"disable":""} ${this._showYearDropdown?"open":""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang=="sv"?"Föregående år":"Previous year"}></scb-icon-button>
+                    <div class="custom-dropdown year-dropdown">
+                        <div
+                          tabindex=${this._showMonthDropdown?-1:0}
+                          class="dropdown-selected"
+                          @click=${()=>this._toggleYearDropdown()}
+                          @keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._toggleYearDropdown())}}
+                        >
+                          ${t}
+                          <md-icon>arrow_drop_down</md-icon>
+                          <md-focus-ring></md-focus-ring>
+                          <md-ripple></md-ripple>
+                        </div>
+                    </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
+            </div>
+        </div>
+        ${this._showMonthDropdown||this._showYearDropdown?c`<scb-divider></scb-divider>`:""}
+        <div class="datepicker-content" style="position:relative;">
+          ${this._showMonthDropdown?c`
+            <div class="dropdown-list">
+              ${this._monthNames.map((s,i)=>c`
+                <div
+                    @keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onMonthChangeCustom(i))}}
+                  tabindex="0"
+                  class="dropdown-item${i===e?" selected":""}"
+                  @click=${()=>this._onMonthChangeCustom(i)}
+                  id=${i===e?"selected-month":""}
+                >
+                ${i===e?c`<md-icon>check</md-icon>`:""}
+                  ${s}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          `:""}
+          ${this._showYearDropdown?c`
+            <div class="dropdown-list">
+              ${a.map(s=>c`
+                <div
+                @keydown=${i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),this._onYearChangeCustom(s))}}
+                  tabindex="0"
+                  class="dropdown-item${s===t?" selected":""}"
+                  @click=${()=>this._onYearChangeCustom(s)}
+                  id=${s===t?"selected-year":""}
+                >
+                ${s===t?c`<md-icon>check</md-icon>`:""}
+                  ${s}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          `:""}
+          ${!this._showMonthDropdown&&!this._showYearDropdown?c`
+            <div class="datepicker-calendar">
+            <table>
+              <thead>
+                <tr>
+                  <th>${this.lang=="sv"?"Må":"Mo"}</th><th>${this.lang=="sv"?"Ti":"Tu"}</th><th>${this.lang=="sv"?"On":"We"}</th><th>${this.lang=="sv"?"To":"Th"}</th><th>${this.lang=="sv","Fr"}</th><th>${this.lang=="sv"?"Lö":"Sa"}</th><th>${this.lang=="sv"?"Sö":"Su"}</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${d.map(s=>c`
+                  <tr>
+                    ${s.map(i=>i?c`
+                      <td>
+                        <div
+                        @keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._selectDate(i))}}
+                            role="button"
+                            tabindex="0"
+                          class="day${this._isToday(i,o)?" today":""}${this._isSelected(i)?" selected":""}"
+                          @click=${()=>this._selectDate(i)}
+                        >${i.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
+                      </td>
+                    `:c`<td></td>`)}
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+            </div>
+          `:""}
+        </div>
+        ${r?c`
+            <div style="padding: 0 24px;">
+            <label style="display:flex;align-items:center;gap:8px;">
+                <span>${this.lang=="sv"?"Tid:":"Time:"}</span>
+                <scb-textfield type="time" .value=${`${String(this._selectedHour).padStart(2,"0")}:${String(this._selectedMinute).padStart(2,"0")}`} @blur=${this._onTimeChange} aria-label="${this.lang=="sv"?"Tid":"Time"}"></scb-textfield>
+            </label>
+            </div>
+        `:""}
+        <div class="datepicker-footer">
+        ${!this._showMonthDropdown&&!this._showYearDropdown?c`
+            <scb-button variant="text" label=${this.lang=="sv"?"Stäng":"Close"} @click=${this._close}></scb-button>
+        `:""}
+        </div>
+         </div>
+    `}_getMonthDays(t,e){const o=new Date(Date.UTC(t,e,1)),d=new Date(Date.UTC(t,e+1,0)),a=[];let r=[],s=o.getUTCDay(),i=s===0?6:s-1;for(let n=0;n<i;n++)r.push(null);for(let n=1;n<=d.getUTCDate();n++){const u=new Date(Date.UTC(t,e,n));r.push(u),r.length===7&&(a.push(r),r=[])}if(r.length){for(;r.length<7;)r.push(null);a.push(r)}return a}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{const t=this.renderRoot.querySelector("#selected-month");t&&t.scrollIntoView({block:"center"})},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{const t=this.renderRoot.querySelector("#selected-year");t&&t.scrollIntoView({block:"center"})},0))}_onMonthChangeCustom(t){const e=this._currentDate.getFullYear();this._currentDate=new Date(e,t,1),this._showMonthDropdown=!1}_onYearChangeCustom(t){const e=this._currentDate.getMonth();this._currentDate=new Date(t,e,1),this._showYearDropdown=!1}_isToday(t,e){return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}_isSelected(t){return this._selectedDate&&t.getDate()===this._selectedDate.getDate()&&t.getMonth()===this._selectedDate.getMonth()&&t.getFullYear()===this._selectedDate.getFullYear()}_selectDate(t){if(this._selectedDate=t,this.variant==="datetime-local"){const e=new Date(t);e.setHours(this._selectedHour??0,this._selectedMinute??0,0,0),this._selectedHour=e.getHours(),this._selectedMinute=e.getMinutes();const o=a=>a.toString().padStart(2,"0"),d=`${e.getFullYear()}-${o(e.getMonth()+1)}-${o(e.getDate())} ${o(e.getHours())}:${o(e.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:d},bubbles:!0,composed:!0}))}else{const e=t.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:e},bubbles:!0,composed:!0}))}}_fireDateTimeChange(){if(this.variant==="datetime-local"&&this._selectedDate){const t=new Date(this._selectedDate);t.setHours(this._selectedHour??0,this._selectedMinute??0,0,0);const e=d=>d.toString().padStart(2,"0"),o=`${t.getFullYear()}-${e(t.getMonth()+1)}-${e(t.getDate())} ${e(t.getHours())}:${e(t.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:o},bubbles:!0,composed:!0}))}}},w.styles=[$`
+    :host {
+        --scb-datepicker-width: 380px;
+      --scb-datepicker-z-index: 1100;
+      --scb-datepicker-viewport-margin: 8px;
+      --scb-datepicker-offset: var(--spacing-2, 4px);
+        max-width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
+        font-family: var(--brand-font);
+        color: var(--md-sys-color-on-surface);
+      display: block;
+      position: var(--scb-datepicker-position, absolute);
+      top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
+      bottom: var(--scb-datepicker-bottom, auto);
+      left: var(--scb-datepicker-left, 0);
+      width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
+      transform: var(--scb-datepicker-transform, translateX(0px));
+      z-index: var(--scb-datepicker-z-index);
+    }
+    .month-selector, .year-selector {
+      display: flex;
+      align-items: center;
+      &.disable{
+        pointer-events: none;
+        opacity: 0.3;
+        scb-icon-button{
+            visibility: hidden;
+        }
+      }
+        &.open{
+            scb-icon-button{
+                visibility: hidden;
+            }
+            .dropdown-selected{
+                background: var(--md-sys-color-secondary-container);
+            }
+        }
+    }
+    .dropdown-selected {
+        position: relative;
+        border-radius: 8px;
+        font-size: 16px;
+        cursor: pointer;
+        text-align: left;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 4px 8px;
+    }
+    .dropdown-selected:focus {
+      outline: none;
+    }
+    .dropdown-selected md-focus-ring {
+        border-radius: 8px;
+    }
+    .dropdown-list {
+      position: relative;
+      background: var(--md-sys-color-surface);
+      padding: 4px 0;
+    }
+    .dropdown-item {
+        display: flex;
+        position: relative;
+        cursor: pointer;
+        padding: var(--spacing-3) 56px;
+        min-height: 40px;
+        align-items: center;
+    }
+    .dropdown-item:focus-within {
+      outline: none;
+    }
+    .dropdown-item md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+    }
+    .dropdown-item.selected {
+      background: var(--md-sys-color-secondary-container, #e3f2fd);
+      font-weight: 500;
+      padding-left: 16px;
+        gap: 16px;
+    }
+      .datepicker-popup {
+        background: var(--md-sys-color-surface);
+        border-radius: var(--md-sys-shape-corner-small);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+        max-width: 100%;
+        width: 100%;
+        max-height: var(--scb-datepicker-max-height, 80vh);
+        overflow: auto;
+        font-family: var(--brand-font);
+      }
+      .datepicker-content{
+        overflow-y: auto;
+        max-height: 290px;
+      }
+      		.datepicker-content::-webkit-scrollbar {
+				width: 12px;
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+			.datepicker-content::-webkit-scrollbar-thumb {
+				background: var(--md-sys-color-outline);
+				border-radius: var(--md-sys-shape-corner-small);
+				border: 4px solid var(--md-sys-color-surface);
+				
+			}
+			.datepicker-content::-webkit-scrollbar-track {
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+      .popup {
+        position:absolute;
+        top:0;
+        left:0;
+        z-index:1;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        padding: 20px 16px 0px 16px;
+        flex-wrap: wrap;
+      }
+      .datepicker-footer{
+        padding: 8px 16px 24px 16px;
+      }
+      .month-label {
+        font-size: 18px;
+        font-weight: 500;
+      }
+      .datepicker-calendar{
+        padding: 0 16px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 8px;
+      }
+      th {
+        color: var(--md-sys-color-on-surface-variant, #757575);
+        font-size: 16px;
+        font-weight: 600;
+        padding-bottom: 20px;
+      }
+      td {
+        text-align: center;
+      }
+
+      .day:focus-within{
+        outline: none;
+      }
+      .day {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: none;
+        background: none;
+        font-size: 16px;
+        cursor: pointer;
+        font-family: 'Inter';
+        align-content: center;
+      }
+      .day.selected {
+        background: var(--md-sys-color-secondary-container);
+      }
+      .close-datepicker {
+        margin-top: 8px;
+        background: none;
+        border-color: none;
+        color: var(--md-sys-color-primary, #0057b8);
+        font-size: 16px;
+        cursor: pointer;
+        padding: 4px 12px;
+        border-radius: 8px;
+      }
+      .close-datepicker:hover {
+        background: var(--md-sys-color-primary-container, #e3f2fd);
+      }
+    `],w);l([h()],p.prototype,"_currentDate",void 0);l([h()],p.prototype,"_selectedDate",void 0);l([h()],p.prototype,"_showMonthDropdown",void 0);l([h()],p.prototype,"_showYearDropdown",void 0);l([m({type:String})],p.prototype,"variant",void 0);l([m({type:String})],p.prototype,"lang",void 0);l([m({type:String})],p.prototype,"selectedValue",void 0);l([m({type:Boolean})],p.prototype,"open",void 0);l([h()],p.prototype,"_selectedHour",void 0);l([h()],p.prototype,"_selectedMinute",void 0);p=l([M("scb-datepicker")],p);

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

@@ -0,0 +1,265 @@
+import"../../vendor/vendor-material.js";import{_ as g,b as f,g as b,h as s,v as d,y as r}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as n}from"../../vendor/decorate.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-textfield/scb-textfield.js";import"../scb-checkbox/scb-checkbox.js";import"../scb-radio-button/scb-radio-button.js";import"../scb-switch/scb-switch.js";import"../scb-chip/scb-chip.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,i,a){try{customElements.get(t)||e(t,i,a)}catch(c){var l=String(c||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var h,o=(h=class extends g{constructor(...e){super(...e),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{const t=this.shadowRoot?.querySelector("form");t instanceof HTMLFormElement&&(this.__clearGeneratedFormValues(t),t.reset()),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(i=>{const a=i.tagName;a==="SCB-TEXTFIELD"&&(i.value=""),a==="SCB-CHECKBOX"&&(i.checked=!1),a==="SCB-RADIO-BUTTON"&&(i.checked=!1),a==="SCB-SWITCH"&&(i.selected=!1),a==="SCB-CHIP"&&(i.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{const t=this.shadowRoot?.querySelector("form");if(t instanceof HTMLFormElement){if(this.__syncSlottedFormValues(t),!this.__validateFormAndSlottedFields(t))return;t.requestSubmit()}this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const i=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(c=>!c.hasAttribute("disabled"));if(!i.length)return;const a=i[0],l=i[i.length-1];t.shiftKey&&document.activeElement===a?(l.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===l&&(a.focus(),t.preventDefault())}}__getActionFromEvent(e){if(!this.id)return null;for(const t of e.composedPath())if(t instanceof Element){if(t.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=t,"toggle";if(t.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=t,"toggle"}return null}connectedCallback(){super.connectedCallback(),this.__applyZIndex(),this.__applyMaxSize(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}__applyZIndex(){const e=typeof this.zIndex=="number"&&Number.isFinite(this.zIndex)?this.zIndex:void 0;if(e===void 0){this.style.removeProperty("--z-dialog-scrim"),this.style.removeProperty("--z-dialog");return}this.style.setProperty("--z-dialog-scrim",String(e)),this.style.setProperty("--z-dialog",String(e+1))}__applyMaxSize(){const e=(this.maxW??"").trim(),t=(this.maxH??"").trim();e?(this.style.setProperty("--scb-dialog-max-w",e),this.style.setProperty("--scb-dialog-width",`min(${e}, 90vw)`)):(this.style.removeProperty("--scb-dialog-max-w"),this.style.removeProperty("--scb-dialog-width")),t?this.style.setProperty("--scb-dialog-max-h",t):this.style.removeProperty("--scb-dialog-max-h")}updated(e){if(e.has("zIndex")&&this.__applyZIndex(),(e.has("maxW")||e.has("maxH"))&&this.__applyMaxSize(),e.has("open")){const t=e.get("open");this.__updateTriggersExpanded(),this.open&&!t?this.updateComplete.then(()=>{const i=this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])');i?i.focus():this.shadowRoot?.querySelector(".container")?.focus()}):!this.open&&t&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this.__applySpacing()}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(e=>{e.hasAttribute("aria-controls")&&e.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(e){if(this.inSb)return;const t=document.documentElement,i=document.body;if(e){const a=window.innerWidth-t.clientWidth;t.style.overflow="hidden",i.style.paddingRight=a>0?`${a}px`:"";return}t.style.overflow="",i.style.paddingRight=""}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__applySpacing(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,i=this.mapSpacingToken(this.spacingBottom)??e,a=this.mapSpacingToken(this.spacingLeft),l=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-dialog-spacing-block-start",t):this.style.removeProperty("--scb-dialog-spacing-block-start"),i?this.style.setProperty("--scb-dialog-spacing-block-end",i):this.style.removeProperty("--scb-dialog-spacing-block-end"),a?this.style.setProperty("--scb-dialog-spacing-inline-start",a):this.style.removeProperty("--scb-dialog-spacing-inline-start"),l?this.style.setProperty("--scb-dialog-spacing-inline-end",l):this.style.removeProperty("--scb-dialog-spacing-inline-end")}__setOpen(e){this.open=e,this.__fire(e?"open":"close")}__fire(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}__getSlottedElements(){const e=this.shadowRoot?.querySelector("slot");if(!(e instanceof HTMLSlotElement))return[];const t=e.assignedElements({flatten:!0}),i=[];for(const a of t)i.push(a,...Array.from(a.querySelectorAll("*")));return i}__appendHiddenFormValue(e,t,i){const a=document.createElement("input");a.type="hidden",a.name=t,a.value=i,a.setAttribute("data-scb-dialog-generated","true"),e.append(a)}__clearGeneratedFormValues(e){e.querySelectorAll('input[data-scb-dialog-generated="true"]').forEach(t=>t.remove())}__syncSlottedFormValues(e){this.__clearGeneratedFormValues(e),this.__getSlottedElements().forEach(t=>{if(!(t instanceof HTMLElement))return;const i=(t.getAttribute("name")??"").trim();if(i&&!(t.disabled===!0||t.hasAttribute("disabled"))){if(t instanceof HTMLInputElement){if(t.form===e)return;const a=(t.type||"").toLowerCase();if(a==="checkbox"||a==="radio"){t.checked&&this.__appendHiddenFormValue(e,i,t.value||"on");return}this.__appendHiddenFormValue(e,i,t.value??"");return}if(t instanceof HTMLTextAreaElement){if(t.form===e)return;this.__appendHiddenFormValue(e,i,t.value??"");return}if(t instanceof HTMLSelectElement){if(t.form===e)return;if(t.multiple){Array.from(t.selectedOptions).forEach(a=>{this.__appendHiddenFormValue(e,i,a.value)});return}this.__appendHiddenFormValue(e,i,t.value??"");return}switch(t.tagName){case"SCB-TEXTFIELD":this.__appendHiddenFormValue(e,i,String(t.value??""));return;case"SCB-CHECKBOX":t.checked&&this.__appendHiddenFormValue(e,i,String(t.value??t.getAttribute("value")??"on"));return;case"SCB-RADIO-BUTTON":t.checked&&this.__appendHiddenFormValue(e,i,String(t.value??t.getAttribute("value")??"on"));return;case"SCB-SWITCH":(t.selected||t.checked)&&this.__appendHiddenFormValue(e,i,String(t.value??t.getAttribute("value")??"on"));return;case"SCB-CHIP":t.selected&&this.__appendHiddenFormValue(e,i,String(t.value??t.getAttribute("value")??"on"));return;default:"value"in t&&this.__appendHiddenFormValue(e,i,String(t.value??""))}}})}__validateFormAndSlottedFields(e){const t=c=>c.disabled===!0||c.hasAttribute("disabled");let i=e.reportValidity(),a=null;const l=new Set;return this.__getSlottedElements().forEach(c=>{if(!(c instanceof HTMLElement)||l.has(c)||t(c))return;l.add(c);const u=c;if(c.tagName==="SCB-TEXTFIELD"&&u.error===!0){a||(a=c),i=!1;return}if(typeof u.reportValidity=="function"){const m=!!u.reportValidity();!m&&!a&&(a=c),i=i&&m}}),!i&&a&&a.focus(),i}__slotIsEmpty(){const e=this.shadowRoot?.querySelector("slot");return e?e.assignedElements({flatten:!0}).length===0:!0}renderHeader(e){const t=this.variant==="form"||this.variant==="floating"||this.variant==="iframe";return r`
+      <div class="header">
+        <div class="title">
+          ${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:d}
+          <div class="label" id=${e}>${this.label}</div>
+        </div>
+        ${t?r`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>`:d}
+      </div>
+    `}renderContentDefault(e){return r`
+      <div class="content" id=${e}>
+        ${this.__slotIsEmpty()&&this.supportingText?r`${this.supportingText}`:r`<slot></slot>`}
+      </div>
+    `}renderContentIframe(e){return r`
+      <div class="content" id=${e}>
+        <div class="content-surface">
+          ${this.__slotIsEmpty()&&this.supportingText?r`${this.supportingText}`:r`<slot></slot>`}
+        </div>
+      </div>
+    `}renderActions(){switch(this.variant){case"alert":return r`<div class="actions">
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;case"confirm":return r`<div class="actions">
+          <scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
+          <scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
+        </div>`;case"choose":return r`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;case"form":return r`<div class="actions">
+          <scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" type="submit" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
+        </div>`;case"floating":case"iframe":return d;default:return r`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`}}renderBody(e,t){return this.variant==="form"?r`
+        ${this.renderHeader(e)}
+        <div class="content" id=${t}>
+          <form id=${this.formId} action=${this.formAction} method=${this.formMethod||d}>
+            <slot></slot>
+          </form>
+        </div>
+        ${this.renderActions()}
+      `:this.variant==="iframe"?r`${this.renderHeader(e)} ${this.renderContentIframe(t)} ${this.renderActions()}`:r`${this.renderHeader(e)} ${this.renderContentDefault(t)} ${this.renderActions()}`}render(){const e="dlg-title",t="dlg-desc";return r`
+      <div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
+      <div
+        class="container"
+        tabindex="-1"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${e}
+        aria-describedby=${t}
+      >
+        ${this.renderBody(e,t)}
+      </div>
+    `}},h.styles=f`
+    :host { 
+      display:block; 
+      position:relative;
+      font-family: var(--brand, Inter); 
+
+      margin-block-start: var(--scb-dialog-spacing-block-start, 0);
+      margin-block-end: var(--scb-dialog-spacing-block-end, 0);
+      margin-inline-start: var(--scb-dialog-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-dialog-spacing-inline-end, 0);
+    }
+
+    .scrim {
+      position: var(--scb-dialog-scrim-position, fixed);
+      inset: 0;
+      /* var från tokens, tonas med opacity via color-mix */
+      background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
+      z-index: var(--z-dialog-scrim, 1000);
+      opacity: 1;
+      transition: opacity var(--motion-duration-short, 0.25s);
+      transition-timing-function: var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+      height: var(--scb-dialog-scrim-height, auto);
+    }
+
+    .container {
+        outline: none;
+      position: var(--scb-dialog-container-position, fixed);
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%) scale(1);
+
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+
+      /* radius mappad till spacing-token som fallback */
+      border-radius: var(--scb-dialog-radius, var(--spacing-5, 16px));
+
+      /* skugga mappad till shadow-token + spacing-tokens */
+      box-shadow:
+        0 var(--spacing-1, 2px)
+        var(--spacing-5, 16px)
+        color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
+
+      /* width/height via CSS custom props med px-fallback */
+      min-width: var(--scb-dialog-min-w, 340px);
+      width: var(--scb-dialog-width, auto);
+      max-width: var(--scb-dialog-max-w, 90vw);
+      max-height: var(--scb-dialog-max-h, 90vh);
+
+
+
+      display:flex; flex-direction:column;
+
+      /* padding mappad till spacing-token */
+      padding: var(--scb-dialog-padding, var(--spacing-7, 24px));
+
+      z-index: var(--z-dialog, 1001);
+      opacity: 1;
+      transition:
+        opacity var(--motion-duration-medium, 0.3s),
+        transform var(--motion-duration-medium, 0.3s);
+      transition-timing-function: var(--motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));
+}
+
+    :host(:not([open])) .scrim,
+    :host(:not([open])) .container { opacity:0; pointer-events:none; }
+
+    :host([open]) .scrim {
+      animation:
+        var(--motion-keyframe-fade-in, scb-kf-fade-in)
+        var(--motion-duration-short, 0.25s)
+        var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))
+        both;
+    }
+
+    :host([open]) .container {
+      animation:
+        var(--motion-keyframe-fade-in, scb-kf-fade-in)
+        var(--motion-duration-medium, 0.3s)
+        var(--motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1))
+        both;
+    }
+
+    /* Header: ikon över rubrik */
+    .header {
+      display:flex;
+      align-items:flex-start;
+      gap: var(--spacing-4, 12px);
+      margin-bottom: var(--spacing-5, 16px);
+    }
+    .header .title {
+      display:flex;
+      flex-direction:column; /* ikon ovanför label */
+      gap: var(--spacing-3, 8px);
+    }
+    .header .label {
+      /* typografi mappad till md-sys-typescale tokens */
+      font-weight: var(--md-sys-typescale-headline-small-weight, 700);
+      font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+      line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
+    }
+    .header .close { margin-left:auto; }
+
+    .dialog-icon {
+      inline-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+      block-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+    }
+
+    .content {
+      flex: 1 1 auto;
+      overflow:auto;
+      margin-bottom: var(--spacing-5, 16px);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .content-surface {
+      border-radius: calc(var(--scb-dialog-radius, var(--spacing-5, 16px)) - var(--spacing-2, 4px));
+      overflow: hidden;
+      background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+    }
+
+    :host([variant="iframe"]) .container {
+      --scb-dialog-min-w: var(--scb-dialog-min-w-iframe, var(--scb-dialog-min-w-floating, 360px));
+      --scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-3, 8px));
+    }
+
+    :host([variant="iframe"]) .header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: var(--spacing-2, 4px);
+      margin-bottom: var(--spacing-3, 8px);
+      padding-block: var(--scb-dialog-header-padding-block-iframe, var(--spacing-3, 8px));
+      padding-inline-start: var(--scb-dialog-header-padding-inline-start-iframe, var(--spacing-3, 8px));
+      padding-inline-end: var(--scb-dialog-header-padding-inline-end-iframe, var(--spacing-3, 8px));
+    }
+
+    :host([variant="iframe"]) .header .title {
+      min-width: 0;
+    }
+
+    :host([variant="iframe"]) .header .label {
+      padding-inline-start: var(--scb-dialog-header-label-padding-inline-start-iframe, 0);
+    }
+
+    :host([variant="iframe"]) .header .close {
+      margin-left: 0;
+      align-self: start;
+      justify-self: end;
+      margin-top: var(--spacing-negative-2, -4px);
+      margin-right: var(--spacing-negative-4, -12px);
+    }
+
+    :host([variant="iframe"]) .content {
+      margin-bottom: 0;
+      color: inherit;
+    }
+
+    :host([variant="iframe"]) .content-surface {
+      block-size: 100%;
+    }
+
+    :host([variant="iframe"]) ::slotted(iframe) {
+      display: block;
+      inline-size: 100%;
+      block-size: var(--scb-dialog-iframe-height, min(70vh, 720px));
+      border: 0;
+      background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+    }
+
+    .actions {
+      display:flex;
+      align-items:center;
+      gap: var(--spacing-3, 8px);
+      justify-content:flex-end;
+    }
+    .actions .start { margin-right:auto; }
+
+    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
+    :host([variant="choose"])   .container { --scb-dialog-min-w: var(--scb-dialog-min-w-choose, 280px); }
+    :host([variant="alert"])    .container { --scb-dialog-min-w: var(--scb-dialog-min-w-alert, 320px); }
+    :host([variant="confirm"])  .container { --scb-dialog-min-w: var(--scb-dialog-min-w-confirm, 360px); }
+
+    /* Form-layout: enkel kolumn-grid med gap */
+    :host([variant="form"]) form{
+      display:grid;
+      grid-template-columns: 1fr;
+      gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
+    }
+
+    :host([variant="form"]) .content {
+      overflow: visible;
+    }
+
+    :host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
+
+    /* Choose: gör slottade radios vertikala med spacing */
+    :host([variant="choose"]) ::slotted(scb-radio-button) {
+      display:block;
+      margin-block: var(--scb-choice-gap, 6px);
+    }
+    /* Keyframes för motion-tokens (behövs för att animationer ska fungera i shadow DOM) */
+    @keyframes scb-kf-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes scb-kf-fade-out {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+
+  `,h);n([s({type:Boolean,reflect:!0})],o.prototype,"open",void 0);n([s({type:String,attribute:"max-w",reflect:!0})],o.prototype,"maxW",void 0);n([s({type:String,attribute:"max-h",reflect:!0})],o.prototype,"maxH",void 0);n([s({type:Number,attribute:"z-index",reflect:!0})],o.prototype,"zIndex",void 0);n([s({type:Boolean,attribute:!1})],o.prototype,"inSb",void 0);n([s({type:Boolean,attribute:"scrim-close"})],o.prototype,"scrimClose",void 0);n([s({type:String,reflect:!0})],o.prototype,"spacing",void 0);n([s({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);n([s({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);n([s({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);n([s({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);n([s({type:String})],o.prototype,"variant",void 0);n([s({type:String})],o.prototype,"label",void 0);n([s({type:String})],o.prototype,"icon",void 0);n([s({type:String,attribute:"supporting-text"})],o.prototype,"supportingText",void 0);n([s({type:String,attribute:"ok-button"})],o.prototype,"okButton",void 0);n([s({type:String,attribute:"cancel-button"})],o.prototype,"cancelButton",void 0);n([s({type:String,attribute:"delete-button"})],o.prototype,"deleteButton",void 0);n([s({type:String,attribute:"confirm-button"})],o.prototype,"confirmButton",void 0);n([s({type:String,attribute:"deny-button"})],o.prototype,"denyButton",void 0);n([s({type:String,attribute:"reset-button"})],o.prototype,"resetButton",void 0);n([s({type:String,attribute:"submit-button"})],o.prototype,"submitButton",void 0);n([s({type:String,attribute:"form-id"})],o.prototype,"formId",void 0);n([s({type:String,attribute:"form-action"})],o.prototype,"formAction",void 0);n([s({type:String,attribute:"form-method"})],o.prototype,"formMethod",void 0);o=n([b("scb-dialog")],o);