@proximus/lavender-card 2.0.0-alpha.2 → 2.0.0-alpha.200
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/dist/Card.d.ts +43 -44
- package/dist/custom-elements.json +376 -0
- package/dist/index.es.js +270 -398
- package/dist/vscode.css-custom-data.json +6 -0
- package/dist/vscode.html-custom-data.json +27 -0
- package/dist/web-types.json +76 -0
- package/package.json +2 -2
package/dist/Card.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Container } from '@proximus/lavender-container';
|
|
1
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
|
+
import { type Container } from '@proximus/lavender-container';
|
|
3
|
+
import { type Image } from '@proximus/lavender-image';
|
|
4
|
+
import { type Stack } from '@proximus/lavender-layout';
|
|
3
5
|
export declare const cardBackgroundColorValues: string[];
|
|
4
6
|
export declare const cardPaddingValues: string[];
|
|
5
7
|
export declare const cardMediaLeftSizeValues: string[];
|
|
6
8
|
export declare const cardMediaPositionValues: string[];
|
|
7
|
-
export declare class Card extends
|
|
9
|
+
export declare class Card extends VerticallyExtendedElement<HTMLLinkElement> {
|
|
10
|
+
#private;
|
|
8
11
|
static nativeName: string;
|
|
9
12
|
private template;
|
|
10
13
|
constructor();
|
|
@@ -12,53 +15,49 @@ export declare class Card extends PxElement<HTMLLinkElement> {
|
|
|
12
15
|
static get observedAttributes(): string[];
|
|
13
16
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
14
17
|
configureCard(): void;
|
|
15
|
-
updateMediaPosition(attrName: string, newValue: string, attrValue: string[]): void;
|
|
16
|
-
updateMediaPositionTop(cssPropertyName: string): void;
|
|
17
|
-
updateMediaPositionLeft(cssPropertyName: string): void;
|
|
18
|
-
updateMediaPositionBackground(cssPropertyName: string): void;
|
|
19
|
-
createImgTop(device: string, src: string): void;
|
|
20
|
-
createDivLeft(device: string, src: string): void;
|
|
21
|
-
updateBackgroundColor(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
22
|
-
updateMediaLeftSize(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
23
18
|
get $children(): NodeListOf<Element>;
|
|
19
|
+
get $img(): Image | null;
|
|
20
|
+
get $pictureSourceMobile(): Image | null;
|
|
21
|
+
get $pictureSourceTablet(): Image | null;
|
|
22
|
+
get $pictureSourceLaptop(): Image | null;
|
|
23
|
+
get $stackContainer(): Stack;
|
|
24
24
|
get $container(): Container;
|
|
25
|
-
get $cardContainer(): HTMLDivElement;
|
|
26
25
|
get inverted(): boolean;
|
|
27
26
|
set inverted(value: boolean);
|
|
28
|
-
get backgroundColor(): string;
|
|
29
|
-
set backgroundColor(value: string);
|
|
30
|
-
get backgroundSize(): string;
|
|
31
|
-
set backgroundSize(value: string);
|
|
32
|
-
get backgroundPosition(): string;
|
|
33
|
-
set backgroundPosition(value: string);
|
|
34
|
-
get padding(): string;
|
|
35
|
-
set padding(value: string);
|
|
27
|
+
get backgroundColor(): string | null;
|
|
28
|
+
set backgroundColor(value: string | null);
|
|
29
|
+
get backgroundSize(): string | null;
|
|
30
|
+
set backgroundSize(value: string | null);
|
|
31
|
+
get backgroundPosition(): string | null;
|
|
32
|
+
set backgroundPosition(value: string | null);
|
|
33
|
+
get padding(): string | null;
|
|
34
|
+
set padding(value: string | null);
|
|
36
35
|
get gradientContrastHelper(): boolean;
|
|
37
36
|
set gradientContrastHelper(value: boolean);
|
|
38
37
|
get overlayContrastHelper(): boolean;
|
|
39
38
|
set overlayContrastHelper(value: boolean);
|
|
40
|
-
get mediaLeftSize(): string;
|
|
41
|
-
set mediaLeftSize(value: string);
|
|
42
|
-
get mediaLeftSizeMobile(): string;
|
|
43
|
-
set mediaLeftSizeMobile(value: string);
|
|
44
|
-
get mediaLeftSizeTablet(): string;
|
|
45
|
-
set mediaLeftSizeTablet(value: string);
|
|
46
|
-
get mediaLeftSizeLaptop(): string;
|
|
47
|
-
set mediaLeftSizeLaptop(value: string);
|
|
48
|
-
get mediaPosition(): string;
|
|
49
|
-
set mediaPosition(value: string);
|
|
50
|
-
get mediaPositionMobile(): string;
|
|
51
|
-
set mediaPositionMobile(value: string);
|
|
52
|
-
get mediaPositionTablet(): string;
|
|
53
|
-
set mediaPositionTablet(value: string);
|
|
54
|
-
get mediaPositionLaptop(): string;
|
|
55
|
-
set mediaPositionLaptop(value: string);
|
|
56
|
-
get mediaSrc(): string;
|
|
57
|
-
set mediaSrc(value: string);
|
|
58
|
-
get mediaSrcMobile(): string;
|
|
59
|
-
set mediaSrcMobile(value: string);
|
|
60
|
-
get mediaSrcTablet(): string;
|
|
61
|
-
set mediaSrcTablet(value: string);
|
|
62
|
-
get mediaSrcLaptop(): string;
|
|
63
|
-
set mediaSrcLaptop(value: string);
|
|
39
|
+
get mediaLeftSize(): string | null;
|
|
40
|
+
set mediaLeftSize(value: string | null);
|
|
41
|
+
get mediaLeftSizeMobile(): string | null;
|
|
42
|
+
set mediaLeftSizeMobile(value: string | null);
|
|
43
|
+
get mediaLeftSizeTablet(): string | null;
|
|
44
|
+
set mediaLeftSizeTablet(value: string | null);
|
|
45
|
+
get mediaLeftSizeLaptop(): string | null;
|
|
46
|
+
set mediaLeftSizeLaptop(value: string | null);
|
|
47
|
+
get mediaPosition(): string | null;
|
|
48
|
+
set mediaPosition(value: string | null);
|
|
49
|
+
get mediaPositionMobile(): string | null;
|
|
50
|
+
set mediaPositionMobile(value: string | null);
|
|
51
|
+
get mediaPositionTablet(): string | null;
|
|
52
|
+
set mediaPositionTablet(value: string | null);
|
|
53
|
+
get mediaPositionLaptop(): string | null;
|
|
54
|
+
set mediaPositionLaptop(value: string | null);
|
|
55
|
+
get mediaSrc(): string | null;
|
|
56
|
+
set mediaSrc(value: string | null);
|
|
57
|
+
get mediaSrcMobile(): string | null;
|
|
58
|
+
set mediaSrcMobile(value: string | null);
|
|
59
|
+
get mediaSrcTablet(): string | null;
|
|
60
|
+
set mediaSrcTablet(value: string | null);
|
|
61
|
+
get mediaSrcLaptop(): string | null;
|
|
62
|
+
set mediaSrcLaptop(value: string | null);
|
|
64
63
|
}
|
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/Card.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "variable",
|
|
11
|
+
"name": "cardBackgroundColorValues",
|
|
12
|
+
"type": {
|
|
13
|
+
"text": "array"
|
|
14
|
+
},
|
|
15
|
+
"default": "[ '', 'container-default', 'container-light', ]"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"kind": "variable",
|
|
19
|
+
"name": "cardPaddingValues",
|
|
20
|
+
"type": {
|
|
21
|
+
"text": "array"
|
|
22
|
+
},
|
|
23
|
+
"default": "['', 's', 'm', 'l']"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"kind": "variable",
|
|
27
|
+
"name": "cardMediaLeftSizeValues",
|
|
28
|
+
"type": {
|
|
29
|
+
"text": "array"
|
|
30
|
+
},
|
|
31
|
+
"default": "['', 's', 'm']"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"kind": "variable",
|
|
35
|
+
"name": "cardMediaPositionValues",
|
|
36
|
+
"type": {
|
|
37
|
+
"text": "array"
|
|
38
|
+
},
|
|
39
|
+
"default": "['', 'top', 'left', 'background']"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"kind": "class",
|
|
43
|
+
"description": "",
|
|
44
|
+
"name": "Card",
|
|
45
|
+
"members": [
|
|
46
|
+
{
|
|
47
|
+
"kind": "field",
|
|
48
|
+
"name": "nativeName",
|
|
49
|
+
"type": {
|
|
50
|
+
"text": "string"
|
|
51
|
+
},
|
|
52
|
+
"static": true,
|
|
53
|
+
"default": "'a'"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"kind": "method",
|
|
57
|
+
"name": "template",
|
|
58
|
+
"privacy": "private"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"kind": "method",
|
|
62
|
+
"name": "configureCard"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"kind": "method",
|
|
66
|
+
"name": "#updateMediaPosition",
|
|
67
|
+
"privacy": "private",
|
|
68
|
+
"parameters": [
|
|
69
|
+
{
|
|
70
|
+
"name": "newValue",
|
|
71
|
+
"type": {
|
|
72
|
+
"text": "string"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "screenSize",
|
|
77
|
+
"optional": true,
|
|
78
|
+
"type": {
|
|
79
|
+
"text": "string"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"kind": "method",
|
|
86
|
+
"name": "#updateMedia",
|
|
87
|
+
"privacy": "private",
|
|
88
|
+
"parameters": [
|
|
89
|
+
{
|
|
90
|
+
"name": "newValue",
|
|
91
|
+
"type": {
|
|
92
|
+
"text": "string"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "screenSize",
|
|
97
|
+
"optional": true,
|
|
98
|
+
"type": {
|
|
99
|
+
"text": "string"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"kind": "method",
|
|
106
|
+
"name": "#updateBackgroundColor",
|
|
107
|
+
"privacy": "private",
|
|
108
|
+
"parameters": [
|
|
109
|
+
{
|
|
110
|
+
"name": "attrName",
|
|
111
|
+
"type": {
|
|
112
|
+
"text": "string"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "oldValue",
|
|
117
|
+
"type": {
|
|
118
|
+
"text": "string"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "newValue",
|
|
123
|
+
"type": {
|
|
124
|
+
"text": "string"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "attrValue",
|
|
129
|
+
"type": {
|
|
130
|
+
"text": "string[]"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "field",
|
|
137
|
+
"name": "$children",
|
|
138
|
+
"readonly": true
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"kind": "field",
|
|
142
|
+
"name": "$img",
|
|
143
|
+
"readonly": true
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"kind": "field",
|
|
147
|
+
"name": "$pictureSourceMobile",
|
|
148
|
+
"readonly": true
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"kind": "field",
|
|
152
|
+
"name": "$pictureSourceTablet",
|
|
153
|
+
"readonly": true
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"kind": "field",
|
|
157
|
+
"name": "$pictureSourceLaptop",
|
|
158
|
+
"readonly": true
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"kind": "field",
|
|
162
|
+
"name": "$stackContainer",
|
|
163
|
+
"readonly": true
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"kind": "field",
|
|
167
|
+
"name": "$container",
|
|
168
|
+
"readonly": true
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"kind": "field",
|
|
172
|
+
"name": "inverted"
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"kind": "field",
|
|
176
|
+
"name": "backgroundColor"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"kind": "field",
|
|
180
|
+
"name": "backgroundSize"
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"kind": "field",
|
|
184
|
+
"name": "backgroundPosition"
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"kind": "field",
|
|
188
|
+
"name": "padding"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"kind": "field",
|
|
192
|
+
"name": "gradientContrastHelper"
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"kind": "field",
|
|
196
|
+
"name": "overlayContrastHelper"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "field",
|
|
200
|
+
"name": "mediaLeftSize"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"kind": "field",
|
|
204
|
+
"name": "mediaLeftSizeMobile"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"kind": "field",
|
|
208
|
+
"name": "mediaLeftSizeTablet"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"kind": "field",
|
|
212
|
+
"name": "mediaLeftSizeLaptop"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"kind": "field",
|
|
216
|
+
"name": "mediaPosition"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"kind": "field",
|
|
220
|
+
"name": "mediaPositionMobile"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "field",
|
|
224
|
+
"name": "mediaPositionTablet"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"kind": "field",
|
|
228
|
+
"name": "mediaPositionLaptop"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"kind": "field",
|
|
232
|
+
"name": "mediaSrc"
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"kind": "field",
|
|
236
|
+
"name": "mediaSrcMobile"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"kind": "field",
|
|
240
|
+
"name": "mediaSrcTablet"
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"kind": "field",
|
|
244
|
+
"name": "mediaSrcLaptop"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"kind": "field",
|
|
248
|
+
"name": "innerHTML"
|
|
249
|
+
}
|
|
250
|
+
],
|
|
251
|
+
"attributes": [
|
|
252
|
+
{
|
|
253
|
+
"name": "inverted"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"name": "background-color"
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"name": "background-size"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "background-position"
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"name": "contrast-helper-gradient"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"name": "contrast-helper-overlay"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "media-position"
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"name": "media-position--mobile"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"name": "media-position--tablet"
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"name": "media-position--laptop"
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"name": "media-src"
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"name": "media-src--mobile"
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "media-src--tablet"
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"name": "media-src--laptop"
|
|
293
|
+
}
|
|
294
|
+
],
|
|
295
|
+
"superclass": {
|
|
296
|
+
"name": "VerticallyExtendedElement",
|
|
297
|
+
"package": "@proximus/lavender-common"
|
|
298
|
+
},
|
|
299
|
+
"tagName": "px-card",
|
|
300
|
+
"customElement": true
|
|
301
|
+
}
|
|
302
|
+
],
|
|
303
|
+
"exports": [
|
|
304
|
+
{
|
|
305
|
+
"kind": "js",
|
|
306
|
+
"name": "cardBackgroundColorValues",
|
|
307
|
+
"declaration": {
|
|
308
|
+
"name": "cardBackgroundColorValues",
|
|
309
|
+
"module": "src/Card.ts"
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"kind": "js",
|
|
314
|
+
"name": "cardPaddingValues",
|
|
315
|
+
"declaration": {
|
|
316
|
+
"name": "cardPaddingValues",
|
|
317
|
+
"module": "src/Card.ts"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"kind": "js",
|
|
322
|
+
"name": "cardMediaLeftSizeValues",
|
|
323
|
+
"declaration": {
|
|
324
|
+
"name": "cardMediaLeftSizeValues",
|
|
325
|
+
"module": "src/Card.ts"
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"kind": "js",
|
|
330
|
+
"name": "cardMediaPositionValues",
|
|
331
|
+
"declaration": {
|
|
332
|
+
"name": "cardMediaPositionValues",
|
|
333
|
+
"module": "src/Card.ts"
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"kind": "js",
|
|
338
|
+
"name": "Card",
|
|
339
|
+
"declaration": {
|
|
340
|
+
"name": "Card",
|
|
341
|
+
"module": "src/Card.ts"
|
|
342
|
+
}
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"kind": "custom-element-definition",
|
|
346
|
+
"name": "px-card",
|
|
347
|
+
"declaration": {
|
|
348
|
+
"name": "Card",
|
|
349
|
+
"module": "src/Card.ts"
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
]
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
"kind": "javascript-module",
|
|
356
|
+
"path": "src/card.css",
|
|
357
|
+
"declarations": [],
|
|
358
|
+
"exports": []
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"kind": "javascript-module",
|
|
362
|
+
"path": "src/index.ts",
|
|
363
|
+
"declarations": [],
|
|
364
|
+
"exports": [
|
|
365
|
+
{
|
|
366
|
+
"kind": "js",
|
|
367
|
+
"name": "*",
|
|
368
|
+
"declaration": {
|
|
369
|
+
"name": "*",
|
|
370
|
+
"module": "src/Card"
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
]
|
|
374
|
+
}
|
|
375
|
+
]
|
|
376
|
+
}
|