scb-wc 0.1.7 → 0.1.9

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

@@ -1 +1,265 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-dialog/scb-dialog.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(e,r,c){try{customElements.get(e)||o(e,r,c)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();
+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);

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

@@ -1 +1,69 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/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 r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();
+import{_ as g,b,g as u,h as a,y}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";import{n as f,t as l}from"../../vendor/assertClassBrand.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,p,h){try{customElements.get(e)||i(e,p,h)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var o,s,t=(o=new WeakSet,s=class extends g{constructor(...i){super(...i),f(this,o),this.variant="thin",this.direction="horizontal",this.inset="none",this.overlay=!1,this.anchor="end",this.spacing=void 0}firstUpdated(){l(o,this,v).call(this)}updated(i){i.has("spacing")&&l(o,this,v).call(this)}mapSpacingToken(i){if(!i)return;const e=String(i).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}render(){return y``}},s.styles=b`
+    :host {
+      --scb-divider-color: var(--md-sys-color-outline-variant);
+      --scb-divider-thickness: 1px;
+      --scb-divider-gap: var(--scb-grid-column-gap, var(--spacing-6, 24px));
+      --scb-divider-spacing-orth: 0;
+
+      display: block;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+
+    :host([variant='bold']) {
+      --scb-divider-color: var(--md-sys-color-outline);
+    }
+
+    /* Horisontell avdelare: drar ut sig på inline-led, spacing på block-led (ovan/under). */
+    :host(:not([direction='vertical'])) {
+      inline-size: 100%;
+      block-size: var(--scb-divider-thickness);
+      background: var(--scb-divider-color);
+      margin-block: var(--scb-divider-spacing-orth, 0);
+    }
+
+    :host([inset='both']:not([direction='vertical'])) {
+      margin-inline: var(--spacing-8, 32px);
+    }
+    :host([inset='start']:not([direction='vertical'])) {
+      margin-inline-start: var(--spacing-8, 32px);
+    }
+    :host([inset='end']:not([direction='vertical'])) {
+      margin-inline-end: var(--spacing-8, 32px);
+    }
+
+    /* Vertikal avdelare: drar ut sig på block-led, spacing på inline-led (vänster/höger). */
+    :host([direction='vertical']:not([overlay])) {
+      inline-size: var(--scb-divider-thickness);
+      block-size: 100%;
+      background: var(--scb-divider-color);
+      align-self: stretch;
+      justify-self: center;
+      margin-inline: var(--scb-divider-spacing-orth, 0);
+    }
+
+    :host([direction='vertical'][inset='both']:not([overlay])) {
+      margin-block: var(--spacing-8, 32px);
+    }
+    :host([direction='vertical'][inset='start']:not([overlay])) {
+      margin-block-start: var(--spacing-8, 32px);
+    }
+    :host([direction='vertical'][inset='end']:not([overlay])) {
+      margin-block-end: var(--spacing-8, 32px);
+    }
+
+    /* Overlay-variant för vertikal avdelare, spacing ignoreras (absolut positionerad). */
+    :host([overlay][direction='vertical']) {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inline-size: var(--scb-divider-thickness);
+      background: var(--scb-divider-color);
+    }
+    :host([overlay][direction='vertical'][anchor='end']) {
+      right: calc(var(--scb-divider-gap) / -2);
+    }
+    :host([overlay][direction='vertical'][anchor='start']) {
+      left: calc(var(--scb-divider-gap) / -2);
+    }
+  `,s);function v(){const n=this.mapSpacingToken(this.spacing);n?this.style.setProperty("--scb-divider-spacing-orth",n):this.style.removeProperty("--scb-divider-spacing-orth")}r([a({type:String,reflect:!0})],t.prototype,"variant",void 0);r([a({type:String,reflect:!0})],t.prototype,"direction",void 0);r([a({type:String,reflect:!0})],t.prototype,"inset",void 0);r([a({type:Boolean,reflect:!0})],t.prototype,"overlay",void 0);r([a({type:String,reflect:!0})],t.prototype,"anchor",void 0);r([a({type:String,reflect:!0})],t.prototype,"spacing",void 0);t=r([u("scb-divider")],t);

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

@@ -1 +1,128 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-drawer/scb-drawer.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,o,c){try{customElements.get(e)||i(e,o,c)}catch(r){var n=String(r||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();
+import{_ as f,b as h,g as p,h as d,v as _,y as v}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as l}from"../../vendor/decorate.js";import"../scb-divider/scb-divider.js";(function(){try{var u=typeof globalThis<"u"?globalThis:window;if(!u.__scb_ce_guard_installed__){u.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,o,a){try{customElements.get(r)||e(r,o,a)}catch(n){var c=String(n||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var i,t,s=(i=class extends f{constructor(...e){super(...e),this.floating=!0,this.left=!0,this.right=!1,this.open=!1,this.overlay=!1,this.lockScroll=!1,this.closeOnOverlay=!0,this.modal=!1,this.__effectiveSide="left",this.__lastTriggerEl=null,this.__lastTriggerWasAriaControls=!1,this.__onDocumentClick=r=>{const o=this.__getActionFromEvent(r);if(o){o==="open"&&this.__setOpen(!0),o==="close"&&this.__setOpen(!1),o==="toggle"&&this.__setOpen(!this.open),r.stopPropagation();return}this.floating&&this.open&&!this.overlay&&(r.composedPath().includes(this)||this.__setOpen(!1))},this.__onDocumentKeydown=r=>{if(this.open){if(r.key==="Escape"){this.__setOpen(!1);return}if(this.overlay&&r.key==="Tab"){const o=this.__getFocusable();if(o.length===0)return;const a=o[0],c=o[o.length-1],n=document.activeElement;r.shiftKey?(n===a||!n||!this.contains(n))&&(r.preventDefault(),c.focus()):(n===c||!n||!this.contains(n))&&(r.preventDefault(),a.focus())}}}}static __ensureOverlayStyles(){if(typeof document>"u"||document.getElementById("scb-drawer-overlay-styles"))return;const e=document.createElement("style");e.id="scb-drawer-overlay-styles",e.textContent=`
+      .scb-drawer-global-overlay {
+        position: fixed;
+        inset: 0;
+        background: var(--scb-drawer-overlay-color, rgba(0,0,0,0.32));
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 200ms ease;
+        z-index: var(--scb-drawer-overlay-z, 999);
+      }
+      .scb-drawer-global-overlay.is-visible {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .scb-drawer-global-overlay { transition: none; }
+      }
+    `,document.head.appendChild(e)}static __ensureOverlay(){if(typeof document>"u"||t.__overlayEl)return;t.__ensureOverlayStyles();const e=document.createElement("div");e.className="scb-drawer-global-overlay",e.addEventListener("pointerdown",()=>{const r=t.__overlayStack[t.__overlayStack.length-1];r&&r.closeOnOverlay&&r.__setOpen(!1)},{passive:!0}),document.body.appendChild(e),t.__overlayEl=e}static __showOverlay(e){t.__ensureOverlay(),t.__overlayEl&&(t.__overlayStack.includes(e)||t.__overlayStack.push(e),t.__overlayEl.classList.add("is-visible"))}static __hideOverlay(e){const r=t.__overlayStack.indexOf(e);r>=0&&t.__overlayStack.splice(r,1),t.__overlayStack.length===0&&t.__overlayEl&&t.__overlayEl.classList.remove("is-visible")}static __lockScrollEnable(){if(!(typeof document>"u")){if(t.__lockedCount===0){t.__prevDocOverflow=document.documentElement.style.overflow||"",t.__prevBodyOverflow=document.body.style.overflow||"",t.__prevDocPaddingRight=document.documentElement.style.paddingRight||"",t.__prevBodyPaddingRight=document.body.style.paddingRight||"";const e=Math.max(0,window.innerWidth-document.documentElement.clientWidth);if(e>0){const r=Number.parseFloat(getComputedStyle(document.documentElement).paddingRight||"0"),o=Number.parseFloat(getComputedStyle(document.body).paddingRight||"0");document.documentElement.style.paddingRight=`${r+e}px`,document.body.style.paddingRight=`${o+e}px`}document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden"}t.__lockedCount++}}static __lockScrollDisable(){typeof document>"u"||(t.__lockedCount=Math.max(0,t.__lockedCount-1),t.__lockedCount===0&&(document.documentElement.style.overflow=t.__prevDocOverflow??"",document.body.style.overflow=t.__prevBodyOverflow??"",document.documentElement.style.paddingRight=t.__prevDocPaddingRight??"",document.body.style.paddingRight=t.__prevBodyPaddingRight??""))}render(){const e=this.modal&&this.overlay&&this.floating;return v`
+      <div
+        class="root"
+        role=${e?"dialog":_}
+        aria-modal=${e?"true":_}
+      >
+        <div class="panel"><slot></slot></div>
+      </div>
+    `}connectedCallback(){super.connectedCallback(),this.__syncEffectiveSide(new Map),document.addEventListener("click",this.__onDocumentClick,!1)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.overlay&&(t.__hideOverlay(this),this.lockScroll&&t.__lockScrollDisable()),super.disconnectedCallback()}__getActionFromEvent(e){if(!this.id)return null;const r=e.composedPath();for(const o of r)if(o instanceof Element){if(o.getAttribute("data-drawer-open")===this.id)return this.__lastTriggerEl=o,this.__lastTriggerWasAriaControls=!1,"open";if(o.getAttribute("data-drawer-close")===this.id)return this.__lastTriggerEl=o,this.__lastTriggerWasAriaControls=!1,"close";if(o.getAttribute("data-drawer-toggle")===this.id)return this.__lastTriggerEl=o,this.__lastTriggerWasAriaControls=!1,"toggle";if(o.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=o,this.__lastTriggerWasAriaControls=!0,"toggle"}return null}__getFocusable(){const e='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',r=new Set,o=a=>{a.querySelectorAll(e).forEach(c=>r.add(c))};return o(this),o(this.renderRoot),Array.from(r).filter(a=>!a.hasAttribute("disabled")&&a.tabIndex>=0)}__setOpen(e){this.open=e}__syncLastTriggerExpanded(e){this.__lastTriggerEl&&this.__lastTriggerWasAriaControls&&this.__lastTriggerEl.getAttribute("aria-controls")===this.id&&this.__lastTriggerEl.setAttribute("aria-expanded",String(e))}__syncEffectiveSide(e){const r=this.left&&this.right;let o;r?e.has("left")&&this.left&&!e.has("right")?o="left":o="right":this.right?o="right":o="left",this.__effectiveSide!==o&&(this.__effectiveSide=o),this.getAttribute("data-side")!==o&&this.setAttribute("data-side",o)}willUpdate(e){this.__syncEffectiveSide(e)}updated(e){if(e.has("open")){const r=!!e.get("open");this.__applyOpenSideEffects(r,this.open)}}__applyOpenSideEffects(e,r){r&&!e?(this.__syncLastTriggerExpanded(!0),this.floating&&this.overlay&&(t.__showOverlay(this),this.lockScroll&&t.__lockScrollEnable()),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.updateComplete.then(()=>{this.__getFocusable()[0]?.focus?.()}),this.dispatchEvent(new CustomEvent("scb-drawer-opened",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("scbdraweropened",{bubbles:!0,composed:!0}))):!r&&e&&(this.__syncLastTriggerExpanded(!1),this.floating&&this.overlay&&(t.__hideOverlay(this),this.lockScroll&&t.__lockScrollDisable()),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.__lastTriggerEl?.focus?.(),this.dispatchEvent(new CustomEvent("scb-drawer-closed",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("scbdrawerclosed",{bubbles:!0,composed:!0})))}},t=i,i.__overlayEl=null,i.__overlayStack=[],i.__lockedCount=0,i.__prevDocOverflow=null,i.__prevBodyOverflow=null,i.__prevDocPaddingRight=null,i.__prevBodyPaddingRight=null,i.styles=h`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      padding: var(--scb-drawer-padding, var(--spacing-4, 12px));
+      background: var(
+        --scb-drawer-background,
+        var(--md-sys-color-surface-container)
+      );
+      font-family: var(--brand-font);
+    }
+
+    :host([floating]) {
+      position: fixed;
+      top: 0;
+      height: 100vh;
+      height: 100dvh;
+      width: clamp(
+        var(--scb-drawer-min-width, 280px),
+        var(--scb-drawer-fluid-width, 70vw),
+        var(--scb-drawer-max-width, 360px)
+      );
+      --scb-drawer-background: var(--md-sys-color-surface-container-lowest);
+      box-shadow: var(
+        --scb-drawer-elevation,
+        2px 0 12px rgba(0, 0, 0, 0.15)
+      );
+      border-radius: var(--scb-drawer-surface-radius, 0);
+      z-index: var(--scb-drawer-z, 1000);
+      transition:
+        transform 0.3s ease,
+        opacity 0.3s ease,
+        visibility 0.3s;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      will-change: transform;
+      font-family: var(--brand-font);
+      overflow: hidden;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([floating]) {
+        transition: none;
+      }
+    }
+
+    :host([floating][data-side="left"]) {
+      left: 0;
+      transform: translateX(-100%);
+    }
+    :host([floating][data-side="left"][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    :host([floating][data-side="right"]) {
+      right: 0;
+      transform: translateX(100%);
+      box-shadow: var(
+        --scb-drawer-elevation,
+        -2px 0 12px rgba(0, 0, 0, 0.15)
+      );
+    }
+    :host([floating][data-side="right"][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    ::slotted(scb-menu) {
+      background: var(--md-sys-color-surface-container-lowest);
+      --scb-menu-background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .root {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .panel {
+      contain: layout paint style;
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: auto;
+      scrollbar-gutter: stable;
+      -webkit-overflow-scrolling: touch;
+    }
+    :host([floating]:not([open])) .panel {
+      content-visibility: auto;
+      contain-intrinsic-size: 0 600px;
+    }
+
+    @supports not (scrollbar-gutter: stable) {
+      .panel {
+        overflow-y: scroll;
+      }
+    }
+  `,i);l([d({type:Boolean,reflect:!0})],s.prototype,"floating",void 0);l([d({type:Boolean,reflect:!0})],s.prototype,"left",void 0);l([d({type:Boolean,reflect:!0})],s.prototype,"right",void 0);l([d({type:Boolean,reflect:!0})],s.prototype,"open",void 0);l([d({type:Boolean,reflect:!0})],s.prototype,"overlay",void 0);l([d({type:Boolean,reflect:!0,attribute:"lock-scroll"})],s.prototype,"lockScroll",void 0);l([d({type:Boolean,reflect:!0,attribute:"close-on-overlay"})],s.prototype,"closeOnOverlay",void 0);l([d({type:Boolean,reflect:!0})],s.prototype,"modal",void 0);s=t=l([p("scb-drawer")],s);