@dile/ui 3.9.4 → 3.10.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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import '@dile/iconlib/dile-iconlib.js';
|
|
2
3
|
|
|
3
4
|
export class DileCard extends LitElement {
|
|
4
5
|
static styles = [
|
|
@@ -21,6 +22,18 @@ export class DileCard extends LitElement {
|
|
|
21
22
|
background-color: var(--dile-card-grey-background-color, #f4f4f4);
|
|
22
23
|
color: var(--dile-card-grey-text-color, #303030);
|
|
23
24
|
}
|
|
25
|
+
.card-icon {
|
|
26
|
+
display: flex;
|
|
27
|
+
padding-right: var(--dile-card-padding-x, 1rem);
|
|
28
|
+
padding-left: var(--dile-card-padding-x, 1rem);
|
|
29
|
+
padding-top: var(--dile-card-padding-y, 1rem);
|
|
30
|
+
--dile-icon-color: var(--dile-card-icon-color, var(--dile-on-background-color, #888));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host([grey]) .card-icon {
|
|
34
|
+
--dile-icon-color: var(--dile-card-icon-color, var(--dile-card-grey-text-color, #303030));
|
|
35
|
+
}
|
|
36
|
+
|
|
24
37
|
.card-title, main, footer {
|
|
25
38
|
padding-right: var(--dile-card-padding-x, 1rem);
|
|
26
39
|
padding-left: var(--dile-card-padding-x, 1rem);
|
|
@@ -33,6 +46,9 @@ export class DileCard extends LitElement {
|
|
|
33
46
|
margin: 0;
|
|
34
47
|
margin-bottom: var(--dile-card-title-margin-bottom, 0);
|
|
35
48
|
}
|
|
49
|
+
.card-title-with-icon {
|
|
50
|
+
padding-top: var(--dile-card-title-padding-top-with-icon, 0.5rem);
|
|
51
|
+
}
|
|
36
52
|
main {
|
|
37
53
|
padding-top: var(--dile-card-padding-y, 1rem);
|
|
38
54
|
padding-bottom: var(--dile-card-padding-y, 1rem);
|
|
@@ -72,7 +88,8 @@ export class DileCard extends LitElement {
|
|
|
72
88
|
static get properties() {
|
|
73
89
|
return {
|
|
74
90
|
title: { type: String },
|
|
75
|
-
titleLevel: { type: Number }
|
|
91
|
+
titleLevel: { type: Number },
|
|
92
|
+
icon: { type: String }
|
|
76
93
|
};
|
|
77
94
|
}
|
|
78
95
|
|
|
@@ -83,6 +100,7 @@ export class DileCard extends LitElement {
|
|
|
83
100
|
|
|
84
101
|
render() {
|
|
85
102
|
return html`
|
|
103
|
+
${this.iconTemplate}
|
|
86
104
|
${this.titleTemplate}
|
|
87
105
|
<main>
|
|
88
106
|
<slot></slot>
|
|
@@ -91,15 +109,24 @@ export class DileCard extends LitElement {
|
|
|
91
109
|
`;
|
|
92
110
|
}
|
|
93
111
|
|
|
112
|
+
get iconTemplate() {
|
|
113
|
+
return this.icon
|
|
114
|
+
? html`<div class="card-icon"><dile-iconlib icon="${this.icon}"></dile-iconlib></div>`
|
|
115
|
+
: '';
|
|
116
|
+
}
|
|
117
|
+
|
|
94
118
|
get titleTemplate() {
|
|
95
119
|
// Allow consumers to provide a custom title slot (e.g. an h2/h3) to control heading semantics
|
|
96
120
|
if (this.hasSlot('title')) {
|
|
97
|
-
|
|
121
|
+
const titleClass = this.icon ? 'card-title card-title-with-icon' : 'card-title';
|
|
122
|
+
return html`<div class="${titleClass}"><slot name="title"></slot></div>`;
|
|
98
123
|
}
|
|
99
124
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
125
|
+
if (this.title) {
|
|
126
|
+
const titleClass = this.icon ? 'card-title card-title-with-icon' : 'card-title';
|
|
127
|
+
return html`<div class="${titleClass}" role="heading" aria-level="${this.titleLevel}">${this.title}</div>`;
|
|
128
|
+
}
|
|
129
|
+
return '';
|
|
103
130
|
}
|
|
104
131
|
|
|
105
132
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.0",
|
|
4
4
|
"description": "UI Core components from dile-components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "56b503bc1731dd6925d6b4e318be060310599c39"
|
|
32
32
|
}
|