@vonage/vwc-expansion-panel 2.25.7 → 2.25.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -7
- package/readme.md +12 -11
- package/src/vwc-expansion-panel.css.ts +1 -1
- package/src/vwc-expansion-panel.scss +30 -3
- package/src/vwc-expansion-panel.ts +54 -23
- package/vwc-expansion-panel.css.js +1 -1
- package/vwc-expansion-panel.css.js.map +1 -1
- package/vwc-expansion-panel.d.ts +7 -1
- package/vwc-expansion-panel.js +43 -13
- package/vwc-expansion-panel.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-expansion-panel",
|
|
3
|
-
"version": "2.25.
|
|
3
|
+
"version": "2.25.10",
|
|
4
4
|
"description": "expansion panel component",
|
|
5
5
|
"author": "yinonov <yinon@hotmail.com>",
|
|
6
6
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/expansion-panel#readme",
|
|
@@ -30,16 +30,16 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@material/mwc-base": "^0.22.1",
|
|
32
32
|
"@material/mwc-ripple": "^0.22.1",
|
|
33
|
-
"@vonage/vvd-core": "2.25.
|
|
34
|
-
"@vonage/vwc-icon": "2.25.
|
|
33
|
+
"@vonage/vvd-core": "2.25.10",
|
|
34
|
+
"@vonage/vwc-icon": "2.25.10",
|
|
35
35
|
"lit-element": "^2.4.0",
|
|
36
36
|
"tslib": "^2.3.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@vonage/vvd-design-tokens": "2.25.
|
|
40
|
-
"@vonage/vvd-typography": "2.25.
|
|
41
|
-
"@vonage/vvd-umbrella": "2.25.
|
|
39
|
+
"@vonage/vvd-design-tokens": "2.25.10",
|
|
40
|
+
"@vonage/vvd-typography": "2.25.10",
|
|
41
|
+
"@vonage/vvd-umbrella": "2.25.10",
|
|
42
42
|
"typescript": "^4.3.2"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "bd24e3dd8c755fe6372bd70ed478800c172f7242"
|
|
45
45
|
}
|
package/readme.md
CHANGED
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
## Properties
|
|
4
4
|
|
|
5
|
-
| Property | Attribute | Type | Default | Description
|
|
6
|
-
|
|
7
|
-
| `dense` | `dense` | `boolean` | false |
|
|
8
|
-
| `header` | `header` | `string` | "" | The heading text of the expanded panel. *deprecated* please use _heading_ property instead
|
|
9
|
-
| `heading` | `heading` | `string` | "" | The heading text of the expanded panel
|
|
10
|
-
| `icon` | `icon` | `string` | "" |
|
|
11
|
-
| `indicatorIconSet` | `indicatorIconSet` | `string` | "chevron" |
|
|
12
|
-
| `leadingToggle` | `leadingToggle` | `boolean` | false |
|
|
13
|
-
| `noRipple` | `noRipple` | `boolean` | false |
|
|
14
|
-
| `open` | `open` | `boolean` | false |
|
|
15
|
-
| `ripple` | | `Promise<Ripple>` | |
|
|
5
|
+
| Property | Attribute | Type | Default | Description |
|
|
6
|
+
|--------------------|--------------------| ----------------- |-----------|--------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
7
|
+
| `dense` | `dense` | `boolean` | false | |
|
|
8
|
+
| `header` | `header` | `string` | "" | The heading text of the expanded panel. *deprecated* please use _heading_ property instead |
|
|
9
|
+
| `heading` | `heading` | `string` | "" | The heading text of the expanded panel |
|
|
10
|
+
| `icon` | `icon` | `string` | "" | |
|
|
11
|
+
| `indicatorIconSet` | `indicatorIconSet` | `string` | "chevron" | |
|
|
12
|
+
| `leadingToggle` | `leadingToggle` | `boolean` | false | |
|
|
13
|
+
| `noRipple` | `noRipple` | `boolean` | false | |
|
|
14
|
+
| `open` | `open` | `boolean` | false | |
|
|
15
|
+
| `ripple` | | `Promise<Ripple>` | | |
|
|
16
|
+
| `headingLevel` | `heading-level` | `string` | "3" | The expansion panel `heading-level` defaults to `3` (meaning the button is wrapped with a `H3` tag) but need to be in accordance to the page's hierarchy |
|
|
16
17
|
|
|
17
18
|
## Methods
|
|
18
19
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// autogenerated module
|
|
2
2
|
import {css} from 'lit-element';
|
|
3
|
-
export const style = css`:host{--mdc-ripple-color: var(--vvd-color-on-canvas);display:flex;flex-direction:column}:host(:not([open])) .toggle-close,:host(:not([open])) .expansion-panel-body{display:none}:host([open]) .toggle-open{display:none}:host([open]) .toggle-close{display:initial}.expansion-panel-header{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:relative;display:flex;align-items:center;padding:16px;border:0 none;background:transparent;cursor:pointer}.expansion-panel-
|
|
3
|
+
export const style = css`:host{--mdc-ripple-color: var(--vvd-color-on-canvas);display:flex;flex-direction:column}:host(:not([open])) .toggle-close,:host(:not([open])) .expansion-panel-body{display:none}:host([open]) .toggle-open{display:none}:host([open]) .toggle-close{display:initial}.expansion-panel-header{padding:0;margin:0}.expansion-panel-button{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:relative;display:flex;width:100%;align-items:center;padding:16px;border:0 none;background:transparent;cursor:pointer}.expansion-panel-button .leading-icon,.expansion-panel-button .trailing-icon{display:flex}.expansion-panel-button .leading-icon vwc-icon,.expansion-panel-button .trailing-icon vwc-icon{--vvd-icon-size:var(--vvd-expansion-panel-icon-size, 20px)}.expansion-panel-button .heading-text{flex-grow:1;margin-inline-end:auto;text-align:left}.expansion-panel-button .meta{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-70);margin-inline-start:1rem;text-align:end;text-overflow:ellipsis;white-space:nowrap}.expansion-panel-button .leading-icon vwc-icon,.expansion-panel-button .leading-icon slot[name=icon i]::slotted(vwc-icon){margin-inline-end:16px}.expansion-panel-button .trailing-icon vwc-icon,.expansion-panel-button .trailing-icon slot[name=trailingIcon i]::slotted(vwc-icon){margin-inline-start:16px}.expansion-panel-body{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding:8px 32px 24px 16px}:host(:not([icon=""])) .expansion-panel-body,:host([leadingToggle]) .expansion-panel-body{padding-left:48px}:host([leadingToggle]) .expansion-panel-body{padding-right:16px}:host([dense]) .expansion-panel-button{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}:host([dense]) .meta{font:600 ultra-condensed 12px / 16px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}:host([dense]) vwc-icon{--vvd-expansion-panel-icon-size: 16px}`;
|
|
@@ -27,9 +27,15 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.expansion-panel-header {
|
|
30
|
+
padding: 0;
|
|
31
|
+
margin: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.expansion-panel-button {
|
|
30
35
|
@include typography.typography-cat-shorthand('subtitle-2');
|
|
31
36
|
position: relative;
|
|
32
37
|
display: flex;
|
|
38
|
+
width: 100%;
|
|
33
39
|
align-items: center;
|
|
34
40
|
padding: 16px;
|
|
35
41
|
border: 0 none;
|
|
@@ -44,6 +50,23 @@
|
|
|
44
50
|
#{icon-variables.$icon-size-variable-name}: var(#{expansion-panel-variables.$expansion-panel-icon-size-variable-name}, 20px);
|
|
45
51
|
}
|
|
46
52
|
}
|
|
53
|
+
.heading-text {
|
|
54
|
+
flex-grow: 1;
|
|
55
|
+
margin-inline-end: auto;
|
|
56
|
+
text-align: left;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.meta {
|
|
60
|
+
@include typography.typography-cat-shorthand('body-2-bold');
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
max-width: 20%;
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
color: var(--vvd-color-neutral-70);
|
|
65
|
+
margin-inline-start: 1rem;
|
|
66
|
+
text-align: end;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
white-space: nowrap;
|
|
69
|
+
}
|
|
47
70
|
|
|
48
71
|
.leading-icon {
|
|
49
72
|
/* stylelint-disable selector-no-qualifying-type */
|
|
@@ -55,8 +78,6 @@
|
|
|
55
78
|
}
|
|
56
79
|
|
|
57
80
|
.trailing-icon {
|
|
58
|
-
margin-inline-start: auto;
|
|
59
|
-
|
|
60
81
|
/* stylelint-disable selector-no-qualifying-type */
|
|
61
82
|
vwc-icon,
|
|
62
83
|
slot[name="trailingIcon"i]::slotted(vwc-icon) {
|
|
@@ -85,7 +106,13 @@
|
|
|
85
106
|
}
|
|
86
107
|
|
|
87
108
|
:host([dense]) {
|
|
88
|
-
.expansion-panel-
|
|
109
|
+
.expansion-panel-button {
|
|
89
110
|
@include typography.typography-cat-shorthand('body-2-bold');
|
|
90
111
|
}
|
|
112
|
+
.meta {
|
|
113
|
+
@include typography.typography-cat-shorthand('caption-bold');
|
|
114
|
+
}
|
|
115
|
+
vwc-icon {
|
|
116
|
+
--vvd-expansion-panel-icon-size: 16px;
|
|
117
|
+
}
|
|
91
118
|
}
|
|
@@ -13,6 +13,7 @@ import type { Ripple } from '@material/mwc-ripple';
|
|
|
13
13
|
import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
|
|
14
14
|
import { VWCExpansionPanelBase } from './vwc-expansion-panel-base.js';
|
|
15
15
|
import { style } from './vwc-expansion-panel.css.js';
|
|
16
|
+
import {nothing} from 'lit-html';
|
|
16
17
|
|
|
17
18
|
declare global {
|
|
18
19
|
interface HTMLElementTagNameMap {
|
|
@@ -23,59 +24,75 @@ declare global {
|
|
|
23
24
|
const iconSets = ['chevron', 'binary'];
|
|
24
25
|
export type IndicatorIconSets = typeof iconSets;
|
|
25
26
|
|
|
27
|
+
const VALID_HEADER_VALUES = [2, 3, 4, 5, 6];
|
|
28
|
+
|
|
29
|
+
function isValidHeaderValue(headerValue: string | number) {
|
|
30
|
+
return VALID_HEADER_VALUES.includes(Number(headerValue));
|
|
31
|
+
}
|
|
32
|
+
|
|
26
33
|
@customElement('vwc-expansion-panel')
|
|
27
34
|
export class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
35
|
+
safeHtml = html;
|
|
28
36
|
static override styles = style;
|
|
29
37
|
|
|
30
38
|
/**
|
|
31
39
|
* @deprecated use "heading" instead
|
|
32
40
|
*/
|
|
33
|
-
@property({
|
|
41
|
+
@property({type: String, reflect: true})
|
|
34
42
|
header = '';
|
|
35
43
|
|
|
36
44
|
/**
|
|
37
45
|
* The heading of the expanded panel
|
|
38
46
|
*/
|
|
39
|
-
@property({
|
|
47
|
+
@property({type: String, reflect: true})
|
|
40
48
|
heading = '';
|
|
41
49
|
|
|
42
|
-
@property({
|
|
50
|
+
@property({type: String, reflect: true})
|
|
43
51
|
icon = '';
|
|
44
52
|
|
|
45
|
-
@property({
|
|
53
|
+
@property({type: String, reflect: true})
|
|
46
54
|
indicatorIconSet: IndicatorIconSets[number] = 'chevron';
|
|
47
55
|
|
|
56
|
+
@property({ type: String, reflect: true })
|
|
57
|
+
meta = '';
|
|
58
|
+
|
|
48
59
|
@property({ type: Boolean, reflect: true })
|
|
49
60
|
dense = false;
|
|
50
61
|
|
|
51
|
-
@property({
|
|
62
|
+
@property({type: Boolean, reflect: true})
|
|
52
63
|
leadingToggle = false;
|
|
53
64
|
|
|
54
|
-
@property({
|
|
65
|
+
@property({type: Boolean, reflect: true})
|
|
55
66
|
noRipple = false;
|
|
56
|
-
|
|
57
67
|
@queryAsync('mwc-ripple') ripple!: Promise<Ripple>;
|
|
58
|
-
|
|
59
68
|
protected rippleHandlers = new RippleHandlers(() => {
|
|
60
69
|
return this.ripple;
|
|
61
70
|
});
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
this.open = !this.open;
|
|
65
|
-
}
|
|
71
|
+
@property({type: String, reflect: true, attribute: 'heading-level'})
|
|
72
|
+
private headingLevel = '3';
|
|
66
73
|
|
|
67
74
|
override openChanged(isOpen: boolean): void {
|
|
68
75
|
super.openChanged(isOpen);
|
|
69
76
|
this.toggleAttribute('open', isOpen);
|
|
70
77
|
}
|
|
71
78
|
|
|
79
|
+
protected toggleOpen(): void {
|
|
80
|
+
this.open = !this.open;
|
|
81
|
+
}
|
|
82
|
+
|
|
72
83
|
protected renderRipple(): TemplateResult | string {
|
|
73
|
-
return !this.noRipple ? html
|
|
84
|
+
return !this.noRipple ? html`
|
|
85
|
+
<mwc-ripple></mwc-ripple>` : '';
|
|
74
86
|
}
|
|
75
87
|
|
|
76
|
-
|
|
88
|
+
private renderMeta(): TemplateResult | unknown {
|
|
89
|
+
return this.meta ? html`<span class="meta">${this.meta}</span>` : nothing;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
protected renderHeaderButton(): TemplateResult {
|
|
93
|
+
|
|
77
94
|
return html`
|
|
78
|
-
<button class="expansion-panel-
|
|
95
|
+
<button class="expansion-panel-button" id="expansion-panel"
|
|
79
96
|
@mousedown="${this.handleRippleActivate}"
|
|
80
97
|
@mouseenter="${this.handleRippleMouseEnter}"
|
|
81
98
|
@mouseleave="${this.handleRippleMouseLeave}"
|
|
@@ -83,11 +100,11 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
|
83
100
|
this.toggleOpen();
|
|
84
101
|
this.handleRippleActivate;
|
|
85
102
|
}}"
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
103
|
+
@touchend="${this.handleRippleDeactivate}"
|
|
104
|
+
@touchcancel="${this.handleRippleDeactivate}"
|
|
105
|
+
@click=${() => this.toggleOpen()}
|
|
106
|
+
?aria-expanded=${this.open}
|
|
107
|
+
aria-controls="content"
|
|
91
108
|
>
|
|
92
109
|
${this.renderRipple()}
|
|
93
110
|
<span class="leading-icon">
|
|
@@ -95,23 +112,37 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
|
95
112
|
${this.renderIconOrToggle()}
|
|
96
113
|
</slot>
|
|
97
114
|
</span>
|
|
98
|
-
|
|
115
|
+
<span class="heading-text">${this.heading || this.header}</span>
|
|
116
|
+
${this.renderMeta()}
|
|
99
117
|
<span class="trailing-icon">
|
|
100
118
|
<slot name="trailingIcon">
|
|
101
119
|
${!this.leadingToggle ? this.renderToggle() : ''}
|
|
102
120
|
</slot>
|
|
103
121
|
</span>
|
|
104
122
|
</button>
|
|
123
|
+
`;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
protected renderPanelHeader(): TemplateResult | string {
|
|
127
|
+
if (!isValidHeaderValue(this.headingLevel)) this.headingLevel = '3';
|
|
128
|
+
return eval(`this.safeHtml\`<h${this.headingLevel} class="expansion-panel-header">\${this.renderHeaderButton()}</h${this.headingLevel}>\``);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
protected override render(): TemplateResult {
|
|
132
|
+
return html`
|
|
133
|
+
${this.renderPanelHeader()}
|
|
105
134
|
<div id="content" class="expansion-panel-body">
|
|
106
135
|
<slot></slot>
|
|
107
136
|
</div>`;
|
|
137
|
+
|
|
108
138
|
}
|
|
109
139
|
|
|
110
140
|
protected renderIconOrToggle(): TemplateResult | string {
|
|
111
141
|
if (this.leadingToggle) {
|
|
112
142
|
return this.renderToggle();
|
|
113
143
|
} else if (this.icon) {
|
|
114
|
-
return html
|
|
144
|
+
return html`
|
|
145
|
+
<vwc-icon type="${this.icon}" size="medium"></vwc-icon>`;
|
|
115
146
|
} else {
|
|
116
147
|
return '';
|
|
117
148
|
}
|
|
@@ -132,7 +163,7 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
|
132
163
|
`;
|
|
133
164
|
}
|
|
134
165
|
|
|
135
|
-
@eventOptions({
|
|
166
|
+
@eventOptions({passive: true})
|
|
136
167
|
private handleRippleActivate(evt?: Event) {
|
|
137
168
|
const onUp = () => {
|
|
138
169
|
window.removeEventListener('mouseup', onUp);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `:host{--mdc-ripple-color: var(--vvd-color-on-canvas);display:flex;flex-direction:column}:host(:not([open])) .toggle-close,:host(:not([open])) .expansion-panel-body{display:none}:host([open]) .toggle-open{display:none}:host([open]) .toggle-close{display:initial}.expansion-panel-header{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:relative;display:flex;align-items:center;padding:16px;border:0 none;background:transparent;cursor:pointer}.expansion-panel-
|
|
2
|
+
export const style = css `:host{--mdc-ripple-color: var(--vvd-color-on-canvas);display:flex;flex-direction:column}:host(:not([open])) .toggle-close,:host(:not([open])) .expansion-panel-body{display:none}:host([open]) .toggle-open{display:none}:host([open]) .toggle-close{display:initial}.expansion-panel-header{padding:0;margin:0}.expansion-panel-button{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:relative;display:flex;width:100%;align-items:center;padding:16px;border:0 none;background:transparent;cursor:pointer}.expansion-panel-button .leading-icon,.expansion-panel-button .trailing-icon{display:flex}.expansion-panel-button .leading-icon vwc-icon,.expansion-panel-button .trailing-icon vwc-icon{--vvd-icon-size:var(--vvd-expansion-panel-icon-size, 20px)}.expansion-panel-button .heading-text{flex-grow:1;margin-inline-end:auto;text-align:left}.expansion-panel-button .meta{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-70);margin-inline-start:1rem;text-align:end;text-overflow:ellipsis;white-space:nowrap}.expansion-panel-button .leading-icon vwc-icon,.expansion-panel-button .leading-icon slot[name=icon i]::slotted(vwc-icon){margin-inline-end:16px}.expansion-panel-button .trailing-icon vwc-icon,.expansion-panel-button .trailing-icon slot[name=trailingIcon i]::slotted(vwc-icon){margin-inline-start:16px}.expansion-panel-body{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding:8px 32px 24px 16px}:host(:not([icon=""])) .expansion-panel-body,:host([leadingToggle]) .expansion-panel-body{padding-left:48px}:host([leadingToggle]) .expansion-panel-body{padding-right:16px}:host([dense]) .expansion-panel-button{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}:host([dense]) .meta{font:600 ultra-condensed 12px / 16px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}:host([dense]) vwc-icon{--vvd-expansion-panel-icon-size: 16px}`;
|
|
3
3
|
//# sourceMappingURL=vwc-expansion-panel.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-expansion-panel.css.js","sourceRoot":"","sources":["src/vwc-expansion-panel.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-expansion-panel.css.js","sourceRoot":"","sources":["src/vwc-expansion-panel.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,ipEAAipE,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{--mdc-ripple-color: var(--vvd-color-on-canvas);display:flex;flex-direction:column}:host(:not([open])) .toggle-close,:host(:not([open])) .expansion-panel-body{display:none}:host([open]) .toggle-open{display:none}:host([open]) .toggle-close{display:initial}.expansion-panel-header{padding:0;margin:0}.expansion-panel-button{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:relative;display:flex;width:100%;align-items:center;padding:16px;border:0 none;background:transparent;cursor:pointer}.expansion-panel-button .leading-icon,.expansion-panel-button .trailing-icon{display:flex}.expansion-panel-button .leading-icon vwc-icon,.expansion-panel-button .trailing-icon vwc-icon{--vvd-icon-size:var(--vvd-expansion-panel-icon-size, 20px)}.expansion-panel-button .heading-text{flex-grow:1;margin-inline-end:auto;text-align:left}.expansion-panel-button .meta{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-70);margin-inline-start:1rem;text-align:end;text-overflow:ellipsis;white-space:nowrap}.expansion-panel-button .leading-icon vwc-icon,.expansion-panel-button .leading-icon slot[name=icon i]::slotted(vwc-icon){margin-inline-end:16px}.expansion-panel-button .trailing-icon vwc-icon,.expansion-panel-button .trailing-icon slot[name=trailingIcon i]::slotted(vwc-icon){margin-inline-start:16px}.expansion-panel-body{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding:8px 32px 24px 16px}:host(:not([icon=\"\"])) .expansion-panel-body,:host([leadingToggle]) .expansion-panel-body{padding-left:48px}:host([leadingToggle]) .expansion-panel-body{padding-right:16px}:host([dense]) .expansion-panel-button{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}:host([dense]) .meta{font:600 ultra-condensed 12px / 16px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none}:host([dense]) vwc-icon{--vvd-expansion-panel-icon-size: 16px}`;"]}
|
package/vwc-expansion-panel.d.ts
CHANGED
|
@@ -13,19 +13,25 @@ declare global {
|
|
|
13
13
|
declare const iconSets: string[];
|
|
14
14
|
export declare type IndicatorIconSets = typeof iconSets;
|
|
15
15
|
export declare class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
16
|
+
safeHtml: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;
|
|
16
17
|
static styles: import("lit-element").CSSResult;
|
|
17
18
|
header: string;
|
|
18
19
|
heading: string;
|
|
19
20
|
icon: string;
|
|
20
21
|
indicatorIconSet: IndicatorIconSets[number];
|
|
22
|
+
meta: string;
|
|
21
23
|
dense: boolean;
|
|
22
24
|
leadingToggle: boolean;
|
|
23
25
|
noRipple: boolean;
|
|
24
26
|
ripple: Promise<Ripple>;
|
|
25
27
|
protected rippleHandlers: RippleHandlers;
|
|
26
|
-
|
|
28
|
+
private headingLevel;
|
|
27
29
|
openChanged(isOpen: boolean): void;
|
|
30
|
+
protected toggleOpen(): void;
|
|
28
31
|
protected renderRipple(): TemplateResult | string;
|
|
32
|
+
private renderMeta;
|
|
33
|
+
protected renderHeaderButton(): TemplateResult;
|
|
34
|
+
protected renderPanelHeader(): TemplateResult | string;
|
|
29
35
|
protected render(): TemplateResult;
|
|
30
36
|
protected renderIconOrToggle(): TemplateResult | string;
|
|
31
37
|
protected renderToggle(): TemplateResult;
|
package/vwc-expansion-panel.js
CHANGED
|
@@ -6,34 +6,46 @@ import { customElement, eventOptions, html, property, queryAsync } from 'lit-ele
|
|
|
6
6
|
import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
|
|
7
7
|
import { VWCExpansionPanelBase } from './vwc-expansion-panel-base.js';
|
|
8
8
|
import { style } from './vwc-expansion-panel.css.js';
|
|
9
|
+
import { nothing } from 'lit-html';
|
|
9
10
|
const iconSets = ['chevron', 'binary'];
|
|
11
|
+
const VALID_HEADER_VALUES = [2, 3, 4, 5, 6];
|
|
12
|
+
function isValidHeaderValue(headerValue) {
|
|
13
|
+
return VALID_HEADER_VALUES.includes(Number(headerValue));
|
|
14
|
+
}
|
|
10
15
|
let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
11
16
|
constructor() {
|
|
12
17
|
super(...arguments);
|
|
18
|
+
this.safeHtml = html;
|
|
13
19
|
this.header = '';
|
|
14
20
|
this.heading = '';
|
|
15
21
|
this.icon = '';
|
|
16
22
|
this.indicatorIconSet = 'chevron';
|
|
23
|
+
this.meta = '';
|
|
17
24
|
this.dense = false;
|
|
18
25
|
this.leadingToggle = false;
|
|
19
26
|
this.noRipple = false;
|
|
20
27
|
this.rippleHandlers = new RippleHandlers(() => {
|
|
21
28
|
return this.ripple;
|
|
22
29
|
});
|
|
23
|
-
|
|
24
|
-
toggleOpen() {
|
|
25
|
-
this.open = !this.open;
|
|
30
|
+
this.headingLevel = '3';
|
|
26
31
|
}
|
|
27
32
|
openChanged(isOpen) {
|
|
28
33
|
super.openChanged(isOpen);
|
|
29
34
|
this.toggleAttribute('open', isOpen);
|
|
30
35
|
}
|
|
36
|
+
toggleOpen() {
|
|
37
|
+
this.open = !this.open;
|
|
38
|
+
}
|
|
31
39
|
renderRipple() {
|
|
32
|
-
return !this.noRipple ? html
|
|
40
|
+
return !this.noRipple ? html `
|
|
41
|
+
<mwc-ripple></mwc-ripple>` : '';
|
|
33
42
|
}
|
|
34
|
-
|
|
43
|
+
renderMeta() {
|
|
44
|
+
return this.meta ? html `<span class="meta">${this.meta}</span>` : nothing;
|
|
45
|
+
}
|
|
46
|
+
renderHeaderButton() {
|
|
35
47
|
return html `
|
|
36
|
-
<button class="expansion-panel-
|
|
48
|
+
<button class="expansion-panel-button" id="expansion-panel"
|
|
37
49
|
@mousedown="${this.handleRippleActivate}"
|
|
38
50
|
@mouseenter="${this.handleRippleMouseEnter}"
|
|
39
51
|
@mouseleave="${this.handleRippleMouseLeave}"
|
|
@@ -41,11 +53,11 @@ let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
|
41
53
|
this.toggleOpen();
|
|
42
54
|
this.handleRippleActivate;
|
|
43
55
|
}}"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
56
|
+
@touchend="${this.handleRippleDeactivate}"
|
|
57
|
+
@touchcancel="${this.handleRippleDeactivate}"
|
|
58
|
+
@click=${() => this.toggleOpen()}
|
|
59
|
+
?aria-expanded=${this.open}
|
|
60
|
+
aria-controls="content"
|
|
49
61
|
>
|
|
50
62
|
${this.renderRipple()}
|
|
51
63
|
<span class="leading-icon">
|
|
@@ -53,13 +65,24 @@ let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
|
53
65
|
${this.renderIconOrToggle()}
|
|
54
66
|
</slot>
|
|
55
67
|
</span>
|
|
56
|
-
|
|
68
|
+
<span class="heading-text">${this.heading || this.header}</span>
|
|
69
|
+
${this.renderMeta()}
|
|
57
70
|
<span class="trailing-icon">
|
|
58
71
|
<slot name="trailingIcon">
|
|
59
72
|
${!this.leadingToggle ? this.renderToggle() : ''}
|
|
60
73
|
</slot>
|
|
61
74
|
</span>
|
|
62
75
|
</button>
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
renderPanelHeader() {
|
|
79
|
+
if (!isValidHeaderValue(this.headingLevel))
|
|
80
|
+
this.headingLevel = '3';
|
|
81
|
+
return eval(`this.safeHtml\`<h${this.headingLevel} class="expansion-panel-header">\${this.renderHeaderButton()}</h${this.headingLevel}>\``);
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
return html `
|
|
85
|
+
${this.renderPanelHeader()}
|
|
63
86
|
<div id="content" class="expansion-panel-body">
|
|
64
87
|
<slot></slot>
|
|
65
88
|
</div>`;
|
|
@@ -69,7 +92,8 @@ let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
|
|
|
69
92
|
return this.renderToggle();
|
|
70
93
|
}
|
|
71
94
|
else if (this.icon) {
|
|
72
|
-
return html
|
|
95
|
+
return html `
|
|
96
|
+
<vwc-icon type="${this.icon}" size="medium"></vwc-icon>`;
|
|
73
97
|
}
|
|
74
98
|
else {
|
|
75
99
|
return '';
|
|
@@ -120,6 +144,9 @@ __decorate([
|
|
|
120
144
|
__decorate([
|
|
121
145
|
property({ type: String, reflect: true })
|
|
122
146
|
], VWCExpansionPanel.prototype, "indicatorIconSet", void 0);
|
|
147
|
+
__decorate([
|
|
148
|
+
property({ type: String, reflect: true })
|
|
149
|
+
], VWCExpansionPanel.prototype, "meta", void 0);
|
|
123
150
|
__decorate([
|
|
124
151
|
property({ type: Boolean, reflect: true })
|
|
125
152
|
], VWCExpansionPanel.prototype, "dense", void 0);
|
|
@@ -132,6 +159,9 @@ __decorate([
|
|
|
132
159
|
__decorate([
|
|
133
160
|
queryAsync('mwc-ripple')
|
|
134
161
|
], VWCExpansionPanel.prototype, "ripple", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
property({ type: String, reflect: true, attribute: 'heading-level' })
|
|
164
|
+
], VWCExpansionPanel.prototype, "headingLevel", void 0);
|
|
135
165
|
__decorate([
|
|
136
166
|
eventOptions({ passive: true })
|
|
137
167
|
], VWCExpansionPanel.prototype, "handleRippleActivate", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-expansion-panel.js","sourceRoot":"","sources":["src/vwc-expansion-panel.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EACN,aAAa,EACb,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EAEV,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"vwc-expansion-panel.js","sourceRoot":"","sources":["src/vwc-expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport '@vonage/vwc-icon';\nimport '@material/mwc-ripple/mwc-ripple.js';\nimport {\n\tcustomElement,\n\teventOptions,\n\thtml,\n\tproperty,\n\tqueryAsync,\n\tTemplateResult\n} from 'lit-element';\nimport type { Ripple } from '@material/mwc-ripple';\nimport { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';\nimport { VWCExpansionPanelBase } from './vwc-expansion-panel-base.js';\nimport { style } from './vwc-expansion-panel.css.js';\nimport {nothing} from 'lit-html';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-expansion-panel': VWCExpansionPanel;\n\t}\n}\n\nconst iconSets = ['chevron', 'binary'];\nexport type IndicatorIconSets = typeof iconSets;\n\nconst VALID_HEADER_VALUES = [2, 3, 4, 5, 6];\n\nfunction isValidHeaderValue(headerValue: string | number) {\n\treturn VALID_HEADER_VALUES.includes(Number(headerValue));\n}\n\n@customElement('vwc-expansion-panel')\nexport class VWCExpansionPanel extends VWCExpansionPanelBase {\n\tsafeHtml = html;\n\tstatic override styles = style;\n\n\t/**\n\t * @deprecated use \"heading\" instead\n\t */\n\t@property({type: String, reflect: true})\n\t\theader = '';\n\n\t/**\n\t * The heading of the expanded panel\n\t */\n\t@property({type: String, reflect: true})\n\t\theading = '';\n\n\t@property({type: String, reflect: true})\n\t\ticon = '';\n\n\t@property({type: String, reflect: true})\n\t\tindicatorIconSet: IndicatorIconSets[number] = 'chevron';\n\n\t@property({ type: String, reflect: true })\n\t\tmeta = '';\n\n\t@property({ type: Boolean, reflect: true })\n\t\tdense = false;\n\n\t@property({type: Boolean, reflect: true})\n\t\tleadingToggle = false;\n\n\t@property({type: Boolean, reflect: true})\n\t\tnoRipple = false;\n\t@queryAsync('mwc-ripple') ripple!: Promise<Ripple>;\n\tprotected rippleHandlers = new RippleHandlers(() => {\n\t\treturn this.ripple;\n\t});\n\t@property({type: String, reflect: true, attribute: 'heading-level'})\n\tprivate headingLevel = '3';\n\n\toverride openChanged(isOpen: boolean): void {\n\t\tsuper.openChanged(isOpen);\n\t\tthis.toggleAttribute('open', isOpen);\n\t}\n\n\tprotected toggleOpen(): void {\n\t\tthis.open = !this.open;\n\t}\n\n\tprotected renderRipple(): TemplateResult | string {\n\t\treturn !this.noRipple ? html`\n\t\t\t<mwc-ripple></mwc-ripple>` : '';\n\t}\n\n\tprivate renderMeta(): TemplateResult | unknown {\n\t\treturn this.meta ? html`<span class=\"meta\">${this.meta}</span>` : nothing;\n\t}\n\n\tprotected renderHeaderButton(): TemplateResult {\n\n\t\treturn html`\n\t\t\t<button class=\"expansion-panel-button\" id=\"expansion-panel\"\n\t\t\t\t@mousedown=\"${this.handleRippleActivate}\"\n\t\t\t\t@mouseenter=\"${this.handleRippleMouseEnter}\"\n\t\t\t\t@mouseleave=\"${this.handleRippleMouseLeave}\"\n\t\t\t\t@touchstart=\"${() => {\n\t\tthis.toggleOpen();\n\t\tthis.handleRippleActivate;\n\t}}\"\n\t\t\t\t\t\t\t@touchend=\"${this.handleRippleDeactivate}\"\n\t\t\t\t\t\t\t@touchcancel=\"${this.handleRippleDeactivate}\"\n\t\t\t\t\t\t\t@click=${() => this.toggleOpen()}\n\t\t\t\t\t\t\t?aria-expanded=${this.open}\n\t\t\t\t\t\t\taria-controls=\"content\"\n\t\t\t>\n\t\t\t\t${this.renderRipple()}\n\t\t\t\t<span class=\"leading-icon\">\n\t\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t\t${this.renderIconOrToggle()}\n\t\t\t\t\t</slot>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"heading-text\">${this.heading || this.header}</span>\n\t\t\t\t${this.renderMeta()}\n\t\t\t\t<span class=\"trailing-icon\">\n\t\t\t\t\t<slot name=\"trailingIcon\">\n\t\t\t\t\t\t${!this.leadingToggle ? this.renderToggle() : ''}\n\t\t\t\t\t</slot>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t`;\n\t}\n\n\tprotected renderPanelHeader(): TemplateResult | string {\n\t\tif (!isValidHeaderValue(this.headingLevel)) this.headingLevel = '3';\n\t\treturn eval(`this.safeHtml\\`<h${this.headingLevel} class=\"expansion-panel-header\">\\${this.renderHeaderButton()}</h${this.headingLevel}>\\``);\n\t}\n\n\tprotected override render(): TemplateResult {\n\t\treturn html`\n\t\t\t${this.renderPanelHeader()}\n\t\t\t<div id=\"content\" class=\"expansion-panel-body\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>`;\n\n\t}\n\n\tprotected renderIconOrToggle(): TemplateResult | string {\n\t\tif (this.leadingToggle) {\n\t\t\treturn this.renderToggle();\n\t\t} else if (this.icon) {\n\t\t\treturn html`\n\t\t\t\t<vwc-icon type=\"${this.icon}\" size=\"medium\"></vwc-icon>`;\n\t\t} else {\n\t\t\treturn '';\n\t\t}\n\t}\n\n\tprotected renderToggle(): TemplateResult {\n\t\treturn html`\n\t\t\t<vwc-icon\n\t\t\t\tclass=\"toggle-open\"\n\t\t\t\ttype=\"${this.indicatorIconSet === 'chevron' ? 'chevron-down-solid' : 'plus-solid'}\"\n\t\t\t>\n\t\t\t</vwc-icon>\n\t\t\t<vwc-icon\n\t\t\t\tclass=\"toggle-close\"\n\t\t\t\ttype=\"${this.indicatorIconSet === 'chevron' ? 'chevron-up-solid' : 'minus-solid'}\"\n\t\t\t>\n\t\t\t</vwc-icon>\n\t\t`;\n\t}\n\n\t@eventOptions({passive: true})\n\tprivate handleRippleActivate(evt?: Event) {\n\t\tconst onUp = () => {\n\t\t\twindow.removeEventListener('mouseup', onUp);\n\n\t\t\tthis.handleRippleDeactivate();\n\t\t};\n\n\t\twindow.addEventListener('mouseup', onUp);\n\t\tthis.rippleHandlers.startPress(evt);\n\t}\n\n\tprivate handleRippleDeactivate() {\n\t\tthis.rippleHandlers.endPress();\n\t}\n\n\tprivate handleRippleMouseEnter() {\n\t\tthis.rippleHandlers.startHover();\n\t}\n\n\tprivate handleRippleMouseLeave() {\n\t\tthis.rippleHandlers.endHover();\n\t}\n}\n"]}
|