@vonage/vwc-card 2.27.1 → 2.28.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.
- package/package.json +8 -8
- package/readme.md +14 -16
- package/vwc-card.css.js +1 -1
- package/vwc-card.css.js.map +1 -1
- package/vwc-card.d.ts +6 -6
- package/vwc-card.js +40 -31
- package/vwc-card.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-card",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.28.0",
|
|
4
4
|
"description": "card component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/card#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -26,18 +26,18 @@
|
|
|
26
26
|
"url": "https://github.com/Vonage/vivid/issues"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@vonage/vwc-button": "2.
|
|
30
|
-
"@vonage/vwc-icon": "2.
|
|
29
|
+
"@vonage/vwc-button": "2.28.0",
|
|
30
|
+
"@vonage/vwc-icon": "2.28.0",
|
|
31
31
|
"lit-element": "^2.4.0",
|
|
32
32
|
"lit-html": "^1.3.0",
|
|
33
33
|
"tslib": "^2.3.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@vonage/vvd-design-tokens": "2.
|
|
37
|
-
"@vonage/vvd-foundation": "2.
|
|
38
|
-
"@vonage/vvd-typography": "2.
|
|
39
|
-
"@vonage/vvd-umbrella": "2.
|
|
36
|
+
"@vonage/vvd-design-tokens": "2.28.0",
|
|
37
|
+
"@vonage/vvd-foundation": "2.28.0",
|
|
38
|
+
"@vonage/vvd-typography": "2.28.0",
|
|
39
|
+
"@vonage/vvd-umbrella": "2.28.0",
|
|
40
40
|
"typescript": "^4.3.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "bdaaa402cb1b8a0dd33178c7a8216ed8b2ad7347"
|
|
43
43
|
}
|
package/readme.md
CHANGED
|
@@ -6,11 +6,8 @@ Cards contain content and actions about a single subject.
|
|
|
6
6
|
|
|
7
7
|
```
|
|
8
8
|
<vwc-card heading="Hello Card!"
|
|
9
|
-
icon="home"
|
|
10
|
-
badge-content="This is the badge content"
|
|
11
|
-
>
|
|
9
|
+
icon="home">
|
|
12
10
|
<div slot="media">Some media</div>
|
|
13
|
-
<div>This is my content</div>
|
|
14
11
|
<vwc-button slot="actions">Action Button</vwc-button>
|
|
15
12
|
</vwc-card>
|
|
16
13
|
```
|
|
@@ -20,21 +17,22 @@ Cards contain content and actions about a single subject.
|
|
|
20
17
|
|
|
21
18
|
### Properties/Attributes
|
|
22
19
|
|
|
23
|
-
|name|attr/prop/reflected|type|description|
|
|
24
|
-
|--- |--- |---
|
|
25
|
-
|`heading`|reflected|string|The heading text|
|
|
26
|
-
|`
|
|
27
|
-
|`
|
|
28
|
-
|`
|
|
20
|
+
|name|attr/prop/reflected|type| description |
|
|
21
|
+
|--- |--- |--- |----------------------|
|
|
22
|
+
|`heading`|reflected|string| The heading text |
|
|
23
|
+
|`subtitle`|reflected|string| The sub-heading text |
|
|
24
|
+
|`card-text`|reflected|string| The card text |
|
|
25
|
+
|`header-icon`|reflected|string| A valid vivid icon type |
|
|
29
26
|
|
|
30
27
|
### Slots
|
|
31
28
|
|
|
32
|
-
|name|description|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
| name | description |
|
|
30
|
+
|------------|----------------------------------------------------------------------------------------------------|
|
|
31
|
+
| `graphics` | Content to show in the header icon section. If exists, overrides the `header-icon` attribute’s definition |
|
|
32
|
+
| `meta` | Slot for action content in the card header |
|
|
33
|
+
| `media` | Slot to add anything inside the `media` area |
|
|
34
|
+
| `footer` | Slot for action content placed the card footer |
|
|
35
|
+
| `content` | Slot for content of the card. If exist, overrides the `heading`, `subtitle`, `card-text` and `header-icon`
|
|
38
36
|
## Styling tips
|
|
39
37
|
|
|
40
38
|
### Setting card's width
|
package/vwc-card.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `.vwc-card{display:flex;overflow:hidden;flex-flow:column;background-color:var(--vvd-color-canvas);block-size:inherit;border-radius:6px;box-shadow:0 4px 4px rgba(0,0,0,.05),0 8px 8px rgba(0,0,0,.05),0 2px 16px rgba(0,0,0,.1);color:var(--vvd-color-on-canvas)}.vwc-card-
|
|
2
|
+
export const style = css `.vwc-card{display:flex;overflow:hidden;flex-flow:column;background-color:var(--vvd-color-canvas);block-size:inherit;border-radius:6px;box-shadow:0 4px 4px rgba(0,0,0,.05),0 8px 8px rgba(0,0,0,.05),0 2px 16px rgba(0,0,0,.1);color:var(--vvd-color-on-canvas)}.vwc-card-content{display:flex;flex-flow:column;padding:1.5rem}.vwc-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}:host([text]) .vwc-card-header{margin-bottom:12px}.vwc-card-header-content{display:inline-flex}.vwc-card-title,.vwc-card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.vwc-card-title{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;-webkit-line-clamp:var(--title-line-clamp)}.vwc-card-subtitle{-webkit-line-clamp:var(--subtitle-line-clamp)}.vwc-card-subtitle,.vwc-card-text{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;color:var(--vvd-color-neutral-70)}.vwc-card-text{padding-right:.5rem}.vwc-card-footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:1.5rem;margin-top:auto;padding-inline:1.5rem}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin:4px 10px 0 0}.icon{width:20px;height:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-0.5rem;margin-inline-end:-0.5rem}.no-content{display:none}`;
|
|
3
3
|
//# sourceMappingURL=vwc-card.css.js.map
|
package/vwc-card.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-card.css.js","sourceRoot":"","sources":["src/vwc-card.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-card.css.js","sourceRoot":"","sources":["src/vwc-card.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,+6CAA+6C,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`.vwc-card{display:flex;overflow:hidden;flex-flow:column;background-color:var(--vvd-color-canvas);block-size:inherit;border-radius:6px;box-shadow:0 4px 4px rgba(0,0,0,.05),0 8px 8px rgba(0,0,0,.05),0 2px 16px rgba(0,0,0,.1);color:var(--vvd-color-on-canvas)}.vwc-card-content{display:flex;flex-flow:column;padding:1.5rem}.vwc-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}:host([text]) .vwc-card-header{margin-bottom:12px}.vwc-card-header-content{display:inline-flex}.vwc-card-title,.vwc-card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.vwc-card-title{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;-webkit-line-clamp:var(--title-line-clamp)}.vwc-card-subtitle{-webkit-line-clamp:var(--subtitle-line-clamp)}.vwc-card-subtitle,.vwc-card-text{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;color:var(--vvd-color-neutral-70)}.vwc-card-text{padding-right:.5rem}.vwc-card-footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:1.5rem;margin-top:auto;padding-inline:1.5rem}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin:4px 10px 0 0}.icon{width:20px;height:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-0.5rem;margin-inline-end:-0.5rem}.no-content{display:none}`;"]}
|
package/vwc-card.d.ts
CHANGED
|
@@ -7,17 +7,17 @@ declare global {
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
export declare class VWCCard extends LitElement {
|
|
10
|
+
#private;
|
|
10
11
|
heading: string | undefined;
|
|
11
12
|
subtitle: string | undefined;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
private
|
|
15
|
-
private shouldShowActionsSlot;
|
|
13
|
+
icon: string | null;
|
|
14
|
+
text: string | undefined;
|
|
15
|
+
private IconSlottedItems?;
|
|
16
16
|
private get headerContentExists();
|
|
17
17
|
private get headerClass();
|
|
18
18
|
protected render(): unknown;
|
|
19
19
|
private renderHeader;
|
|
20
20
|
private renderIcon;
|
|
21
|
-
private
|
|
22
|
-
private
|
|
21
|
+
private graphicSlotChanged;
|
|
22
|
+
private footerSlotChanged;
|
|
23
23
|
}
|
package/vwc-card.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
var _VWCCard_shouldShowFooterSlot;
|
|
2
|
+
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
|
|
2
3
|
import { customElement, html, LitElement, } from 'lit-element';
|
|
4
|
+
import { nothing } from 'lit-html';
|
|
3
5
|
import { style } from './vwc-card.css.js';
|
|
4
6
|
import { property } from 'lit-element/lib/decorators.js';
|
|
5
7
|
import { classMap } from 'lit-html/directives/class-map.js';
|
|
@@ -8,56 +10,62 @@ import '@vonage/vwc-icon';
|
|
|
8
10
|
let VWCCard = class VWCCard extends LitElement {
|
|
9
11
|
constructor() {
|
|
10
12
|
super(...arguments);
|
|
11
|
-
this.
|
|
13
|
+
this.icon = null;
|
|
14
|
+
_VWCCard_shouldShowFooterSlot.set(this, void 0);
|
|
12
15
|
}
|
|
13
16
|
get headerContentExists() {
|
|
14
17
|
var _a;
|
|
15
|
-
return Boolean(this.heading || this.subtitle || this.
|
|
18
|
+
return Boolean(this.heading || this.subtitle || this.icon || ((_a = this.IconSlottedItems) === null || _a === void 0 ? void 0 : _a.length));
|
|
16
19
|
}
|
|
17
20
|
get headerClass() {
|
|
18
21
|
return (this.headerContentExists) ? '' : 'no-content';
|
|
19
22
|
}
|
|
20
23
|
render() {
|
|
21
|
-
const
|
|
22
|
-
'no-content': !(this
|
|
24
|
+
const footerClassMap = {
|
|
25
|
+
'no-content': !(__classPrivateFieldGet(this, _VWCCard_shouldShowFooterSlot, "f"))
|
|
23
26
|
};
|
|
24
27
|
return html `
|
|
25
28
|
<div class="vwc-card">
|
|
26
29
|
<div class="vwc-card-media">
|
|
27
30
|
<slot name="media"></slot>
|
|
28
31
|
</div>
|
|
29
|
-
<div class="vwc-card-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
<div class="vwc-card-content">
|
|
33
|
+
<slot name="content">
|
|
34
|
+
${this.renderHeader()}
|
|
35
|
+
<div class="vwc-card-text">
|
|
36
|
+
${this.text ? this.text : nothing}
|
|
37
|
+
</div>
|
|
38
|
+
</slot>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="vwc-card-footer ${classMap(footerClassMap)}">
|
|
41
|
+
<slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
|
|
37
42
|
</div>
|
|
38
43
|
</div>
|
|
39
44
|
`;
|
|
40
45
|
}
|
|
41
46
|
renderHeader() {
|
|
42
47
|
return html `
|
|
43
|
-
<header class="${this.headerClass}">
|
|
44
|
-
<div class="vwc-card-header">
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
<header class="vwc-card-header ${this.headerClass}">
|
|
49
|
+
<div class="vwc-card-header-content">
|
|
50
|
+
<slot name="graphic" @slotchange="${this.graphicSlotChanged}">
|
|
51
|
+
${this.icon ? this.renderIcon() : ''}
|
|
52
|
+
</slot>
|
|
53
|
+
<div>
|
|
54
|
+
<div class="vwc-card-title">${this.heading}</div>
|
|
55
|
+
<div class="vwc-card-subtitle">${this.subtitle}</div>
|
|
56
|
+
</div>
|
|
49
57
|
</div>
|
|
50
|
-
<
|
|
58
|
+
<slot name="meta"></slot>
|
|
51
59
|
</header>`;
|
|
52
60
|
}
|
|
53
61
|
renderIcon() {
|
|
54
|
-
return html `<vwc-icon class="
|
|
62
|
+
return html `<vwc-icon class="icon" inline type="${this.icon}"></vwc-icon>`;
|
|
55
63
|
}
|
|
56
|
-
|
|
64
|
+
graphicSlotChanged() {
|
|
57
65
|
var _a;
|
|
58
66
|
const headerElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('header');
|
|
59
|
-
const slot = headerElement === null || headerElement === void 0 ? void 0 : headerElement.querySelector('slot[name="
|
|
60
|
-
this.
|
|
67
|
+
const slot = headerElement === null || headerElement === void 0 ? void 0 : headerElement.querySelector('slot[name="graphic"]');
|
|
68
|
+
this.IconSlottedItems = slot.assignedNodes();
|
|
61
69
|
if (this.headerContentExists) {
|
|
62
70
|
headerElement === null || headerElement === void 0 ? void 0 : headerElement.classList.remove('no-content');
|
|
63
71
|
}
|
|
@@ -65,13 +73,14 @@ let VWCCard = class VWCCard extends LitElement {
|
|
|
65
73
|
headerElement === null || headerElement === void 0 ? void 0 : headerElement.classList.add('no-content');
|
|
66
74
|
}
|
|
67
75
|
}
|
|
68
|
-
|
|
76
|
+
footerSlotChanged() {
|
|
69
77
|
var _a;
|
|
70
|
-
const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="
|
|
71
|
-
this
|
|
78
|
+
const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
|
|
79
|
+
__classPrivateFieldSet(this, _VWCCard_shouldShowFooterSlot, Boolean(slot.assignedNodes().length), "f");
|
|
72
80
|
this.requestUpdate();
|
|
73
81
|
}
|
|
74
82
|
};
|
|
83
|
+
_VWCCard_shouldShowFooterSlot = new WeakMap();
|
|
75
84
|
VWCCard.styles = style;
|
|
76
85
|
__decorate([
|
|
77
86
|
property({
|
|
@@ -88,17 +97,17 @@ __decorate([
|
|
|
88
97
|
__decorate([
|
|
89
98
|
property({
|
|
90
99
|
reflect: true,
|
|
91
|
-
attribute: '
|
|
100
|
+
attribute: 'icon',
|
|
92
101
|
type: String
|
|
93
102
|
})
|
|
94
|
-
], VWCCard.prototype, "
|
|
103
|
+
], VWCCard.prototype, "icon", void 0);
|
|
95
104
|
__decorate([
|
|
96
105
|
property({
|
|
97
106
|
reflect: true,
|
|
98
|
-
attribute: '
|
|
107
|
+
attribute: 'text',
|
|
99
108
|
type: String
|
|
100
109
|
})
|
|
101
|
-
], VWCCard.prototype, "
|
|
110
|
+
], VWCCard.prototype, "text", void 0);
|
|
102
111
|
VWCCard = __decorate([
|
|
103
112
|
customElement('vwc-card')
|
|
104
113
|
], VWCCard);
|
package/vwc-card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-card.js","sourceRoot":"","sources":["src/vwc-card.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"vwc-card.js","sourceRoot":"","sources":["src/vwc-card.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tcustomElement, html, LitElement,\n} from 'lit-element';\nimport { nothing } from 'lit-html';\nimport { style } from './vwc-card.css.js';\nimport { property } from 'lit-element/lib/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport '@vonage/vwc-button';\nimport '@vonage/vwc-icon';\n\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-card': VWCCard;\n\t}\n}\n\n/**\n * @cssprop [--title-line-clamp] defines the number of lines presented before trim + ellipsis in the card title\n * @cssprop [--subtitle-line-clamp] defines the number of lines presented before trim + ellipsis in the card subtitle\n * */\n\n@customElement('vwc-card')\nexport class VWCCard extends LitElement {\n\t/**\n\t * @internal\n\t */\n\tstatic override styles = style;\n\n\t@property({\n\t\treflect: true,\n\t\ttype: String\n\t})\n\t\theading: string | undefined;\n\n\t@property({\n\t\treflect: true,\n\t\ttype: String\n\t})\n\t\tsubtitle: string | undefined;\n\n\t@property({\n\t\treflect: true,\n\t\tattribute: 'icon',\n\t\ttype: String\n\t})\n\t\ticon: string | null = null;\n\n\t@property({\n\t\treflect: true,\n\t\tattribute: 'text',\n\t\ttype: String\n\t})\n\t\ttext: string | undefined;\n\n\tprivate IconSlottedItems?: Node[];\n\t#shouldShowFooterSlot: boolean | undefined;\n\n\tprivate get headerContentExists(): boolean {\n\t\treturn Boolean(this.heading || this.subtitle || this.icon || this.IconSlottedItems?.length);\n\t}\n\n\tprivate get headerClass(): string {\n\t\treturn (this.headerContentExists) ? '' : 'no-content';\n\t}\n\n\tprotected override render(): unknown {\n\t\tconst footerClassMap = {\n\t\t\t'no-content': !(this.#shouldShowFooterSlot)\n\t\t};\n\t\treturn html`\n\t\t\t<div class=\"vwc-card\">\n\t\t\t\t<div class=\"vwc-card-media\">\n\t\t\t\t\t<slot name=\"media\"></slot>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"vwc-card-content\">\n\t\t\t\t\t<slot name=\"content\">\n\t\t\t\t\t\t${this.renderHeader()}\n\t\t\t\t\t\t<div class=\"vwc-card-text\">\n\t\t\t\t\t\t\t${this.text ? this.text : nothing}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"vwc-card-footer ${classMap(footerClassMap)}\">\n\t\t\t\t\t<slot name=\"footer\" @slotchange=\"${this.footerSlotChanged}\"></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tprivate renderHeader() {\n\t\treturn html`\n\t\t\t<header class=\"vwc-card-header ${this.headerClass}\">\n\t\t\t\t<div class=\"vwc-card-header-content\">\n\t\t\t\t\t\t<slot name=\"graphic\" @slotchange=\"${this.graphicSlotChanged}\">\n\t\t\t\t\t\t\t${this.icon ? this.renderIcon() : ''}\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<div class=\"vwc-card-title\">${this.heading}</div>\n\t\t\t\t\t\t\t<div class=\"vwc-card-subtitle\">${this.subtitle}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"meta\"></slot>\n\t\t\t</header>`;\n\t}\n\n\tprivate renderIcon() {\n\t\treturn html`<vwc-icon class=\"icon\" inline type=\"${this.icon}\"></vwc-icon>`;\n\t}\n\n\tprivate graphicSlotChanged() {\n\t\tconst headerElement = this.shadowRoot?.querySelector('header');\n\t\tconst slot = headerElement?.querySelector('slot[name=\"graphic\"]') as HTMLSlotElement;\n\t\tthis.IconSlottedItems = slot.assignedNodes();\n\t\tif (this.headerContentExists) {\n\t\t\theaderElement?.classList.remove('no-content');\n\t\t} else {\n\t\t\theaderElement?.classList.add('no-content');\n\t\t}\n\t}\n\n\tprivate footerSlotChanged(): void {\n\t\tconst slot = this.shadowRoot?.querySelector('slot[name=\"footer\"]') as HTMLSlotElement;\n\t\tthis.#shouldShowFooterSlot = Boolean(slot.assignedNodes().length);\n\t\tthis.requestUpdate();\n\t}\n}\n"]}
|