scb-wc-test 0.1.64 → 0.1.65
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(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}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()}}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.65",
|
|
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": "B810390FB9229867E7E92F1C6EEBB44AA185F78A0196EA925D0BABAF1A8DFF33"
|
|
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,14 @@ 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
|
-
private _applyInert;
|
|
30
|
-
private _emitExpandedChanged;
|
|
28
|
+
setOpen(on: boolean): void;
|
|
31
29
|
protected updated(changed: Map<string, unknown>): void;
|
|
32
30
|
protected render(): TemplateResult;
|
|
33
31
|
}
|
|
@@ -1,137 +1,117 @@
|
|
|
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(), this.dispatchEvent(new CustomEvent("open-changed", {
|
|
18
|
+
detail: { open: this.open, title: this.title },
|
|
19
|
+
bubbles: !0,
|
|
20
|
+
composed: !0
|
|
21
|
+
}));
|
|
16
22
|
};
|
|
17
23
|
}
|
|
18
24
|
static _uid() {
|
|
19
|
-
var
|
|
20
|
-
return ((
|
|
25
|
+
var t, i;
|
|
26
|
+
return ((i = (t = globalThis.crypto) == null ? void 0 : t.randomUUID) == null ? void 0 : i.call(t)) ?? `${e._uidPrefix}-${++e._uidSeq}`;
|
|
21
27
|
}
|
|
22
28
|
async firstUpdated() {
|
|
23
|
-
|
|
29
|
+
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
30
|
}
|
|
25
|
-
|
|
26
|
-
|
|
31
|
+
_applyInertByOpen() {
|
|
32
|
+
const t = this.renderRoot.querySelector(".scb-accordion-bottom"), i = this.renderRoot.querySelector("details");
|
|
33
|
+
!t || !i || (i.open ? (t.removeAttribute("inert"), t.setAttribute("aria-hidden", "false")) : (t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true")));
|
|
27
34
|
}
|
|
28
|
-
_onKeyDown(
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
break;
|
|
35
|
+
_onKeyDown(t) {
|
|
36
|
+
const i = this.closest("scb-accordion"), r = Array.from((i == null ? void 0 : i.querySelectorAll("scb-accordion-item")) || []).map((d) => {
|
|
37
|
+
var g;
|
|
38
|
+
return ((g = d.renderRoot.querySelector("details")) == null ? void 0 : g.querySelector(".scb-accordion-top")) || null;
|
|
39
|
+
}).filter((d) => !!d), n = t.currentTarget, c = r.indexOf(n);
|
|
40
|
+
switch (t.key) {
|
|
35
41
|
case "ArrowDown":
|
|
36
|
-
|
|
42
|
+
t.preventDefault(), c < r.length - 1 && r[c + 1].focus();
|
|
37
43
|
break;
|
|
38
44
|
case "ArrowUp":
|
|
39
|
-
|
|
45
|
+
t.preventDefault(), c > 0 && r[c - 1].focus();
|
|
40
46
|
break;
|
|
41
47
|
case "Home":
|
|
42
|
-
|
|
48
|
+
t.preventDefault(), r.length && r[0].focus();
|
|
43
49
|
break;
|
|
44
50
|
case "End":
|
|
45
|
-
|
|
51
|
+
t.preventDefault(), r.length && r[r.length - 1].focus();
|
|
46
52
|
break;
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
return l`<md-icon>${this.leadingIcon}</md-icon>`;
|
|
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
|
-
}));
|
|
55
|
+
setOpen(t) {
|
|
56
|
+
this.open = !!t;
|
|
57
|
+
const i = this.renderRoot.querySelector("details");
|
|
58
|
+
i && (i.open = this.open), this._applyInertByOpen();
|
|
81
59
|
}
|
|
82
|
-
updated(
|
|
83
|
-
|
|
60
|
+
updated(t) {
|
|
61
|
+
if (t.has("open")) {
|
|
62
|
+
const i = this.renderRoot.querySelector("details");
|
|
63
|
+
i && i.open !== this.open && (i.open = this.open), this._applyInertByOpen();
|
|
64
|
+
}
|
|
84
65
|
}
|
|
85
66
|
render() {
|
|
86
|
-
const
|
|
67
|
+
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`
|
|
68
|
+
<scb-avatar
|
|
69
|
+
label=${this.avatarLabel}
|
|
70
|
+
alt=${this.avatarAlt}
|
|
71
|
+
src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
|
|
72
|
+
size="medium"
|
|
73
|
+
shape="circular"
|
|
74
|
+
variant=${this.avatarVariant}
|
|
75
|
+
></scb-avatar>
|
|
76
|
+
` : this.leadingVariant === "icon" ? l`<md-icon>${this.leadingIcon}</md-icon>` : p : p;
|
|
87
77
|
return l`
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
id=${
|
|
78
|
+
<details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
|
|
79
|
+
<summary
|
|
80
|
+
id=${i}
|
|
91
81
|
class="scb-accordion-top"
|
|
92
|
-
|
|
93
|
-
role="button"
|
|
94
|
-
aria-expanded=${this.expanded}
|
|
95
|
-
aria-controls=${e}
|
|
96
|
-
@click=${this.toggleAccordion}
|
|
82
|
+
aria-controls=${t}
|
|
97
83
|
@keydown=${this._onKeyDown}
|
|
98
84
|
>
|
|
99
85
|
<md-ripple></md-ripple>
|
|
100
86
|
|
|
101
|
-
${this.leading ? l`<div class="leading">${
|
|
87
|
+
${this.leading ? l`<div class="leading">${s}</div>` : p}
|
|
102
88
|
|
|
103
89
|
<div class="texts">
|
|
104
90
|
${this.overline ? l`<div class="overline">${this.overline}</div>` : p}
|
|
105
|
-
<div class="
|
|
91
|
+
<div class="title">${this.title}</div>
|
|
106
92
|
${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : p}
|
|
107
93
|
</div>
|
|
108
94
|
|
|
109
|
-
<md-icon class="chevron"
|
|
110
|
-
</
|
|
95
|
+
<md-icon class="chevron">keyboard_arrow_down</md-icon>
|
|
96
|
+
</summary>
|
|
111
97
|
|
|
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
|
-
>
|
|
98
|
+
<div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
|
|
119
99
|
<div class="bottom-inner">
|
|
120
100
|
<slot>${this.content}</slot>
|
|
121
101
|
</div>
|
|
122
102
|
</div>
|
|
123
|
-
</
|
|
103
|
+
</details>
|
|
124
104
|
|
|
125
|
-
<md-focus-ring for=${
|
|
105
|
+
<md-focus-ring for=${i} inward></md-focus-ring>
|
|
126
106
|
`;
|
|
127
107
|
}
|
|
128
108
|
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
109
|
+
e._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
|
|
110
|
+
e._uidSeq = 0;
|
|
111
|
+
e._mdIconLoaded = !1;
|
|
112
|
+
e._mdRippleLoaded = !1;
|
|
113
|
+
e.styles = [
|
|
114
|
+
m`
|
|
135
115
|
:host {
|
|
136
116
|
display: block;
|
|
137
117
|
position: relative;
|
|
@@ -152,28 +132,29 @@ t.styles = [
|
|
|
152
132
|
.scb-accordion-item {
|
|
153
133
|
border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
|
|
154
134
|
margin-bottom: calc(var(--stroke-border, 1px) * -1);
|
|
155
|
-
display: flex;
|
|
156
|
-
flex-direction: column;
|
|
157
135
|
color: var(--md-sys-color-on-surface);
|
|
158
136
|
font-family: var(--brand-font);
|
|
159
137
|
}
|
|
160
138
|
|
|
139
|
+
/* Header */
|
|
161
140
|
.scb-accordion-top {
|
|
141
|
+
list-style: none;
|
|
162
142
|
display: flex;
|
|
163
143
|
flex-direction: row;
|
|
164
144
|
align-items: center;
|
|
165
145
|
cursor: pointer;
|
|
166
146
|
padding-block: var(--spacing-7, 24px);
|
|
167
147
|
padding-inline: var(--spacing-5, 16px);
|
|
168
|
-
outline: none;
|
|
169
148
|
border-radius: var(--radius-none, 0px);
|
|
170
149
|
gap: var(--spacing-5, 16px);
|
|
171
150
|
color: var(--md-sys-color-on-surface);
|
|
172
151
|
position: relative;
|
|
173
|
-
overflow:
|
|
152
|
+
overflow: hidden;
|
|
174
153
|
-webkit-tap-highlight-color: transparent;
|
|
154
|
+
outline: none;
|
|
175
155
|
}
|
|
176
|
-
.scb-accordion-top
|
|
156
|
+
.scb-accordion-top::-webkit-details-marker { display: none; }
|
|
157
|
+
summary::marker { content: ''; }
|
|
177
158
|
|
|
178
159
|
:host([density="-2"]) .scb-accordion-top,
|
|
179
160
|
:host-context([data-density="-2"]) .scb-accordion-top {
|
|
@@ -184,6 +165,7 @@ t.styles = [
|
|
|
184
165
|
padding-block: var(--spacing-4, 12px);
|
|
185
166
|
}
|
|
186
167
|
|
|
168
|
+
/* Panelinnehåll + animationer (grid 0fr -> 1fr) */
|
|
187
169
|
.scb-accordion-bottom {
|
|
188
170
|
display: grid;
|
|
189
171
|
grid-template-rows: 0fr;
|
|
@@ -196,7 +178,7 @@ t.styles = [
|
|
|
196
178
|
padding-block: var(--scb-accordion-panel-padding-closed);
|
|
197
179
|
padding-inline: var(--spacing-5, 16px);
|
|
198
180
|
}
|
|
199
|
-
.scb-accordion-bottom
|
|
181
|
+
details[open] .scb-accordion-bottom {
|
|
200
182
|
grid-template-rows: 1fr;
|
|
201
183
|
opacity: 1;
|
|
202
184
|
padding-top: var(--spacing-2, 4px);
|
|
@@ -206,7 +188,7 @@ t.styles = [
|
|
|
206
188
|
}
|
|
207
189
|
.bottom-inner { overflow: hidden; }
|
|
208
190
|
|
|
209
|
-
.
|
|
191
|
+
.title {
|
|
210
192
|
font-family: var(--brand-font);
|
|
211
193
|
font-size: var(--md-sys-typescale-title-large-size);
|
|
212
194
|
line-height: var(--md-sys-typescale-title-large-line-height);
|
|
@@ -240,7 +222,14 @@ t.styles = [
|
|
|
240
222
|
}
|
|
241
223
|
|
|
242
224
|
.texts { display: grid; gap: var(--spacing-1, 2px); }
|
|
243
|
-
|
|
225
|
+
|
|
226
|
+
.chevron {
|
|
227
|
+
margin-left: auto;
|
|
228
|
+
padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
|
|
229
|
+
font-size: var(--icon-size-small, 24px);
|
|
230
|
+
transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
|
|
231
|
+
}
|
|
232
|
+
details[open] .chevron { transform: rotate(180deg); }
|
|
244
233
|
|
|
245
234
|
md-ripple {
|
|
246
235
|
border-radius: inherit;
|
|
@@ -249,54 +238,56 @@ t.styles = [
|
|
|
249
238
|
pointer-events: none;
|
|
250
239
|
overflow: hidden;
|
|
251
240
|
}
|
|
252
|
-
@media (prefers-reduced-motion: reduce) {
|
|
241
|
+
@media (prefers-reduced-motion: reduce) {
|
|
242
|
+
md-ripple { display: none; }
|
|
243
|
+
}
|
|
253
244
|
`
|
|
254
245
|
];
|
|
255
|
-
|
|
256
|
-
o({ type: Boolean })
|
|
257
|
-
],
|
|
258
|
-
|
|
246
|
+
a([
|
|
247
|
+
o({ type: Boolean, reflect: !0 })
|
|
248
|
+
], e.prototype, "open", 2);
|
|
249
|
+
a([
|
|
259
250
|
o({ type: String, reflect: !0 })
|
|
260
|
-
],
|
|
261
|
-
|
|
251
|
+
], e.prototype, "title", 2);
|
|
252
|
+
a([
|
|
262
253
|
o({ type: String })
|
|
263
|
-
],
|
|
264
|
-
|
|
254
|
+
], e.prototype, "content", 2);
|
|
255
|
+
a([
|
|
265
256
|
o({ type: String, attribute: "overline" })
|
|
266
|
-
],
|
|
267
|
-
|
|
257
|
+
], e.prototype, "overline", 2);
|
|
258
|
+
a([
|
|
268
259
|
o({ type: String, attribute: "supporting-text" })
|
|
269
|
-
],
|
|
270
|
-
|
|
260
|
+
], e.prototype, "supportingText", 2);
|
|
261
|
+
a([
|
|
271
262
|
o({ type: Boolean })
|
|
272
|
-
],
|
|
273
|
-
|
|
263
|
+
], e.prototype, "leading", 2);
|
|
264
|
+
a([
|
|
274
265
|
o({ type: String, attribute: "leading-variant", reflect: !0 })
|
|
275
|
-
],
|
|
276
|
-
|
|
266
|
+
], e.prototype, "leadingVariant", 2);
|
|
267
|
+
a([
|
|
277
268
|
o({ type: String, attribute: "leading-icon" })
|
|
278
|
-
],
|
|
279
|
-
|
|
269
|
+
], e.prototype, "leadingIcon", 2);
|
|
270
|
+
a([
|
|
280
271
|
o({ type: String, attribute: "img-href-image", reflect: !0 })
|
|
281
|
-
],
|
|
282
|
-
|
|
272
|
+
], e.prototype, "imgHrefImage", 2);
|
|
273
|
+
a([
|
|
283
274
|
o({ type: String, attribute: "avatar-label" })
|
|
284
|
-
],
|
|
285
|
-
|
|
275
|
+
], e.prototype, "avatarLabel", 2);
|
|
276
|
+
a([
|
|
286
277
|
o({ type: String, attribute: "avatar-alt" })
|
|
287
|
-
],
|
|
288
|
-
|
|
278
|
+
], e.prototype, "avatarAlt", 2);
|
|
279
|
+
a([
|
|
289
280
|
o({ type: String, attribute: "avatar-variant" })
|
|
290
|
-
],
|
|
291
|
-
|
|
281
|
+
], e.prototype, "avatarVariant", 2);
|
|
282
|
+
a([
|
|
292
283
|
o({ type: String, attribute: "avatar-src" })
|
|
293
|
-
],
|
|
294
|
-
|
|
284
|
+
], e.prototype, "avatarSrc", 2);
|
|
285
|
+
a([
|
|
295
286
|
o({ type: Number, reflect: !0 })
|
|
296
|
-
],
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
],
|
|
287
|
+
], e.prototype, "density", 2);
|
|
288
|
+
e = a([
|
|
289
|
+
h("scb-accordion-item")
|
|
290
|
+
], e);
|
|
300
291
|
export {
|
|
301
|
-
|
|
292
|
+
e as ScbAccordionItem
|
|
302
293
|
};
|
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(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}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()}}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>
|