scb-wc-test 0.1.342 → 0.1.344
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.
|
@@ -603,8 +603,8 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
|
|
|
603
603
|
}
|
|
604
604
|
.scb-card.horizontal .media {
|
|
605
605
|
align-self: flex-start;
|
|
606
|
-
flex: 0 1
|
|
607
|
-
min-inline-size:
|
|
606
|
+
flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
|
|
607
|
+
min-inline-size: 0;
|
|
608
608
|
max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
609
609
|
inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
610
610
|
}
|
|
@@ -615,8 +615,8 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
|
|
|
615
615
|
align-self: flex-start;
|
|
616
616
|
padding: 0;
|
|
617
617
|
inline-size: auto;
|
|
618
|
-
min-inline-size:
|
|
619
|
-
flex: 1 1
|
|
618
|
+
min-inline-size: min(18ch, 100%);
|
|
619
|
+
flex: 1 1 0%;
|
|
620
620
|
}
|
|
621
621
|
.scb-card.horizontal .header {
|
|
622
622
|
align-items: flex-start;
|
|
@@ -642,8 +642,8 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
|
|
|
642
642
|
}
|
|
643
643
|
.scb-card.dynamic-direction .media {
|
|
644
644
|
align-self: flex-start;
|
|
645
|
-
flex: 0 1
|
|
646
|
-
min-inline-size:
|
|
645
|
+
flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
|
|
646
|
+
min-inline-size: 0;
|
|
647
647
|
max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
648
648
|
inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
649
649
|
}
|
|
@@ -654,8 +654,8 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
|
|
|
654
654
|
align-self: flex-start;
|
|
655
655
|
padding: 0;
|
|
656
656
|
inline-size: auto;
|
|
657
|
-
min-inline-size:
|
|
658
|
-
flex: 1 1
|
|
657
|
+
min-inline-size: min(18ch, 100%);
|
|
658
|
+
flex: 1 1 0%;
|
|
659
659
|
}
|
|
660
660
|
.scb-card.dynamic-direction .header {
|
|
661
661
|
align-items: flex-start;
|
|
@@ -1,22 +1,26 @@
|
|
|
1
|
-
import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";import"../scb-chevron/scb-chevron.js";import"../../vendor/vendor-material.js";(function(){try{var
|
|
1
|
+
import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"../scb-divider/scb-divider.js";import"../scb-chevron/scb-chevron.js";import"../../vendor/vendor-material.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(i,o,s){try{customElements.get(i)||e(i,o,s)}catch(a){var l=String(a||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,c=(t,e,i,o)=>{for(var s=o>1?void 0:o?g(e,i):e,l=t.length-1,a;l>=0;l--)(a=t[l])&&(s=(o?a(e,i,s):a(s))||s);return o&&s&&v(e,i,s),s};let r=class extends m{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.noDivider=!1,this._unique=r._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._trailingSlotHasContent=!1,this._onSlotChange=()=>{const t=this.renderRoot.querySelector("slot:not([name])"),e=!!t&&t.assignedElements({flatten:!0}).length>0;this._slotHasContent!==e&&(this._slotHasContent=e,this.requestUpdate()),!this._slotHasContent&&this.expanded&&(this.expanded=!1),this._applyInertByExpanded()},this._toggleAccordion=()=>{if(!this._slotHasContent)return;const t=!this.expanded;this.setExpanded(t)},this._onKeyDown=t=>{const e=this.closest("scb-toc"),o=Array.from(e?.querySelectorAll("scb-toc-item")||[]).map(n=>({host:n,label:n.renderRoot.querySelector(".toc-item-label")||null})).filter(n=>!!n.label),s=o.findIndex(n=>n.host===this);if(s<0)return;const a=t.currentTarget?.classList?.contains("toc-chevron-button")??!1;switch(t.key){case"Enter":case" ":if(!a)return;t.preventDefault(),this._toggleAccordion();break;case"ArrowDown":t.preventDefault(),s<o.length-1&&o[s+1].label.focus();break;case"ArrowUp":t.preventDefault(),s>0&&o[s-1].label.focus();break;case"Home":t.preventDefault(),o.length&&o[0].label.focus();break;case"End":t.preventDefault(),o.length&&o[o.length-1].label.focus();break}}}setExpanded(t){this.expanded!==t&&(this.expanded=t)}static _uid(){return globalThis.crypto?.randomUUID?.()??`${r._uidPrefix}-${++r._uidSeq}`}firstUpdated(){this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded()}updated(t){t.has("expanded")&&(this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded(),this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("expandedchanged",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback(),this._slotHasContent=Array.from(this.children).some(t=>{const e=t.getAttribute("slot");return e===null||e===""}),this._trailingSlotHasContent=Array.from(this.children).some(t=>t.getAttribute("slot")==="trailing"),!this._slotHasContent&&this.expanded&&(this.expanded=!1)}disconnectedCallback(){super.disconnectedCallback(),this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null)}_applyInertByExpanded(){const t=this.renderRoot.querySelector(".scb-toc-item-bottom");t&&(this.expanded?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false"),this._restoreTabIndexesIfNeeded()):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true"),this._removeTabIndexesIfNeeded()))}_syncOverflowVisibilityByExpanded(){if(this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null),this.removeAttribute("data-expanded-settled"),!this.expanded)return;const t=this.renderRoot.querySelector(".scb-toc-item-bottom");if(!t){this.setAttribute("data-expanded-settled","");return}const e=this._getTransitionMs(t);if(e<=0){this.setAttribute("data-expanded-settled","");return}this._overflowVisibleTimer=window.setTimeout(()=>{this._overflowVisibleTimer=null,this.expanded&&this.setAttribute("data-expanded-settled","")},e)}_getTransitionMs(t){const e=getComputedStyle(t),i=e.transitionDuration.split(",").map(n=>n.trim()),o=e.transitionDelay.split(",").map(n=>n.trim()),s=n=>{const d=parseFloat(n);return Number.isFinite(d)?n.endsWith("ms")?d:n.endsWith("s")?d*1e3:d:0},l=Math.max(i.length,o.length);let a=0;for(let n=0;n<l;n+=1){const d=s(i[n]??i[i.length-1]??"0s"),b=s(o[n]??o[o.length-1]??"0s");a=Math.max(a,d+b)}return Math.ceil(a)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const t=this.renderRoot.querySelector("slot:not([name])");if(!t)return[];const e=t.assignedElements({flatten:!0}),i=[],o=s=>{s instanceof HTMLElement&&s.matches("a,button,input,select,textarea,[tabindex]")&&i.push(s)};return e.forEach(s=>{o(s),s.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(l=>o(l))}),i}_removeTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(e=>{const i=e.getAttribute("tabindex");i!==null&&e.setAttribute("data-scb-prev-tabindex",i),e.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(e=>{const i=e.getAttribute("data-scb-prev-tabindex");i!==null?(e.setAttribute("tabindex",i),e.removeAttribute("data-scb-prev-tabindex")):e.removeAttribute("tabindex")})}render(){const t=`bottom-${this._unique}`,e=`toc-label-${this._unique}`,i=`toc-chevron-${this._unique}`;return u`
|
|
2
2
|
<div class="scb-toc-item" role="listitem">
|
|
3
3
|
<div class="scb-toc-item-top">
|
|
4
4
|
<div>
|
|
5
5
|
<div class="toc-item-label-wrapper">
|
|
6
6
|
<a
|
|
7
|
-
id=${
|
|
7
|
+
id=${e}
|
|
8
8
|
class="toc-item-label"
|
|
9
9
|
href=${this.itemHref}
|
|
10
10
|
@keydown=${this._onKeyDown}
|
|
11
11
|
>
|
|
12
12
|
${this.label}
|
|
13
13
|
</a>
|
|
14
|
-
<md-focus-ring for=${
|
|
14
|
+
<md-focus-ring for=${e} inward></md-focus-ring>
|
|
15
15
|
</div>
|
|
16
16
|
<div class="supporting-text">${this.supportingText}</div>
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
|
-
${this.
|
|
19
|
+
${this._trailingSlotHasContent?u`
|
|
20
|
+
<div class="toc-chevron-button-wrapper">
|
|
21
|
+
<slot name="trailing"></slot>
|
|
22
|
+
</div>
|
|
23
|
+
`:this._slotHasContent?u`
|
|
20
24
|
<div class="toc-chevron-button-wrapper">
|
|
21
25
|
<button
|
|
22
26
|
id=${i}
|
|
@@ -24,7 +28,7 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
|
|
|
24
28
|
type="button"
|
|
25
29
|
aria-label=${this.expanded?"Fäll ihop avsnitt":"Fäll ut avsnitt"}
|
|
26
30
|
aria-expanded=${this.expanded?"true":"false"}
|
|
27
|
-
aria-controls=${
|
|
31
|
+
aria-controls=${t}
|
|
28
32
|
@click=${this._toggleAccordion}
|
|
29
33
|
@keydown=${this._onKeyDown}
|
|
30
34
|
>
|
|
@@ -34,15 +38,16 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
|
|
|
34
38
|
</button>
|
|
35
39
|
</div>
|
|
36
40
|
`:""}
|
|
41
|
+
|
|
37
42
|
</div>
|
|
38
43
|
|
|
39
|
-
<div id=${
|
|
44
|
+
<div id=${t} class="scb-toc-item-bottom" role="region" aria-labelledby=${e}>
|
|
40
45
|
<div class="bottom-inner">
|
|
41
46
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
42
47
|
</div>
|
|
43
48
|
</div>
|
|
44
49
|
|
|
45
|
-
${this.
|
|
50
|
+
${this.noDivider?"":u`<scb-divider></scb-divider>`}
|
|
46
51
|
</div>
|
|
47
52
|
`}};r._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;r._uidSeq=0;r.styles=[h`
|
|
48
53
|
:host {
|
|
@@ -207,4 +212,4 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
|
|
|
207
212
|
display: none;
|
|
208
213
|
}
|
|
209
214
|
}
|
|
210
|
-
`];c([p({type:Boolean,reflect:!0})],r.prototype,"expanded",2);c([p({type:String,reflect:!0})],r.prototype,"label",2);c([p({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);c([p({type:String,attribute:"item-href"})],r.prototype,"itemHref",2);c([p({type:Boolean,attribute:"divider"})],r.prototype,"
|
|
215
|
+
`];c([p({type:Boolean,reflect:!0})],r.prototype,"expanded",2);c([p({type:String,reflect:!0})],r.prototype,"label",2);c([p({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);c([p({type:String,attribute:"item-href"})],r.prototype,"itemHref",2);c([p({type:Boolean,attribute:"no-divider"})],r.prototype,"noDivider",2);r=c([f("scb-toc-item")],r);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.344",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -398,5 +398,5 @@
|
|
|
398
398
|
},
|
|
399
399
|
"./mvc/*": "./mvc/*"
|
|
400
400
|
},
|
|
401
|
-
"buildHash": "
|
|
401
|
+
"buildHash": "90D92BED653E0E8FA3C426900FAA914DC2EFE03A7720E35DF85A8C15143B0F8A"
|
|
402
402
|
}
|
package/scb-card/scb-card.js
CHANGED
|
@@ -814,8 +814,8 @@ i.styles = H`
|
|
|
814
814
|
}
|
|
815
815
|
.scb-card.horizontal .media {
|
|
816
816
|
align-self: flex-start;
|
|
817
|
-
flex: 0 1
|
|
818
|
-
min-inline-size:
|
|
817
|
+
flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
|
|
818
|
+
min-inline-size: 0;
|
|
819
819
|
max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
820
820
|
inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
821
821
|
}
|
|
@@ -826,8 +826,8 @@ i.styles = H`
|
|
|
826
826
|
align-self: flex-start;
|
|
827
827
|
padding: 0;
|
|
828
828
|
inline-size: auto;
|
|
829
|
-
min-inline-size:
|
|
830
|
-
flex: 1 1
|
|
829
|
+
min-inline-size: min(18ch, 100%);
|
|
830
|
+
flex: 1 1 0%;
|
|
831
831
|
}
|
|
832
832
|
.scb-card.horizontal .header {
|
|
833
833
|
align-items: flex-start;
|
|
@@ -853,8 +853,8 @@ i.styles = H`
|
|
|
853
853
|
}
|
|
854
854
|
.scb-card.dynamic-direction .media {
|
|
855
855
|
align-self: flex-start;
|
|
856
|
-
flex: 0 1
|
|
857
|
-
min-inline-size:
|
|
856
|
+
flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
|
|
857
|
+
min-inline-size: 0;
|
|
858
858
|
max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
859
859
|
inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
860
860
|
}
|
|
@@ -865,8 +865,8 @@ i.styles = H`
|
|
|
865
865
|
align-self: flex-start;
|
|
866
866
|
padding: 0;
|
|
867
867
|
inline-size: auto;
|
|
868
|
-
min-inline-size:
|
|
869
|
-
flex: 1 1
|
|
868
|
+
min-inline-size: min(18ch, 100%);
|
|
869
|
+
flex: 1 1 0%;
|
|
870
870
|
}
|
|
871
871
|
.scb-card.dynamic-direction .header {
|
|
872
872
|
align-items: flex-start;
|
|
@@ -4,7 +4,7 @@ export declare class ScbTocItem extends LitElement {
|
|
|
4
4
|
label: string;
|
|
5
5
|
supportingText: string;
|
|
6
6
|
itemHref: string;
|
|
7
|
-
|
|
7
|
+
noDivider: boolean;
|
|
8
8
|
setExpanded(expanded: boolean): void;
|
|
9
9
|
private static _uidPrefix;
|
|
10
10
|
private static _uidSeq;
|
|
@@ -13,6 +13,7 @@ export declare class ScbTocItem extends LitElement {
|
|
|
13
13
|
private _overflowVisibleTimer;
|
|
14
14
|
static styles: import('lit').CSSResult[];
|
|
15
15
|
private _slotHasContent;
|
|
16
|
+
private _trailingSlotHasContent;
|
|
16
17
|
protected firstUpdated(): void;
|
|
17
18
|
protected updated(changed: Map<string, unknown>): void;
|
|
18
19
|
connectedCallback(): void;
|
package/scb-toc/scb-toc-item.js
CHANGED
|
@@ -5,15 +5,15 @@ import "../scb-chevron/scb-chevron.js";
|
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
6
|
import "@material/web/icon/icon.js";
|
|
7
7
|
import "@material/web/ripple/ripple.js";
|
|
8
|
-
var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (t, e,
|
|
9
|
-
for (var i =
|
|
10
|
-
(
|
|
11
|
-
return
|
|
8
|
+
var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (t, e, s, o) => {
|
|
9
|
+
for (var i = o > 1 ? void 0 : o ? g(e, s) : e, l = t.length - 1, d; l >= 0; l--)
|
|
10
|
+
(d = t[l]) && (i = (o ? d(e, s, i) : d(i)) || i);
|
|
11
|
+
return o && i && v(e, s, i), i;
|
|
12
12
|
};
|
|
13
13
|
let a = class extends m {
|
|
14
14
|
constructor() {
|
|
15
|
-
super(...arguments), this.expanded = !1, this.label = "", this.supportingText = "", this.itemHref = "#", this.
|
|
16
|
-
const t = this.renderRoot.querySelector("slot"), e = !!t && t.assignedElements({ flatten: !0 }).length > 0;
|
|
15
|
+
super(...arguments), this.expanded = !1, this.label = "", this.supportingText = "", this.itemHref = "#", this.noDivider = !1, this._unique = a._uid(), this._overflowVisibleTimer = null, this._slotHasContent = !1, this._trailingSlotHasContent = !1, this._onSlotChange = () => {
|
|
16
|
+
const t = this.renderRoot.querySelector("slot:not([name])"), e = !!t && t.assignedElements({ flatten: !0 }).length > 0;
|
|
17
17
|
this._slotHasContent !== e && (this._slotHasContent = e, this.requestUpdate()), !this._slotHasContent && this.expanded && (this.expanded = !1), this._applyInertByExpanded();
|
|
18
18
|
}, this._toggleAccordion = () => {
|
|
19
19
|
if (!this._slotHasContent) return;
|
|
@@ -21,29 +21,29 @@ let a = class extends m {
|
|
|
21
21
|
this.setExpanded(t);
|
|
22
22
|
}, this._onKeyDown = (t) => {
|
|
23
23
|
var n;
|
|
24
|
-
const e = this.closest("scb-toc"),
|
|
24
|
+
const e = this.closest("scb-toc"), o = Array.from((e == null ? void 0 : e.querySelectorAll("scb-toc-item")) || []).map((r) => ({
|
|
25
25
|
host: r,
|
|
26
26
|
label: r.renderRoot.querySelector(".toc-item-label") || null
|
|
27
|
-
})).filter((r) => !!r.label), i =
|
|
27
|
+
})).filter((r) => !!r.label), i = o.findIndex((r) => r.host === this);
|
|
28
28
|
if (i < 0) return;
|
|
29
|
-
const
|
|
29
|
+
const l = t.currentTarget, d = ((n = l == null ? void 0 : l.classList) == null ? void 0 : n.contains("toc-chevron-button")) ?? !1;
|
|
30
30
|
switch (t.key) {
|
|
31
31
|
case "Enter":
|
|
32
32
|
case " ":
|
|
33
|
-
if (!
|
|
33
|
+
if (!d) return;
|
|
34
34
|
t.preventDefault(), this._toggleAccordion();
|
|
35
35
|
break;
|
|
36
36
|
case "ArrowDown":
|
|
37
|
-
t.preventDefault(), i <
|
|
37
|
+
t.preventDefault(), i < o.length - 1 && o[i + 1].label.focus();
|
|
38
38
|
break;
|
|
39
39
|
case "ArrowUp":
|
|
40
|
-
t.preventDefault(), i > 0 &&
|
|
40
|
+
t.preventDefault(), i > 0 && o[i - 1].label.focus();
|
|
41
41
|
break;
|
|
42
42
|
case "Home":
|
|
43
|
-
t.preventDefault(),
|
|
43
|
+
t.preventDefault(), o.length && o[0].label.focus();
|
|
44
44
|
break;
|
|
45
45
|
case "End":
|
|
46
|
-
t.preventDefault(),
|
|
46
|
+
t.preventDefault(), o.length && o[o.length - 1].label.focus();
|
|
47
47
|
break;
|
|
48
48
|
}
|
|
49
49
|
};
|
|
@@ -76,7 +76,12 @@ let a = class extends m {
|
|
|
76
76
|
));
|
|
77
77
|
}
|
|
78
78
|
connectedCallback() {
|
|
79
|
-
super.connectedCallback(), this._slotHasContent =
|
|
79
|
+
super.connectedCallback(), this._slotHasContent = Array.from(this.children).some((t) => {
|
|
80
|
+
const e = t.getAttribute("slot");
|
|
81
|
+
return e === null || e === "";
|
|
82
|
+
}), this._trailingSlotHasContent = Array.from(this.children).some(
|
|
83
|
+
(t) => t.getAttribute("slot") === "trailing"
|
|
84
|
+
), !this._slotHasContent && this.expanded && (this.expanded = !1);
|
|
80
85
|
}
|
|
81
86
|
disconnectedCallback() {
|
|
82
87
|
super.disconnectedCallback(), this._overflowVisibleTimer !== null && (window.clearTimeout(this._overflowVisibleTimer), this._overflowVisibleTimer = null);
|
|
@@ -102,47 +107,47 @@ let a = class extends m {
|
|
|
102
107
|
}, e);
|
|
103
108
|
}
|
|
104
109
|
_getTransitionMs(t) {
|
|
105
|
-
const e = getComputedStyle(t),
|
|
110
|
+
const e = getComputedStyle(t), s = e.transitionDuration.split(",").map((n) => n.trim()), o = e.transitionDelay.split(",").map((n) => n.trim()), i = (n) => {
|
|
106
111
|
const r = parseFloat(n);
|
|
107
112
|
return Number.isFinite(r) ? n.endsWith("ms") ? r : n.endsWith("s") ? r * 1e3 : r : 0;
|
|
108
|
-
},
|
|
109
|
-
let
|
|
110
|
-
for (let n = 0; n <
|
|
111
|
-
const r = i(
|
|
112
|
-
|
|
113
|
+
}, l = Math.max(s.length, o.length);
|
|
114
|
+
let d = 0;
|
|
115
|
+
for (let n = 0; n < l; n += 1) {
|
|
116
|
+
const r = i(s[n] ?? s[s.length - 1] ?? "0s"), b = i(o[n] ?? o[o.length - 1] ?? "0s");
|
|
117
|
+
d = Math.max(d, r + b);
|
|
113
118
|
}
|
|
114
|
-
return Math.ceil(
|
|
119
|
+
return Math.ceil(d);
|
|
115
120
|
}
|
|
116
121
|
_supportsInert() {
|
|
117
122
|
return "inert" in HTMLElement.prototype;
|
|
118
123
|
}
|
|
119
124
|
_collectFocusableFromSlot() {
|
|
120
|
-
const t = this.renderRoot.querySelector("slot");
|
|
125
|
+
const t = this.renderRoot.querySelector("slot:not([name])");
|
|
121
126
|
if (!t) return [];
|
|
122
|
-
const e = t.assignedElements({ flatten: !0 }),
|
|
123
|
-
i instanceof HTMLElement && i.matches("a,button,input,select,textarea,[tabindex]") &&
|
|
127
|
+
const e = t.assignedElements({ flatten: !0 }), s = [], o = (i) => {
|
|
128
|
+
i instanceof HTMLElement && i.matches("a,button,input,select,textarea,[tabindex]") && s.push(i);
|
|
124
129
|
};
|
|
125
130
|
return e.forEach((i) => {
|
|
126
|
-
var
|
|
127
|
-
|
|
128
|
-
}),
|
|
131
|
+
var l;
|
|
132
|
+
o(i), (l = i.querySelectorAll) == null || l.call(i, "a,button,input,select,textarea,[tabindex]").forEach((d) => o(d));
|
|
133
|
+
}), s;
|
|
129
134
|
}
|
|
130
135
|
_removeTabIndexesIfNeeded() {
|
|
131
136
|
if (this._supportsInert()) return;
|
|
132
137
|
this._collectFocusableFromSlot().forEach((e) => {
|
|
133
|
-
const
|
|
134
|
-
|
|
138
|
+
const s = e.getAttribute("tabindex");
|
|
139
|
+
s !== null && e.setAttribute("data-scb-prev-tabindex", s), e.setAttribute("tabindex", "-1");
|
|
135
140
|
});
|
|
136
141
|
}
|
|
137
142
|
_restoreTabIndexesIfNeeded() {
|
|
138
143
|
if (this._supportsInert()) return;
|
|
139
144
|
this._collectFocusableFromSlot().forEach((e) => {
|
|
140
|
-
const
|
|
141
|
-
|
|
145
|
+
const s = e.getAttribute("data-scb-prev-tabindex");
|
|
146
|
+
s !== null ? (e.setAttribute("tabindex", s), e.removeAttribute("data-scb-prev-tabindex")) : e.removeAttribute("tabindex");
|
|
142
147
|
});
|
|
143
148
|
}
|
|
144
149
|
render() {
|
|
145
|
-
const t = `bottom-${this._unique}`, e = `toc-label-${this._unique}`,
|
|
150
|
+
const t = `bottom-${this._unique}`, e = `toc-label-${this._unique}`, s = `toc-chevron-${this._unique}`;
|
|
146
151
|
return u`
|
|
147
152
|
<div class="scb-toc-item" role="listitem">
|
|
148
153
|
<div class="scb-toc-item-top">
|
|
@@ -161,10 +166,14 @@ let a = class extends m {
|
|
|
161
166
|
<div class="supporting-text">${this.supportingText}</div>
|
|
162
167
|
</div>
|
|
163
168
|
|
|
164
|
-
${this.
|
|
169
|
+
${this._trailingSlotHasContent ? u`
|
|
170
|
+
<div class="toc-chevron-button-wrapper">
|
|
171
|
+
<slot name="trailing"></slot>
|
|
172
|
+
</div>
|
|
173
|
+
` : this._slotHasContent ? u`
|
|
165
174
|
<div class="toc-chevron-button-wrapper">
|
|
166
175
|
<button
|
|
167
|
-
id=${
|
|
176
|
+
id=${s}
|
|
168
177
|
class="toc-chevron-button"
|
|
169
178
|
type="button"
|
|
170
179
|
aria-label=${this.expanded ? "Fäll ihop avsnitt" : "Fäll ut avsnitt"}
|
|
@@ -175,10 +184,11 @@ let a = class extends m {
|
|
|
175
184
|
>
|
|
176
185
|
<md-ripple></md-ripple>
|
|
177
186
|
<scb-chevron class="toc-chevron-icon" .open=${this.expanded}></scb-chevron>
|
|
178
|
-
<md-focus-ring for=${
|
|
187
|
+
<md-focus-ring for=${s} inward></md-focus-ring>
|
|
179
188
|
</button>
|
|
180
189
|
</div>
|
|
181
190
|
` : ""}
|
|
191
|
+
|
|
182
192
|
</div>
|
|
183
193
|
|
|
184
194
|
<div id=${t} class="scb-toc-item-bottom" role="region" aria-labelledby=${e}>
|
|
@@ -187,7 +197,7 @@ let a = class extends m {
|
|
|
187
197
|
</div>
|
|
188
198
|
</div>
|
|
189
199
|
|
|
190
|
-
${this.
|
|
200
|
+
${this.noDivider ? "" : u`<scb-divider></scb-divider>`}
|
|
191
201
|
</div>
|
|
192
202
|
`;
|
|
193
203
|
}
|
|
@@ -373,8 +383,8 @@ c([
|
|
|
373
383
|
p({ type: String, attribute: "item-href" })
|
|
374
384
|
], a.prototype, "itemHref", 2);
|
|
375
385
|
c([
|
|
376
|
-
p({ type: Boolean, attribute: "divider" })
|
|
377
|
-
], a.prototype, "
|
|
386
|
+
p({ type: Boolean, attribute: "no-divider" })
|
|
387
|
+
], a.prototype, "noDivider", 2);
|
|
378
388
|
a = c([
|
|
379
389
|
f("scb-toc-item")
|
|
380
390
|
], a);
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -6474,8 +6474,8 @@
|
|
|
6474
6474
|
}
|
|
6475
6475
|
.scb-card.horizontal .media {
|
|
6476
6476
|
align-self: flex-start;
|
|
6477
|
-
flex: 0 1
|
|
6478
|
-
min-inline-size:
|
|
6477
|
+
flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
|
|
6478
|
+
min-inline-size: 0;
|
|
6479
6479
|
max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
6480
6480
|
inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
6481
6481
|
}
|
|
@@ -6486,8 +6486,8 @@
|
|
|
6486
6486
|
align-self: flex-start;
|
|
6487
6487
|
padding: 0;
|
|
6488
6488
|
inline-size: auto;
|
|
6489
|
-
min-inline-size:
|
|
6490
|
-
flex: 1 1
|
|
6489
|
+
min-inline-size: min(18ch, 100%);
|
|
6490
|
+
flex: 1 1 0%;
|
|
6491
6491
|
}
|
|
6492
6492
|
.scb-card.horizontal .header {
|
|
6493
6493
|
align-items: flex-start;
|
|
@@ -6513,8 +6513,8 @@
|
|
|
6513
6513
|
}
|
|
6514
6514
|
.scb-card.dynamic-direction .media {
|
|
6515
6515
|
align-self: flex-start;
|
|
6516
|
-
flex: 0 1
|
|
6517
|
-
min-inline-size:
|
|
6516
|
+
flex: 0 1 var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px));
|
|
6517
|
+
min-inline-size: 0;
|
|
6518
6518
|
max-inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
6519
6519
|
inline-size: min(100%, var(--scb-card-size-horizontal-media-max, var(--scb-card-horizontal-media-max, 176px)));
|
|
6520
6520
|
}
|
|
@@ -6525,8 +6525,8 @@
|
|
|
6525
6525
|
align-self: flex-start;
|
|
6526
6526
|
padding: 0;
|
|
6527
6527
|
inline-size: auto;
|
|
6528
|
-
min-inline-size:
|
|
6529
|
-
flex: 1 1
|
|
6528
|
+
min-inline-size: min(18ch, 100%);
|
|
6529
|
+
flex: 1 1 0%;
|
|
6530
6530
|
}
|
|
6531
6531
|
.scb-card.dynamic-direction .header {
|
|
6532
6532
|
align-items: flex-start;
|
|
@@ -12472,7 +12472,7 @@
|
|
|
12472
12472
|
margin-inline-start: var(--scb-tabs-spacing-inline-start, 0);
|
|
12473
12473
|
margin-inline-end: var(--scb-tabs-spacing-inline-end, 0);
|
|
12474
12474
|
}
|
|
12475
|
-
`],Hs([n({type:String,reflect:!0,attribute:"aria-label"})],rs.prototype,"ariaLabel",2),Hs([n({type:String,reflect:!0})],rs.prototype,"spacing",2),Hs([n({type:String,attribute:"spacing-top",reflect:!0})],rs.prototype,"spacingTop",2),Hs([n({type:String,attribute:"spacing-bottom",reflect:!0})],rs.prototype,"spacingBottom",2),Hs([n({type:String,attribute:"spacing-left",reflect:!0})],rs.prototype,"spacingLeft",2),Hs([n({type:String,attribute:"spacing-right",reflect:!0})],rs.prototype,"spacingRight",2),rs=Hs([_("scb-tabs")],rs);var My=Object.defineProperty,Ry=Object.getOwnPropertyDescriptor,Pr=(e,t,i,s)=>{for(var r=s>1?void 0:s?Ry(t,i):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&My(t,i,r),r};let Dt=class extends x{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.
|
|
12475
|
+
`],Hs([n({type:String,reflect:!0,attribute:"aria-label"})],rs.prototype,"ariaLabel",2),Hs([n({type:String,reflect:!0})],rs.prototype,"spacing",2),Hs([n({type:String,attribute:"spacing-top",reflect:!0})],rs.prototype,"spacingTop",2),Hs([n({type:String,attribute:"spacing-bottom",reflect:!0})],rs.prototype,"spacingBottom",2),Hs([n({type:String,attribute:"spacing-left",reflect:!0})],rs.prototype,"spacingLeft",2),Hs([n({type:String,attribute:"spacing-right",reflect:!0})],rs.prototype,"spacingRight",2),rs=Hs([_("scb-tabs")],rs);var My=Object.defineProperty,Ry=Object.getOwnPropertyDescriptor,Pr=(e,t,i,s)=>{for(var r=s>1?void 0:s?Ry(t,i):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&My(t,i,r),r};let Dt=class extends x{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.noDivider=!1,this._unique=Dt._uid(),this._overflowVisibleTimer=null,this._slotHasContent=!1,this._trailingSlotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot:not([name])"),t=!!e&&e.assignedElements({flatten:!0}).length>0;this._slotHasContent!==t&&(this._slotHasContent=t,this.requestUpdate()),!this._slotHasContent&&this.expanded&&(this.expanded=!1),this._applyInertByExpanded()},this._toggleAccordion=()=>{if(!this._slotHasContent)return;const e=!this.expanded;this.setExpanded(e)},this._onKeyDown=e=>{var l;const t=this.closest("scb-toc"),s=Array.from((t==null?void 0:t.querySelectorAll("scb-toc-item"))||[]).map(d=>({host:d,label:d.renderRoot.querySelector(".toc-item-label")||null})).filter(d=>!!d.label),r=s.findIndex(d=>d.host===this);if(r<0)return;const a=e.currentTarget,o=((l=a==null?void 0:a.classList)==null?void 0:l.contains("toc-chevron-button"))??!1;switch(e.key){case"Enter":case" ":if(!o)return;e.preventDefault(),this._toggleAccordion();break;case"ArrowDown":e.preventDefault(),r<s.length-1&&s[r+1].label.focus();break;case"ArrowUp":e.preventDefault(),r>0&&s[r-1].label.focus();break;case"Home":e.preventDefault(),s.length&&s[0].label.focus();break;case"End":e.preventDefault(),s.length&&s[s.length-1].label.focus();break}}}setExpanded(e){this.expanded!==e&&(this.expanded=e)}static _uid(){var e,t;return((t=(e=globalThis.crypto)==null?void 0:e.randomUUID)==null?void 0:t.call(e))??`${Dt._uidPrefix}-${++Dt._uidSeq}`}firstUpdated(){this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded()}updated(e){e.has("expanded")&&(this._applyInertByExpanded(),this._syncOverflowVisibilityByExpanded(),this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("expandedchanged",{detail:{expanded:this.expanded,label:this.label},bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback(),this._slotHasContent=Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return t===null||t===""}),this._trailingSlotHasContent=Array.from(this.children).some(e=>e.getAttribute("slot")==="trailing"),!this._slotHasContent&&this.expanded&&(this.expanded=!1)}disconnectedCallback(){super.disconnectedCallback(),this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null)}_applyInertByExpanded(){const e=this.renderRoot.querySelector(".scb-toc-item-bottom");e&&(this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false"),this._restoreTabIndexesIfNeeded()):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true"),this._removeTabIndexesIfNeeded()))}_syncOverflowVisibilityByExpanded(){if(this._overflowVisibleTimer!==null&&(window.clearTimeout(this._overflowVisibleTimer),this._overflowVisibleTimer=null),this.removeAttribute("data-expanded-settled"),!this.expanded)return;const e=this.renderRoot.querySelector(".scb-toc-item-bottom");if(!e){this.setAttribute("data-expanded-settled","");return}const t=this._getTransitionMs(e);if(t<=0){this.setAttribute("data-expanded-settled","");return}this._overflowVisibleTimer=window.setTimeout(()=>{this._overflowVisibleTimer=null,this.expanded&&this.setAttribute("data-expanded-settled","")},t)}_getTransitionMs(e){const t=getComputedStyle(e),i=t.transitionDuration.split(",").map(l=>l.trim()),s=t.transitionDelay.split(",").map(l=>l.trim()),r=l=>{const d=parseFloat(l);return Number.isFinite(d)?l.endsWith("ms")?d:l.endsWith("s")?d*1e3:d:0},a=Math.max(i.length,s.length);let o=0;for(let l=0;l<a;l+=1){const d=r(i[l]??i[i.length-1]??"0s"),p=r(s[l]??s[s.length-1]??"0s");o=Math.max(o,d+p)}return Math.ceil(o)}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const e=this.renderRoot.querySelector("slot:not([name])");if(!e)return[];const t=e.assignedElements({flatten:!0}),i=[],s=r=>{r instanceof HTMLElement&&r.matches("a,button,input,select,textarea,[tabindex]")&&i.push(r)};return t.forEach(r=>{var a;s(r),(a=r.querySelectorAll)==null||a.call(r,"a,button,input,select,textarea,[tabindex]").forEach(o=>s(o))}),i}_removeTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(t=>{const i=t.getAttribute("tabindex");i!==null&&t.setAttribute("data-scb-prev-tabindex",i),t.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(t=>{const i=t.getAttribute("data-scb-prev-tabindex");i!==null?(t.setAttribute("tabindex",i),t.removeAttribute("data-scb-prev-tabindex")):t.removeAttribute("tabindex")})}render(){const e=`bottom-${this._unique}`,t=`toc-label-${this._unique}`,i=`toc-chevron-${this._unique}`;return c`
|
|
12476
12476
|
<div class="scb-toc-item" role="listitem">
|
|
12477
12477
|
<div class="scb-toc-item-top">
|
|
12478
12478
|
<div>
|
|
@@ -12490,7 +12490,11 @@
|
|
|
12490
12490
|
<div class="supporting-text">${this.supportingText}</div>
|
|
12491
12491
|
</div>
|
|
12492
12492
|
|
|
12493
|
-
${this.
|
|
12493
|
+
${this._trailingSlotHasContent?c`
|
|
12494
|
+
<div class="toc-chevron-button-wrapper">
|
|
12495
|
+
<slot name="trailing"></slot>
|
|
12496
|
+
</div>
|
|
12497
|
+
`:this._slotHasContent?c`
|
|
12494
12498
|
<div class="toc-chevron-button-wrapper">
|
|
12495
12499
|
<button
|
|
12496
12500
|
id=${i}
|
|
@@ -12508,6 +12512,7 @@
|
|
|
12508
12512
|
</button>
|
|
12509
12513
|
</div>
|
|
12510
12514
|
`:""}
|
|
12515
|
+
|
|
12511
12516
|
</div>
|
|
12512
12517
|
|
|
12513
12518
|
<div id=${e} class="scb-toc-item-bottom" role="region" aria-labelledby=${t}>
|
|
@@ -12516,7 +12521,7 @@
|
|
|
12516
12521
|
</div>
|
|
12517
12522
|
</div>
|
|
12518
12523
|
|
|
12519
|
-
${this.
|
|
12524
|
+
${this.noDivider?"":c`<scb-divider></scb-divider>`}
|
|
12520
12525
|
</div>
|
|
12521
12526
|
`}};Dt._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`,Dt._uidSeq=0,Dt.styles=[y`
|
|
12522
12527
|
:host {
|
|
@@ -12681,7 +12686,7 @@
|
|
|
12681
12686
|
display: none;
|
|
12682
12687
|
}
|
|
12683
12688
|
}
|
|
12684
|
-
`],Pr([n({type:Boolean,reflect:!0})],Dt.prototype,"expanded",2),Pr([n({type:String,reflect:!0})],Dt.prototype,"label",2),Pr([n({type:String,attribute:"supporting-text"})],Dt.prototype,"supportingText",2),Pr([n({type:String,attribute:"item-href"})],Dt.prototype,"itemHref",2),Pr([n({type:Boolean,attribute:"divider"})],Dt.prototype,"
|
|
12689
|
+
`],Pr([n({type:Boolean,reflect:!0})],Dt.prototype,"expanded",2),Pr([n({type:String,reflect:!0})],Dt.prototype,"label",2),Pr([n({type:String,attribute:"supporting-text"})],Dt.prototype,"supportingText",2),Pr([n({type:String,attribute:"item-href"})],Dt.prototype,"itemHref",2),Pr([n({type:Boolean,attribute:"no-divider"})],Dt.prototype,"noDivider",2),Dt=Pr([_("scb-toc-item")],Dt);var Dy=Object.defineProperty,Oy=Object.getOwnPropertyDescriptor,gh=e=>{throw TypeError(e)},qs=(e,t,i,s)=>{for(var r=s>1?void 0:s?Oy(t,i):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&Dy(t,i,r),r},Fy=(e,t,i)=>t.has(e)||gh("Cannot "+i),By=(e,t,i)=>t.has(e)?gh("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),Ot=(e,t,i)=>(Fy(e,t,"access private method"),i),ht,wc,yh,pn,kc,Lr;let as=class extends x{constructor(){super(...arguments),By(this,ht),this.singleOpen=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}connectedCallback(){super.connectedCallback(),this.addEventListener("expanded-changed",Ot(this,ht,wc))}disconnectedCallback(){this.removeEventListener("expanded-changed",Ot(this,ht,wc)),super.disconnectedCallback()}firstUpdated(e){Ot(this,ht,kc).call(this),Ot(this,ht,pn).call(this)}updated(e){super.updated(e),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&Ot(this,ht,kc).call(this),e.has("singleOpen")&&Ot(this,ht,pn).call(this)}render(){return c`
|
|
12685
12690
|
<div class="scb-toc-list" role="list">
|
|
12686
12691
|
<slot @slotchange=${Ot(this,ht,yh)}></slot>
|
|
12687
12692
|
</div>
|