scb-wc-test 0.1.364 → 0.1.366
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-calendar-card/scb-calendar-card.js +5 -2
- package/mvc/components/scb-card/scb-card.js +1 -1
- package/mvc/components/scb-dialog/scb-dialog.js +3 -3
- package/mvc/components/scb-overlay/scb-overlay.js +13 -6
- package/mvc/components/scb-segmented-button/scb-segmented-button.js +1 -1
- package/mvc/components/scb-stepper/scb-step.js +10 -1
- package/package.json +2 -2
- package/scb-calendar-card/scb-calendar-card.js +4 -1
- package/scb-card/scb-card.js +1 -1
- package/scb-dialog/scb-dialog.js +1 -1
- package/scb-overlay/scb-overlay.d.ts +8 -0
- package/scb-overlay/scb-overlay.js +68 -17
- package/scb-segmented-button/scb-segmented-button.js +1 -1
- package/scb-stepper/scb-step.js +10 -1
- package/scb-wc-test.bundle.js +80 -61
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../../vendor/vendor-lit.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import"../../vendor/vendor-material.js";import{_ as z,b as w,g as k,h as t,y as l}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as _,t as m}from"../../vendor/assertClassBrand.js";import{t as
|
|
2
|
+
import"../../vendor/vendor-material.js";import{_ as z,b as w,g as k,h as t,y as l}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as i}from"../../vendor/decorate.js";import{n as _,t as m}from"../../vendor/assertClassBrand.js";import{t as y}from"../../vendor/preload-helper.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(r,c,s){try{customElements.get(r)||e(r,c,s)}catch(g){var h=String(g||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw g}}}}catch{}})();var d,o,p,a=(d=new WeakSet,o=class extends z{constructor(...e){super(...e),_(this,d),this.variant="default",this.size="medium",this.date=null,this.direction="horizontal",this.title="",this.calendarCardTitle="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.width="",this.maxWidth="",this.minWidth="",this.height="",this.maxHeight="",this.minHeight="",this.sizing="stretch",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}async firstUpdated(){p.__iconLoaded||(await y(()=>import("../../vendor/vendor-material.js").then(e=>e.p),__vite__mapDeps([0,1,2]),import.meta.url),p.__iconLoaded=!0),p.__rippleLoaded||(await y(()=>import("../../vendor/vendor-material.js").then(e=>e.f),__vite__mapDeps([0,1,2]),import.meta.url),p.__rippleLoaded=!0),this.__applyInnerSizing(),m(d,this,u).call(this)}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",c=this.cardHref?"clickable":"",{day:s,month:h}=m(d,this,S).call(this),g=this.mediaWidth&&this.mediaWidth.trim()!==""?this.mediaWidth:"",b=this.mediaHeight&&this.mediaHeight.trim()!==""?this.mediaHeight:"",v=this.mediaAspect&&this.mediaAspect.trim()!==""?this.mediaAspect:"",x=`${g?`inline-size:${g};`:""}${b?`block-size:${b};`:""}${v?`aspect-ratio:${v};`:""}`;return l`
|
|
3
3
|
<div
|
|
4
4
|
class="calendar-card ${r} ${c} ${e}"
|
|
5
5
|
role="${this.cardHref?"link":"group"}"
|
|
@@ -165,7 +165,7 @@ import"../../vendor/vendor-material.js";import{_ as z,b as w,g as k,h as t,y as
|
|
|
165
165
|
position: relative;
|
|
166
166
|
display: flex;
|
|
167
167
|
color: var(--md-sys-color-on-surface, #0f0865);
|
|
168
|
-
font-family: var(--brand, Inter);
|
|
168
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
169
169
|
font-style: normal;
|
|
170
170
|
flex-direction: column;
|
|
171
171
|
align-items: flex-start;
|
|
@@ -287,6 +287,7 @@ import"../../vendor/vendor-material.js";import{_ as z,b as w,g as k,h as t,y as
|
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
.title {
|
|
290
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
290
291
|
font-size: var(--scb-calendar-card-title-font-size);
|
|
291
292
|
font-weight: var(--weight-bold, 700);
|
|
292
293
|
line-height: var(--scb-calendar-card-title-line-height);
|
|
@@ -316,6 +317,7 @@ import"../../vendor/vendor-material.js";import{_ as z,b as w,g as k,h as t,y as
|
|
|
316
317
|
}
|
|
317
318
|
|
|
318
319
|
.subtitle {
|
|
320
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
319
321
|
font-size: var(--scb-calendar-card-subtitle-font-size);
|
|
320
322
|
font-weight: var(--weight-semibold, 600);
|
|
321
323
|
line-height: var(--scb-calendar-card-subtitle-line-height);
|
|
@@ -329,6 +331,7 @@ import"../../vendor/vendor-material.js";import{_ as z,b as w,g as k,h as t,y as
|
|
|
329
331
|
}
|
|
330
332
|
|
|
331
333
|
.supporting-text {
|
|
334
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
332
335
|
font-size: var(--scb-calendar-card-supporting-font-size);
|
|
333
336
|
font-weight: var(--weight-regular, 400);
|
|
334
337
|
line-height: var(--scb-calendar-card-supporting-line-height);
|
|
@@ -424,7 +424,7 @@ import"../../vendor/vendor-material.js";import{_ as M,b as V,g as j,h as a,v,y a
|
|
|
424
424
|
|
|
425
425
|
.scb-card {
|
|
426
426
|
color: var(--md-sys-color-on-surface, #0F0865);
|
|
427
|
-
font-family: var(--brand-font, "Inter", sans-serif);
|
|
427
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
428
428
|
display: flex;
|
|
429
429
|
position: relative;
|
|
430
430
|
border-radius: var(--md-sys-shape-corner-large, 16px);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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
|
|
1
|
+
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 o}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,n=(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`
|
|
2
2
|
<div class="header">
|
|
3
3
|
<div class="title">
|
|
4
4
|
${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:d}
|
|
@@ -217,7 +217,7 @@ import"../../vendor/vendor-material.js";import{_ as g,b as f,g as b,h as s,v as
|
|
|
217
217
|
inline-size: 100%;
|
|
218
218
|
block-size: var(--scb-dialog-iframe-height, min(70vh, 720px));
|
|
219
219
|
border: 0;
|
|
220
|
-
background: var(--md-sys-color-surface
|
|
220
|
+
background: var(--md-sys-color-surface);
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
.actions {
|
|
@@ -262,4 +262,4 @@ import"../../vendor/vendor-material.js";import{_ as g,b as f,g as b,h as s,v as
|
|
|
262
262
|
to { opacity: 0; }
|
|
263
263
|
}
|
|
264
264
|
|
|
265
|
-
`,h);
|
|
265
|
+
`,h);o([s({type:Boolean,reflect:!0})],n.prototype,"open",void 0);o([s({type:String,attribute:"max-w",reflect:!0})],n.prototype,"maxW",void 0);o([s({type:String,attribute:"max-h",reflect:!0})],n.prototype,"maxH",void 0);o([s({type:Number,attribute:"z-index",reflect:!0})],n.prototype,"zIndex",void 0);o([s({type:Boolean,attribute:!1})],n.prototype,"inSb",void 0);o([s({type:Boolean,attribute:"scrim-close"})],n.prototype,"scrimClose",void 0);o([s({type:String,reflect:!0})],n.prototype,"spacing",void 0);o([s({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",void 0);o([s({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",void 0);o([s({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",void 0);o([s({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",void 0);o([s({type:String})],n.prototype,"variant",void 0);o([s({type:String})],n.prototype,"label",void 0);o([s({type:String})],n.prototype,"icon",void 0);o([s({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",void 0);o([s({type:String,attribute:"ok-button"})],n.prototype,"okButton",void 0);o([s({type:String,attribute:"cancel-button"})],n.prototype,"cancelButton",void 0);o([s({type:String,attribute:"delete-button"})],n.prototype,"deleteButton",void 0);o([s({type:String,attribute:"confirm-button"})],n.prototype,"confirmButton",void 0);o([s({type:String,attribute:"deny-button"})],n.prototype,"denyButton",void 0);o([s({type:String,attribute:"reset-button"})],n.prototype,"resetButton",void 0);o([s({type:String,attribute:"submit-button"})],n.prototype,"submitButton",void 0);o([s({type:String,attribute:"form-id"})],n.prototype,"formId",void 0);o([s({type:String,attribute:"form-action"})],n.prototype,"formAction",void 0);o([s({type:String,attribute:"form-method"})],n.prototype,"formMethod",void 0);n=o([b("scb-dialog")],n);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{_ as
|
|
2
|
-
<div class="scrim" @click=${
|
|
3
|
-
<div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel||
|
|
1
|
+
import{_ as L,b as w,g as z,h as f,v as g,y as A}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as u}from"../../vendor/decorate.js";import{n as C,t as r}from"../../vendor/assertClassBrand.js";import{n as k,r as S,t as y}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(t,a,h){try{customElements.get(t)||s(t,a,h)}catch(p){var d=String(p||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var n,v,_,c,e,l=(n=new WeakSet,v=new WeakMap,_=new WeakMap,c=class extends L{constructor(...s){super(...s),C(this,n),S(this,v,void 0),S(this,_,void 0),this.open=!1,this.variant="scrim",this.isStatic=!1,this.ariaLabel="",this.__lastTriggerEl=null,k(v,this,t=>{this.isStatic||r(n,this,O).call(this,t)||r(n,this,x).call(this)}),k(_,this,t=>{this.open&&t.key==="Escape"&&r(n,this,x).call(this)})}static __handleDocClick(s){const t=s.composedPath();for(const a of t){if(!(a instanceof Element))continue;const h=a.getAttribute("data-overlay-open"),d=a.getAttribute("data-overlay-close"),p=a.getAttribute("data-overlay-toggle"),E=a.getAttribute("aria-controls"),m=h||d||p||E;if(!m)continue;const o=e.__instances.get(m);if(!o){e.__instances.delete(m);continue}o.__lastTriggerEl=a,h?r(n,o,b).call(o,!0):d?r(n,o,b).call(o,!1):r(n,o,b).call(o,!o.open);break}}static __ensureDocListener(){e.__docListenerAttached||(document.addEventListener("click",e.__handleDocClick,!0),e.__docListenerAttached=!0)}static __maybeRemoveDocListener(){!e.__docListenerAttached||e.__instances.size>0||(document.removeEventListener("click",e.__handleDocClick,!0),e.__docListenerAttached=!1)}render(){return this.open?A`
|
|
2
|
+
<div class="scrim" @click=${y(v,this)}>
|
|
3
|
+
<div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel||g}">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|
|
6
6
|
</div>
|
|
7
|
-
`:
|
|
7
|
+
`:g}connectedCallback(){super.connectedCallback(),this.id&&e.__instances.set(this.id,this),e.__ensureDocListener(),window.addEventListener("keydown",y(_,this))}updated(s){s.has("open")&&r(n,this,D).call(this)}disconnectedCallback(){this.id&&e.__instances.delete(this.id),e.__maybeRemoveDocListener(),window.removeEventListener("keydown",y(_,this)),super.disconnectedCallback()}},e=c,c.__instances=new Map,c.__docListenerAttached=!1,c.styles=w`
|
|
8
8
|
:host {
|
|
9
9
|
position: fixed;
|
|
10
10
|
inset: 0;
|
|
@@ -23,10 +23,17 @@ import{_ as k,b as x,g,h as b,v as h,y as S}from"../../vendor/vendor.js";import"
|
|
|
23
23
|
inline-size: 100%;
|
|
24
24
|
block-size: 100%;
|
|
25
25
|
padding: var(--scb-overlay-padding, var(--spacing-6, 24px));
|
|
26
|
-
background: var(
|
|
26
|
+
background: var(
|
|
27
|
+
--scb-overlay-backdrop,
|
|
28
|
+
color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent)
|
|
29
|
+
);
|
|
27
30
|
box-sizing: border-box;
|
|
28
31
|
}
|
|
29
32
|
|
|
33
|
+
:host([variant='solid']) .scrim {
|
|
34
|
+
background: var(--md-sys-color-surface);
|
|
35
|
+
}
|
|
36
|
+
|
|
30
37
|
.content {
|
|
31
38
|
position: relative;
|
|
32
39
|
max-inline-size: 100%;
|
|
@@ -39,4 +46,4 @@ import{_ as k,b as x,g,h as b,v as h,y as S}from"../../vendor/vendor.js";import"
|
|
|
39
46
|
max-inline-size: 100%;
|
|
40
47
|
max-block-size: 100%;
|
|
41
48
|
}
|
|
42
|
-
`,
|
|
49
|
+
`,c);function b(i){this.open=i}function x(){this.open&&(this.isStatic||(r(n,this,b).call(this,!1),this.dispatchEvent(new CustomEvent("scb-overlay-dismiss",{bubbles:!0,composed:!0}))))}function O(i){const s=this.renderRoot.querySelector("slot");if(!(s instanceof HTMLSlotElement))return!1;const t=i.composedPath();return s.assignedNodes({flatten:!0}).some(a=>t.includes(a))}function D(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-overlay-toggle="${this.id}"], [data-overlay-open="${this.id}"], [data-overlay-close="${this.id}"]`).forEach(i=>{i.hasAttribute("aria-controls")&&i.setAttribute("aria-expanded",String(this.open))})}u([f({type:Boolean,reflect:!0})],l.prototype,"open",void 0);u([f({type:String,reflect:!0})],l.prototype,"variant",void 0);u([f({type:Boolean,reflect:!0,attribute:"static"})],l.prototype,"isStatic",void 0);u([f({type:String,attribute:"aria-label"})],l.prototype,"ariaLabel",void 0);l=e=u([z("scb-overlay")],l);
|
|
@@ -7,7 +7,7 @@ import{_ as p,b as g,g as b,h as r,y as f}from"../../vendor/vendor.js";import"..
|
|
|
7
7
|
display: grid;
|
|
8
8
|
grid-auto-flow: column;
|
|
9
9
|
grid-auto-columns: 1fr;
|
|
10
|
-
font-family: var(--brand, Inter);
|
|
10
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
11
11
|
margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
|
|
12
12
|
margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
|
|
13
13
|
margin-inline-start: var(--scb-segmented-button-spacing-inline-start, 0);
|
|
@@ -192,10 +192,19 @@ import"../../vendor/vendor-material.js";import{_ as b,b as p,g as h,h as a,y as
|
|
|
192
192
|
}
|
|
193
193
|
:host([variant="vertical"]) .label{
|
|
194
194
|
margin-top: 0;
|
|
195
|
+
max-width: none;
|
|
196
|
+
text-align: left;
|
|
197
|
+
justify-items: start;
|
|
198
|
+
word-break: normal;
|
|
199
|
+
}
|
|
200
|
+
:host([variant="vertical"]) .sub-label{
|
|
201
|
+
text-align: left;
|
|
202
|
+
justify-items: start;
|
|
203
|
+
word-break: normal;
|
|
195
204
|
}
|
|
196
205
|
:host([variant="vertical"]) .content{
|
|
197
206
|
align-items: flex-start;
|
|
198
|
-
|
|
207
|
+
min-width: 0;
|
|
199
208
|
}
|
|
200
209
|
:host([symbol-variant="marker"]) .symbol {
|
|
201
210
|
min-width: 16px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.366",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -436,5 +436,5 @@
|
|
|
436
436
|
},
|
|
437
437
|
"./mvc/*": "./mvc/*"
|
|
438
438
|
},
|
|
439
|
-
"buildHash": "
|
|
439
|
+
"buildHash": "6A4E29FD10E012D3303FE986637ADF6CEA6A1F94BF922D3863E10337A372BE54"
|
|
440
440
|
}
|
|
@@ -161,7 +161,7 @@ var o, s = class extends t {
|
|
|
161
161
|
position: relative;
|
|
162
162
|
display: flex;
|
|
163
163
|
color: var(--md-sys-color-on-surface, #0f0865);
|
|
164
|
-
font-family: var(--brand, Inter);
|
|
164
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
165
165
|
font-style: normal;
|
|
166
166
|
flex-direction: column;
|
|
167
167
|
align-items: flex-start;
|
|
@@ -283,6 +283,7 @@ var o, s = class extends t {
|
|
|
283
283
|
}
|
|
284
284
|
|
|
285
285
|
.title {
|
|
286
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
286
287
|
font-size: var(--scb-calendar-card-title-font-size);
|
|
287
288
|
font-weight: var(--weight-bold, 700);
|
|
288
289
|
line-height: var(--scb-calendar-card-title-line-height);
|
|
@@ -312,6 +313,7 @@ var o, s = class extends t {
|
|
|
312
313
|
}
|
|
313
314
|
|
|
314
315
|
.subtitle {
|
|
316
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
315
317
|
font-size: var(--scb-calendar-card-subtitle-font-size);
|
|
316
318
|
font-weight: var(--weight-semibold, 600);
|
|
317
319
|
line-height: var(--scb-calendar-card-subtitle-line-height);
|
|
@@ -325,6 +327,7 @@ var o, s = class extends t {
|
|
|
325
327
|
}
|
|
326
328
|
|
|
327
329
|
.supporting-text {
|
|
330
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
328
331
|
font-size: var(--scb-calendar-card-supporting-font-size);
|
|
329
332
|
font-weight: var(--weight-regular, 400);
|
|
330
333
|
line-height: var(--scb-calendar-card-supporting-line-height);
|
package/scb-card/scb-card.js
CHANGED
|
@@ -245,7 +245,7 @@ var s, c = {
|
|
|
245
245
|
|
|
246
246
|
.scb-card {
|
|
247
247
|
color: var(--md-sys-color-on-surface, #0F0865);
|
|
248
|
-
font-family: var(--brand-font, "Inter", sans-serif);
|
|
248
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
249
249
|
display: flex;
|
|
250
250
|
position: relative;
|
|
251
251
|
border-radius: var(--md-sys-shape-corner-large, 16px);
|
package/scb-dialog/scb-dialog.js
CHANGED
|
@@ -214,7 +214,7 @@ var s = class extends t {
|
|
|
214
214
|
inline-size: 100%;
|
|
215
215
|
block-size: var(--scb-dialog-iframe-height, min(70vh, 720px));
|
|
216
216
|
border: 0;
|
|
217
|
-
background: var(--md-sys-color-surface
|
|
217
|
+
background: var(--md-sys-color-surface);
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
.actions {
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { LitElement, nothing } from 'lit';
|
|
2
2
|
export declare class ScbOverlay extends LitElement {
|
|
3
3
|
#private;
|
|
4
|
+
private static __instances;
|
|
5
|
+
private static __docListenerAttached;
|
|
6
|
+
private static __handleDocClick;
|
|
7
|
+
private static __ensureDocListener;
|
|
8
|
+
private static __maybeRemoveDocListener;
|
|
4
9
|
open: boolean;
|
|
10
|
+
variant: 'scrim' | 'solid';
|
|
5
11
|
isStatic: boolean;
|
|
6
12
|
ariaLabel: string;
|
|
13
|
+
__lastTriggerEl: HTMLElement | null;
|
|
7
14
|
static styles: import('lit').CSSResult;
|
|
8
15
|
render(): import('lit-html').TemplateResult<1> | typeof nothing;
|
|
9
16
|
connectedCallback(): void;
|
|
17
|
+
updated(changedProperties: Map<PropertyKey, unknown>): void;
|
|
10
18
|
disconnectedCallback(): void;
|
|
11
19
|
}
|
|
12
20
|
declare global {
|
|
@@ -2,14 +2,44 @@ import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpe
|
|
|
2
2
|
import { LitElement as t, css as n, html as r, nothing as i } from "lit";
|
|
3
3
|
import { customElement as a, property as o } from "lit/decorators.js";
|
|
4
4
|
//#region src/scb-test-components/scb-overlay/scb-overlay.ts
|
|
5
|
-
var s = class extends t {
|
|
5
|
+
var s, c = class extends t {
|
|
6
|
+
static {
|
|
7
|
+
s = this;
|
|
8
|
+
}
|
|
6
9
|
constructor(...e) {
|
|
7
|
-
super(...e), this.open = !1, this.isStatic = !1, this.ariaLabel = "", this.#
|
|
8
|
-
this.isStatic || this.#
|
|
9
|
-
}, this.#
|
|
10
|
-
this.open && e.key === "Escape" && this.#
|
|
10
|
+
super(...e), this.open = !1, this.variant = "scrim", this.isStatic = !1, this.ariaLabel = "", this.__lastTriggerEl = null, this.#r = (e) => {
|
|
11
|
+
this.isStatic || this.#n(e) || this.#t();
|
|
12
|
+
}, this.#i = (e) => {
|
|
13
|
+
this.open && e.key === "Escape" && this.#t();
|
|
11
14
|
};
|
|
12
15
|
}
|
|
16
|
+
static {
|
|
17
|
+
this.__instances = /* @__PURE__ */ new Map();
|
|
18
|
+
}
|
|
19
|
+
static {
|
|
20
|
+
this.__docListenerAttached = !1;
|
|
21
|
+
}
|
|
22
|
+
static __handleDocClick(e) {
|
|
23
|
+
let t = e.composedPath();
|
|
24
|
+
for (let e of t) {
|
|
25
|
+
if (!(e instanceof Element)) continue;
|
|
26
|
+
let t = e.getAttribute("data-overlay-open"), n = e.getAttribute("data-overlay-close"), r = e.getAttribute("data-overlay-toggle"), i = e.getAttribute("aria-controls"), a = t || n || r || i;
|
|
27
|
+
if (!a) continue;
|
|
28
|
+
let o = s.__instances.get(a);
|
|
29
|
+
if (!o) {
|
|
30
|
+
s.__instances.delete(a);
|
|
31
|
+
continue;
|
|
32
|
+
}
|
|
33
|
+
o.__lastTriggerEl = e, t ? o.#e(!0) : n ? o.#e(!1) : o.#e(!o.open);
|
|
34
|
+
break;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
static __ensureDocListener() {
|
|
38
|
+
s.__docListenerAttached || (document.addEventListener("click", s.__handleDocClick, !0), s.__docListenerAttached = !0);
|
|
39
|
+
}
|
|
40
|
+
static __maybeRemoveDocListener() {
|
|
41
|
+
!s.__docListenerAttached || s.__instances.size > 0 || (document.removeEventListener("click", s.__handleDocClick, !0), s.__docListenerAttached = !1);
|
|
42
|
+
}
|
|
13
43
|
static {
|
|
14
44
|
this.styles = n`
|
|
15
45
|
:host {
|
|
@@ -30,10 +60,17 @@ var s = class extends t {
|
|
|
30
60
|
inline-size: 100%;
|
|
31
61
|
block-size: 100%;
|
|
32
62
|
padding: var(--scb-overlay-padding, var(--spacing-6, 24px));
|
|
33
|
-
background: var(
|
|
63
|
+
background: var(
|
|
64
|
+
--scb-overlay-backdrop,
|
|
65
|
+
color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent)
|
|
66
|
+
);
|
|
34
67
|
box-sizing: border-box;
|
|
35
68
|
}
|
|
36
69
|
|
|
70
|
+
:host([variant='solid']) .scrim {
|
|
71
|
+
background: var(--md-sys-color-surface);
|
|
72
|
+
}
|
|
73
|
+
|
|
37
74
|
.content {
|
|
38
75
|
position: relative;
|
|
39
76
|
max-inline-size: 100%;
|
|
@@ -48,23 +85,31 @@ var s = class extends t {
|
|
|
48
85
|
}
|
|
49
86
|
`;
|
|
50
87
|
}
|
|
51
|
-
#e() {
|
|
52
|
-
this.open
|
|
88
|
+
#e(e) {
|
|
89
|
+
this.open = e;
|
|
90
|
+
}
|
|
91
|
+
#t() {
|
|
92
|
+
this.open && (this.isStatic || (this.#e(!1), this.dispatchEvent(new CustomEvent("scb-overlay-dismiss", {
|
|
53
93
|
bubbles: !0,
|
|
54
94
|
composed: !0
|
|
55
95
|
}))));
|
|
56
96
|
}
|
|
57
|
-
#
|
|
97
|
+
#n(e) {
|
|
58
98
|
let t = this.renderRoot.querySelector("slot");
|
|
59
99
|
if (!(t instanceof HTMLSlotElement)) return !1;
|
|
60
100
|
let n = e.composedPath();
|
|
61
101
|
return t.assignedNodes({ flatten: !0 }).some((e) => n.includes(e));
|
|
62
102
|
}
|
|
63
|
-
#n;
|
|
64
103
|
#r;
|
|
104
|
+
#i;
|
|
105
|
+
#a() {
|
|
106
|
+
this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-overlay-toggle="${this.id}"], [data-overlay-open="${this.id}"], [data-overlay-close="${this.id}"]`).forEach((e) => {
|
|
107
|
+
e.hasAttribute("aria-controls") && e.setAttribute("aria-expanded", String(this.open));
|
|
108
|
+
});
|
|
109
|
+
}
|
|
65
110
|
render() {
|
|
66
111
|
return this.open ? r`
|
|
67
|
-
<div class="scrim" @click=${this.#
|
|
112
|
+
<div class="scrim" @click=${this.#r}>
|
|
68
113
|
<div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel || i}">
|
|
69
114
|
<slot></slot>
|
|
70
115
|
</div>
|
|
@@ -72,22 +117,28 @@ var s = class extends t {
|
|
|
72
117
|
` : i;
|
|
73
118
|
}
|
|
74
119
|
connectedCallback() {
|
|
75
|
-
super.connectedCallback(), window.addEventListener("keydown", this.#
|
|
120
|
+
super.connectedCallback(), this.id && s.__instances.set(this.id, this), s.__ensureDocListener(), window.addEventListener("keydown", this.#i);
|
|
121
|
+
}
|
|
122
|
+
updated(e) {
|
|
123
|
+
e.has("open") && this.#a();
|
|
76
124
|
}
|
|
77
125
|
disconnectedCallback() {
|
|
78
|
-
window.removeEventListener("keydown", this.#
|
|
126
|
+
this.id && s.__instances.delete(this.id), s.__maybeRemoveDocListener(), window.removeEventListener("keydown", this.#i), super.disconnectedCallback();
|
|
79
127
|
}
|
|
80
128
|
};
|
|
81
129
|
e([o({
|
|
82
130
|
type: Boolean,
|
|
83
131
|
reflect: !0
|
|
84
|
-
})],
|
|
132
|
+
})], c.prototype, "open", void 0), e([o({
|
|
133
|
+
type: String,
|
|
134
|
+
reflect: !0
|
|
135
|
+
})], c.prototype, "variant", void 0), e([o({
|
|
85
136
|
type: Boolean,
|
|
86
137
|
reflect: !0,
|
|
87
138
|
attribute: "static"
|
|
88
|
-
})],
|
|
139
|
+
})], c.prototype, "isStatic", void 0), e([o({
|
|
89
140
|
type: String,
|
|
90
141
|
attribute: "aria-label"
|
|
91
|
-
})],
|
|
142
|
+
})], c.prototype, "ariaLabel", void 0), c = s = e([a("scb-overlay")], c);
|
|
92
143
|
//#endregion
|
|
93
|
-
export {
|
|
144
|
+
export { c as ScbOverlay };
|
|
@@ -20,7 +20,7 @@ var o = class extends t {
|
|
|
20
20
|
display: grid;
|
|
21
21
|
grid-auto-flow: column;
|
|
22
22
|
grid-auto-columns: 1fr;
|
|
23
|
-
font-family: var(--brand, Inter);
|
|
23
|
+
font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
|
|
24
24
|
margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
|
|
25
25
|
margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
|
|
26
26
|
margin-inline-start: var(--scb-segmented-button-spacing-inline-start, 0);
|
package/scb-stepper/scb-step.js
CHANGED
|
@@ -147,10 +147,19 @@ var o = class extends t {
|
|
|
147
147
|
}
|
|
148
148
|
:host([variant="vertical"]) .label{
|
|
149
149
|
margin-top: 0;
|
|
150
|
+
max-width: none;
|
|
151
|
+
text-align: left;
|
|
152
|
+
justify-items: start;
|
|
153
|
+
word-break: normal;
|
|
154
|
+
}
|
|
155
|
+
:host([variant="vertical"]) .sub-label{
|
|
156
|
+
text-align: left;
|
|
157
|
+
justify-items: start;
|
|
158
|
+
word-break: normal;
|
|
150
159
|
}
|
|
151
160
|
:host([variant="vertical"]) .content{
|
|
152
161
|
align-items: flex-start;
|
|
153
|
-
|
|
162
|
+
min-width: 0;
|
|
154
163
|
}
|
|
155
164
|
:host([symbol-variant="marker"]) .symbol {
|
|
156
165
|
min-width: 16px;
|