scb-wc-test 0.1.64 → 0.1.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,53 +1,43 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as g}from"../../vendor/preload-helper.js";import{a as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
id=${
|
|
2
|
+
import{_ as g}from"../../vendor/preload-helper.js";import{a as u,n as s,i as m,E as p,x as l,t as v}from"../../vendor/vendor.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 i=customElements.define.bind(customElements);customElements.define=function(o,r,n){try{customElements.get(o)||i(o,r,n)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(t,i,o,r)=>{for(var n=r>1?void 0:r?b(i,o):i,c=t.length-1,d;c>=0;c--)(d=t[c])&&(n=(r?d(i,o,n):d(n))||n);return r&&n&&h(i,o,n),n};let e=class extends m{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=e._uid(),this._onToggle=t=>{const i=t.currentTarget;this.open=!!i.open;const o=this.closest("scb-accordion");this.open&&o&&!o.hasAttribute("detached")&&o.querySelectorAll("scb-accordion-item").forEach(n=>{n!==this&&n.setOpen(!1)}),this._applyInertByOpen()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${e._uidPrefix}-${++e._uidSeq}`}async firstUpdated(){e._mdIconLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e._mdIconLoaded=!0),e._mdRippleLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e._mdRippleLoaded=!0),this._applyInertByOpen()}_applyInertByOpen(){const t=this.renderRoot.querySelector(".scb-accordion-bottom"),i=this.renderRoot.querySelector("details");!t||!i||(i.open?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}_onKeyDown(t){const i=this.closest("scb-accordion"),r=Array.from(i?.querySelectorAll("scb-accordion-item")||[]).map(d=>d.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(d=>!!d),n=t.currentTarget,c=r.indexOf(n);switch(t.key){case"ArrowDown":t.preventDefault(),c<r.length-1&&r[c+1].focus();break;case"ArrowUp":t.preventDefault(),c>0&&r[c-1].focus();break;case"Home":t.preventDefault(),r.length&&r[0].focus();break;case"End":t.preventDefault(),r.length&&r[r.length-1].focus();break}}setOpen(t){this.open=!!t;const i=this.renderRoot.querySelector("details");i&&(i.open=this.open),this._applyInertByOpen()}updated(t){if(t.has("open")){const i=this.renderRoot.querySelector("details");i&&i.open!==this.open&&(i.open=this.open),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const t=`bottom-${this._unique}`,i=`header-${this._unique}`,o=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?l`
|
|
3
|
+
<scb-avatar
|
|
4
|
+
label=${this.avatarLabel}
|
|
5
|
+
alt=${this.avatarAlt}
|
|
6
|
+
src=${this.avatarVariant==="image"?this.avatarSrc:""}
|
|
7
|
+
size="medium"
|
|
8
|
+
shape="circular"
|
|
9
|
+
variant=${this.avatarVariant}
|
|
10
|
+
></scb-avatar>
|
|
11
|
+
`:this.leadingVariant==="icon"?l`<md-icon>${this.leadingIcon}</md-icon>`:p:p;return l`
|
|
12
|
+
<details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
|
|
13
|
+
<summary
|
|
14
|
+
id=${i}
|
|
15
15
|
class="scb-accordion-top"
|
|
16
|
-
|
|
17
|
-
role="button"
|
|
18
|
-
aria-expanded=${this.expanded}
|
|
19
|
-
aria-controls=${e}
|
|
20
|
-
@click=${this.toggleAccordion}
|
|
16
|
+
aria-controls=${t}
|
|
21
17
|
@keydown=${this._onKeyDown}
|
|
22
18
|
>
|
|
23
19
|
<md-ripple></md-ripple>
|
|
24
20
|
|
|
25
|
-
${this.leading?l`<div class="leading">${
|
|
21
|
+
${this.leading?l`<div class="leading">${o}</div>`:p}
|
|
26
22
|
|
|
27
23
|
<div class="texts">
|
|
28
24
|
${this.overline?l`<div class="overline">${this.overline}</div>`:p}
|
|
29
|
-
<div class="
|
|
25
|
+
<div class="title">${this.title}</div>
|
|
30
26
|
${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:p}
|
|
31
27
|
</div>
|
|
32
28
|
|
|
33
|
-
<md-icon class="chevron"
|
|
34
|
-
</
|
|
29
|
+
<md-icon class="chevron">keyboard_arrow_down</md-icon>
|
|
30
|
+
</summary>
|
|
35
31
|
|
|
36
|
-
<div
|
|
37
|
-
id=${e}
|
|
38
|
-
class="scb-accordion-bottom ${this.expanded?"expanded":""}"
|
|
39
|
-
role="region"
|
|
40
|
-
aria-labelledby=${r}
|
|
41
|
-
aria-hidden=${this.expanded?"false":"true"}
|
|
42
|
-
>
|
|
32
|
+
<div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
|
|
43
33
|
<div class="bottom-inner">
|
|
44
34
|
<slot>${this.content}</slot>
|
|
45
35
|
</div>
|
|
46
36
|
</div>
|
|
47
|
-
</
|
|
37
|
+
</details>
|
|
48
38
|
|
|
49
|
-
<md-focus-ring for=${
|
|
50
|
-
`}};
|
|
39
|
+
<md-focus-ring for=${i} inward></md-focus-ring>
|
|
40
|
+
`}};e._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;e._uidSeq=0;e._mdIconLoaded=!1;e._mdRippleLoaded=!1;e.styles=[u`
|
|
51
41
|
:host {
|
|
52
42
|
display: block;
|
|
53
43
|
position: relative;
|
|
@@ -68,28 +58,29 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
|
|
|
68
58
|
.scb-accordion-item {
|
|
69
59
|
border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
|
|
70
60
|
margin-bottom: calc(var(--stroke-border, 1px) * -1);
|
|
71
|
-
display: flex;
|
|
72
|
-
flex-direction: column;
|
|
73
61
|
color: var(--md-sys-color-on-surface);
|
|
74
62
|
font-family: var(--brand-font);
|
|
75
63
|
}
|
|
76
64
|
|
|
65
|
+
/* Header */
|
|
77
66
|
.scb-accordion-top {
|
|
67
|
+
list-style: none;
|
|
78
68
|
display: flex;
|
|
79
69
|
flex-direction: row;
|
|
80
70
|
align-items: center;
|
|
81
71
|
cursor: pointer;
|
|
82
72
|
padding-block: var(--spacing-7, 24px);
|
|
83
73
|
padding-inline: var(--spacing-5, 16px);
|
|
84
|
-
outline: none;
|
|
85
74
|
border-radius: var(--radius-none, 0px);
|
|
86
75
|
gap: var(--spacing-5, 16px);
|
|
87
76
|
color: var(--md-sys-color-on-surface);
|
|
88
77
|
position: relative;
|
|
89
|
-
overflow:
|
|
78
|
+
overflow: hidden;
|
|
90
79
|
-webkit-tap-highlight-color: transparent;
|
|
80
|
+
outline: none;
|
|
91
81
|
}
|
|
92
|
-
.scb-accordion-top
|
|
82
|
+
.scb-accordion-top::-webkit-details-marker { display: none; }
|
|
83
|
+
summary::marker { content: ''; }
|
|
93
84
|
|
|
94
85
|
:host([density="-2"]) .scb-accordion-top,
|
|
95
86
|
:host-context([data-density="-2"]) .scb-accordion-top {
|
|
@@ -100,6 +91,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
|
|
|
100
91
|
padding-block: var(--spacing-4, 12px);
|
|
101
92
|
}
|
|
102
93
|
|
|
94
|
+
/* Panelinnehåll + animationer (grid 0fr -> 1fr) */
|
|
103
95
|
.scb-accordion-bottom {
|
|
104
96
|
display: grid;
|
|
105
97
|
grid-template-rows: 0fr;
|
|
@@ -112,7 +104,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
|
|
|
112
104
|
padding-block: var(--scb-accordion-panel-padding-closed);
|
|
113
105
|
padding-inline: var(--spacing-5, 16px);
|
|
114
106
|
}
|
|
115
|
-
.scb-accordion-bottom
|
|
107
|
+
details[open] .scb-accordion-bottom {
|
|
116
108
|
grid-template-rows: 1fr;
|
|
117
109
|
opacity: 1;
|
|
118
110
|
padding-top: var(--spacing-2, 4px);
|
|
@@ -122,7 +114,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
|
|
|
122
114
|
}
|
|
123
115
|
.bottom-inner { overflow: hidden; }
|
|
124
116
|
|
|
125
|
-
.
|
|
117
|
+
.title {
|
|
126
118
|
font-family: var(--brand-font);
|
|
127
119
|
font-size: var(--md-sys-typescale-title-large-size);
|
|
128
120
|
line-height: var(--md-sys-typescale-title-large-line-height);
|
|
@@ -156,7 +148,14 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
|
|
|
156
148
|
}
|
|
157
149
|
|
|
158
150
|
.texts { display: grid; gap: var(--spacing-1, 2px); }
|
|
159
|
-
|
|
151
|
+
|
|
152
|
+
.chevron {
|
|
153
|
+
margin-left: auto;
|
|
154
|
+
padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
|
|
155
|
+
font-size: var(--icon-size-small, 24px);
|
|
156
|
+
transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
|
|
157
|
+
}
|
|
158
|
+
details[open] .chevron { transform: rotate(180deg); }
|
|
160
159
|
|
|
161
160
|
md-ripple {
|
|
162
161
|
border-radius: inherit;
|
|
@@ -165,5 +164,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as o,i as u,E
|
|
|
165
164
|
pointer-events: none;
|
|
166
165
|
overflow: hidden;
|
|
167
166
|
}
|
|
168
|
-
@media (prefers-reduced-motion: reduce) {
|
|
169
|
-
|
|
167
|
+
@media (prefers-reduced-motion: reduce) {
|
|
168
|
+
md-ripple { display: none; }
|
|
169
|
+
}
|
|
170
|
+
`];a([s({type:Boolean,reflect:!0})],e.prototype,"open",2);a([s({type:String,reflect:!0})],e.prototype,"title",2);a([s({type:String})],e.prototype,"content",2);a([s({type:String,attribute:"overline"})],e.prototype,"overline",2);a([s({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);a([s({type:Boolean})],e.prototype,"leading",2);a([s({type:String,attribute:"leading-variant",reflect:!0})],e.prototype,"leadingVariant",2);a([s({type:String,attribute:"leading-icon"})],e.prototype,"leadingIcon",2);a([s({type:String,attribute:"img-href-image",reflect:!0})],e.prototype,"imgHrefImage",2);a([s({type:String,attribute:"avatar-label"})],e.prototype,"avatarLabel",2);a([s({type:String,attribute:"avatar-alt"})],e.prototype,"avatarAlt",2);a([s({type:String,attribute:"avatar-variant"})],e.prototype,"avatarVariant",2);a([s({type:String,attribute:"avatar-src"})],e.prototype,"avatarSrc",2);a([s({type:Number,reflect:!0})],e.prototype,"density",2);e=a([v("scb-accordion-item")],e);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.66",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -288,5 +288,5 @@
|
|
|
288
288
|
},
|
|
289
289
|
"./mvc/*": "./mvc/*"
|
|
290
290
|
},
|
|
291
|
-
"buildHash": "
|
|
291
|
+
"buildHash": "EC2A744495418BB379B8FC81D9BBFFD76D06AC5A6091020D14B8C2DF73F72738"
|
|
292
292
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TemplateResult, LitElement } from 'lit';
|
|
2
2
|
export declare class ScbAccordionItem extends LitElement {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
open: boolean;
|
|
4
|
+
title: string;
|
|
5
5
|
content: string;
|
|
6
6
|
overline: string;
|
|
7
7
|
supportingText: string;
|
|
@@ -18,16 +18,15 @@ export declare class ScbAccordionItem extends LitElement {
|
|
|
18
18
|
private static _uidSeq;
|
|
19
19
|
private static _uid;
|
|
20
20
|
private _unique;
|
|
21
|
-
static _mdIconLoaded
|
|
22
|
-
static _mdRippleLoaded
|
|
21
|
+
private static _mdIconLoaded;
|
|
22
|
+
private static _mdRippleLoaded;
|
|
23
23
|
protected firstUpdated(): Promise<void>;
|
|
24
|
-
disconnectedCallback(): void;
|
|
25
24
|
static styles: import('lit').CSSResult[];
|
|
26
|
-
private
|
|
25
|
+
private _applyInertByOpen;
|
|
26
|
+
private _onToggle;
|
|
27
27
|
private _onKeyDown;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
private _emitExpandedChanged;
|
|
28
|
+
/** Programmatisk uppdatering som även speglar <details>. */
|
|
29
|
+
setOpen(on: boolean): void;
|
|
31
30
|
protected updated(changed: Map<string, unknown>): void;
|
|
32
31
|
protected render(): TemplateResult;
|
|
33
32
|
}
|
|
@@ -1,137 +1,118 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as o, customElement as
|
|
1
|
+
import { css as m, LitElement as v, nothing as p, html as l } from "lit";
|
|
2
|
+
import { property as o, customElement as h } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/focus/md-focus-ring.js";
|
|
4
|
-
var u = Object.defineProperty,
|
|
5
|
-
for (var n = r > 1 ? void 0 : r ?
|
|
6
|
-
(
|
|
7
|
-
return r && n && u(
|
|
4
|
+
var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, i, s, r) => {
|
|
5
|
+
for (var n = r > 1 ? void 0 : r ? b(i, s) : i, c = t.length - 1, d; c >= 0; c--)
|
|
6
|
+
(d = t[c]) && (n = (r ? d(i, s, n) : d(n)) || n);
|
|
7
|
+
return r && n && u(i, s, n), n;
|
|
8
8
|
};
|
|
9
|
-
let
|
|
9
|
+
let e = class extends v {
|
|
10
10
|
constructor() {
|
|
11
|
-
super(...arguments), this.
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
super(...arguments), this.open = !1, this.title = "", this.content = "", this.overline = "", this.supportingText = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.imgHrefImage = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.density = 0, this._unique = e._uid(), this._onToggle = (t) => {
|
|
12
|
+
const i = t.currentTarget;
|
|
13
|
+
this.open = !!i.open;
|
|
14
|
+
const s = this.closest("scb-accordion");
|
|
15
|
+
this.open && s && !s.hasAttribute("detached") && s.querySelectorAll("scb-accordion-item").forEach((n) => {
|
|
16
|
+
n !== this && n.setOpen(!1);
|
|
17
|
+
}), this._applyInertByOpen();
|
|
16
18
|
};
|
|
17
19
|
}
|
|
18
20
|
static _uid() {
|
|
19
|
-
var
|
|
20
|
-
return ((
|
|
21
|
+
var t, i;
|
|
22
|
+
return ((i = (t = globalThis.crypto) == null ? void 0 : t.randomUUID) == null ? void 0 : i.call(t)) ?? `${e._uidPrefix}-${++e._uidSeq}`;
|
|
21
23
|
}
|
|
22
24
|
async firstUpdated() {
|
|
23
|
-
|
|
25
|
+
e._mdIconLoaded || (await import("@material/web/icon/icon.js"), e._mdIconLoaded = !0), e._mdRippleLoaded || (await import("@material/web/ripple/ripple.js"), e._mdRippleLoaded = !0), this._applyInertByOpen();
|
|
24
26
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
_applyInertByOpen() {
|
|
28
|
+
const t = this.renderRoot.querySelector(".scb-accordion-bottom"), i = this.renderRoot.querySelector("details");
|
|
29
|
+
!t || !i || (i.open ? (t.removeAttribute("inert"), t.setAttribute("aria-hidden", "false")) : (t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true")));
|
|
27
30
|
}
|
|
28
|
-
_onKeyDown(
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
break;
|
|
31
|
+
_onKeyDown(t) {
|
|
32
|
+
const i = this.closest("scb-accordion"), r = Array.from((i == null ? void 0 : i.querySelectorAll("scb-accordion-item")) || []).map((d) => {
|
|
33
|
+
var g;
|
|
34
|
+
return ((g = d.renderRoot.querySelector("details")) == null ? void 0 : g.querySelector(".scb-accordion-top")) || null;
|
|
35
|
+
}).filter((d) => !!d), n = t.currentTarget, c = r.indexOf(n);
|
|
36
|
+
switch (t.key) {
|
|
35
37
|
case "ArrowDown":
|
|
36
|
-
|
|
38
|
+
t.preventDefault(), c < r.length - 1 && r[c + 1].focus();
|
|
37
39
|
break;
|
|
38
40
|
case "ArrowUp":
|
|
39
|
-
|
|
41
|
+
t.preventDefault(), c > 0 && r[c - 1].focus();
|
|
40
42
|
break;
|
|
41
43
|
case "Home":
|
|
42
|
-
|
|
44
|
+
t.preventDefault(), r.length && r[0].focus();
|
|
43
45
|
break;
|
|
44
46
|
case "End":
|
|
45
|
-
|
|
47
|
+
t.preventDefault(), r.length && r[r.length - 1].focus();
|
|
46
48
|
break;
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
case "avatar":
|
|
55
|
-
return l`
|
|
56
|
-
<scb-avatar
|
|
57
|
-
label=${this.avatarLabel}
|
|
58
|
-
alt=${this.avatarAlt}
|
|
59
|
-
src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
|
|
60
|
-
size="medium"
|
|
61
|
-
shape="circular"
|
|
62
|
-
variant=${this.avatarVariant}
|
|
63
|
-
></scb-avatar>
|
|
64
|
-
`;
|
|
65
|
-
case "image":
|
|
66
|
-
return this.imgHrefImage ? l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />` : p;
|
|
67
|
-
default:
|
|
68
|
-
return p;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
_applyInert() {
|
|
72
|
-
const e = this.renderRoot.querySelector(".scb-accordion-bottom");
|
|
73
|
-
e && (this.expanded ? (e.removeAttribute("inert"), e.setAttribute("aria-hidden", "false")) : (e.setAttribute("inert", ""), e.setAttribute("aria-hidden", "true")));
|
|
74
|
-
}
|
|
75
|
-
_emitExpandedChanged() {
|
|
76
|
-
this.dispatchEvent(new CustomEvent("expanded-changed", {
|
|
77
|
-
detail: { expanded: this.expanded, label: this.label },
|
|
78
|
-
bubbles: !0,
|
|
79
|
-
composed: !0
|
|
80
|
-
}));
|
|
51
|
+
/** Programmatisk uppdatering som även speglar <details>. */
|
|
52
|
+
setOpen(t) {
|
|
53
|
+
this.open = !!t;
|
|
54
|
+
const i = this.renderRoot.querySelector("details");
|
|
55
|
+
i && (i.open = this.open), this._applyInertByOpen();
|
|
81
56
|
}
|
|
82
|
-
updated(
|
|
83
|
-
|
|
57
|
+
updated(t) {
|
|
58
|
+
if (t.has("open")) {
|
|
59
|
+
const i = this.renderRoot.querySelector("details");
|
|
60
|
+
i && i.open !== this.open && (i.open = this.open), this._applyInertByOpen(), this.dispatchEvent(new CustomEvent("open-changed", {
|
|
61
|
+
detail: { open: this.open, title: this.title },
|
|
62
|
+
bubbles: !0,
|
|
63
|
+
composed: !0
|
|
64
|
+
}));
|
|
65
|
+
}
|
|
84
66
|
}
|
|
85
67
|
render() {
|
|
86
|
-
const
|
|
68
|
+
const t = `bottom-${this._unique}`, i = `header-${this._unique}`, s = this.leading ? this.leadingVariant === "image" && this.imgHrefImage ? l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />` : this.leadingVariant === "avatar" ? l`
|
|
69
|
+
<scb-avatar
|
|
70
|
+
label=${this.avatarLabel}
|
|
71
|
+
alt=${this.avatarAlt}
|
|
72
|
+
src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
|
|
73
|
+
size="medium"
|
|
74
|
+
shape="circular"
|
|
75
|
+
variant=${this.avatarVariant}
|
|
76
|
+
></scb-avatar>
|
|
77
|
+
` : this.leadingVariant === "icon" ? l`<md-icon>${this.leadingIcon}</md-icon>` : p : p;
|
|
87
78
|
return l`
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
id=${
|
|
79
|
+
<details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
|
|
80
|
+
<summary
|
|
81
|
+
id=${i}
|
|
91
82
|
class="scb-accordion-top"
|
|
92
|
-
|
|
93
|
-
role="button"
|
|
94
|
-
aria-expanded=${this.expanded}
|
|
95
|
-
aria-controls=${e}
|
|
96
|
-
@click=${this.toggleAccordion}
|
|
83
|
+
aria-controls=${t}
|
|
97
84
|
@keydown=${this._onKeyDown}
|
|
98
85
|
>
|
|
99
86
|
<md-ripple></md-ripple>
|
|
100
87
|
|
|
101
|
-
${this.leading ? l`<div class="leading">${
|
|
88
|
+
${this.leading ? l`<div class="leading">${s}</div>` : p}
|
|
102
89
|
|
|
103
90
|
<div class="texts">
|
|
104
91
|
${this.overline ? l`<div class="overline">${this.overline}</div>` : p}
|
|
105
|
-
<div class="
|
|
92
|
+
<div class="title">${this.title}</div>
|
|
106
93
|
${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : p}
|
|
107
94
|
</div>
|
|
108
95
|
|
|
109
|
-
<md-icon class="chevron"
|
|
110
|
-
</
|
|
96
|
+
<md-icon class="chevron">keyboard_arrow_down</md-icon>
|
|
97
|
+
</summary>
|
|
111
98
|
|
|
112
|
-
<div
|
|
113
|
-
id=${e}
|
|
114
|
-
class="scb-accordion-bottom ${this.expanded ? "expanded" : ""}"
|
|
115
|
-
role="region"
|
|
116
|
-
aria-labelledby=${a}
|
|
117
|
-
aria-hidden=${this.expanded ? "false" : "true"}
|
|
118
|
-
>
|
|
99
|
+
<div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
|
|
119
100
|
<div class="bottom-inner">
|
|
120
101
|
<slot>${this.content}</slot>
|
|
121
102
|
</div>
|
|
122
103
|
</div>
|
|
123
|
-
</
|
|
104
|
+
</details>
|
|
124
105
|
|
|
125
|
-
<md-focus-ring for=${
|
|
106
|
+
<md-focus-ring for=${i} inward></md-focus-ring>
|
|
126
107
|
`;
|
|
127
108
|
}
|
|
128
109
|
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
110
|
+
e._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
|
|
111
|
+
e._uidSeq = 0;
|
|
112
|
+
e._mdIconLoaded = !1;
|
|
113
|
+
e._mdRippleLoaded = !1;
|
|
114
|
+
e.styles = [
|
|
115
|
+
m`
|
|
135
116
|
:host {
|
|
136
117
|
display: block;
|
|
137
118
|
position: relative;
|
|
@@ -152,28 +133,29 @@ t.styles = [
|
|
|
152
133
|
.scb-accordion-item {
|
|
153
134
|
border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
|
|
154
135
|
margin-bottom: calc(var(--stroke-border, 1px) * -1);
|
|
155
|
-
display: flex;
|
|
156
|
-
flex-direction: column;
|
|
157
136
|
color: var(--md-sys-color-on-surface);
|
|
158
137
|
font-family: var(--brand-font);
|
|
159
138
|
}
|
|
160
139
|
|
|
140
|
+
/* Header */
|
|
161
141
|
.scb-accordion-top {
|
|
142
|
+
list-style: none;
|
|
162
143
|
display: flex;
|
|
163
144
|
flex-direction: row;
|
|
164
145
|
align-items: center;
|
|
165
146
|
cursor: pointer;
|
|
166
147
|
padding-block: var(--spacing-7, 24px);
|
|
167
148
|
padding-inline: var(--spacing-5, 16px);
|
|
168
|
-
outline: none;
|
|
169
149
|
border-radius: var(--radius-none, 0px);
|
|
170
150
|
gap: var(--spacing-5, 16px);
|
|
171
151
|
color: var(--md-sys-color-on-surface);
|
|
172
152
|
position: relative;
|
|
173
|
-
overflow:
|
|
153
|
+
overflow: hidden;
|
|
174
154
|
-webkit-tap-highlight-color: transparent;
|
|
155
|
+
outline: none;
|
|
175
156
|
}
|
|
176
|
-
.scb-accordion-top
|
|
157
|
+
.scb-accordion-top::-webkit-details-marker { display: none; }
|
|
158
|
+
summary::marker { content: ''; }
|
|
177
159
|
|
|
178
160
|
:host([density="-2"]) .scb-accordion-top,
|
|
179
161
|
:host-context([data-density="-2"]) .scb-accordion-top {
|
|
@@ -184,6 +166,7 @@ t.styles = [
|
|
|
184
166
|
padding-block: var(--spacing-4, 12px);
|
|
185
167
|
}
|
|
186
168
|
|
|
169
|
+
/* Panelinnehåll + animationer (grid 0fr -> 1fr) */
|
|
187
170
|
.scb-accordion-bottom {
|
|
188
171
|
display: grid;
|
|
189
172
|
grid-template-rows: 0fr;
|
|
@@ -196,7 +179,7 @@ t.styles = [
|
|
|
196
179
|
padding-block: var(--scb-accordion-panel-padding-closed);
|
|
197
180
|
padding-inline: var(--spacing-5, 16px);
|
|
198
181
|
}
|
|
199
|
-
.scb-accordion-bottom
|
|
182
|
+
details[open] .scb-accordion-bottom {
|
|
200
183
|
grid-template-rows: 1fr;
|
|
201
184
|
opacity: 1;
|
|
202
185
|
padding-top: var(--spacing-2, 4px);
|
|
@@ -206,7 +189,7 @@ t.styles = [
|
|
|
206
189
|
}
|
|
207
190
|
.bottom-inner { overflow: hidden; }
|
|
208
191
|
|
|
209
|
-
.
|
|
192
|
+
.title {
|
|
210
193
|
font-family: var(--brand-font);
|
|
211
194
|
font-size: var(--md-sys-typescale-title-large-size);
|
|
212
195
|
line-height: var(--md-sys-typescale-title-large-line-height);
|
|
@@ -240,7 +223,14 @@ t.styles = [
|
|
|
240
223
|
}
|
|
241
224
|
|
|
242
225
|
.texts { display: grid; gap: var(--spacing-1, 2px); }
|
|
243
|
-
|
|
226
|
+
|
|
227
|
+
.chevron {
|
|
228
|
+
margin-left: auto;
|
|
229
|
+
padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
|
|
230
|
+
font-size: var(--icon-size-small, 24px);
|
|
231
|
+
transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
|
|
232
|
+
}
|
|
233
|
+
details[open] .chevron { transform: rotate(180deg); }
|
|
244
234
|
|
|
245
235
|
md-ripple {
|
|
246
236
|
border-radius: inherit;
|
|
@@ -249,54 +239,56 @@ t.styles = [
|
|
|
249
239
|
pointer-events: none;
|
|
250
240
|
overflow: hidden;
|
|
251
241
|
}
|
|
252
|
-
@media (prefers-reduced-motion: reduce) {
|
|
242
|
+
@media (prefers-reduced-motion: reduce) {
|
|
243
|
+
md-ripple { display: none; }
|
|
244
|
+
}
|
|
253
245
|
`
|
|
254
246
|
];
|
|
255
|
-
|
|
256
|
-
o({ type: Boolean })
|
|
257
|
-
],
|
|
258
|
-
|
|
247
|
+
a([
|
|
248
|
+
o({ type: Boolean, reflect: !0 })
|
|
249
|
+
], e.prototype, "open", 2);
|
|
250
|
+
a([
|
|
259
251
|
o({ type: String, reflect: !0 })
|
|
260
|
-
],
|
|
261
|
-
|
|
252
|
+
], e.prototype, "title", 2);
|
|
253
|
+
a([
|
|
262
254
|
o({ type: String })
|
|
263
|
-
],
|
|
264
|
-
|
|
255
|
+
], e.prototype, "content", 2);
|
|
256
|
+
a([
|
|
265
257
|
o({ type: String, attribute: "overline" })
|
|
266
|
-
],
|
|
267
|
-
|
|
258
|
+
], e.prototype, "overline", 2);
|
|
259
|
+
a([
|
|
268
260
|
o({ type: String, attribute: "supporting-text" })
|
|
269
|
-
],
|
|
270
|
-
|
|
261
|
+
], e.prototype, "supportingText", 2);
|
|
262
|
+
a([
|
|
271
263
|
o({ type: Boolean })
|
|
272
|
-
],
|
|
273
|
-
|
|
264
|
+
], e.prototype, "leading", 2);
|
|
265
|
+
a([
|
|
274
266
|
o({ type: String, attribute: "leading-variant", reflect: !0 })
|
|
275
|
-
],
|
|
276
|
-
|
|
267
|
+
], e.prototype, "leadingVariant", 2);
|
|
268
|
+
a([
|
|
277
269
|
o({ type: String, attribute: "leading-icon" })
|
|
278
|
-
],
|
|
279
|
-
|
|
270
|
+
], e.prototype, "leadingIcon", 2);
|
|
271
|
+
a([
|
|
280
272
|
o({ type: String, attribute: "img-href-image", reflect: !0 })
|
|
281
|
-
],
|
|
282
|
-
|
|
273
|
+
], e.prototype, "imgHrefImage", 2);
|
|
274
|
+
a([
|
|
283
275
|
o({ type: String, attribute: "avatar-label" })
|
|
284
|
-
],
|
|
285
|
-
|
|
276
|
+
], e.prototype, "avatarLabel", 2);
|
|
277
|
+
a([
|
|
286
278
|
o({ type: String, attribute: "avatar-alt" })
|
|
287
|
-
],
|
|
288
|
-
|
|
279
|
+
], e.prototype, "avatarAlt", 2);
|
|
280
|
+
a([
|
|
289
281
|
o({ type: String, attribute: "avatar-variant" })
|
|
290
|
-
],
|
|
291
|
-
|
|
282
|
+
], e.prototype, "avatarVariant", 2);
|
|
283
|
+
a([
|
|
292
284
|
o({ type: String, attribute: "avatar-src" })
|
|
293
|
-
],
|
|
294
|
-
|
|
285
|
+
], e.prototype, "avatarSrc", 2);
|
|
286
|
+
a([
|
|
295
287
|
o({ type: Number, reflect: !0 })
|
|
296
|
-
],
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
],
|
|
288
|
+
], e.prototype, "density", 2);
|
|
289
|
+
e = a([
|
|
290
|
+
h("scb-accordion-item")
|
|
291
|
+
], e);
|
|
300
292
|
export {
|
|
301
|
-
|
|
293
|
+
e as ScbAccordionItem
|
|
302
294
|
};
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -1667,52 +1667,42 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1667
1667
|
* @license
|
|
1668
1668
|
* Copyright 2021 Google LLC
|
|
1669
1669
|
* SPDX-License-Identifier: Apache-2.0
|
|
1670
|
-
*/let vo=class extends _c{constructor(){super(...arguments),this.fieldTag=J`md-outlined-field`}};vo.styles=[Ga,yc],vo=d([g("md-outlined-text-field")],vo);var xc=Object.defineProperty,wc=Object.getOwnPropertyDescriptor,X=(o,e,t,r)=>{for(var i=r>1?void 0:r?wc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&xc(e,t,i),i};a.ScbAccordionItem=class extends y{constructor(){super(...arguments),this.
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
<
|
|
1681
|
-
<
|
|
1670
|
+
*/let vo=class extends _c{constructor(){super(...arguments),this.fieldTag=J`md-outlined-field`}};vo.styles=[Ga,yc],vo=d([g("md-outlined-text-field")],vo);var xc=Object.defineProperty,wc=Object.getOwnPropertyDescriptor,X=(o,e,t,r)=>{for(var i=r>1?void 0:r?wc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&xc(e,t,i),i};a.ScbAccordionItem=class extends y{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=a.ScbAccordionItem._uid(),this._onToggle=e=>{const t=e.currentTarget;this.open=!!t.open;const r=this.closest("scb-accordion");this.open&&r&&!r.hasAttribute("detached")&&r.querySelectorAll("scb-accordion-item").forEach(s=>{s!==this&&s.setOpen(!1)}),this._applyInertByOpen()}}static _uid(){var e,t;return((t=(e=globalThis.crypto)==null?void 0:e.randomUUID)==null?void 0:t.call(e))??`${a.ScbAccordionItem._uidPrefix}-${++a.ScbAccordionItem._uidSeq}`}async firstUpdated(){a.ScbAccordionItem._mdIconLoaded||(await Promise.resolve().then(()=>Y),a.ScbAccordionItem._mdIconLoaded=!0),a.ScbAccordionItem._mdRippleLoaded||(await Promise.resolve().then(()=>br),a.ScbAccordionItem._mdRippleLoaded=!0),this._applyInertByOpen()}_applyInertByOpen(){const e=this.renderRoot.querySelector(".scb-accordion-bottom"),t=this.renderRoot.querySelector("details");!e||!t||(t.open?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}_onKeyDown(e){const t=this.closest("scb-accordion"),i=Array.from((t==null?void 0:t.querySelectorAll("scb-accordion-item"))||[]).map(h=>{var p;return((p=h.renderRoot.querySelector("details"))==null?void 0:p.querySelector(".scb-accordion-top"))||null}).filter(h=>!!h),s=e.currentTarget,n=i.indexOf(s);switch(e.key){case"ArrowDown":e.preventDefault(),n<i.length-1&&i[n+1].focus();break;case"ArrowUp":e.preventDefault(),n>0&&i[n-1].focus();break;case"Home":e.preventDefault(),i.length&&i[0].focus();break;case"End":e.preventDefault(),i.length&&i[i.length-1].focus();break}}setOpen(e){this.open=!!e;const t=this.renderRoot.querySelector("details");t&&(t.open=this.open),this._applyInertByOpen()}updated(e){if(e.has("open")){const t=this.renderRoot.querySelector("details");t&&t.open!==this.open&&(t.open=this.open),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const e=`bottom-${this._unique}`,t=`header-${this._unique}`,r=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?c`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?c`
|
|
1671
|
+
<scb-avatar
|
|
1672
|
+
label=${this.avatarLabel}
|
|
1673
|
+
alt=${this.avatarAlt}
|
|
1674
|
+
src=${this.avatarVariant==="image"?this.avatarSrc:""}
|
|
1675
|
+
size="medium"
|
|
1676
|
+
shape="circular"
|
|
1677
|
+
variant=${this.avatarVariant}
|
|
1678
|
+
></scb-avatar>
|
|
1679
|
+
`:this.leadingVariant==="icon"?c`<md-icon>${this.leadingIcon}</md-icon>`:u:u;return c`
|
|
1680
|
+
<details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
|
|
1681
|
+
<summary
|
|
1682
1682
|
id=${t}
|
|
1683
1683
|
class="scb-accordion-top"
|
|
1684
|
-
tabindex="0"
|
|
1685
|
-
role="button"
|
|
1686
|
-
aria-expanded=${this.expanded}
|
|
1687
1684
|
aria-controls=${e}
|
|
1688
|
-
@click=${this.toggleAccordion}
|
|
1689
1685
|
@keydown=${this._onKeyDown}
|
|
1690
1686
|
>
|
|
1691
1687
|
<md-ripple></md-ripple>
|
|
1692
1688
|
|
|
1693
|
-
${this.leading?c`<div class="leading">${
|
|
1689
|
+
${this.leading?c`<div class="leading">${r}</div>`:u}
|
|
1694
1690
|
|
|
1695
1691
|
<div class="texts">
|
|
1696
1692
|
${this.overline?c`<div class="overline">${this.overline}</div>`:u}
|
|
1697
|
-
<div class="
|
|
1693
|
+
<div class="title">${this.title}</div>
|
|
1698
1694
|
${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:u}
|
|
1699
1695
|
</div>
|
|
1700
1696
|
|
|
1701
|
-
<md-icon class="chevron"
|
|
1702
|
-
</
|
|
1697
|
+
<md-icon class="chevron">keyboard_arrow_down</md-icon>
|
|
1698
|
+
</summary>
|
|
1703
1699
|
|
|
1704
|
-
<div
|
|
1705
|
-
id=${e}
|
|
1706
|
-
class="scb-accordion-bottom ${this.expanded?"expanded":""}"
|
|
1707
|
-
role="region"
|
|
1708
|
-
aria-labelledby=${t}
|
|
1709
|
-
aria-hidden=${this.expanded?"false":"true"}
|
|
1710
|
-
>
|
|
1700
|
+
<div id=${e} class="scb-accordion-bottom" role="region" aria-labelledby=${t}>
|
|
1711
1701
|
<div class="bottom-inner">
|
|
1712
1702
|
<slot>${this.content}</slot>
|
|
1713
1703
|
</div>
|
|
1714
1704
|
</div>
|
|
1715
|
-
</
|
|
1705
|
+
</details>
|
|
1716
1706
|
|
|
1717
1707
|
<md-focus-ring for=${t} inward></md-focus-ring>
|
|
1718
1708
|
`}},a.ScbAccordionItem._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`,a.ScbAccordionItem._uidSeq=0,a.ScbAccordionItem._mdIconLoaded=!1,a.ScbAccordionItem._mdRippleLoaded=!1,a.ScbAccordionItem.styles=[b`
|
|
@@ -1736,28 +1726,29 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1736
1726
|
.scb-accordion-item {
|
|
1737
1727
|
border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
|
|
1738
1728
|
margin-bottom: calc(var(--stroke-border, 1px) * -1);
|
|
1739
|
-
display: flex;
|
|
1740
|
-
flex-direction: column;
|
|
1741
1729
|
color: var(--md-sys-color-on-surface);
|
|
1742
1730
|
font-family: var(--brand-font);
|
|
1743
1731
|
}
|
|
1744
1732
|
|
|
1733
|
+
/* Header */
|
|
1745
1734
|
.scb-accordion-top {
|
|
1735
|
+
list-style: none;
|
|
1746
1736
|
display: flex;
|
|
1747
1737
|
flex-direction: row;
|
|
1748
1738
|
align-items: center;
|
|
1749
1739
|
cursor: pointer;
|
|
1750
1740
|
padding-block: var(--spacing-7, 24px);
|
|
1751
1741
|
padding-inline: var(--spacing-5, 16px);
|
|
1752
|
-
outline: none;
|
|
1753
1742
|
border-radius: var(--radius-none, 0px);
|
|
1754
1743
|
gap: var(--spacing-5, 16px);
|
|
1755
1744
|
color: var(--md-sys-color-on-surface);
|
|
1756
1745
|
position: relative;
|
|
1757
|
-
overflow:
|
|
1746
|
+
overflow: hidden;
|
|
1758
1747
|
-webkit-tap-highlight-color: transparent;
|
|
1748
|
+
outline: none;
|
|
1759
1749
|
}
|
|
1760
|
-
.scb-accordion-top
|
|
1750
|
+
.scb-accordion-top::-webkit-details-marker { display: none; }
|
|
1751
|
+
summary::marker { content: ''; }
|
|
1761
1752
|
|
|
1762
1753
|
:host([density="-2"]) .scb-accordion-top,
|
|
1763
1754
|
:host-context([data-density="-2"]) .scb-accordion-top {
|
|
@@ -1768,6 +1759,7 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1768
1759
|
padding-block: var(--spacing-4, 12px);
|
|
1769
1760
|
}
|
|
1770
1761
|
|
|
1762
|
+
/* Panelinnehåll + animationer (grid 0fr -> 1fr) */
|
|
1771
1763
|
.scb-accordion-bottom {
|
|
1772
1764
|
display: grid;
|
|
1773
1765
|
grid-template-rows: 0fr;
|
|
@@ -1780,7 +1772,7 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1780
1772
|
padding-block: var(--scb-accordion-panel-padding-closed);
|
|
1781
1773
|
padding-inline: var(--spacing-5, 16px);
|
|
1782
1774
|
}
|
|
1783
|
-
.scb-accordion-bottom
|
|
1775
|
+
details[open] .scb-accordion-bottom {
|
|
1784
1776
|
grid-template-rows: 1fr;
|
|
1785
1777
|
opacity: 1;
|
|
1786
1778
|
padding-top: var(--spacing-2, 4px);
|
|
@@ -1790,7 +1782,7 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1790
1782
|
}
|
|
1791
1783
|
.bottom-inner { overflow: hidden; }
|
|
1792
1784
|
|
|
1793
|
-
.
|
|
1785
|
+
.title {
|
|
1794
1786
|
font-family: var(--brand-font);
|
|
1795
1787
|
font-size: var(--md-sys-typescale-title-large-size);
|
|
1796
1788
|
line-height: var(--md-sys-typescale-title-large-line-height);
|
|
@@ -1824,7 +1816,14 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1824
1816
|
}
|
|
1825
1817
|
|
|
1826
1818
|
.texts { display: grid; gap: var(--spacing-1, 2px); }
|
|
1827
|
-
|
|
1819
|
+
|
|
1820
|
+
.chevron {
|
|
1821
|
+
margin-left: auto;
|
|
1822
|
+
padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
|
|
1823
|
+
font-size: var(--icon-size-small, 24px);
|
|
1824
|
+
transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
|
|
1825
|
+
}
|
|
1826
|
+
details[open] .chevron { transform: rotate(180deg); }
|
|
1828
1827
|
|
|
1829
1828
|
md-ripple {
|
|
1830
1829
|
border-radius: inherit;
|
|
@@ -1833,8 +1832,10 @@ var ScbWcTest=function(a){"use strict";var Ss;function d(o,e,t,r){var i=argument
|
|
|
1833
1832
|
pointer-events: none;
|
|
1834
1833
|
overflow: hidden;
|
|
1835
1834
|
}
|
|
1836
|
-
@media (prefers-reduced-motion: reduce) {
|
|
1837
|
-
|
|
1835
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1836
|
+
md-ripple { display: none; }
|
|
1837
|
+
}
|
|
1838
|
+
`],X([l({type:Boolean,reflect:!0})],a.ScbAccordionItem.prototype,"open",2),X([l({type:String,reflect:!0})],a.ScbAccordionItem.prototype,"title",2),X([l({type:String})],a.ScbAccordionItem.prototype,"content",2),X([l({type:String,attribute:"overline"})],a.ScbAccordionItem.prototype,"overline",2),X([l({type:String,attribute:"supporting-text"})],a.ScbAccordionItem.prototype,"supportingText",2),X([l({type:Boolean})],a.ScbAccordionItem.prototype,"leading",2),X([l({type:String,attribute:"leading-variant",reflect:!0})],a.ScbAccordionItem.prototype,"leadingVariant",2),X([l({type:String,attribute:"leading-icon"})],a.ScbAccordionItem.prototype,"leadingIcon",2),X([l({type:String,attribute:"img-href-image",reflect:!0})],a.ScbAccordionItem.prototype,"imgHrefImage",2),X([l({type:String,attribute:"avatar-label"})],a.ScbAccordionItem.prototype,"avatarLabel",2),X([l({type:String,attribute:"avatar-alt"})],a.ScbAccordionItem.prototype,"avatarAlt",2),X([l({type:String,attribute:"avatar-variant"})],a.ScbAccordionItem.prototype,"avatarVariant",2),X([l({type:String,attribute:"avatar-src"})],a.ScbAccordionItem.prototype,"avatarSrc",2),X([l({type:Number,reflect:!0})],a.ScbAccordionItem.prototype,"density",2),a.ScbAccordionItem=X([g("scb-accordion-item")],a.ScbAccordionItem);var Sc=Object.defineProperty,kc=Object.getOwnPropertyDescriptor,Ka=(o,e,t,r)=>{for(var i=r>1?void 0:r?kc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Sc(e,t,i),i};a.ScbAccordion=class extends y{constructor(){super(...arguments),this.detached=!1}render(){return c`
|
|
1838
1839
|
<div class="scb-accordion" ?detached=${this.detached}>
|
|
1839
1840
|
<slot></slot>
|
|
1840
1841
|
</div>
|