scb-wc-test 0.1.242 → 0.1.244
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as u,n as o,i as h,E as p,x as r,t as m}from"../../vendor/vendor.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";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-divider/scb-divider.js";import"../scb-checkbox/scb-checkbox-group.js";import"../scb-radio-button/scb-radio-group.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,a,c){try{customElements.get(e)||i(e,a,c)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(t,i,e,a)=>{for(var c=a>1?void 0:a?f(i,e):i,l=t.length-1,d;l>=0;l--)(d=t[l])&&(c=(a?d(i,e,c):d(c))||c);return a&&c&&g(i,e,c),c};let n=class extends h{constructor(){super(...arguments),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(e=>{const a=e.tagName;a==="SCB-TEXTFIELD"&&(e.value=""),a==="SCB-CHECKBOX"&&(e.checked=!1),a==="SCB-RADIO-BUTTON"&&(e.checked=!1),a==="SCB-SWITCH"&&(e.selected=!1),a==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{const t=this.shadowRoot?.querySelector("form");t instanceof HTMLFormElement&&(this.__syncSlottedFormValues(t),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 e=i[0],a=i[i.length-1];t.shiftKey&&document.activeElement===e?(a.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===a&&(e.focus(),t.preventDefault())}}__getActionFromEvent(t){if(!this.id)return null;for(const i of t.composedPath())if(i instanceof Element){if(i.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=i,"toggle";if(i.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=i,"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 t=typeof this.zIndex=="number"&&Number.isFinite(this.zIndex)?this.zIndex:void 0;if(t===void 0){this.style.removeProperty("--z-dialog-scrim"),this.style.removeProperty("--z-dialog");return}this.style.setProperty("--z-dialog-scrim",String(t)),this.style.setProperty("--z-dialog",String(t+1))}__applyMaxSize(){const t=(this.maxW??"").trim(),i=(this.maxH??"").trim();t?(this.style.setProperty("--scb-dialog-max-w",t),this.style.setProperty("--scb-dialog-width",`min(${t}, 90vw)`)):(this.style.removeProperty("--scb-dialog-max-w"),this.style.removeProperty("--scb-dialog-width")),i?this.style.setProperty("--scb-dialog-max-h",i):this.style.removeProperty("--scb-dialog-max-h")}updated(t){if(t.has("zIndex")&&this.__applyZIndex(),(t.has("maxW")||t.has("maxH"))&&this.__applyMaxSize(),t.has("open")){const i=t.get("open");this.__updateTriggersExpanded(),this.open&&!i?this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])');e?e.focus():this.shadowRoot?.querySelector(".container")?.focus()}):!this.open&&i&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.__applySpacing()}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const i=document.documentElement;i.style.overflow=t?"hidden":""}mapSpacingToken(t){if(!t)return;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}__applySpacing(){const t=this.mapSpacingToken(this.spacing),i=this.mapSpacingToken(this.spacingTop)??t,e=this.mapSpacingToken(this.spacingBottom)??t,a=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);i?this.style.setProperty("--scb-dialog-spacing-block-start",i):this.style.removeProperty("--scb-dialog-spacing-block-start"),e?this.style.setProperty("--scb-dialog-spacing-block-end",e):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"),c?this.style.setProperty("--scb-dialog-spacing-inline-end",c):this.style.removeProperty("--scb-dialog-spacing-inline-end")}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}__getSlottedElements(){const t=this.shadowRoot?.querySelector("slot");if(!(t instanceof HTMLSlotElement))return[];const i=t.assignedElements({flatten:!0}),e=[];for(const a of i)e.push(a,...Array.from(a.querySelectorAll("*")));return e}__appendHiddenFormValue(t,i,e){const a=document.createElement("input");a.type="hidden",a.name=i,a.value=e,a.setAttribute("data-scb-dialog-generated","true"),t.append(a)}__clearGeneratedFormValues(t){t.querySelectorAll('input[data-scb-dialog-generated="true"]').forEach(i=>i.remove())}__syncSlottedFormValues(t){this.__clearGeneratedFormValues(t),this.__getSlottedElements().forEach(e=>{if(!(e instanceof HTMLElement))return;const a=(e.getAttribute("name")??"").trim();if(!(!a||e.disabled===!0||e.hasAttribute("disabled"))){if(e instanceof HTMLInputElement){if(e.form===t)return;const l=(e.type||"").toLowerCase();if(l==="checkbox"||l==="radio"){e.checked&&this.__appendHiddenFormValue(t,a,e.value||"on");return}this.__appendHiddenFormValue(t,a,e.value??"");return}if(e instanceof HTMLTextAreaElement){if(e.form===t)return;this.__appendHiddenFormValue(t,a,e.value??"");return}if(e instanceof HTMLSelectElement){if(e.form===t)return;if(e.multiple){Array.from(e.selectedOptions).forEach(l=>{this.__appendHiddenFormValue(t,a,l.value)});return}this.__appendHiddenFormValue(t,a,e.value??"");return}switch(e.tagName){case"SCB-TEXTFIELD":this.__appendHiddenFormValue(t,a,String(e.value??""));return;case"SCB-CHECKBOX":e.checked&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;case"SCB-RADIO-BUTTON":e.checked&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;case"SCB-SWITCH":(e.selected||e.checked)&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;case"SCB-CHIP":e.selected&&this.__appendHiddenFormValue(t,a,String(e.value??e.getAttribute("value")??"on"));return;default:"value"in e&&this.__appendHiddenFormValue(t,a,String(e.value??""))}}})}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const i=this.variant==="form"||this.variant==="floating"||this.variant==="iframe";return r`
|
|
2
2
|
<div class="header">
|
|
3
3
|
<div class="title">
|
|
4
|
-
${this.icon?
|
|
4
|
+
${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:p}
|
|
5
5
|
<div class="label" id=${t}>${this.label}</div>
|
|
6
6
|
</div>
|
|
7
|
-
${
|
|
7
|
+
${i?r`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>`:p}
|
|
8
8
|
</div>
|
|
9
|
-
`}renderContentDefault(t){const
|
|
9
|
+
`}renderContentDefault(t){const i=this.__slotIsEmpty();return r`
|
|
10
10
|
<div class="content" id=${t}>
|
|
11
|
-
${
|
|
11
|
+
${i&&this.supportingText?r`${this.supportingText}`:r`<slot></slot>`}
|
|
12
12
|
</div>
|
|
13
|
-
`}renderContentIframe(t){const
|
|
13
|
+
`}renderContentIframe(t){const i=this.__slotIsEmpty();return r`
|
|
14
14
|
<div class="content" id=${t}>
|
|
15
15
|
<div class="content-surface">
|
|
16
|
-
${
|
|
16
|
+
${i&&this.supportingText?r`${this.supportingText}`:r`<slot></slot>`}
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
19
|
-
`}renderActions(){switch(this.variant){case"alert":return
|
|
19
|
+
`}renderActions(){switch(this.variant){case"alert":return r`<div class="actions">
|
|
20
20
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
21
|
-
</div>`;case"confirm":return
|
|
21
|
+
</div>`;case"confirm":return r`<div class="actions">
|
|
22
22
|
<scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
|
|
23
23
|
<scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
|
|
24
|
-
</div>`;case"choose":return
|
|
24
|
+
</div>`;case"choose":return r`<div class="actions">
|
|
25
25
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
26
26
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
27
|
-
</div>`;case"form":return
|
|
27
|
+
</div>`;case"form":return r`<div class="actions">
|
|
28
28
|
<scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
|
|
29
29
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
30
|
-
<scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
31
|
-
</div>`;case"floating":case"iframe":return p;default:return
|
|
30
|
+
<scb-button variant="text" type="submit" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
31
|
+
</div>`;case"floating":case"iframe":return p;default:return r`<div class="actions">
|
|
32
32
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
33
33
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
34
|
-
</div>`}}renderBody(t,
|
|
34
|
+
</div>`}}renderBody(t,i){return this.variant==="form"?r`
|
|
35
35
|
${this.renderHeader(t)}
|
|
36
|
-
<div class="content" id=${
|
|
36
|
+
<div class="content" id=${i}>
|
|
37
37
|
<form id=${this.formId} action=${this.formAction} method=${this.formMethod||p}>
|
|
38
38
|
<slot></slot>
|
|
39
39
|
</form>
|
|
40
40
|
</div>
|
|
41
41
|
${this.renderActions()}
|
|
42
|
-
`:this.variant==="iframe"?
|
|
42
|
+
`:this.variant==="iframe"?r`${this.renderHeader(t)} ${this.renderContentIframe(i)} ${this.renderActions()}`:r`${this.renderHeader(t)} ${this.renderContentDefault(i)} ${this.renderActions()}`}render(){const t="dlg-title",i="dlg-desc";return r`
|
|
43
43
|
<div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
|
|
44
44
|
<div
|
|
45
45
|
class="container"
|
|
@@ -47,11 +47,11 @@ import{a as h,n as a,i as m,E as p,x as n,t as g}from"../../vendor/vendor.js";im
|
|
|
47
47
|
role="dialog"
|
|
48
48
|
aria-modal="true"
|
|
49
49
|
aria-labelledby=${t}
|
|
50
|
-
aria-describedby=${
|
|
50
|
+
aria-describedby=${i}
|
|
51
51
|
>
|
|
52
|
-
${this.renderBody(t,
|
|
52
|
+
${this.renderBody(t,i)}
|
|
53
53
|
</div>
|
|
54
|
-
`}};
|
|
54
|
+
`}};n.styles=u`
|
|
55
55
|
:host {
|
|
56
56
|
display:block;
|
|
57
57
|
position:relative;
|
|
@@ -173,7 +173,7 @@ import{a as h,n as a,i as m,E as p,x as n,t as g}from"../../vendor/vendor.js";im
|
|
|
173
173
|
|
|
174
174
|
:host([variant="iframe"]) .container {
|
|
175
175
|
--scb-dialog-min-w: var(--scb-dialog-min-w-iframe, var(--scb-dialog-min-w-floating, 360px));
|
|
176
|
-
--scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-
|
|
176
|
+
--scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-3, 8px));
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
:host([variant="iframe"]) .header {
|
|
@@ -256,4 +256,4 @@ import{a as h,n as a,i as m,E as p,x as n,t as g}from"../../vendor/vendor.js";im
|
|
|
256
256
|
to { opacity: 0; }
|
|
257
257
|
}
|
|
258
258
|
|
|
259
|
-
`;
|
|
259
|
+
`;s([o({type:Boolean,reflect:!0})],n.prototype,"open",2);s([o({type:String,attribute:"max-w",reflect:!0})],n.prototype,"maxW",2);s([o({type:String,attribute:"max-h",reflect:!0})],n.prototype,"maxH",2);s([o({type:Number,attribute:"z-index",reflect:!0})],n.prototype,"zIndex",2);s([o({type:Boolean,attribute:!1})],n.prototype,"inSb",2);s([o({type:Boolean,attribute:"scrim-close"})],n.prototype,"scrimClose",2);s([o({type:String,reflect:!0})],n.prototype,"spacing",2);s([o({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",2);s([o({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",2);s([o({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",2);s([o({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",2);s([o({type:String})],n.prototype,"variant",2);s([o({type:String})],n.prototype,"label",2);s([o({type:String})],n.prototype,"icon",2);s([o({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",2);s([o({type:String,attribute:"ok-button"})],n.prototype,"okButton",2);s([o({type:String,attribute:"cancel-button"})],n.prototype,"cancelButton",2);s([o({type:String,attribute:"delete-button"})],n.prototype,"deleteButton",2);s([o({type:String,attribute:"confirm-button"})],n.prototype,"confirmButton",2);s([o({type:String,attribute:"deny-button"})],n.prototype,"denyButton",2);s([o({type:String,attribute:"reset-button"})],n.prototype,"resetButton",2);s([o({type:String,attribute:"submit-button"})],n.prototype,"submitButton",2);s([o({type:String,attribute:"form-id"})],n.prototype,"formId",2);s([o({type:String,attribute:"form-action"})],n.prototype,"formAction",2);s([o({type:String,attribute:"form-method"})],n.prototype,"formMethod",2);n=s([m("scb-dialog")],n);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.244",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -382,5 +382,5 @@
|
|
|
382
382
|
},
|
|
383
383
|
"./mvc/*": "./mvc/*"
|
|
384
384
|
},
|
|
385
|
-
"buildHash": "
|
|
385
|
+
"buildHash": "BD4D12D4E6C2160C7D60E9B3287DCE9DFDE2C10638319A0B7B04C47DD5B42920"
|
|
386
386
|
}
|
|
@@ -43,6 +43,10 @@ export declare class ScbDialog extends LitElement {
|
|
|
43
43
|
private __applySpacing;
|
|
44
44
|
private __setOpen;
|
|
45
45
|
private __fire;
|
|
46
|
+
private __getSlottedElements;
|
|
47
|
+
private __appendHiddenFormValue;
|
|
48
|
+
private __clearGeneratedFormValues;
|
|
49
|
+
private __syncSlottedFormValues;
|
|
46
50
|
private __onScrimClick;
|
|
47
51
|
private __onOk;
|
|
48
52
|
private __onCancel;
|
package/scb-dialog/scb-dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as h, LitElement as m, nothing as p, html as l } from "lit";
|
|
2
|
+
import { property as o, customElement as g } from "lit/decorators.js";
|
|
3
3
|
import "../scb-button/scb-button.js";
|
|
4
4
|
import "../scb-icon-button/scb-icon-button.js";
|
|
5
5
|
import "../scb-textfield/scb-textfield.js";
|
|
@@ -8,12 +8,12 @@ import "../scb-radio-button/scb-radio-button.js";
|
|
|
8
8
|
import "../scb-switch/scb-switch.js";
|
|
9
9
|
import "../scb-chip/scb-chip.js";
|
|
10
10
|
import "@material/web/icon/icon.js";
|
|
11
|
-
var
|
|
12
|
-
for (var
|
|
13
|
-
(d = t[
|
|
14
|
-
return
|
|
11
|
+
var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
|
|
12
|
+
for (var r = a > 1 ? void 0 : a ? b(e, i) : e, c = t.length - 1, d; c >= 0; c--)
|
|
13
|
+
(d = t[c]) && (r = (a ? d(e, i, r) : d(r)) || r);
|
|
14
|
+
return a && r && f(e, i, r), r;
|
|
15
15
|
};
|
|
16
|
-
let
|
|
16
|
+
let n = class extends m {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments), 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) => {
|
|
19
19
|
this.__getActionFromEvent(t) === "toggle" && (this.__setOpen(!this.open), t.stopPropagation());
|
|
@@ -30,24 +30,26 @@ let i = class extends g {
|
|
|
30
30
|
}, this.__onDeny = () => {
|
|
31
31
|
this.__fire("deny"), this.__setOpen(!1);
|
|
32
32
|
}, this.__onReset = () => {
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
var i, a, r;
|
|
34
|
+
const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("form");
|
|
35
|
+
t instanceof HTMLFormElement && (this.__clearGeneratedFormValues(t), t.reset()), (((r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot")) == null ? void 0 : r.assignedElements({ flatten: !0 })) ?? []).forEach((c) => {
|
|
36
|
+
const d = c.tagName;
|
|
37
|
+
d === "SCB-TEXTFIELD" && (c.value = ""), d === "SCB-CHECKBOX" && (c.checked = !1), d === "SCB-RADIO-BUTTON" && (c.checked = !1), d === "SCB-SWITCH" && (c.selected = !1), d === "SCB-CHIP" && (c.selected = !1);
|
|
37
38
|
}), this.__fire("reset");
|
|
38
39
|
}, this.__onSubmit = () => {
|
|
39
|
-
var
|
|
40
|
-
|
|
40
|
+
var e;
|
|
41
|
+
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("form");
|
|
42
|
+
t instanceof HTMLFormElement && (this.__syncSlottedFormValues(t), t.requestSubmit()), this.__fire("submit"), this.__setOpen(!1);
|
|
41
43
|
}, this.__onKeydownTrap = (t) => {
|
|
42
44
|
if (!this.open || t.key !== "Tab") return;
|
|
43
45
|
const e = Array.from(
|
|
44
46
|
this.shadowRoot.querySelectorAll(
|
|
45
47
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
46
48
|
)
|
|
47
|
-
).filter((
|
|
49
|
+
).filter((r) => !r.hasAttribute("disabled"));
|
|
48
50
|
if (!e.length) return;
|
|
49
|
-
const
|
|
50
|
-
t.shiftKey && document.activeElement ===
|
|
51
|
+
const i = e[0], a = e[e.length - 1];
|
|
52
|
+
t.shiftKey && document.activeElement === i ? (a.focus(), t.preventDefault()) : !t.shiftKey && document.activeElement === a && (i.focus(), t.preventDefault());
|
|
51
53
|
};
|
|
52
54
|
}
|
|
53
55
|
/* Triggers + ESC + fokusåterställning
|
|
@@ -92,16 +94,16 @@ let i = class extends g {
|
|
|
92
94
|
t ? (this.style.setProperty("--scb-dialog-max-w", t), this.style.setProperty("--scb-dialog-width", `min(${t}, 90vw)`)) : (this.style.removeProperty("--scb-dialog-max-w"), this.style.removeProperty("--scb-dialog-width")), e ? this.style.setProperty("--scb-dialog-max-h", e) : this.style.removeProperty("--scb-dialog-max-h");
|
|
93
95
|
}
|
|
94
96
|
updated(t) {
|
|
95
|
-
var e,
|
|
97
|
+
var e, i;
|
|
96
98
|
if (t.has("zIndex") && this.__applyZIndex(), (t.has("maxW") || t.has("maxH")) && this.__applyMaxSize(), t.has("open")) {
|
|
97
|
-
const
|
|
98
|
-
this.__updateTriggersExpanded(), this.open && !
|
|
99
|
-
var
|
|
100
|
-
const
|
|
99
|
+
const a = t.get("open");
|
|
100
|
+
this.__updateTriggersExpanded(), this.open && !a ? this.updateComplete.then(() => {
|
|
101
|
+
var c, d, u;
|
|
102
|
+
const r = (c = this.shadowRoot) == null ? void 0 : c.querySelector(
|
|
101
103
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
102
104
|
);
|
|
103
|
-
|
|
104
|
-
}) : !this.open &&
|
|
105
|
+
r ? r.focus() : (u = (d = this.shadowRoot) == null ? void 0 : d.querySelector(".container")) == null || u.focus();
|
|
106
|
+
}) : !this.open && a && ((i = (e = this.__lastTriggerEl) == null ? void 0 : e.focus) == null || i.call(e)), this.__toggleScrollLock(this.open);
|
|
105
107
|
}
|
|
106
108
|
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && this.__applySpacing();
|
|
107
109
|
}
|
|
@@ -124,8 +126,8 @@ let i = class extends g {
|
|
|
124
126
|
return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
|
|
125
127
|
}
|
|
126
128
|
__applySpacing() {
|
|
127
|
-
const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t,
|
|
128
|
-
e ? this.style.setProperty("--scb-dialog-spacing-block-start", e) : this.style.removeProperty("--scb-dialog-spacing-block-start"),
|
|
129
|
+
const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t, a = this.mapSpacingToken(this.spacingLeft), r = this.mapSpacingToken(this.spacingRight);
|
|
130
|
+
e ? this.style.setProperty("--scb-dialog-spacing-block-start", e) : 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"), r ? this.style.setProperty("--scb-dialog-spacing-inline-end", r) : this.style.removeProperty("--scb-dialog-spacing-inline-end");
|
|
129
131
|
}
|
|
130
132
|
/* Helpers för att byta state och fire events på ett ställe. */
|
|
131
133
|
__setOpen(t) {
|
|
@@ -134,6 +136,75 @@ let i = class extends g {
|
|
|
134
136
|
__fire(t, e) {
|
|
135
137
|
this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
|
|
136
138
|
}
|
|
139
|
+
__getSlottedElements() {
|
|
140
|
+
var a;
|
|
141
|
+
const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot");
|
|
142
|
+
if (!(t instanceof HTMLSlotElement)) return [];
|
|
143
|
+
const e = t.assignedElements({ flatten: !0 }), i = [];
|
|
144
|
+
for (const r of e)
|
|
145
|
+
i.push(r, ...Array.from(r.querySelectorAll("*")));
|
|
146
|
+
return i;
|
|
147
|
+
}
|
|
148
|
+
__appendHiddenFormValue(t, e, i) {
|
|
149
|
+
const a = document.createElement("input");
|
|
150
|
+
a.type = "hidden", a.name = e, a.value = i, a.setAttribute("data-scb-dialog-generated", "true"), t.append(a);
|
|
151
|
+
}
|
|
152
|
+
__clearGeneratedFormValues(t) {
|
|
153
|
+
t.querySelectorAll('input[data-scb-dialog-generated="true"]').forEach((e) => e.remove());
|
|
154
|
+
}
|
|
155
|
+
__syncSlottedFormValues(t) {
|
|
156
|
+
this.__clearGeneratedFormValues(t), this.__getSlottedElements().forEach((i) => {
|
|
157
|
+
if (!(i instanceof HTMLElement)) return;
|
|
158
|
+
const a = (i.getAttribute("name") ?? "").trim();
|
|
159
|
+
if (!(!a || i.disabled === !0 || i.hasAttribute("disabled"))) {
|
|
160
|
+
if (i instanceof HTMLInputElement) {
|
|
161
|
+
if (i.form === t) return;
|
|
162
|
+
const c = (i.type || "").toLowerCase();
|
|
163
|
+
if (c === "checkbox" || c === "radio") {
|
|
164
|
+
i.checked && this.__appendHiddenFormValue(t, a, i.value || "on");
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
this.__appendHiddenFormValue(t, a, i.value ?? "");
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
if (i instanceof HTMLTextAreaElement) {
|
|
171
|
+
if (i.form === t) return;
|
|
172
|
+
this.__appendHiddenFormValue(t, a, i.value ?? "");
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
if (i instanceof HTMLSelectElement) {
|
|
176
|
+
if (i.form === t) return;
|
|
177
|
+
if (i.multiple) {
|
|
178
|
+
Array.from(i.selectedOptions).forEach((c) => {
|
|
179
|
+
this.__appendHiddenFormValue(t, a, c.value);
|
|
180
|
+
});
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
this.__appendHiddenFormValue(t, a, i.value ?? "");
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
switch (i.tagName) {
|
|
187
|
+
case "SCB-TEXTFIELD":
|
|
188
|
+
this.__appendHiddenFormValue(t, a, String(i.value ?? ""));
|
|
189
|
+
return;
|
|
190
|
+
case "SCB-CHECKBOX":
|
|
191
|
+
i.checked && this.__appendHiddenFormValue(t, a, String(i.value ?? i.getAttribute("value") ?? "on"));
|
|
192
|
+
return;
|
|
193
|
+
case "SCB-RADIO-BUTTON":
|
|
194
|
+
i.checked && this.__appendHiddenFormValue(t, a, String(i.value ?? i.getAttribute("value") ?? "on"));
|
|
195
|
+
return;
|
|
196
|
+
case "SCB-SWITCH":
|
|
197
|
+
(i.selected || i.checked) && this.__appendHiddenFormValue(t, a, String(i.value ?? i.getAttribute("value") ?? "on"));
|
|
198
|
+
return;
|
|
199
|
+
case "SCB-CHIP":
|
|
200
|
+
i.selected && this.__appendHiddenFormValue(t, a, String(i.value ?? i.getAttribute("value") ?? "on"));
|
|
201
|
+
return;
|
|
202
|
+
default:
|
|
203
|
+
"value" in i && this.__appendHiddenFormValue(t, a, String(i.value ?? ""));
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
}
|
|
137
208
|
/* Helper: avgör om det finns något slottat innehåll (för att välja mellan supportingText/slot). */
|
|
138
209
|
__slotIsEmpty() {
|
|
139
210
|
var e;
|
|
@@ -144,32 +215,32 @@ let i = class extends g {
|
|
|
144
215
|
/* Header: ikon (om satt), titel + ev. stäng-ikon i form/floating/iframe. */
|
|
145
216
|
renderHeader(t) {
|
|
146
217
|
const e = this.variant === "form" || this.variant === "floating" || this.variant === "iframe";
|
|
147
|
-
return
|
|
218
|
+
return l`
|
|
148
219
|
<div class="header">
|
|
149
220
|
<div class="title">
|
|
150
|
-
${this.icon ?
|
|
221
|
+
${this.icon ? l`<md-icon class="dialog-icon">${this.icon}</md-icon>` : p}
|
|
151
222
|
<div class="label" id=${t}>${this.label}</div>
|
|
152
223
|
</div>
|
|
153
|
-
${e ?
|
|
224
|
+
${e ? l`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>` : p}
|
|
154
225
|
</div>
|
|
155
226
|
`;
|
|
156
227
|
}
|
|
157
228
|
/* Content för varianter som inte använder form. Faller tillbaka till supportingText om slotten är tom. */
|
|
158
229
|
renderContentDefault(t) {
|
|
159
230
|
const e = this.__slotIsEmpty();
|
|
160
|
-
return
|
|
231
|
+
return l`
|
|
161
232
|
<div class="content" id=${t}>
|
|
162
|
-
${e && this.supportingText ?
|
|
233
|
+
${e && this.supportingText ? l`${this.supportingText}` : l`<slot></slot>`}
|
|
163
234
|
</div>
|
|
164
235
|
`;
|
|
165
236
|
}
|
|
166
237
|
/* Content för iframe-varianten med inre rundning för innehållet. */
|
|
167
238
|
renderContentIframe(t) {
|
|
168
239
|
const e = this.__slotIsEmpty();
|
|
169
|
-
return
|
|
240
|
+
return l`
|
|
170
241
|
<div class="content" id=${t}>
|
|
171
242
|
<div class="content-surface">
|
|
172
|
-
${e && this.supportingText ?
|
|
243
|
+
${e && this.supportingText ? l`${this.supportingText}` : l`<slot></slot>`}
|
|
173
244
|
</div>
|
|
174
245
|
</div>
|
|
175
246
|
`;
|
|
@@ -178,30 +249,30 @@ let i = class extends g {
|
|
|
178
249
|
renderActions() {
|
|
179
250
|
switch (this.variant) {
|
|
180
251
|
case "alert":
|
|
181
|
-
return
|
|
252
|
+
return l`<div class="actions">
|
|
182
253
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
183
254
|
</div>`;
|
|
184
255
|
case "confirm":
|
|
185
|
-
return
|
|
256
|
+
return l`<div class="actions">
|
|
186
257
|
<scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
|
|
187
258
|
<scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
|
|
188
259
|
</div>`;
|
|
189
260
|
case "choose":
|
|
190
|
-
return
|
|
261
|
+
return l`<div class="actions">
|
|
191
262
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
192
263
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
193
264
|
</div>`;
|
|
194
265
|
case "form":
|
|
195
|
-
return
|
|
266
|
+
return l`<div class="actions">
|
|
196
267
|
<scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
|
|
197
268
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
198
|
-
<scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
269
|
+
<scb-button variant="text" type="submit" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
199
270
|
</div>`;
|
|
200
271
|
case "floating":
|
|
201
272
|
case "iframe":
|
|
202
273
|
return p;
|
|
203
274
|
default:
|
|
204
|
-
return
|
|
275
|
+
return l`<div class="actions">
|
|
205
276
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
206
277
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
207
278
|
</div>`;
|
|
@@ -209,7 +280,7 @@ let i = class extends g {
|
|
|
209
280
|
}
|
|
210
281
|
/* Body skiljer på form-varianten (wrapper <form>) och övriga. */
|
|
211
282
|
renderBody(t, e) {
|
|
212
|
-
return this.variant === "form" ?
|
|
283
|
+
return this.variant === "form" ? l`
|
|
213
284
|
${this.renderHeader(t)}
|
|
214
285
|
<div class="content" id=${e}>
|
|
215
286
|
<form id=${this.formId} action=${this.formAction} method=${this.formMethod || p}>
|
|
@@ -217,12 +288,12 @@ let i = class extends g {
|
|
|
217
288
|
</form>
|
|
218
289
|
</div>
|
|
219
290
|
${this.renderActions()}
|
|
220
|
-
` : this.variant === "iframe" ?
|
|
291
|
+
` : this.variant === "iframe" ? l`${this.renderHeader(t)} ${this.renderContentIframe(e)} ${this.renderActions()}` : l`${this.renderHeader(t)} ${this.renderContentDefault(e)} ${this.renderActions()}`;
|
|
221
292
|
}
|
|
222
293
|
/* Root render: role/aria-attribut sätts här för att para ihop titel och beskrivning. */
|
|
223
294
|
render() {
|
|
224
295
|
const t = "dlg-title", e = "dlg-desc";
|
|
225
|
-
return
|
|
296
|
+
return l`
|
|
226
297
|
<div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
|
|
227
298
|
<div
|
|
228
299
|
class="container"
|
|
@@ -237,7 +308,7 @@ let i = class extends g {
|
|
|
237
308
|
`;
|
|
238
309
|
}
|
|
239
310
|
};
|
|
240
|
-
|
|
311
|
+
n.styles = h`
|
|
241
312
|
:host {
|
|
242
313
|
display:block;
|
|
243
314
|
position:relative;
|
|
@@ -359,7 +430,7 @@ i.styles = m`
|
|
|
359
430
|
|
|
360
431
|
:host([variant="iframe"]) .container {
|
|
361
432
|
--scb-dialog-min-w: var(--scb-dialog-min-w-iframe, var(--scb-dialog-min-w-floating, 360px));
|
|
362
|
-
--scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-
|
|
433
|
+
--scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-3, 8px));
|
|
363
434
|
}
|
|
364
435
|
|
|
365
436
|
:host([variant="iframe"]) .header {
|
|
@@ -443,84 +514,84 @@ i.styles = m`
|
|
|
443
514
|
}
|
|
444
515
|
|
|
445
516
|
`;
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
],
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
],
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
],
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
],
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
],
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
],
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
],
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
],
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
],
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
],
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
],
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
],
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
],
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
],
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
],
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
],
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
],
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
],
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
],
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
],
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
],
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
],
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
],
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
],
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
],
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
],
|
|
517
|
+
s([
|
|
518
|
+
o({ type: Boolean, reflect: !0 })
|
|
519
|
+
], n.prototype, "open", 2);
|
|
520
|
+
s([
|
|
521
|
+
o({ type: String, attribute: "max-w", reflect: !0 })
|
|
522
|
+
], n.prototype, "maxW", 2);
|
|
523
|
+
s([
|
|
524
|
+
o({ type: String, attribute: "max-h", reflect: !0 })
|
|
525
|
+
], n.prototype, "maxH", 2);
|
|
526
|
+
s([
|
|
527
|
+
o({ type: Number, attribute: "z-index", reflect: !0 })
|
|
528
|
+
], n.prototype, "zIndex", 2);
|
|
529
|
+
s([
|
|
530
|
+
o({ type: Boolean, attribute: !1 })
|
|
531
|
+
], n.prototype, "inSb", 2);
|
|
532
|
+
s([
|
|
533
|
+
o({ type: Boolean, attribute: "scrim-close" })
|
|
534
|
+
], n.prototype, "scrimClose", 2);
|
|
535
|
+
s([
|
|
536
|
+
o({ type: String, reflect: !0 })
|
|
537
|
+
], n.prototype, "spacing", 2);
|
|
538
|
+
s([
|
|
539
|
+
o({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
540
|
+
], n.prototype, "spacingTop", 2);
|
|
541
|
+
s([
|
|
542
|
+
o({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
543
|
+
], n.prototype, "spacingBottom", 2);
|
|
544
|
+
s([
|
|
545
|
+
o({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
546
|
+
], n.prototype, "spacingLeft", 2);
|
|
547
|
+
s([
|
|
548
|
+
o({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
549
|
+
], n.prototype, "spacingRight", 2);
|
|
550
|
+
s([
|
|
551
|
+
o({ type: String })
|
|
552
|
+
], n.prototype, "variant", 2);
|
|
553
|
+
s([
|
|
554
|
+
o({ type: String })
|
|
555
|
+
], n.prototype, "label", 2);
|
|
556
|
+
s([
|
|
557
|
+
o({ type: String })
|
|
558
|
+
], n.prototype, "icon", 2);
|
|
559
|
+
s([
|
|
560
|
+
o({ type: String, attribute: "supporting-text" })
|
|
561
|
+
], n.prototype, "supportingText", 2);
|
|
562
|
+
s([
|
|
563
|
+
o({ type: String, attribute: "ok-button" })
|
|
564
|
+
], n.prototype, "okButton", 2);
|
|
565
|
+
s([
|
|
566
|
+
o({ type: String, attribute: "cancel-button" })
|
|
567
|
+
], n.prototype, "cancelButton", 2);
|
|
568
|
+
s([
|
|
569
|
+
o({ type: String, attribute: "delete-button" })
|
|
570
|
+
], n.prototype, "deleteButton", 2);
|
|
571
|
+
s([
|
|
572
|
+
o({ type: String, attribute: "confirm-button" })
|
|
573
|
+
], n.prototype, "confirmButton", 2);
|
|
574
|
+
s([
|
|
575
|
+
o({ type: String, attribute: "deny-button" })
|
|
576
|
+
], n.prototype, "denyButton", 2);
|
|
577
|
+
s([
|
|
578
|
+
o({ type: String, attribute: "reset-button" })
|
|
579
|
+
], n.prototype, "resetButton", 2);
|
|
580
|
+
s([
|
|
581
|
+
o({ type: String, attribute: "submit-button" })
|
|
582
|
+
], n.prototype, "submitButton", 2);
|
|
583
|
+
s([
|
|
584
|
+
o({ type: String, attribute: "form-id" })
|
|
585
|
+
], n.prototype, "formId", 2);
|
|
586
|
+
s([
|
|
587
|
+
o({ type: String, attribute: "form-action" })
|
|
588
|
+
], n.prototype, "formAction", 2);
|
|
589
|
+
s([
|
|
590
|
+
o({ type: String, attribute: "form-method" })
|
|
591
|
+
], n.prototype, "formMethod", 2);
|
|
592
|
+
n = s([
|
|
593
|
+
g("scb-dialog")
|
|
594
|
+
], n);
|
|
524
595
|
export {
|
|
525
|
-
|
|
596
|
+
n as ScbDialog
|
|
526
597
|
};
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -4735,7 +4735,7 @@ ${this.value}</textarea
|
|
|
4735
4735
|
color: var(--md-sys-color-on-surface);
|
|
4736
4736
|
font-size: var(--md-sys-typescale-body-large-size);
|
|
4737
4737
|
}
|
|
4738
|
-
`,Ce([o({type:String,reflect:!0})],ce.prototype,"variant",2),Ce([o({type:String})],ce.prototype,"label",2),Ce([o({type:String})],ce.prototype,"icon",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"disabled",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"elevated",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"removable",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"selected",2),Ce([o({type:String})],ce.prototype,"href",2),Ce([o({type:String})],ce.prototype,"target",2),Ce([o({type:String})],ce.prototype,"name",2),Ce([o({type:String})],ce.prototype,"value",2),Ce([o({type:String,reflect:!0})],ce.prototype,"spacing",2),Ce([o({type:String,reflect:!0,attribute:"spacing-top"})],ce.prototype,"spacingTop",2),Ce([o({type:String,reflect:!0,attribute:"spacing-bottom"})],ce.prototype,"spacingBottom",2),Ce([o({type:String,reflect:!0,attribute:"spacing-left"})],ce.prototype,"spacingLeft",2),Ce([o({type:String,reflect:!0,attribute:"spacing-right"})],ce.prototype,"spacingRight",2),Ce([o({type:String,reflect:!0})],ce.prototype,"size",2),ce=Ce([y("scb-chip")],ce);var im=Object.defineProperty,rm=Object.getOwnPropertyDescriptor,U=(t,e,i,r)=>{for(var s=r>1?void 0:r?rm(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&im(e,i,s),s};let q=class extends _{constructor(){super(...arguments),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=()=>{var
|
|
4738
|
+
`,Ce([o({type:String,reflect:!0})],ce.prototype,"variant",2),Ce([o({type:String})],ce.prototype,"label",2),Ce([o({type:String})],ce.prototype,"icon",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"disabled",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"elevated",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"removable",2),Ce([o({type:Boolean,reflect:!0})],ce.prototype,"selected",2),Ce([o({type:String})],ce.prototype,"href",2),Ce([o({type:String})],ce.prototype,"target",2),Ce([o({type:String})],ce.prototype,"name",2),Ce([o({type:String})],ce.prototype,"value",2),Ce([o({type:String,reflect:!0})],ce.prototype,"spacing",2),Ce([o({type:String,reflect:!0,attribute:"spacing-top"})],ce.prototype,"spacingTop",2),Ce([o({type:String,reflect:!0,attribute:"spacing-bottom"})],ce.prototype,"spacingBottom",2),Ce([o({type:String,reflect:!0,attribute:"spacing-left"})],ce.prototype,"spacingLeft",2),Ce([o({type:String,reflect:!0,attribute:"spacing-right"})],ce.prototype,"spacingRight",2),Ce([o({type:String,reflect:!0})],ce.prototype,"size",2),ce=Ce([y("scb-chip")],ce);var im=Object.defineProperty,rm=Object.getOwnPropertyDescriptor,U=(t,e,i,r)=>{for(var s=r>1?void 0:r?rm(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&im(e,i,s),s};let q=class extends _{constructor(){super(...arguments),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=()=>{var i,r,s;const t=(i=this.shadowRoot)==null?void 0:i.querySelector("form");t instanceof HTMLFormElement&&(this.__clearGeneratedFormValues(t),t.reset()),(((s=(r=this.shadowRoot)==null?void 0:r.querySelector("slot"))==null?void 0:s.assignedElements({flatten:!0}))??[]).forEach(a=>{const n=a.tagName;n==="SCB-TEXTFIELD"&&(a.value=""),n==="SCB-CHECKBOX"&&(a.checked=!1),n==="SCB-RADIO-BUTTON"&&(a.checked=!1),n==="SCB-SWITCH"&&(a.selected=!1),n==="SCB-CHIP"&&(a.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector("form");t instanceof HTMLFormElement&&(this.__syncSlottedFormValues(t),t.requestSubmit()),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const e=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(s=>!s.hasAttribute("disabled"));if(!e.length)return;const i=e[0],r=e[e.length-1];t.shiftKey&&document.activeElement===i?(r.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===r&&(i.focus(),t.preventDefault())}}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"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 t=typeof this.zIndex=="number"&&Number.isFinite(this.zIndex)?this.zIndex:void 0;if(t===void 0){this.style.removeProperty("--z-dialog-scrim"),this.style.removeProperty("--z-dialog");return}this.style.setProperty("--z-dialog-scrim",String(t)),this.style.setProperty("--z-dialog",String(t+1))}__applyMaxSize(){const t=(this.maxW??"").trim(),e=(this.maxH??"").trim();t?(this.style.setProperty("--scb-dialog-max-w",t),this.style.setProperty("--scb-dialog-width",`min(${t}, 90vw)`)):(this.style.removeProperty("--scb-dialog-max-w"),this.style.removeProperty("--scb-dialog-width")),e?this.style.setProperty("--scb-dialog-max-h",e):this.style.removeProperty("--scb-dialog-max-h")}updated(t){var e,i;if(t.has("zIndex")&&this.__applyZIndex(),(t.has("maxW")||t.has("maxH"))&&this.__applyMaxSize(),t.has("open")){const r=t.get("open");this.__updateTriggersExpanded(),this.open&&!r?this.updateComplete.then(()=>{var a,n,l;const s=(a=this.shadowRoot)==null?void 0:a.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])');s?s.focus():(l=(n=this.shadowRoot)==null?void 0:n.querySelector(".container"))==null||l.focus()}):!this.open&&r&&((i=(e=this.__lastTriggerEl)==null?void 0:e.focus)==null||i.call(e)),this.__toggleScrollLock(this.open)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.__applySpacing()}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const e=document.documentElement;e.style.overflow=t?"hidden":""}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}__applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t,r=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-dialog-spacing-block-start",e):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"),r?this.style.setProperty("--scb-dialog-spacing-inline-start",r):this.style.removeProperty("--scb-dialog-spacing-inline-start"),s?this.style.setProperty("--scb-dialog-spacing-inline-end",s):this.style.removeProperty("--scb-dialog-spacing-inline-end")}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__getSlottedElements(){var r;const t=(r=this.shadowRoot)==null?void 0:r.querySelector("slot");if(!(t instanceof HTMLSlotElement))return[];const e=t.assignedElements({flatten:!0}),i=[];for(const s of e)i.push(s,...Array.from(s.querySelectorAll("*")));return i}__appendHiddenFormValue(t,e,i){const r=document.createElement("input");r.type="hidden",r.name=e,r.value=i,r.setAttribute("data-scb-dialog-generated","true"),t.append(r)}__clearGeneratedFormValues(t){t.querySelectorAll('input[data-scb-dialog-generated="true"]').forEach(e=>e.remove())}__syncSlottedFormValues(t){this.__clearGeneratedFormValues(t),this.__getSlottedElements().forEach(i=>{if(!(i instanceof HTMLElement))return;const r=(i.getAttribute("name")??"").trim();if(!(!r||i.disabled===!0||i.hasAttribute("disabled"))){if(i instanceof HTMLInputElement){if(i.form===t)return;const a=(i.type||"").toLowerCase();if(a==="checkbox"||a==="radio"){i.checked&&this.__appendHiddenFormValue(t,r,i.value||"on");return}this.__appendHiddenFormValue(t,r,i.value??"");return}if(i instanceof HTMLTextAreaElement){if(i.form===t)return;this.__appendHiddenFormValue(t,r,i.value??"");return}if(i instanceof HTMLSelectElement){if(i.form===t)return;if(i.multiple){Array.from(i.selectedOptions).forEach(a=>{this.__appendHiddenFormValue(t,r,a.value)});return}this.__appendHiddenFormValue(t,r,i.value??"");return}switch(i.tagName){case"SCB-TEXTFIELD":this.__appendHiddenFormValue(t,r,String(i.value??""));return;case"SCB-CHECKBOX":i.checked&&this.__appendHiddenFormValue(t,r,String(i.value??i.getAttribute("value")??"on"));return;case"SCB-RADIO-BUTTON":i.checked&&this.__appendHiddenFormValue(t,r,String(i.value??i.getAttribute("value")??"on"));return;case"SCB-SWITCH":(i.selected||i.checked)&&this.__appendHiddenFormValue(t,r,String(i.value??i.getAttribute("value")??"on"));return;case"SCB-CHIP":i.selected&&this.__appendHiddenFormValue(t,r,String(i.value??i.getAttribute("value")??"on"));return;default:"value"in i&&this.__appendHiddenFormValue(t,r,String(i.value??""))}}})}__slotIsEmpty(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const e=this.variant==="form"||this.variant==="floating"||this.variant==="iframe";return c`
|
|
4739
4739
|
<div class="header">
|
|
4740
4740
|
<div class="title">
|
|
4741
4741
|
${this.icon?c`<md-icon class="dialog-icon">${this.icon}</md-icon>`:u}
|
|
@@ -4764,7 +4764,7 @@ ${this.value}</textarea
|
|
|
4764
4764
|
</div>`;case"form":return c`<div class="actions">
|
|
4765
4765
|
<scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
|
|
4766
4766
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
4767
|
-
<scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
4767
|
+
<scb-button variant="text" type="submit" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
4768
4768
|
</div>`;case"floating":case"iframe":return u;default:return c`<div class="actions">
|
|
4769
4769
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
4770
4770
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
@@ -4910,7 +4910,7 @@ ${this.value}</textarea
|
|
|
4910
4910
|
|
|
4911
4911
|
:host([variant="iframe"]) .container {
|
|
4912
4912
|
--scb-dialog-min-w: var(--scb-dialog-min-w-iframe, var(--scb-dialog-min-w-floating, 360px));
|
|
4913
|
-
--scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-
|
|
4913
|
+
--scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-3, 8px));
|
|
4914
4914
|
}
|
|
4915
4915
|
|
|
4916
4916
|
:host([variant="iframe"]) .header {
|