@umbraco-ui/uui-card-block-type 1.12.2 → 1.13.0-rc.2
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/lib/index.js +105 -42
- package/lib/uui-card-block-type.element.d.ts +2 -1
- package/package.json +4 -4
package/lib/index.js
CHANGED
|
@@ -3,7 +3,6 @@ import { UUICardElement } from '@umbraco-ui/uui-card/lib';
|
|
|
3
3
|
import { html, css, nothing } from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
|
-
import { styleMap } from 'lit/directives/style-map.js';
|
|
7
6
|
|
|
8
7
|
var __defProp = Object.defineProperty;
|
|
9
8
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -21,21 +20,25 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
21
20
|
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
22
21
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
23
22
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
24
|
-
var _UUICardBlockTypeElement_instances, renderButton_fn, renderLink_fn;
|
|
23
|
+
var _UUICardBlockTypeElement_instances, renderButton_fn, renderLink_fn, renderMedia_fn, renderContent_fn;
|
|
25
24
|
let UUICardBlockTypeElement = class extends UUICardElement {
|
|
26
25
|
constructor() {
|
|
27
26
|
super(...arguments);
|
|
28
27
|
__privateAdd(this, _UUICardBlockTypeElement_instances);
|
|
29
28
|
this.name = "";
|
|
30
29
|
}
|
|
30
|
+
get background() {
|
|
31
|
+
return void 0;
|
|
32
|
+
}
|
|
33
|
+
set background(value) {
|
|
34
|
+
this.style.backgroundColor = value ?? "";
|
|
35
|
+
}
|
|
31
36
|
render() {
|
|
32
37
|
return html`
|
|
33
|
-
|
|
34
|
-
id="portrait"
|
|
35
|
-
style=${styleMap({ backgroundColor: this.background })}>
|
|
36
|
-
<slot></slot>
|
|
37
|
-
</div>
|
|
38
|
+
${__privateMethod(this, _UUICardBlockTypeElement_instances, renderMedia_fn).call(this)}
|
|
38
39
|
${this.href ? __privateMethod(this, _UUICardBlockTypeElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardBlockTypeElement_instances, renderButton_fn).call(this)}
|
|
40
|
+
<!-- Select border must be right after #open-part -->
|
|
41
|
+
<div id="select-border"></div>
|
|
39
42
|
|
|
40
43
|
<slot name="tag"></slot>
|
|
41
44
|
<slot name="actions"></slot>
|
|
@@ -47,10 +50,11 @@ renderButton_fn = function() {
|
|
|
47
50
|
return html`
|
|
48
51
|
<button
|
|
49
52
|
id="open-part"
|
|
53
|
+
class="uui-text"
|
|
50
54
|
tabindex=${this.disabled ? nothing : "0"}
|
|
51
55
|
@click=${this.handleOpenClick}
|
|
52
56
|
@keydown=${this.handleOpenKeydown}>
|
|
53
|
-
|
|
57
|
+
${__privateMethod(this, _UUICardBlockTypeElement_instances, renderContent_fn).call(this)}
|
|
54
58
|
</button>
|
|
55
59
|
`;
|
|
56
60
|
};
|
|
@@ -58,6 +62,7 @@ renderLink_fn = function() {
|
|
|
58
62
|
return html`
|
|
59
63
|
<a
|
|
60
64
|
id="open-part"
|
|
65
|
+
class="uui-text"
|
|
61
66
|
tabindex=${this.disabled ? nothing : "0"}
|
|
62
67
|
href=${ifDefined(!this.disabled ? this.href : void 0)}
|
|
63
68
|
target=${ifDefined(this.target || void 0)}
|
|
@@ -66,54 +71,83 @@ renderLink_fn = function() {
|
|
|
66
71
|
this.target === "_blank" ? "noopener noreferrer" : void 0
|
|
67
72
|
)
|
|
68
73
|
)}>
|
|
69
|
-
|
|
74
|
+
${__privateMethod(this, _UUICardBlockTypeElement_instances, renderContent_fn).call(this)}
|
|
70
75
|
</a>
|
|
71
76
|
`;
|
|
72
77
|
};
|
|
78
|
+
renderMedia_fn = function() {
|
|
79
|
+
return html`<div id="portrait">
|
|
80
|
+
<slot></slot>
|
|
81
|
+
</div> `;
|
|
82
|
+
};
|
|
83
|
+
renderContent_fn = function() {
|
|
84
|
+
return html`
|
|
85
|
+
<div id="content">
|
|
86
|
+
<span title="${this.name}" id="name">${this.name}</span>
|
|
87
|
+
<small title="${this.description}">${this.description}<slot name="description"></slot></small>
|
|
88
|
+
</div></div>
|
|
89
|
+
`;
|
|
90
|
+
};
|
|
73
91
|
UUICardBlockTypeElement.styles = [
|
|
74
92
|
...UUICardElement.styles,
|
|
75
93
|
css`
|
|
76
94
|
:host {
|
|
77
|
-
|
|
78
|
-
justify-content: flex-start;
|
|
95
|
+
background-color: var(--uui-color-surface-alt,#f3f3f5);
|
|
79
96
|
}
|
|
80
97
|
|
|
81
|
-
|
|
82
|
-
|
|
98
|
+
slot[name='tag'] {
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: var(--uui-size-4,12px);
|
|
101
|
+
right: var(--uui-size-4,12px);
|
|
102
|
+
display: flex;
|
|
103
|
+
justify-content: right;
|
|
104
|
+
z-index: 2;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
slot[name='actions'] {
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: var(--uui-size-4,12px);
|
|
110
|
+
right: var(--uui-size-4,12px);
|
|
111
|
+
display: flex;
|
|
112
|
+
justify-content: right;
|
|
113
|
+
z-index: 2;
|
|
114
|
+
opacity: 0;
|
|
115
|
+
transition: opacity 120ms;
|
|
116
|
+
}
|
|
117
|
+
:host(:focus) slot[name='actions'],
|
|
118
|
+
:host(:focus-within) slot[name='actions'],
|
|
119
|
+
:host(:hover) slot[name='actions'] {
|
|
120
|
+
opacity: 1;
|
|
83
121
|
}
|
|
84
122
|
|
|
85
123
|
#portrait {
|
|
86
|
-
background-color: var(--uui-color-surface-alt,#f3f3f5);
|
|
87
124
|
display: flex;
|
|
88
125
|
justify-content: center;
|
|
89
126
|
min-height: 150px;
|
|
90
127
|
max-height: 150px;
|
|
128
|
+
width: 100%;
|
|
129
|
+
margin-bottom: var(--uui-size-layout-2,30px);
|
|
91
130
|
}
|
|
92
131
|
|
|
93
132
|
slot:not([name])::slotted(*) {
|
|
94
133
|
align-self: center;
|
|
95
|
-
font-size: var(--uui-size-8,24px);
|
|
96
134
|
border-radius: var(--uui-border-radius,3px);
|
|
97
135
|
object-fit: cover;
|
|
98
136
|
max-width: 100%;
|
|
99
137
|
max-height: 100%;
|
|
138
|
+
font-size: var(--uui-size-8,24px);
|
|
100
139
|
}
|
|
101
140
|
|
|
102
141
|
#open-part {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
142
|
+
position: absolute;
|
|
143
|
+
z-index: 1;
|
|
144
|
+
inset: 0;
|
|
106
145
|
color: var(--uui-color-interactive,#1b264f);
|
|
107
146
|
border: none;
|
|
108
|
-
|
|
109
|
-
border-radius: 0 0 var(--uui-border-radius,3px) var(--uui-border-radius,3px);
|
|
110
|
-
font-family: inherit;
|
|
111
|
-
font-size: var(--uui-type-small-size,12px);
|
|
112
|
-
box-sizing: border-box;
|
|
113
|
-
padding: var(--uui-size-2,6px) var(--uui-size-4,12px);
|
|
147
|
+
cursor: pointer;
|
|
114
148
|
display: flex;
|
|
115
149
|
flex-direction: column;
|
|
116
|
-
|
|
150
|
+
justify-content: flex-end;
|
|
117
151
|
}
|
|
118
152
|
|
|
119
153
|
:host([disabled]) #open-part {
|
|
@@ -122,35 +156,52 @@ UUICardBlockTypeElement.styles = [
|
|
|
122
156
|
color: var(--uui-color-contrast-disabled);
|
|
123
157
|
}
|
|
124
158
|
|
|
125
|
-
#open-part:hover strong {
|
|
126
|
-
text-decoration: underline;
|
|
127
|
-
}
|
|
128
159
|
#open-part:hover {
|
|
129
160
|
color: var(--uui-color-interactive-emphasis,#3544b1);
|
|
130
161
|
}
|
|
162
|
+
#open-part:hover #name {
|
|
163
|
+
text-decoration: underline;
|
|
164
|
+
}
|
|
165
|
+
#open-part #name,
|
|
166
|
+
#open-part small {
|
|
167
|
+
display: -webkit-box;
|
|
168
|
+
-webkit-line-clamp: 1;
|
|
169
|
+
-webkit-box-orient: vertical;
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
text-overflow: ellipsis;
|
|
172
|
+
overflow-wrap: anywhere;
|
|
173
|
+
}
|
|
131
174
|
|
|
132
175
|
:host([image]:not([image=''])) #open-part {
|
|
133
176
|
transition: opacity 0.5s 0.5s;
|
|
134
177
|
opacity: 0;
|
|
135
178
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
right: var(--uui-size-4,12px);
|
|
179
|
+
|
|
180
|
+
#content {
|
|
181
|
+
position: relative;
|
|
140
182
|
display: flex;
|
|
141
|
-
|
|
183
|
+
flex-direction: column;
|
|
184
|
+
width: 100%;
|
|
185
|
+
font-family: inherit;
|
|
186
|
+
font-size: var(--uui-type-small-size,12px);
|
|
187
|
+
box-sizing: border-box;
|
|
188
|
+
text-align: left;
|
|
189
|
+
word-break: break-word;
|
|
190
|
+
padding-top: var(--uui-size-space-3,9px);
|
|
142
191
|
}
|
|
143
192
|
|
|
144
|
-
|
|
193
|
+
#content::before {
|
|
194
|
+
content: '';
|
|
145
195
|
position: absolute;
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
196
|
+
inset: 0;
|
|
197
|
+
z-index: -1;
|
|
198
|
+
border-top: 1px solid var(--uui-color-divider,#f6f6f7);
|
|
199
|
+
border-radius: 0 0 var(--uui-border-radius,3px) var(--uui-border-radius,3px);
|
|
200
|
+
background-color: var(--uui-color-surface,#fff);
|
|
201
|
+
pointer-events: none;
|
|
202
|
+
opacity: 0.96;
|
|
153
203
|
}
|
|
204
|
+
|
|
154
205
|
:host(:focus) slot[name='actions'],
|
|
155
206
|
:host(:focus-within) slot[name='actions'],
|
|
156
207
|
:host(:hover) slot[name='actions'] {
|
|
@@ -169,6 +220,18 @@ UUICardBlockTypeElement.styles = [
|
|
|
169
220
|
transition-duration: 120ms;
|
|
170
221
|
transition-delay: 0s;
|
|
171
222
|
}
|
|
223
|
+
|
|
224
|
+
:host([selectable]) #open-part {
|
|
225
|
+
inset: var(--uui-size-space-3,9px) var(--uui-size-space-4,12px);
|
|
226
|
+
}
|
|
227
|
+
:host(:not([selectable])) #content {
|
|
228
|
+
padding: var(--uui-size-space-3,9px) var(--uui-size-space-4,12px);
|
|
229
|
+
}
|
|
230
|
+
:host([selectable]) #content::before {
|
|
231
|
+
inset: calc(var(--uui-size-space-3,9px) * -1)
|
|
232
|
+
calc(var(--uui-size-space-4,12px) * -1);
|
|
233
|
+
top: 0;
|
|
234
|
+
}
|
|
172
235
|
`
|
|
173
236
|
];
|
|
174
237
|
__decorateClass([
|
|
@@ -179,7 +242,7 @@ __decorateClass([
|
|
|
179
242
|
], UUICardBlockTypeElement.prototype, "description", 2);
|
|
180
243
|
__decorateClass([
|
|
181
244
|
property({ type: String, attribute: "background" })
|
|
182
|
-
], UUICardBlockTypeElement.prototype, "background",
|
|
245
|
+
], UUICardBlockTypeElement.prototype, "background", 1);
|
|
183
246
|
UUICardBlockTypeElement = __decorateClass([
|
|
184
247
|
defineElement("uui-card-block-type")
|
|
185
248
|
], UUICardBlockTypeElement);
|
|
@@ -25,7 +25,8 @@ export declare class UUICardBlockTypeElement extends UUICardElement {
|
|
|
25
25
|
* @default undefined
|
|
26
26
|
*/
|
|
27
27
|
description?: string;
|
|
28
|
-
background
|
|
28
|
+
get background(): string | undefined;
|
|
29
|
+
set background(value: string | undefined);
|
|
29
30
|
render(): import("lit-html").TemplateResult<1>;
|
|
30
31
|
static styles: import("lit").CSSResult[];
|
|
31
32
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-card-block-type",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "1.
|
|
34
|
-
"@umbraco-ui/uui-card": "1.
|
|
33
|
+
"@umbraco-ui/uui-base": "1.13.0-rc.2",
|
|
34
|
+
"@umbraco-ui/uui-card": "1.13.0-rc.2"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
44
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-card-block-type",
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "b7efeca91b64cfb5b59e1fcacafcfee23b861b79"
|
|
46
46
|
}
|