scb-wc-test 0.1.241 → 0.1.243
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.
- package/mvc/components/scb-dialog/scb-dialog.js +73 -18
- package/package.json +2 -2
- package/scb-dialog/scb-dialog.d.ts +1 -0
- package/scb-dialog/scb-dialog.js +126 -66
- package/scb-wc-test.bundle.js +333 -278
|
@@ -1,39 +1,45 @@
|
|
|
1
|
-
import{a as h,n as
|
|
1
|
+
import{a as h,n as a,i as m,E as p,x as n,t as g}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 e=customElements.define.bind(customElements);customElements.define=function(s,c,r){try{customElements.get(s)||e(s,c,r)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(t,e,s,c)=>{for(var r=c>1?void 0:c?b(e,s):e,l=t.length-1,d;l>=0;l--)(d=t[l])&&(r=(c?d(e,s,r):d(r))||r);return c&&r&&u(e,s,r),r};let i=class extends m{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=()=>{this.shadowRoot?.querySelector("form")?.reset(),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const s=e.tagName;s==="SCB-TEXTFIELD"&&(e.value=""),s==="SCB-CHECKBOX"&&(e.checked=!1),s==="SCB-RADIO-BUTTON"&&(e.checked=!1),s==="SCB-SWITCH"&&(e.selected=!1),s==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{this.shadowRoot?.querySelector("form")?.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(r=>!r.hasAttribute("disabled"));if(!e.length)return;const s=e[0],c=e[e.length-1];t.shiftKey&&document.activeElement===s?(c.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===c&&(s.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){if(t.has("zIndex")&&this.__applyZIndex(),(t.has("maxW")||t.has("maxH"))&&this.__applyMaxSize(),t.has("open")){const e=t.get("open");this.__updateTriggersExpanded(),this.open&&!e?this.updateComplete.then(()=>{const s=this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])');s?s.focus():this.shadowRoot?.querySelector(".container")?.focus()}):!this.open&&e&&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 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,s=this.mapSpacingToken(this.spacingBottom)??t,c=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-dialog-spacing-block-start",e):this.style.removeProperty("--scb-dialog-spacing-block-start"),s?this.style.setProperty("--scb-dialog-spacing-block-end",s):this.style.removeProperty("--scb-dialog-spacing-block-end"),c?this.style.setProperty("--scb-dialog-spacing-inline-start",c):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")}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__slotIsEmpty(){const t=this.shadowRoot?.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 n`
|
|
2
2
|
<div class="header">
|
|
3
3
|
<div class="title">
|
|
4
|
-
${this.icon?
|
|
4
|
+
${this.icon?n`<md-icon class="dialog-icon">${this.icon}</md-icon>`:p}
|
|
5
5
|
<div class="label" id=${t}>${this.label}</div>
|
|
6
6
|
</div>
|
|
7
|
-
${e?
|
|
7
|
+
${e?n`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>`:p}
|
|
8
8
|
</div>
|
|
9
|
-
`}renderContentDefault(t){const e=this.__slotIsEmpty();return
|
|
9
|
+
`}renderContentDefault(t){const e=this.__slotIsEmpty();return n`
|
|
10
10
|
<div class="content" id=${t}>
|
|
11
|
-
${e&&this.supportingText?
|
|
11
|
+
${e&&this.supportingText?n`${this.supportingText}`:n`<slot></slot>`}
|
|
12
12
|
</div>
|
|
13
|
-
`}
|
|
13
|
+
`}renderContentIframe(t){const e=this.__slotIsEmpty();return n`
|
|
14
|
+
<div class="content" id=${t}>
|
|
15
|
+
<div class="content-surface">
|
|
16
|
+
${e&&this.supportingText?n`${this.supportingText}`:n`<slot></slot>`}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
`}renderActions(){switch(this.variant){case"alert":return n`<div class="actions">
|
|
14
20
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
15
|
-
</div>`;case"confirm":return
|
|
21
|
+
</div>`;case"confirm":return n`<div class="actions">
|
|
16
22
|
<scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
|
|
17
23
|
<scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
|
|
18
|
-
</div>`;case"choose":return
|
|
24
|
+
</div>`;case"choose":return n`<div class="actions">
|
|
19
25
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
20
26
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
21
|
-
</div>`;case"form":return
|
|
27
|
+
</div>`;case"form":return n`<div class="actions">
|
|
22
28
|
<scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
|
|
23
29
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
24
30
|
<scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
25
|
-
</div>`;case"floating":case"iframe":return
|
|
31
|
+
</div>`;case"floating":case"iframe":return p;default:return n`<div class="actions">
|
|
26
32
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
27
33
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
28
|
-
</div>`}}renderBody(t,e){return this.variant==="form"?
|
|
34
|
+
</div>`}}renderBody(t,e){return this.variant==="form"?n`
|
|
29
35
|
${this.renderHeader(t)}
|
|
30
36
|
<div class="content" id=${e}>
|
|
31
|
-
<form id=${this.formId} action=${this.formAction} method=${this.formMethod||
|
|
37
|
+
<form id=${this.formId} action=${this.formAction} method=${this.formMethod||p}>
|
|
32
38
|
<slot></slot>
|
|
33
39
|
</form>
|
|
34
40
|
</div>
|
|
35
41
|
${this.renderActions()}
|
|
36
|
-
`:
|
|
42
|
+
`:this.variant==="iframe"?n`${this.renderHeader(t)} ${this.renderContentIframe(e)} ${this.renderActions()}`:n`${this.renderHeader(t)} ${this.renderContentDefault(e)} ${this.renderActions()}`}render(){const t="dlg-title",e="dlg-desc";return n`
|
|
37
43
|
<div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
|
|
38
44
|
<div
|
|
39
45
|
class="container"
|
|
@@ -159,6 +165,59 @@ import{a as h,n as s,i as m,E as d,x as r,t as g}from"../../vendor/vendor.js";im
|
|
|
159
165
|
color: var(--md-sys-color-on-surface-variant);
|
|
160
166
|
}
|
|
161
167
|
|
|
168
|
+
.content-surface {
|
|
169
|
+
border-radius: calc(var(--scb-dialog-radius, var(--spacing-5, 16px)) - var(--spacing-2, 4px));
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
:host([variant="iframe"]) .container {
|
|
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-3, 8px));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
:host([variant="iframe"]) .header {
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
182
|
+
align-items: start;
|
|
183
|
+
gap: var(--spacing-2, 4px);
|
|
184
|
+
margin-bottom: var(--spacing-3, 8px);
|
|
185
|
+
padding-block: var(--scb-dialog-header-padding-block-iframe, var(--spacing-3, 8px));
|
|
186
|
+
padding-inline-start: var(--scb-dialog-header-padding-inline-start-iframe, var(--spacing-3, 8px));
|
|
187
|
+
padding-inline-end: var(--scb-dialog-header-padding-inline-end-iframe, var(--spacing-3, 8px));
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
:host([variant="iframe"]) .header .title {
|
|
191
|
+
min-width: 0;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
:host([variant="iframe"]) .header .label {
|
|
195
|
+
padding-inline-start: var(--scb-dialog-header-label-padding-inline-start-iframe, 0);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
:host([variant="iframe"]) .header .close {
|
|
199
|
+
margin-left: 0;
|
|
200
|
+
align-self: start;
|
|
201
|
+
justify-self: end;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
:host([variant="iframe"]) .content {
|
|
205
|
+
margin-bottom: 0;
|
|
206
|
+
color: inherit;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
:host([variant="iframe"]) .content-surface {
|
|
210
|
+
block-size: 100%;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
:host([variant="iframe"]) ::slotted(iframe) {
|
|
214
|
+
display: block;
|
|
215
|
+
inline-size: 100%;
|
|
216
|
+
block-size: var(--scb-dialog-iframe-height, min(70vh, 720px));
|
|
217
|
+
border: 0;
|
|
218
|
+
background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
|
|
219
|
+
}
|
|
220
|
+
|
|
162
221
|
.actions {
|
|
163
222
|
display:flex;
|
|
164
223
|
align-items:center;
|
|
@@ -180,10 +239,6 @@ import{a as h,n as s,i as m,E as d,x as r,t as g}from"../../vendor/vendor.js";im
|
|
|
180
239
|
}
|
|
181
240
|
|
|
182
241
|
:host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
|
|
183
|
-
:host([variant="iframe"]) .container {
|
|
184
|
-
--scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px);
|
|
185
|
-
padding: var(--scb-dialog-padding, var(--spacing-6, 20px)) var(--spacing-4, 12px) var(--spacing-2, 4px);
|
|
186
|
-
}
|
|
187
242
|
|
|
188
243
|
/* Choose: gör slottade radios vertikala med spacing */
|
|
189
244
|
:host([variant="choose"]) ::slotted(scb-radio-button) {
|
|
@@ -201,4 +256,4 @@ import{a as h,n as s,i as m,E as d,x as r,t as g}from"../../vendor/vendor.js";im
|
|
|
201
256
|
to { opacity: 0; }
|
|
202
257
|
}
|
|
203
258
|
|
|
204
|
-
`;o([
|
|
259
|
+
`;o([a({type:Boolean,reflect:!0})],i.prototype,"open",2);o([a({type:String,attribute:"max-w",reflect:!0})],i.prototype,"maxW",2);o([a({type:String,attribute:"max-h",reflect:!0})],i.prototype,"maxH",2);o([a({type:Number,attribute:"z-index",reflect:!0})],i.prototype,"zIndex",2);o([a({type:Boolean,attribute:!1})],i.prototype,"inSb",2);o([a({type:Boolean,attribute:"scrim-close"})],i.prototype,"scrimClose",2);o([a({type:String,reflect:!0})],i.prototype,"spacing",2);o([a({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);o([a({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);o([a({type:String,attribute:"spacing-left",reflect:!0})],i.prototype,"spacingLeft",2);o([a({type:String,attribute:"spacing-right",reflect:!0})],i.prototype,"spacingRight",2);o([a({type:String})],i.prototype,"variant",2);o([a({type:String})],i.prototype,"label",2);o([a({type:String})],i.prototype,"icon",2);o([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);o([a({type:String,attribute:"ok-button"})],i.prototype,"okButton",2);o([a({type:String,attribute:"cancel-button"})],i.prototype,"cancelButton",2);o([a({type:String,attribute:"delete-button"})],i.prototype,"deleteButton",2);o([a({type:String,attribute:"confirm-button"})],i.prototype,"confirmButton",2);o([a({type:String,attribute:"deny-button"})],i.prototype,"denyButton",2);o([a({type:String,attribute:"reset-button"})],i.prototype,"resetButton",2);o([a({type:String,attribute:"submit-button"})],i.prototype,"submitButton",2);o([a({type:String,attribute:"form-id"})],i.prototype,"formId",2);o([a({type:String,attribute:"form-action"})],i.prototype,"formAction",2);o([a({type:String,attribute:"form-method"})],i.prototype,"formMethod",2);i=o([g("scb-dialog")],i);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.243",
|
|
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": "8CC563AE17B76163336F73665B2DFF672FE9F0EB4C5D09139DCD4FA1044355B3"
|
|
386
386
|
}
|
|
@@ -54,6 +54,7 @@ export declare class ScbDialog extends LitElement {
|
|
|
54
54
|
private __slotIsEmpty;
|
|
55
55
|
private renderHeader;
|
|
56
56
|
private renderContentDefault;
|
|
57
|
+
private renderContentIframe;
|
|
57
58
|
private renderActions;
|
|
58
59
|
private renderBody;
|
|
59
60
|
render(): import('lit-html').TemplateResult<1>;
|
package/scb-dialog/scb-dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { css as m, LitElement as g, nothing as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as m, LitElement as g, nothing as p, html as n } from "lit";
|
|
2
|
+
import { property as a, customElement as u } 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,10 +8,10 @@ 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 b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (t, e,
|
|
12
|
-
for (var
|
|
13
|
-
(
|
|
14
|
-
return
|
|
11
|
+
var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (t, e, r, c) => {
|
|
12
|
+
for (var s = c > 1 ? void 0 : c ? f(e, r) : e, l = t.length - 1, d; l >= 0; l--)
|
|
13
|
+
(d = t[l]) && (s = (c ? d(e, r, s) : d(s)) || s);
|
|
14
|
+
return c && s && b(e, r, s), s;
|
|
15
15
|
};
|
|
16
16
|
let i = class extends g {
|
|
17
17
|
constructor() {
|
|
@@ -30,10 +30,10 @@ let i = class extends g {
|
|
|
30
30
|
}, this.__onDeny = () => {
|
|
31
31
|
this.__fire("deny"), this.__setOpen(!1);
|
|
32
32
|
}, this.__onReset = () => {
|
|
33
|
-
var e,
|
|
34
|
-
(
|
|
35
|
-
const
|
|
36
|
-
|
|
33
|
+
var e, r, c, s;
|
|
34
|
+
(r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("form")) == null || r.reset(), (((s = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot")) == null ? void 0 : s.assignedElements({ flatten: !0 })) ?? []).forEach((l) => {
|
|
35
|
+
const d = l.tagName;
|
|
36
|
+
d === "SCB-TEXTFIELD" && (l.value = ""), d === "SCB-CHECKBOX" && (l.checked = !1), d === "SCB-RADIO-BUTTON" && (l.checked = !1), d === "SCB-SWITCH" && (l.selected = !1), d === "SCB-CHIP" && (l.selected = !1);
|
|
37
37
|
}), this.__fire("reset");
|
|
38
38
|
}, this.__onSubmit = () => {
|
|
39
39
|
var t, e;
|
|
@@ -44,10 +44,10 @@ let i = class extends g {
|
|
|
44
44
|
this.shadowRoot.querySelectorAll(
|
|
45
45
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
46
46
|
)
|
|
47
|
-
).filter((
|
|
47
|
+
).filter((s) => !s.hasAttribute("disabled"));
|
|
48
48
|
if (!e.length) return;
|
|
49
|
-
const
|
|
50
|
-
t.shiftKey && document.activeElement ===
|
|
49
|
+
const r = e[0], c = e[e.length - 1];
|
|
50
|
+
t.shiftKey && document.activeElement === r ? (c.focus(), t.preventDefault()) : !t.shiftKey && document.activeElement === c && (r.focus(), t.preventDefault());
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
/* Triggers + ESC + fokusåterställning
|
|
@@ -92,16 +92,16 @@ let i = class extends g {
|
|
|
92
92
|
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
93
|
}
|
|
94
94
|
updated(t) {
|
|
95
|
-
var e,
|
|
95
|
+
var e, r;
|
|
96
96
|
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 l,
|
|
100
|
-
const
|
|
97
|
+
const c = t.get("open");
|
|
98
|
+
this.__updateTriggersExpanded(), this.open && !c ? this.updateComplete.then(() => {
|
|
99
|
+
var l, d, h;
|
|
100
|
+
const s = (l = this.shadowRoot) == null ? void 0 : l.querySelector(
|
|
101
101
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
102
102
|
);
|
|
103
|
-
|
|
104
|
-
}) : !this.open &&
|
|
103
|
+
s ? s.focus() : (h = (d = this.shadowRoot) == null ? void 0 : d.querySelector(".container")) == null || h.focus();
|
|
104
|
+
}) : !this.open && c && ((r = (e = this.__lastTriggerEl) == null ? void 0 : e.focus) == null || r.call(e)), this.__toggleScrollLock(this.open);
|
|
105
105
|
}
|
|
106
106
|
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && this.__applySpacing();
|
|
107
107
|
}
|
|
@@ -124,8 +124,8 @@ let i = class extends g {
|
|
|
124
124
|
return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
|
|
125
125
|
}
|
|
126
126
|
__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"),
|
|
127
|
+
const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, r = this.mapSpacingToken(this.spacingBottom) ?? t, c = this.mapSpacingToken(this.spacingLeft), s = this.mapSpacingToken(this.spacingRight);
|
|
128
|
+
e ? this.style.setProperty("--scb-dialog-spacing-block-start", e) : this.style.removeProperty("--scb-dialog-spacing-block-start"), r ? this.style.setProperty("--scb-dialog-spacing-block-end", r) : this.style.removeProperty("--scb-dialog-spacing-block-end"), c ? this.style.setProperty("--scb-dialog-spacing-inline-start", c) : 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");
|
|
129
129
|
}
|
|
130
130
|
/* Helpers för att byta state och fire events på ett ställe. */
|
|
131
131
|
__setOpen(t) {
|
|
@@ -144,22 +144,33 @@ let i = class extends g {
|
|
|
144
144
|
/* Header: ikon (om satt), titel + ev. stäng-ikon i form/floating/iframe. */
|
|
145
145
|
renderHeader(t) {
|
|
146
146
|
const e = this.variant === "form" || this.variant === "floating" || this.variant === "iframe";
|
|
147
|
-
return
|
|
147
|
+
return n`
|
|
148
148
|
<div class="header">
|
|
149
149
|
<div class="title">
|
|
150
|
-
${this.icon ?
|
|
150
|
+
${this.icon ? n`<md-icon class="dialog-icon">${this.icon}</md-icon>` : p}
|
|
151
151
|
<div class="label" id=${t}>${this.label}</div>
|
|
152
152
|
</div>
|
|
153
|
-
${e ?
|
|
153
|
+
${e ? n`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>` : p}
|
|
154
154
|
</div>
|
|
155
155
|
`;
|
|
156
156
|
}
|
|
157
157
|
/* Content för varianter som inte använder form. Faller tillbaka till supportingText om slotten är tom. */
|
|
158
158
|
renderContentDefault(t) {
|
|
159
159
|
const e = this.__slotIsEmpty();
|
|
160
|
-
return
|
|
160
|
+
return n`
|
|
161
161
|
<div class="content" id=${t}>
|
|
162
|
-
${e && this.supportingText ?
|
|
162
|
+
${e && this.supportingText ? n`${this.supportingText}` : n`<slot></slot>`}
|
|
163
|
+
</div>
|
|
164
|
+
`;
|
|
165
|
+
}
|
|
166
|
+
/* Content för iframe-varianten med inre rundning för innehållet. */
|
|
167
|
+
renderContentIframe(t) {
|
|
168
|
+
const e = this.__slotIsEmpty();
|
|
169
|
+
return n`
|
|
170
|
+
<div class="content" id=${t}>
|
|
171
|
+
<div class="content-surface">
|
|
172
|
+
${e && this.supportingText ? n`${this.supportingText}` : n`<slot></slot>`}
|
|
173
|
+
</div>
|
|
163
174
|
</div>
|
|
164
175
|
`;
|
|
165
176
|
}
|
|
@@ -167,30 +178,30 @@ let i = class extends g {
|
|
|
167
178
|
renderActions() {
|
|
168
179
|
switch (this.variant) {
|
|
169
180
|
case "alert":
|
|
170
|
-
return
|
|
181
|
+
return n`<div class="actions">
|
|
171
182
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
172
183
|
</div>`;
|
|
173
184
|
case "confirm":
|
|
174
|
-
return
|
|
185
|
+
return n`<div class="actions">
|
|
175
186
|
<scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
|
|
176
187
|
<scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
|
|
177
188
|
</div>`;
|
|
178
189
|
case "choose":
|
|
179
|
-
return
|
|
190
|
+
return n`<div class="actions">
|
|
180
191
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
181
192
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
182
193
|
</div>`;
|
|
183
194
|
case "form":
|
|
184
|
-
return
|
|
195
|
+
return n`<div class="actions">
|
|
185
196
|
<scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
|
|
186
197
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
187
198
|
<scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
|
|
188
199
|
</div>`;
|
|
189
200
|
case "floating":
|
|
190
201
|
case "iframe":
|
|
191
|
-
return
|
|
202
|
+
return p;
|
|
192
203
|
default:
|
|
193
|
-
return
|
|
204
|
+
return n`<div class="actions">
|
|
194
205
|
<scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
|
|
195
206
|
<scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
|
|
196
207
|
</div>`;
|
|
@@ -198,20 +209,20 @@ let i = class extends g {
|
|
|
198
209
|
}
|
|
199
210
|
/* Body skiljer på form-varianten (wrapper <form>) och övriga. */
|
|
200
211
|
renderBody(t, e) {
|
|
201
|
-
return this.variant === "form" ?
|
|
212
|
+
return this.variant === "form" ? n`
|
|
202
213
|
${this.renderHeader(t)}
|
|
203
214
|
<div class="content" id=${e}>
|
|
204
|
-
<form id=${this.formId} action=${this.formAction} method=${this.formMethod ||
|
|
215
|
+
<form id=${this.formId} action=${this.formAction} method=${this.formMethod || p}>
|
|
205
216
|
<slot></slot>
|
|
206
217
|
</form>
|
|
207
218
|
</div>
|
|
208
219
|
${this.renderActions()}
|
|
209
|
-
` :
|
|
220
|
+
` : this.variant === "iframe" ? n`${this.renderHeader(t)} ${this.renderContentIframe(e)} ${this.renderActions()}` : n`${this.renderHeader(t)} ${this.renderContentDefault(e)} ${this.renderActions()}`;
|
|
210
221
|
}
|
|
211
222
|
/* Root render: role/aria-attribut sätts här för att para ihop titel och beskrivning. */
|
|
212
223
|
render() {
|
|
213
224
|
const t = "dlg-title", e = "dlg-desc";
|
|
214
|
-
return
|
|
225
|
+
return n`
|
|
215
226
|
<div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
|
|
216
227
|
<div
|
|
217
228
|
class="container"
|
|
@@ -340,6 +351,59 @@ i.styles = m`
|
|
|
340
351
|
color: var(--md-sys-color-on-surface-variant);
|
|
341
352
|
}
|
|
342
353
|
|
|
354
|
+
.content-surface {
|
|
355
|
+
border-radius: calc(var(--scb-dialog-radius, var(--spacing-5, 16px)) - var(--spacing-2, 4px));
|
|
356
|
+
overflow: hidden;
|
|
357
|
+
background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
:host([variant="iframe"]) .container {
|
|
361
|
+
--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-3, 8px));
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
:host([variant="iframe"]) .header {
|
|
366
|
+
display: grid;
|
|
367
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
368
|
+
align-items: start;
|
|
369
|
+
gap: var(--spacing-2, 4px);
|
|
370
|
+
margin-bottom: var(--spacing-3, 8px);
|
|
371
|
+
padding-block: var(--scb-dialog-header-padding-block-iframe, var(--spacing-3, 8px));
|
|
372
|
+
padding-inline-start: var(--scb-dialog-header-padding-inline-start-iframe, var(--spacing-3, 8px));
|
|
373
|
+
padding-inline-end: var(--scb-dialog-header-padding-inline-end-iframe, var(--spacing-3, 8px));
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
:host([variant="iframe"]) .header .title {
|
|
377
|
+
min-width: 0;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
:host([variant="iframe"]) .header .label {
|
|
381
|
+
padding-inline-start: var(--scb-dialog-header-label-padding-inline-start-iframe, 0);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
:host([variant="iframe"]) .header .close {
|
|
385
|
+
margin-left: 0;
|
|
386
|
+
align-self: start;
|
|
387
|
+
justify-self: end;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
:host([variant="iframe"]) .content {
|
|
391
|
+
margin-bottom: 0;
|
|
392
|
+
color: inherit;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
:host([variant="iframe"]) .content-surface {
|
|
396
|
+
block-size: 100%;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
:host([variant="iframe"]) ::slotted(iframe) {
|
|
400
|
+
display: block;
|
|
401
|
+
inline-size: 100%;
|
|
402
|
+
block-size: var(--scb-dialog-iframe-height, min(70vh, 720px));
|
|
403
|
+
border: 0;
|
|
404
|
+
background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
|
|
405
|
+
}
|
|
406
|
+
|
|
343
407
|
.actions {
|
|
344
408
|
display:flex;
|
|
345
409
|
align-items:center;
|
|
@@ -361,10 +425,6 @@ i.styles = m`
|
|
|
361
425
|
}
|
|
362
426
|
|
|
363
427
|
:host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
|
|
364
|
-
:host([variant="iframe"]) .container {
|
|
365
|
-
--scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px);
|
|
366
|
-
padding: var(--scb-dialog-padding, var(--spacing-6, 20px)) var(--spacing-4, 12px) var(--spacing-2, 4px);
|
|
367
|
-
}
|
|
368
428
|
|
|
369
429
|
/* Choose: gör slottade radios vertikala med spacing */
|
|
370
430
|
:host([variant="choose"]) ::slotted(scb-radio-button) {
|
|
@@ -384,79 +444,79 @@ i.styles = m`
|
|
|
384
444
|
|
|
385
445
|
`;
|
|
386
446
|
o([
|
|
387
|
-
|
|
447
|
+
a({ type: Boolean, reflect: !0 })
|
|
388
448
|
], i.prototype, "open", 2);
|
|
389
449
|
o([
|
|
390
|
-
|
|
450
|
+
a({ type: String, attribute: "max-w", reflect: !0 })
|
|
391
451
|
], i.prototype, "maxW", 2);
|
|
392
452
|
o([
|
|
393
|
-
|
|
453
|
+
a({ type: String, attribute: "max-h", reflect: !0 })
|
|
394
454
|
], i.prototype, "maxH", 2);
|
|
395
455
|
o([
|
|
396
|
-
|
|
456
|
+
a({ type: Number, attribute: "z-index", reflect: !0 })
|
|
397
457
|
], i.prototype, "zIndex", 2);
|
|
398
458
|
o([
|
|
399
|
-
|
|
459
|
+
a({ type: Boolean, attribute: !1 })
|
|
400
460
|
], i.prototype, "inSb", 2);
|
|
401
461
|
o([
|
|
402
|
-
|
|
462
|
+
a({ type: Boolean, attribute: "scrim-close" })
|
|
403
463
|
], i.prototype, "scrimClose", 2);
|
|
404
464
|
o([
|
|
405
|
-
|
|
465
|
+
a({ type: String, reflect: !0 })
|
|
406
466
|
], i.prototype, "spacing", 2);
|
|
407
467
|
o([
|
|
408
|
-
|
|
468
|
+
a({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
409
469
|
], i.prototype, "spacingTop", 2);
|
|
410
470
|
o([
|
|
411
|
-
|
|
471
|
+
a({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
412
472
|
], i.prototype, "spacingBottom", 2);
|
|
413
473
|
o([
|
|
414
|
-
|
|
474
|
+
a({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
415
475
|
], i.prototype, "spacingLeft", 2);
|
|
416
476
|
o([
|
|
417
|
-
|
|
477
|
+
a({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
418
478
|
], i.prototype, "spacingRight", 2);
|
|
419
479
|
o([
|
|
420
|
-
|
|
480
|
+
a({ type: String })
|
|
421
481
|
], i.prototype, "variant", 2);
|
|
422
482
|
o([
|
|
423
|
-
|
|
483
|
+
a({ type: String })
|
|
424
484
|
], i.prototype, "label", 2);
|
|
425
485
|
o([
|
|
426
|
-
|
|
486
|
+
a({ type: String })
|
|
427
487
|
], i.prototype, "icon", 2);
|
|
428
488
|
o([
|
|
429
|
-
|
|
489
|
+
a({ type: String, attribute: "supporting-text" })
|
|
430
490
|
], i.prototype, "supportingText", 2);
|
|
431
491
|
o([
|
|
432
|
-
|
|
492
|
+
a({ type: String, attribute: "ok-button" })
|
|
433
493
|
], i.prototype, "okButton", 2);
|
|
434
494
|
o([
|
|
435
|
-
|
|
495
|
+
a({ type: String, attribute: "cancel-button" })
|
|
436
496
|
], i.prototype, "cancelButton", 2);
|
|
437
497
|
o([
|
|
438
|
-
|
|
498
|
+
a({ type: String, attribute: "delete-button" })
|
|
439
499
|
], i.prototype, "deleteButton", 2);
|
|
440
500
|
o([
|
|
441
|
-
|
|
501
|
+
a({ type: String, attribute: "confirm-button" })
|
|
442
502
|
], i.prototype, "confirmButton", 2);
|
|
443
503
|
o([
|
|
444
|
-
|
|
504
|
+
a({ type: String, attribute: "deny-button" })
|
|
445
505
|
], i.prototype, "denyButton", 2);
|
|
446
506
|
o([
|
|
447
|
-
|
|
507
|
+
a({ type: String, attribute: "reset-button" })
|
|
448
508
|
], i.prototype, "resetButton", 2);
|
|
449
509
|
o([
|
|
450
|
-
|
|
510
|
+
a({ type: String, attribute: "submit-button" })
|
|
451
511
|
], i.prototype, "submitButton", 2);
|
|
452
512
|
o([
|
|
453
|
-
|
|
513
|
+
a({ type: String, attribute: "form-id" })
|
|
454
514
|
], i.prototype, "formId", 2);
|
|
455
515
|
o([
|
|
456
|
-
|
|
516
|
+
a({ type: String, attribute: "form-action" })
|
|
457
517
|
], i.prototype, "formAction", 2);
|
|
458
518
|
o([
|
|
459
|
-
|
|
519
|
+
a({ type: String, attribute: "form-method" })
|
|
460
520
|
], i.prototype, "formMethod", 2);
|
|
461
521
|
i = o([
|
|
462
522
|
u("scb-dialog")
|