@vonage/vwc-expansion-panel 2.32.0 → 2.34.0

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.
Files changed (9) hide show
  1. package/package.json +7 -7
  2. package/src/vwc-expansion-panel.css.ts +1 -1
  3. package/src/vwc-expansion-panel.scss +1 -1
  4. package/src/vwc-expansion-panel.ts +22 -12
  5. package/vwc-expansion-panel.css.js +1 -1
  6. package/vwc-expansion-panel.css.js.map +1 -1
  7. package/vwc-expansion-panel.d.ts +0 -1
  8. package/vwc-expansion-panel.js +16 -6
  9. 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.32.0",
3
+ "version": "2.34.0",
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.32.0",
34
- "@vonage/vwc-icon": "2.32.0",
33
+ "@vonage/vvd-core": "2.34.0",
34
+ "@vonage/vwc-icon": "2.34.0",
35
35
  "lit-element": "^2.4.0",
36
36
  "tslib": "^2.3.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@vonage/vvd-design-tokens": "2.32.0",
40
- "@vonage/vvd-typography": "2.32.0",
41
- "@vonage/vvd-umbrella": "2.32.0",
39
+ "@vonage/vvd-design-tokens": "2.34.0",
40
+ "@vonage/vvd-typography": "2.34.0",
41
+ "@vonage/vvd-umbrella": "2.34.0",
42
42
  "typescript": "^4.3.2"
43
43
  },
44
- "gitHead": "eeb7694dfee9594e4388f50589dbf7f5de6c9f0c"
44
+ "gitHead": "e582f2efce9f76fba3cc893ffa005983c21e7d79"
45
45
  }
package/src/vwc-expansion-panel.css.ts CHANGED
@@ -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{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
+ 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:16px;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/src/vwc-expansion-panel.scss CHANGED
@@ -62,7 +62,7 @@
62
62
  max-width: 20%;
63
63
  flex-shrink: 0;
64
64
  color: var(--vvd-color-neutral-70);
65
- margin-inline-start: 1rem;
65
+ margin-inline-start: 16px;
66
66
  text-align: end;
67
67
  text-overflow: ellipsis;
68
68
  white-space: nowrap;
package/src/vwc-expansion-panel.ts CHANGED
@@ -9,10 +9,10 @@ import {
9
9
  queryAsync,
10
10
  TemplateResult
11
11
  } from 'lit-element';
12
- import type { Ripple } from '@material/mwc-ripple';
13
- import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
14
- import { VWCExpansionPanelBase } from './vwc-expansion-panel-base.js';
15
- import { style } from './vwc-expansion-panel.css.js';
12
+ import type {Ripple} from '@material/mwc-ripple';
13
+ import {RippleHandlers} from '@material/mwc-ripple/ripple-handlers.js';
14
+ import {VWCExpansionPanelBase} from './vwc-expansion-panel-base.js';
15
+ import {style} from './vwc-expansion-panel.css.js';
16
16
  import {nothing} from 'lit-html';
17
17
 
18
18
  declare global {
@@ -32,7 +32,6 @@ function isValidHeaderValue(headerValue: string | number) {
32
32
 
33
33
  @customElement('vwc-expansion-panel')
34
34
  export class VWCExpansionPanel extends VWCExpansionPanelBase {
35
- safeHtml = html;
36
35
  static override styles = style;
37
36
 
38
37
  /**
@@ -53,10 +52,10 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
53
52
  @property({type: String, reflect: true})
54
53
  indicatorIconSet: IndicatorIconSets[number] = 'chevron';
55
54
 
56
- @property({ type: String, reflect: true })
55
+ @property({type: String, reflect: true})
57
56
  meta = '';
58
57
 
59
- @property({ type: Boolean, reflect: true })
58
+ @property({type: Boolean, reflect: true})
60
59
  dense = false;
61
60
 
62
61
  @property({type: Boolean, reflect: true})
@@ -93,10 +92,10 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
93
92
 
94
93
  return html`
95
94
  <button class="expansion-panel-button" id="expansion-panel"
96
- @mousedown="${this.handleRippleActivate}"
97
- @mouseenter="${this.handleRippleMouseEnter}"
98
- @mouseleave="${this.handleRippleMouseLeave}"
99
- @touchstart="${() => {
95
+ @mousedown="${this.handleRippleActivate}"
96
+ @mouseenter="${this.handleRippleMouseEnter}"
97
+ @mouseleave="${this.handleRippleMouseLeave}"
98
+ @touchstart="${() => {
100
99
  this.toggleOpen();
101
100
  this.handleRippleActivate;
102
101
  }}"
@@ -125,7 +124,18 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
125
124
 
126
125
  protected renderPanelHeader(): TemplateResult | string {
127
126
  if (!isValidHeaderValue(this.headingLevel)) this.headingLevel = '3';
128
- return eval(`this.safeHtml\`<h${this.headingLevel} class="expansion-panel-header">\${this.renderHeaderButton()}</h${this.headingLevel}>\``);
127
+ switch (this.headingLevel.toString()) {
128
+ case '2':
129
+ return html`<h2 class="expansion-panel-header">${this.renderHeaderButton()}</h2>`;
130
+ case '4':
131
+ return html`<h4 class="expansion-panel-header">${this.renderHeaderButton()}</h4>`;
132
+ case '5':
133
+ return html`<h5 class="expansion-panel-header">${this.renderHeaderButton()}</h5>`;
134
+ case '6':
135
+ return html`<h6 class="expansion-panel-header">${this.renderHeaderButton()}</h6>`;
136
+ default:
137
+ return html`<h3 class="expansion-panel-header">${this.renderHeaderButton()}</h3>`;
138
+ }
129
139
  }
130
140
 
131
141
  protected override render(): TemplateResult {
package/vwc-expansion-panel.css.js CHANGED
@@ -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{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}`;
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:16px;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
package/vwc-expansion-panel.css.js.map CHANGED
@@ -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,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}`;"]}
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:16px;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,7 +13,6 @@ 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;
17
16
  static styles: import("lit-element").CSSResult;
18
17
  header: string;
19
18
  heading: string;
package/vwc-expansion-panel.js CHANGED
@@ -15,7 +15,6 @@ function isValidHeaderValue(headerValue) {
15
15
  let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
16
16
  constructor() {
17
17
  super(...arguments);
18
- this.safeHtml = html;
19
18
  this.header = '';
20
19
  this.heading = '';
21
20
  this.icon = '';
@@ -46,10 +45,10 @@ let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
46
45
  renderHeaderButton() {
47
46
  return html `
48
47
  <button class="expansion-panel-button" id="expansion-panel"
49
- @mousedown="${this.handleRippleActivate}"
50
- @mouseenter="${this.handleRippleMouseEnter}"
51
- @mouseleave="${this.handleRippleMouseLeave}"
52
- @touchstart="${() => {
48
+ @mousedown="${this.handleRippleActivate}"
49
+ @mouseenter="${this.handleRippleMouseEnter}"
50
+ @mouseleave="${this.handleRippleMouseLeave}"
51
+ @touchstart="${() => {
53
52
  this.toggleOpen();
54
53
  this.handleRippleActivate;
55
54
  }}"
@@ -78,7 +77,18 @@ let VWCExpansionPanel = class VWCExpansionPanel extends VWCExpansionPanelBase {
78
77
  renderPanelHeader() {
79
78
  if (!isValidHeaderValue(this.headingLevel))
80
79
  this.headingLevel = '3';
81
- return eval(`this.safeHtml\`<h${this.headingLevel} class="expansion-panel-header">\${this.renderHeaderButton()}</h${this.headingLevel}>\``);
80
+ switch (this.headingLevel.toString()) {
81
+ case '2':
82
+ return html `<h2 class="expansion-panel-header">${this.renderHeaderButton()}</h2>`;
83
+ case '4':
84
+ return html `<h4 class="expansion-panel-header">${this.renderHeaderButton()}</h4>`;
85
+ case '5':
86
+ return html `<h5 class="expansion-panel-header">${this.renderHeaderButton()}</h5>`;
87
+ case '6':
88
+ return html `<h6 class="expansion-panel-header">${this.renderHeaderButton()}</h6>`;
89
+ default:
90
+ return html `<h3 class="expansion-panel-header">${this.renderHeaderButton()}</h3>`;
91
+ }
82
92
  }
83
93
  render() {
84
94
  return html `
package/vwc-expansion-panel.js.map CHANGED
@@ -1 +1 @@
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"]}
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\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\t\t\t@mousedown=\"${this.handleRippleActivate}\"\n\t\t\t\t\t\t\t@mouseenter=\"${this.handleRippleMouseEnter}\"\n\t\t\t\t\t\t\t@mouseleave=\"${this.handleRippleMouseLeave}\"\n\t\t\t\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\tswitch (this.headingLevel.toString()) {\n\t\tcase '2':\n\t\t\treturn html`<h2 class=\"expansion-panel-header\">${this.renderHeaderButton()}</h2>`;\n\t\tcase '4':\n\t\t\treturn html`<h4 class=\"expansion-panel-header\">${this.renderHeaderButton()}</h4>`;\n\t\tcase '5':\n\t\t\treturn html`<h5 class=\"expansion-panel-header\">${this.renderHeaderButton()}</h5>`;\n\t\tcase '6':\n\t\t\treturn html`<h6 class=\"expansion-panel-header\">${this.renderHeaderButton()}</h6>`;\n\t\tdefault:\n\t\t\treturn html`<h3 class=\"expansion-panel-header\">${this.renderHeaderButton()}</h3>`;\n\t\t}\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"]}