@proximus/lavender-image 1.4.20-alpha.4 → 1.4.20-alpha.6
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/AbstractImage.d.ts +3 -1
- package/dist/Image.d.ts +75 -1
- package/dist/custom-elements.json +424 -18
- package/dist/index.es.js +45 -15
- package/dist/vscode.html-custom-data.json +103 -6
- package/dist/web-types.json +130 -12
- package/package.json +1 -1
package/dist/AbstractImage.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export declare const styleSheet: CSSStyleSheet;
|
|
|
3
3
|
export declare const imageWidthValues: string[];
|
|
4
4
|
export declare const imageHeightValues: string[];
|
|
5
5
|
export declare abstract class AbstractImage<IMAGE_ELEMENT extends HTMLImageElement | HTMLPictureElement> extends PxElement<IMAGE_ELEMENT> {
|
|
6
|
-
static
|
|
6
|
+
static nativeAttributes: {};
|
|
7
7
|
protected constructor();
|
|
8
8
|
static get observedAttributes(): string[];
|
|
9
9
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
@@ -24,6 +24,7 @@ export declare abstract class AbstractImage<IMAGE_ELEMENT extends HTMLImageEleme
|
|
|
24
24
|
set noBorderRadiusTablet(value: string | null);
|
|
25
25
|
get noBorderRadiusLaptop(): string | null;
|
|
26
26
|
set noBorderRadiusLaptop(value: string | null);
|
|
27
|
+
/** @attr {string | null} width - The Lavender width size token. */
|
|
27
28
|
get width(): string | null;
|
|
28
29
|
set width(value: string | null);
|
|
29
30
|
get widthMobile(): string | null;
|
|
@@ -36,6 +37,7 @@ export declare abstract class AbstractImage<IMAGE_ELEMENT extends HTMLImageEleme
|
|
|
36
37
|
set widthDesktop(value: string | null);
|
|
37
38
|
get disabled(): boolean;
|
|
38
39
|
set disabled(value: boolean);
|
|
40
|
+
/** @attr {string | null} height - The Lavender height size token. */
|
|
39
41
|
get height(): string | null;
|
|
40
42
|
set height(value: string | null);
|
|
41
43
|
get heightMobile(): string | null;
|
package/dist/Image.d.ts
CHANGED
|
@@ -3,9 +3,83 @@ import { AbstractImage } from './AbstractImage.ts';
|
|
|
3
3
|
* @summary An image component.
|
|
4
4
|
* @attr {string} src - The URL of the image.
|
|
5
5
|
* @attr {string} alt - The alternative text for the image.
|
|
6
|
-
* @attr {
|
|
6
|
+
* @attr {'eager' | 'lazy'} loading - The loading strategy for the image.
|
|
7
7
|
*/
|
|
8
8
|
export declare class Image extends AbstractImage<HTMLImageElement> {
|
|
9
9
|
static nativeName: string;
|
|
10
|
+
static nativeProperties: {
|
|
11
|
+
currentSrc: "readonly";
|
|
12
|
+
naturalWidth: "readonly";
|
|
13
|
+
naturalHeight: "readonly";
|
|
14
|
+
complete: "readonly";
|
|
15
|
+
x: "readonly";
|
|
16
|
+
y: "readonly";
|
|
17
|
+
};
|
|
18
|
+
static nativeMethods: "decode"[];
|
|
19
|
+
static nativeAttributes: {
|
|
20
|
+
alt: "alt"[];
|
|
21
|
+
src: "src"[];
|
|
22
|
+
srcset: "srcset"[];
|
|
23
|
+
sizes: "sizes"[];
|
|
24
|
+
crossorigin: "crossOrigin"[];
|
|
25
|
+
usemap: "useMap"[];
|
|
26
|
+
ismap: "isMap"[];
|
|
27
|
+
referrerpolicy: "referrerPolicy"[];
|
|
28
|
+
decoding: "decoding"[];
|
|
29
|
+
loading: "loading"[];
|
|
30
|
+
fetchpriority: "fetchPriority"[];
|
|
31
|
+
title: "title"[];
|
|
32
|
+
height: never[];
|
|
33
|
+
width: never[];
|
|
34
|
+
border: "border"[];
|
|
35
|
+
hspace: "hspace"[];
|
|
36
|
+
vspace: "vspace"[];
|
|
37
|
+
longdesc: "longDesc"[];
|
|
38
|
+
lowsrc: "lowsrc"[];
|
|
39
|
+
name: "name"[];
|
|
40
|
+
};
|
|
10
41
|
constructor();
|
|
42
|
+
/** @attr {string} alt - The alternative text. */
|
|
43
|
+
alt: string;
|
|
44
|
+
/** @attr {string} src - The resource URL. */
|
|
45
|
+
src: string;
|
|
46
|
+
/** @attr {string} srcset - The responsive image candidates. */
|
|
47
|
+
srcset: string;
|
|
48
|
+
/** @attr {string} sizes - The responsive image source sizes. */
|
|
49
|
+
sizes: string;
|
|
50
|
+
/** @attr {string | null} crossorigin - The cross-origin image request mode. */
|
|
51
|
+
crossOrigin: string | null;
|
|
52
|
+
/** @attr {string} usemap - The associated image-map reference. */
|
|
53
|
+
useMap: string;
|
|
54
|
+
/** @attr {boolean} ismap - Whether the image is a server-side image map. */
|
|
55
|
+
isMap: boolean;
|
|
56
|
+
/** @attr {string} referrerpolicy - The referrer policy. */
|
|
57
|
+
referrerPolicy: string;
|
|
58
|
+
/** @attr {"async" | "sync" | "auto"} decoding - The image decoding hint. */
|
|
59
|
+
decoding: 'async' | 'sync' | 'auto';
|
|
60
|
+
/** @attr {"eager" | "lazy"} loading - The image loading strategy. */
|
|
61
|
+
loading: 'eager' | 'lazy';
|
|
62
|
+
/** @attr {"auto" | "high" | "low"} fetchpriority - The resource fetch priority. */
|
|
63
|
+
fetchPriority: 'auto' | 'high' | 'low';
|
|
64
|
+
/** @attr {string} title - The native element tooltip. */
|
|
65
|
+
title: string;
|
|
66
|
+
/** @attr {string} border - The legacy image border width. */
|
|
67
|
+
border: string;
|
|
68
|
+
/** @attr {number} hspace - The legacy horizontal image spacing. */
|
|
69
|
+
hspace: number;
|
|
70
|
+
/** @attr {number} vspace - The legacy vertical image spacing. */
|
|
71
|
+
vspace: number;
|
|
72
|
+
/** @attr {string} longdesc - The legacy long-description URL. */
|
|
73
|
+
longDesc: string;
|
|
74
|
+
/** @attr {string} lowsrc - The legacy low-resolution image URL. */
|
|
75
|
+
lowsrc: string;
|
|
76
|
+
/** @attr {string} name - The native element name. */
|
|
77
|
+
name: string;
|
|
78
|
+
readonly currentSrc: string;
|
|
79
|
+
readonly naturalWidth: number;
|
|
80
|
+
readonly naturalHeight: number;
|
|
81
|
+
readonly complete: boolean;
|
|
82
|
+
readonly x: number;
|
|
83
|
+
readonly y: number;
|
|
84
|
+
readonly decode: HTMLImageElement['decode'];
|
|
11
85
|
}
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"members": [
|
|
35
35
|
{
|
|
36
36
|
"kind": "field",
|
|
37
|
-
"name": "
|
|
37
|
+
"name": "nativeAttributes",
|
|
38
38
|
"type": {
|
|
39
|
-
"text": "
|
|
39
|
+
"text": "object"
|
|
40
40
|
},
|
|
41
41
|
"static": true,
|
|
42
|
-
"default": "
|
|
42
|
+
"default": "{}"
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
"kind": "method",
|
|
@@ -159,7 +159,11 @@
|
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
"kind": "field",
|
|
162
|
-
"name": "width"
|
|
162
|
+
"name": "width",
|
|
163
|
+
"type": {
|
|
164
|
+
"text": "string | null"
|
|
165
|
+
},
|
|
166
|
+
"attribute": "width"
|
|
163
167
|
},
|
|
164
168
|
{
|
|
165
169
|
"kind": "field",
|
|
@@ -183,7 +187,11 @@
|
|
|
183
187
|
},
|
|
184
188
|
{
|
|
185
189
|
"kind": "field",
|
|
186
|
-
"name": "height"
|
|
190
|
+
"name": "height",
|
|
191
|
+
"type": {
|
|
192
|
+
"text": "string | null"
|
|
193
|
+
},
|
|
194
|
+
"attribute": "height"
|
|
187
195
|
},
|
|
188
196
|
{
|
|
189
197
|
"kind": "field",
|
|
@@ -223,7 +231,12 @@
|
|
|
223
231
|
"name": "no-border-radius--laptop"
|
|
224
232
|
},
|
|
225
233
|
{
|
|
226
|
-
"name": "width"
|
|
234
|
+
"name": "width",
|
|
235
|
+
"type": {
|
|
236
|
+
"text": "string | null"
|
|
237
|
+
},
|
|
238
|
+
"fieldName": "width",
|
|
239
|
+
"description": "The Lavender width size token."
|
|
227
240
|
},
|
|
228
241
|
{
|
|
229
242
|
"name": "width--mobile"
|
|
@@ -242,6 +255,14 @@
|
|
|
242
255
|
},
|
|
243
256
|
{
|
|
244
257
|
"name": "disabled"
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "height",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "string | null"
|
|
263
|
+
},
|
|
264
|
+
"fieldName": "height",
|
|
265
|
+
"description": "The Lavender height size token."
|
|
245
266
|
}
|
|
246
267
|
],
|
|
247
268
|
"superclass": {
|
|
@@ -305,17 +326,229 @@
|
|
|
305
326
|
},
|
|
306
327
|
{
|
|
307
328
|
"kind": "field",
|
|
308
|
-
"name": "
|
|
329
|
+
"name": "nativeProperties",
|
|
330
|
+
"static": true,
|
|
331
|
+
"default": "nativeImageProperties"
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"kind": "field",
|
|
335
|
+
"name": "nativeMethods",
|
|
336
|
+
"static": true,
|
|
337
|
+
"default": "nativeImageMethods"
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"kind": "field",
|
|
341
|
+
"name": "nativeAttributes",
|
|
309
342
|
"type": {
|
|
310
|
-
"text": "
|
|
343
|
+
"text": "object"
|
|
311
344
|
},
|
|
312
345
|
"static": true,
|
|
313
|
-
"default": "['
|
|
346
|
+
"default": "{ alt: ['alt'], src: ['src'], srcset: ['srcset'], sizes: ['sizes'], crossorigin: ['crossOrigin'], usemap: ['useMap'], ismap: ['isMap'], referrerpolicy: ['referrerPolicy'], decoding: ['decoding'], loading: ['loading'], fetchpriority: ['fetchPriority'], title: ['title'], // Lavender owns the dimension properties and accepts size tokens. height: [], width: [], border: ['border'], hspace: ['hspace'], vspace: ['vspace'], longdesc: ['longDesc'], lowsrc: ['lowsrc'], name: ['name'], } satisfies NativeAttributeMap<HTMLImageElement>",
|
|
314
347
|
"inheritedFrom": {
|
|
315
348
|
"name": "AbstractImage",
|
|
316
349
|
"module": "src/AbstractImage.ts"
|
|
317
350
|
}
|
|
318
351
|
},
|
|
352
|
+
{
|
|
353
|
+
"kind": "field",
|
|
354
|
+
"name": "alt",
|
|
355
|
+
"type": {
|
|
356
|
+
"text": "string"
|
|
357
|
+
},
|
|
358
|
+
"attribute": "alt"
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"kind": "field",
|
|
362
|
+
"name": "src",
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "string"
|
|
365
|
+
},
|
|
366
|
+
"attribute": "src"
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"kind": "field",
|
|
370
|
+
"name": "srcset",
|
|
371
|
+
"type": {
|
|
372
|
+
"text": "string"
|
|
373
|
+
},
|
|
374
|
+
"attribute": "srcset"
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"kind": "field",
|
|
378
|
+
"name": "sizes",
|
|
379
|
+
"type": {
|
|
380
|
+
"text": "string"
|
|
381
|
+
},
|
|
382
|
+
"attribute": "sizes"
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
"kind": "field",
|
|
386
|
+
"name": "crossOrigin",
|
|
387
|
+
"type": {
|
|
388
|
+
"text": "string | null"
|
|
389
|
+
},
|
|
390
|
+
"attribute": "crossorigin"
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
"kind": "field",
|
|
394
|
+
"name": "useMap",
|
|
395
|
+
"type": {
|
|
396
|
+
"text": "string"
|
|
397
|
+
},
|
|
398
|
+
"attribute": "usemap"
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"kind": "field",
|
|
402
|
+
"name": "isMap",
|
|
403
|
+
"type": {
|
|
404
|
+
"text": "boolean"
|
|
405
|
+
},
|
|
406
|
+
"attribute": "ismap"
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"kind": "field",
|
|
410
|
+
"name": "referrerPolicy",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "string"
|
|
413
|
+
},
|
|
414
|
+
"attribute": "referrerpolicy"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"kind": "field",
|
|
418
|
+
"name": "decoding",
|
|
419
|
+
"type": {
|
|
420
|
+
"text": "'async' | 'sync' | 'auto'"
|
|
421
|
+
},
|
|
422
|
+
"attribute": "decoding"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"kind": "field",
|
|
426
|
+
"name": "loading",
|
|
427
|
+
"type": {
|
|
428
|
+
"text": "'eager' | 'lazy'"
|
|
429
|
+
},
|
|
430
|
+
"attribute": "loading"
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"kind": "field",
|
|
434
|
+
"name": "fetchPriority",
|
|
435
|
+
"type": {
|
|
436
|
+
"text": "'auto' | 'high' | 'low'"
|
|
437
|
+
},
|
|
438
|
+
"attribute": "fetchpriority"
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"kind": "field",
|
|
442
|
+
"name": "title",
|
|
443
|
+
"type": {
|
|
444
|
+
"text": "string"
|
|
445
|
+
},
|
|
446
|
+
"attribute": "title"
|
|
447
|
+
},
|
|
448
|
+
{
|
|
449
|
+
"kind": "field",
|
|
450
|
+
"name": "border",
|
|
451
|
+
"type": {
|
|
452
|
+
"text": "string"
|
|
453
|
+
},
|
|
454
|
+
"attribute": "border"
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
"kind": "field",
|
|
458
|
+
"name": "hspace",
|
|
459
|
+
"type": {
|
|
460
|
+
"text": "number"
|
|
461
|
+
},
|
|
462
|
+
"attribute": "hspace"
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"kind": "field",
|
|
466
|
+
"name": "vspace",
|
|
467
|
+
"type": {
|
|
468
|
+
"text": "number"
|
|
469
|
+
},
|
|
470
|
+
"attribute": "vspace"
|
|
471
|
+
},
|
|
472
|
+
{
|
|
473
|
+
"kind": "field",
|
|
474
|
+
"name": "longDesc",
|
|
475
|
+
"type": {
|
|
476
|
+
"text": "string"
|
|
477
|
+
},
|
|
478
|
+
"attribute": "longdesc"
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
"kind": "field",
|
|
482
|
+
"name": "lowsrc",
|
|
483
|
+
"type": {
|
|
484
|
+
"text": "string"
|
|
485
|
+
},
|
|
486
|
+
"attribute": "lowsrc"
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"kind": "field",
|
|
490
|
+
"name": "name",
|
|
491
|
+
"type": {
|
|
492
|
+
"text": "string"
|
|
493
|
+
},
|
|
494
|
+
"attribute": "name"
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"kind": "field",
|
|
498
|
+
"name": "currentSrc",
|
|
499
|
+
"type": {
|
|
500
|
+
"text": "string"
|
|
501
|
+
},
|
|
502
|
+
"readonly": true
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"kind": "field",
|
|
506
|
+
"name": "naturalWidth",
|
|
507
|
+
"type": {
|
|
508
|
+
"text": "number"
|
|
509
|
+
},
|
|
510
|
+
"readonly": true
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"kind": "field",
|
|
514
|
+
"name": "naturalHeight",
|
|
515
|
+
"type": {
|
|
516
|
+
"text": "number"
|
|
517
|
+
},
|
|
518
|
+
"readonly": true
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
"kind": "field",
|
|
522
|
+
"name": "complete",
|
|
523
|
+
"type": {
|
|
524
|
+
"text": "boolean"
|
|
525
|
+
},
|
|
526
|
+
"readonly": true
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
"kind": "field",
|
|
530
|
+
"name": "x",
|
|
531
|
+
"type": {
|
|
532
|
+
"text": "number"
|
|
533
|
+
},
|
|
534
|
+
"readonly": true
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"kind": "field",
|
|
538
|
+
"name": "y",
|
|
539
|
+
"type": {
|
|
540
|
+
"text": "number"
|
|
541
|
+
},
|
|
542
|
+
"readonly": true
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
"kind": "field",
|
|
546
|
+
"name": "decode",
|
|
547
|
+
"type": {
|
|
548
|
+
"text": "HTMLImageElement['decode']"
|
|
549
|
+
},
|
|
550
|
+
"readonly": true
|
|
551
|
+
},
|
|
319
552
|
{
|
|
320
553
|
"kind": "method",
|
|
321
554
|
"name": "updateWidth",
|
|
@@ -471,6 +704,10 @@
|
|
|
471
704
|
{
|
|
472
705
|
"kind": "field",
|
|
473
706
|
"name": "width",
|
|
707
|
+
"type": {
|
|
708
|
+
"text": "string | null"
|
|
709
|
+
},
|
|
710
|
+
"attribute": "width",
|
|
474
711
|
"inheritedFrom": {
|
|
475
712
|
"name": "AbstractImage",
|
|
476
713
|
"module": "src/AbstractImage.ts"
|
|
@@ -519,6 +756,10 @@
|
|
|
519
756
|
{
|
|
520
757
|
"kind": "field",
|
|
521
758
|
"name": "height",
|
|
759
|
+
"type": {
|
|
760
|
+
"text": "string | null"
|
|
761
|
+
},
|
|
762
|
+
"attribute": "height",
|
|
522
763
|
"inheritedFrom": {
|
|
523
764
|
"name": "AbstractImage",
|
|
524
765
|
"module": "src/AbstractImage.ts"
|
|
@@ -567,25 +808,148 @@
|
|
|
567
808
|
],
|
|
568
809
|
"attributes": [
|
|
569
810
|
{
|
|
811
|
+
"name": "alt",
|
|
570
812
|
"type": {
|
|
571
813
|
"text": "string"
|
|
572
814
|
},
|
|
573
|
-
"
|
|
574
|
-
"
|
|
815
|
+
"fieldName": "alt",
|
|
816
|
+
"description": "The alternative text for the image."
|
|
575
817
|
},
|
|
576
818
|
{
|
|
819
|
+
"name": "src",
|
|
577
820
|
"type": {
|
|
578
821
|
"text": "string"
|
|
579
822
|
},
|
|
580
|
-
"
|
|
581
|
-
"
|
|
823
|
+
"fieldName": "src",
|
|
824
|
+
"description": "The URL of the image."
|
|
582
825
|
},
|
|
583
826
|
{
|
|
827
|
+
"name": "srcset",
|
|
584
828
|
"type": {
|
|
585
829
|
"text": "string"
|
|
586
830
|
},
|
|
587
|
-
"
|
|
588
|
-
"
|
|
831
|
+
"fieldName": "srcset",
|
|
832
|
+
"description": "The responsive image candidates."
|
|
833
|
+
},
|
|
834
|
+
{
|
|
835
|
+
"name": "sizes",
|
|
836
|
+
"type": {
|
|
837
|
+
"text": "string"
|
|
838
|
+
},
|
|
839
|
+
"fieldName": "sizes",
|
|
840
|
+
"description": "The responsive image source sizes."
|
|
841
|
+
},
|
|
842
|
+
{
|
|
843
|
+
"name": "crossorigin",
|
|
844
|
+
"type": {
|
|
845
|
+
"text": "string | null"
|
|
846
|
+
},
|
|
847
|
+
"fieldName": "crossOrigin",
|
|
848
|
+
"description": "The cross-origin image request mode."
|
|
849
|
+
},
|
|
850
|
+
{
|
|
851
|
+
"name": "usemap",
|
|
852
|
+
"type": {
|
|
853
|
+
"text": "string"
|
|
854
|
+
},
|
|
855
|
+
"fieldName": "useMap",
|
|
856
|
+
"description": "The associated image-map reference."
|
|
857
|
+
},
|
|
858
|
+
{
|
|
859
|
+
"name": "ismap",
|
|
860
|
+
"type": {
|
|
861
|
+
"text": "boolean"
|
|
862
|
+
},
|
|
863
|
+
"fieldName": "isMap",
|
|
864
|
+
"description": "Whether the image is a server-side image map."
|
|
865
|
+
},
|
|
866
|
+
{
|
|
867
|
+
"name": "referrerpolicy",
|
|
868
|
+
"type": {
|
|
869
|
+
"text": "string"
|
|
870
|
+
},
|
|
871
|
+
"fieldName": "referrerPolicy",
|
|
872
|
+
"description": "The referrer policy."
|
|
873
|
+
},
|
|
874
|
+
{
|
|
875
|
+
"name": "decoding",
|
|
876
|
+
"type": {
|
|
877
|
+
"text": "'async' | 'sync' | 'auto'"
|
|
878
|
+
},
|
|
879
|
+
"fieldName": "decoding",
|
|
880
|
+
"description": "The image decoding hint."
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
"name": "loading",
|
|
884
|
+
"type": {
|
|
885
|
+
"text": "'eager' | 'lazy'"
|
|
886
|
+
},
|
|
887
|
+
"fieldName": "loading",
|
|
888
|
+
"description": "The loading strategy for the image."
|
|
889
|
+
},
|
|
890
|
+
{
|
|
891
|
+
"name": "fetchpriority",
|
|
892
|
+
"type": {
|
|
893
|
+
"text": "'auto' | 'high' | 'low'"
|
|
894
|
+
},
|
|
895
|
+
"fieldName": "fetchPriority",
|
|
896
|
+
"description": "The resource fetch priority."
|
|
897
|
+
},
|
|
898
|
+
{
|
|
899
|
+
"name": "title",
|
|
900
|
+
"type": {
|
|
901
|
+
"text": "string"
|
|
902
|
+
},
|
|
903
|
+
"fieldName": "title",
|
|
904
|
+
"description": "The native element tooltip."
|
|
905
|
+
},
|
|
906
|
+
{
|
|
907
|
+
"name": "border",
|
|
908
|
+
"type": {
|
|
909
|
+
"text": "string"
|
|
910
|
+
},
|
|
911
|
+
"fieldName": "border",
|
|
912
|
+
"description": "The legacy image border width."
|
|
913
|
+
},
|
|
914
|
+
{
|
|
915
|
+
"name": "hspace",
|
|
916
|
+
"type": {
|
|
917
|
+
"text": "number"
|
|
918
|
+
},
|
|
919
|
+
"fieldName": "hspace",
|
|
920
|
+
"description": "The legacy horizontal image spacing."
|
|
921
|
+
},
|
|
922
|
+
{
|
|
923
|
+
"name": "vspace",
|
|
924
|
+
"type": {
|
|
925
|
+
"text": "number"
|
|
926
|
+
},
|
|
927
|
+
"fieldName": "vspace",
|
|
928
|
+
"description": "The legacy vertical image spacing."
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
"name": "longdesc",
|
|
932
|
+
"type": {
|
|
933
|
+
"text": "string"
|
|
934
|
+
},
|
|
935
|
+
"fieldName": "longDesc",
|
|
936
|
+
"description": "The legacy long-description URL."
|
|
937
|
+
},
|
|
938
|
+
{
|
|
939
|
+
"name": "lowsrc",
|
|
940
|
+
"type": {
|
|
941
|
+
"text": "string"
|
|
942
|
+
},
|
|
943
|
+
"fieldName": "lowsrc",
|
|
944
|
+
"description": "The legacy low-resolution image URL."
|
|
945
|
+
},
|
|
946
|
+
{
|
|
947
|
+
"name": "name",
|
|
948
|
+
"type": {
|
|
949
|
+
"text": "string"
|
|
950
|
+
},
|
|
951
|
+
"fieldName": "name",
|
|
952
|
+
"description": "The native element name."
|
|
589
953
|
},
|
|
590
954
|
{
|
|
591
955
|
"name": "border-radius",
|
|
@@ -624,6 +988,11 @@
|
|
|
624
988
|
},
|
|
625
989
|
{
|
|
626
990
|
"name": "width",
|
|
991
|
+
"type": {
|
|
992
|
+
"text": "string | null"
|
|
993
|
+
},
|
|
994
|
+
"fieldName": "width",
|
|
995
|
+
"description": "The Lavender width size token.",
|
|
627
996
|
"inheritedFrom": {
|
|
628
997
|
"name": "AbstractImage",
|
|
629
998
|
"module": "src/AbstractImage.ts"
|
|
@@ -670,6 +1039,18 @@
|
|
|
670
1039
|
"name": "AbstractImage",
|
|
671
1040
|
"module": "src/AbstractImage.ts"
|
|
672
1041
|
}
|
|
1042
|
+
},
|
|
1043
|
+
{
|
|
1044
|
+
"name": "height",
|
|
1045
|
+
"type": {
|
|
1046
|
+
"text": "string | null"
|
|
1047
|
+
},
|
|
1048
|
+
"fieldName": "height",
|
|
1049
|
+
"description": "The Lavender height size token.",
|
|
1050
|
+
"inheritedFrom": {
|
|
1051
|
+
"name": "AbstractImage",
|
|
1052
|
+
"module": "src/AbstractImage.ts"
|
|
1053
|
+
}
|
|
673
1054
|
}
|
|
674
1055
|
],
|
|
675
1056
|
"superclass": {
|
|
@@ -876,12 +1257,12 @@
|
|
|
876
1257
|
},
|
|
877
1258
|
{
|
|
878
1259
|
"kind": "field",
|
|
879
|
-
"name": "
|
|
1260
|
+
"name": "nativeAttributes",
|
|
880
1261
|
"type": {
|
|
881
|
-
"text": "
|
|
1262
|
+
"text": "object"
|
|
882
1263
|
},
|
|
883
1264
|
"static": true,
|
|
884
|
-
"default": "
|
|
1265
|
+
"default": "{}",
|
|
885
1266
|
"inheritedFrom": {
|
|
886
1267
|
"name": "AbstractImage",
|
|
887
1268
|
"module": "src/AbstractImage.ts"
|
|
@@ -1042,6 +1423,10 @@
|
|
|
1042
1423
|
{
|
|
1043
1424
|
"kind": "field",
|
|
1044
1425
|
"name": "width",
|
|
1426
|
+
"type": {
|
|
1427
|
+
"text": "string | null"
|
|
1428
|
+
},
|
|
1429
|
+
"attribute": "width",
|
|
1045
1430
|
"inheritedFrom": {
|
|
1046
1431
|
"name": "AbstractImage",
|
|
1047
1432
|
"module": "src/AbstractImage.ts"
|
|
@@ -1090,6 +1475,10 @@
|
|
|
1090
1475
|
{
|
|
1091
1476
|
"kind": "field",
|
|
1092
1477
|
"name": "height",
|
|
1478
|
+
"type": {
|
|
1479
|
+
"text": "string | null"
|
|
1480
|
+
},
|
|
1481
|
+
"attribute": "height",
|
|
1093
1482
|
"inheritedFrom": {
|
|
1094
1483
|
"name": "AbstractImage",
|
|
1095
1484
|
"module": "src/AbstractImage.ts"
|
|
@@ -1183,6 +1572,11 @@
|
|
|
1183
1572
|
},
|
|
1184
1573
|
{
|
|
1185
1574
|
"name": "width",
|
|
1575
|
+
"type": {
|
|
1576
|
+
"text": "string | null"
|
|
1577
|
+
},
|
|
1578
|
+
"fieldName": "width",
|
|
1579
|
+
"description": "The Lavender width size token.",
|
|
1186
1580
|
"inheritedFrom": {
|
|
1187
1581
|
"name": "AbstractImage",
|
|
1188
1582
|
"module": "src/AbstractImage.ts"
|
|
@@ -1229,6 +1623,18 @@
|
|
|
1229
1623
|
"name": "AbstractImage",
|
|
1230
1624
|
"module": "src/AbstractImage.ts"
|
|
1231
1625
|
}
|
|
1626
|
+
},
|
|
1627
|
+
{
|
|
1628
|
+
"name": "height",
|
|
1629
|
+
"type": {
|
|
1630
|
+
"text": "string | null"
|
|
1631
|
+
},
|
|
1632
|
+
"fieldName": "height",
|
|
1633
|
+
"description": "The Lavender height size token.",
|
|
1634
|
+
"inheritedFrom": {
|
|
1635
|
+
"name": "AbstractImage",
|
|
1636
|
+
"module": "src/AbstractImage.ts"
|
|
1637
|
+
}
|
|
1232
1638
|
}
|
|
1233
1639
|
],
|
|
1234
1640
|
"superclass": {
|
package/dist/index.es.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { PxElement as e, borderRadiusValues as t, cssTokenBreakpoints as n, log as r,
|
|
1
|
+
import { PxElement as e, borderRadiusValues as t, cssTokenBreakpoints as n, log as r, nativeImageMethods as i, nativeImageProperties as a, noBorderRadiusValues as o } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/image.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var s = ":host{line-height:0;display:inline-block}:host([cover]) img{object-fit:cover;width:100%;height:100%}picture{display:inline-block}img{width:var(--img-width--mobile,auto);border-style:none;max-width:100%;display:inline-block}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2)grayscale()}@media screen and (width<=47.938rem){.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media screen and (width>=48rem) and (width<=64rem){img{width:var(--img-width--tablet,auto)}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media screen and (width>=64.0625rem){img{width:var(--img-width--laptop,auto)}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media screen and (width>=90.0625rem){img{width:var(--img-width--desktop,auto)}}", c = new CSSStyleSheet();
|
|
4
|
+
c.replaceSync(s);
|
|
5
|
+
var l = [
|
|
6
6
|
"",
|
|
7
7
|
"xs",
|
|
8
8
|
"s",
|
|
9
9
|
"m",
|
|
10
10
|
"l",
|
|
11
11
|
"xl"
|
|
12
|
-
],
|
|
12
|
+
], u = n("height", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) img`, [
|
|
13
13
|
"",
|
|
14
14
|
"xs",
|
|
15
15
|
"s",
|
|
16
16
|
"m",
|
|
17
17
|
"l",
|
|
18
18
|
"xl"
|
|
19
|
-
], "px-image", "--img-height"),
|
|
19
|
+
], "px-image", "--img-height"), d = class extends e {
|
|
20
20
|
static {
|
|
21
|
-
this.
|
|
21
|
+
this.nativeAttributes = {};
|
|
22
22
|
}
|
|
23
23
|
constructor() {
|
|
24
|
-
super(
|
|
24
|
+
super(c, u);
|
|
25
25
|
}
|
|
26
26
|
static get observedAttributes() {
|
|
27
27
|
return [
|
|
@@ -49,14 +49,14 @@ var s = [
|
|
|
49
49
|
case "no-border-radius--mobile":
|
|
50
50
|
case "no-border-radius--tablet":
|
|
51
51
|
case "no-border-radius--laptop":
|
|
52
|
-
this.updateAttribute(e, n, r,
|
|
52
|
+
this.updateAttribute(e, n, r, o);
|
|
53
53
|
break;
|
|
54
54
|
case "width":
|
|
55
55
|
case "width--mobile":
|
|
56
56
|
case "width--tablet":
|
|
57
57
|
case "width--laptop":
|
|
58
58
|
case "width--desktop":
|
|
59
|
-
this.updateWidth(e, n, r,
|
|
59
|
+
this.updateWidth(e, n, r, l);
|
|
60
60
|
break;
|
|
61
61
|
case "disabled":
|
|
62
62
|
r === null ? this.$el.removeAttribute("aria-disabled") : this.$el.setAttribute("aria-disabled", "true");
|
|
@@ -205,20 +205,50 @@ var s = [
|
|
|
205
205
|
set cover(e) {
|
|
206
206
|
this._updateBooleanAttribute("cover", e);
|
|
207
207
|
}
|
|
208
|
-
},
|
|
208
|
+
}, f = class e extends d {
|
|
209
209
|
static {
|
|
210
210
|
this.nativeName = "img";
|
|
211
211
|
}
|
|
212
|
+
static {
|
|
213
|
+
this.nativeProperties = a;
|
|
214
|
+
}
|
|
215
|
+
static {
|
|
216
|
+
this.nativeMethods = i;
|
|
217
|
+
}
|
|
218
|
+
static {
|
|
219
|
+
this.nativeAttributes = {
|
|
220
|
+
alt: ["alt"],
|
|
221
|
+
src: ["src"],
|
|
222
|
+
srcset: ["srcset"],
|
|
223
|
+
sizes: ["sizes"],
|
|
224
|
+
crossorigin: ["crossOrigin"],
|
|
225
|
+
usemap: ["useMap"],
|
|
226
|
+
ismap: ["isMap"],
|
|
227
|
+
referrerpolicy: ["referrerPolicy"],
|
|
228
|
+
decoding: ["decoding"],
|
|
229
|
+
loading: ["loading"],
|
|
230
|
+
fetchpriority: ["fetchPriority"],
|
|
231
|
+
title: ["title"],
|
|
232
|
+
height: [],
|
|
233
|
+
width: [],
|
|
234
|
+
border: ["border"],
|
|
235
|
+
hspace: ["hspace"],
|
|
236
|
+
vspace: ["vspace"],
|
|
237
|
+
longdesc: ["longDesc"],
|
|
238
|
+
lowsrc: ["lowsrc"],
|
|
239
|
+
name: ["name"]
|
|
240
|
+
};
|
|
241
|
+
}
|
|
212
242
|
constructor() {
|
|
213
243
|
super();
|
|
214
244
|
let t = document.createElement(e.nativeName);
|
|
215
245
|
this.shadowRoot.appendChild(t);
|
|
216
246
|
}
|
|
217
247
|
};
|
|
218
|
-
customElements.get("px-img") || customElements.define("px-img",
|
|
248
|
+
customElements.get("px-img") || customElements.define("px-img", f);
|
|
219
249
|
//#endregion
|
|
220
250
|
//#region src/Picture.ts
|
|
221
|
-
var
|
|
251
|
+
var p = class e extends d {
|
|
222
252
|
static {
|
|
223
253
|
this.nativeName = "picture";
|
|
224
254
|
}
|
|
@@ -338,6 +368,6 @@ var d = class e extends l {
|
|
|
338
368
|
this.$imgEl && this.src && (this.$imgEl.alt = e || "");
|
|
339
369
|
}
|
|
340
370
|
};
|
|
341
|
-
customElements.get("px-picture") || customElements.define("px-picture",
|
|
371
|
+
customElements.get("px-picture") || customElements.define("px-picture", p);
|
|
342
372
|
//#endregion
|
|
343
|
-
export {
|
|
373
|
+
export { f as Image, p as Picture };
|
|
@@ -6,15 +6,94 @@
|
|
|
6
6
|
"name": "px-img",
|
|
7
7
|
"description": "An image component.\n---\n",
|
|
8
8
|
"attributes": [
|
|
9
|
-
{ "name": "src", "description": "The URL of the image.", "values": [] },
|
|
10
9
|
{
|
|
11
10
|
"name": "alt",
|
|
12
11
|
"description": "The alternative text for the image.",
|
|
13
12
|
"values": []
|
|
14
13
|
},
|
|
14
|
+
{ "name": "src", "description": "The URL of the image.", "values": [] },
|
|
15
|
+
{
|
|
16
|
+
"name": "srcset",
|
|
17
|
+
"description": "The responsive image candidates.",
|
|
18
|
+
"values": []
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "sizes",
|
|
22
|
+
"description": "The responsive image source sizes.",
|
|
23
|
+
"values": []
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "crossorigin",
|
|
27
|
+
"description": "The cross-origin image request mode.",
|
|
28
|
+
"values": []
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "usemap",
|
|
32
|
+
"description": "The associated image-map reference.",
|
|
33
|
+
"values": []
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "ismap",
|
|
37
|
+
"description": "Whether the image is a server-side image map.",
|
|
38
|
+
"values": []
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "referrerpolicy",
|
|
42
|
+
"description": "The referrer policy.",
|
|
43
|
+
"values": []
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "decoding",
|
|
47
|
+
"description": "The image decoding hint.",
|
|
48
|
+
"values": [
|
|
49
|
+
{ "name": "async" },
|
|
50
|
+
{ "name": "sync" },
|
|
51
|
+
{ "name": "auto" }
|
|
52
|
+
]
|
|
53
|
+
},
|
|
15
54
|
{
|
|
16
55
|
"name": "loading",
|
|
17
|
-
"description": "The loading strategy for the image
|
|
56
|
+
"description": "The loading strategy for the image.",
|
|
57
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "fetchpriority",
|
|
61
|
+
"description": "The resource fetch priority.",
|
|
62
|
+
"values": [{ "name": "auto" }, { "name": "high" }, { "name": "low" }]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "title",
|
|
66
|
+
"description": "The native element tooltip.",
|
|
67
|
+
"values": []
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "border",
|
|
71
|
+
"description": "The legacy image border width.",
|
|
72
|
+
"values": []
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "hspace",
|
|
76
|
+
"description": "The legacy horizontal image spacing.",
|
|
77
|
+
"values": []
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "vspace",
|
|
81
|
+
"description": "The legacy vertical image spacing.",
|
|
82
|
+
"values": []
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "longdesc",
|
|
86
|
+
"description": "The legacy long-description URL.",
|
|
87
|
+
"values": []
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "lowsrc",
|
|
91
|
+
"description": "The legacy low-resolution image URL.",
|
|
92
|
+
"values": []
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"name": "name",
|
|
96
|
+
"description": "The native element name.",
|
|
18
97
|
"values": []
|
|
19
98
|
},
|
|
20
99
|
{ "name": "border-radius", "values": [] },
|
|
@@ -22,13 +101,22 @@
|
|
|
22
101
|
{ "name": "no-border-radius--mobile", "values": [] },
|
|
23
102
|
{ "name": "no-border-radius--tablet", "values": [] },
|
|
24
103
|
{ "name": "no-border-radius--laptop", "values": [] },
|
|
25
|
-
{
|
|
104
|
+
{
|
|
105
|
+
"name": "width",
|
|
106
|
+
"description": "The Lavender width size token.",
|
|
107
|
+
"values": []
|
|
108
|
+
},
|
|
26
109
|
{ "name": "width--mobile", "values": [] },
|
|
27
110
|
{ "name": "width--tablet", "values": [] },
|
|
28
111
|
{ "name": "width--laptop", "values": [] },
|
|
29
112
|
{ "name": "width--desktop", "values": [] },
|
|
30
113
|
{ "name": "cover", "values": [] },
|
|
31
|
-
{ "name": "disabled", "values": [] }
|
|
114
|
+
{ "name": "disabled", "values": [] },
|
|
115
|
+
{
|
|
116
|
+
"name": "height",
|
|
117
|
+
"description": "The Lavender height size token.",
|
|
118
|
+
"values": []
|
|
119
|
+
}
|
|
32
120
|
],
|
|
33
121
|
"references": []
|
|
34
122
|
},
|
|
@@ -44,13 +132,22 @@
|
|
|
44
132
|
{ "name": "no-border-radius--mobile", "values": [] },
|
|
45
133
|
{ "name": "no-border-radius--tablet", "values": [] },
|
|
46
134
|
{ "name": "no-border-radius--laptop", "values": [] },
|
|
47
|
-
{
|
|
135
|
+
{
|
|
136
|
+
"name": "width",
|
|
137
|
+
"description": "The Lavender width size token.",
|
|
138
|
+
"values": []
|
|
139
|
+
},
|
|
48
140
|
{ "name": "width--mobile", "values": [] },
|
|
49
141
|
{ "name": "width--tablet", "values": [] },
|
|
50
142
|
{ "name": "width--laptop", "values": [] },
|
|
51
143
|
{ "name": "width--desktop", "values": [] },
|
|
52
144
|
{ "name": "cover", "values": [] },
|
|
53
|
-
{ "name": "disabled", "values": [] }
|
|
145
|
+
{ "name": "disabled", "values": [] },
|
|
146
|
+
{
|
|
147
|
+
"name": "height",
|
|
148
|
+
"description": "The Lavender height size token.",
|
|
149
|
+
"values": []
|
|
150
|
+
}
|
|
54
151
|
],
|
|
55
152
|
"references": []
|
|
56
153
|
}
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-image",
|
|
4
|
-
"version": "1.4.20-alpha.
|
|
4
|
+
"version": "1.4.20-alpha.6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -11,19 +11,94 @@
|
|
|
11
11
|
"description": "An image component.\n\n---\n",
|
|
12
12
|
"doc-url": "",
|
|
13
13
|
"attributes": [
|
|
14
|
+
{
|
|
15
|
+
"name": "alt",
|
|
16
|
+
"description": "The alternative text for the image.",
|
|
17
|
+
"value": { "type": "string" }
|
|
18
|
+
},
|
|
14
19
|
{
|
|
15
20
|
"name": "src",
|
|
16
21
|
"description": "The URL of the image.",
|
|
17
22
|
"value": { "type": "string" }
|
|
18
23
|
},
|
|
19
24
|
{
|
|
20
|
-
"name": "
|
|
21
|
-
"description": "The
|
|
25
|
+
"name": "srcset",
|
|
26
|
+
"description": "The responsive image candidates.",
|
|
27
|
+
"value": { "type": "string" }
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "sizes",
|
|
31
|
+
"description": "The responsive image source sizes.",
|
|
32
|
+
"value": { "type": "string" }
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "crossorigin",
|
|
36
|
+
"description": "The cross-origin image request mode.",
|
|
37
|
+
"value": { "type": "string | null" }
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "usemap",
|
|
41
|
+
"description": "The associated image-map reference.",
|
|
42
|
+
"value": { "type": "string" }
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "ismap",
|
|
46
|
+
"description": "Whether the image is a server-side image map.",
|
|
47
|
+
"value": { "type": "boolean" }
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"name": "referrerpolicy",
|
|
51
|
+
"description": "The referrer policy.",
|
|
22
52
|
"value": { "type": "string" }
|
|
23
53
|
},
|
|
54
|
+
{
|
|
55
|
+
"name": "decoding",
|
|
56
|
+
"description": "The image decoding hint.",
|
|
57
|
+
"value": { "type": "'async' | 'sync' | 'auto'" }
|
|
58
|
+
},
|
|
24
59
|
{
|
|
25
60
|
"name": "loading",
|
|
26
|
-
"description": "The loading strategy for the image
|
|
61
|
+
"description": "The loading strategy for the image.",
|
|
62
|
+
"value": { "type": "'eager' | 'lazy'" }
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "fetchpriority",
|
|
66
|
+
"description": "The resource fetch priority.",
|
|
67
|
+
"value": { "type": "'auto' | 'high' | 'low'" }
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "title",
|
|
71
|
+
"description": "The native element tooltip.",
|
|
72
|
+
"value": { "type": "string" }
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "border",
|
|
76
|
+
"description": "The legacy image border width.",
|
|
77
|
+
"value": { "type": "string" }
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "hspace",
|
|
81
|
+
"description": "The legacy horizontal image spacing.",
|
|
82
|
+
"value": { "type": "number" }
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "vspace",
|
|
86
|
+
"description": "The legacy vertical image spacing.",
|
|
87
|
+
"value": { "type": "number" }
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "longdesc",
|
|
91
|
+
"description": "The legacy long-description URL.",
|
|
92
|
+
"value": { "type": "string" }
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"name": "lowsrc",
|
|
96
|
+
"description": "The legacy low-resolution image URL.",
|
|
97
|
+
"value": { "type": "string" }
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "name",
|
|
101
|
+
"description": "The native element name.",
|
|
27
102
|
"value": { "type": "string" }
|
|
28
103
|
},
|
|
29
104
|
{ "name": "border-radius", "value": { "type": "string" } },
|
|
@@ -40,29 +115,63 @@
|
|
|
40
115
|
"name": "no-border-radius--laptop",
|
|
41
116
|
"value": { "type": "string" }
|
|
42
117
|
},
|
|
43
|
-
{
|
|
118
|
+
{
|
|
119
|
+
"name": "width",
|
|
120
|
+
"description": "The Lavender width size token.",
|
|
121
|
+
"value": { "type": "string | null" }
|
|
122
|
+
},
|
|
44
123
|
{ "name": "width--mobile", "value": { "type": "string" } },
|
|
45
124
|
{ "name": "width--tablet", "value": { "type": "string" } },
|
|
46
125
|
{ "name": "width--laptop", "value": { "type": "string" } },
|
|
47
126
|
{ "name": "width--desktop", "value": { "type": "string" } },
|
|
48
127
|
{ "name": "cover", "value": { "type": "string" } },
|
|
49
|
-
{ "name": "disabled", "value": { "type": "string" } }
|
|
128
|
+
{ "name": "disabled", "value": { "type": "string" } },
|
|
129
|
+
{
|
|
130
|
+
"name": "height",
|
|
131
|
+
"description": "The Lavender height size token.",
|
|
132
|
+
"value": { "type": "string | null" }
|
|
133
|
+
}
|
|
50
134
|
],
|
|
51
135
|
"events": [],
|
|
52
136
|
"js": {
|
|
53
137
|
"properties": [
|
|
138
|
+
{ "name": "alt", "type": "string" },
|
|
139
|
+
{ "name": "src", "type": "string" },
|
|
140
|
+
{ "name": "srcset", "type": "string" },
|
|
141
|
+
{ "name": "sizes", "type": "string" },
|
|
142
|
+
{ "name": "crossOrigin", "type": "string | null" },
|
|
143
|
+
{ "name": "useMap", "type": "string" },
|
|
144
|
+
{ "name": "isMap", "type": "boolean" },
|
|
145
|
+
{ "name": "referrerPolicy", "type": "string" },
|
|
146
|
+
{ "name": "decoding", "type": "'async' | 'sync' | 'auto'" },
|
|
147
|
+
{ "name": "loading", "type": "'eager' | 'lazy'" },
|
|
148
|
+
{ "name": "fetchPriority", "type": "'auto' | 'high' | 'low'" },
|
|
149
|
+
{ "name": "title", "type": "string" },
|
|
150
|
+
{ "name": "border", "type": "string" },
|
|
151
|
+
{ "name": "hspace", "type": "number" },
|
|
152
|
+
{ "name": "vspace", "type": "number" },
|
|
153
|
+
{ "name": "longDesc", "type": "string" },
|
|
154
|
+
{ "name": "lowsrc", "type": "string" },
|
|
155
|
+
{ "name": "name", "type": "string" },
|
|
156
|
+
{ "name": "currentSrc", "type": "string" },
|
|
157
|
+
{ "name": "naturalWidth", "type": "number" },
|
|
158
|
+
{ "name": "naturalHeight", "type": "number" },
|
|
159
|
+
{ "name": "complete", "type": "boolean" },
|
|
160
|
+
{ "name": "x", "type": "number" },
|
|
161
|
+
{ "name": "y", "type": "number" },
|
|
162
|
+
{ "name": "decode", "type": "HTMLImageElement['decode']" },
|
|
54
163
|
{ "name": "borderRadius" },
|
|
55
164
|
{ "name": "noBorderRadius" },
|
|
56
165
|
{ "name": "noBorderRadiusMobile" },
|
|
57
166
|
{ "name": "noBorderRadiusTablet" },
|
|
58
167
|
{ "name": "noBorderRadiusLaptop" },
|
|
59
|
-
{ "name": "width" },
|
|
168
|
+
{ "name": "width", "type": "string | null" },
|
|
60
169
|
{ "name": "widthMobile" },
|
|
61
170
|
{ "name": "widthTablet" },
|
|
62
171
|
{ "name": "widthLaptop" },
|
|
63
172
|
{ "name": "widthDesktop" },
|
|
64
173
|
{ "name": "disabled" },
|
|
65
|
-
{ "name": "height" },
|
|
174
|
+
{ "name": "height", "type": "string | null" },
|
|
66
175
|
{ "name": "heightMobile" },
|
|
67
176
|
{ "name": "heightTablet" },
|
|
68
177
|
{ "name": "heightLaptop" },
|
|
@@ -94,13 +203,22 @@
|
|
|
94
203
|
"name": "no-border-radius--laptop",
|
|
95
204
|
"value": { "type": "string" }
|
|
96
205
|
},
|
|
97
|
-
{
|
|
206
|
+
{
|
|
207
|
+
"name": "width",
|
|
208
|
+
"description": "The Lavender width size token.",
|
|
209
|
+
"value": { "type": "string | null" }
|
|
210
|
+
},
|
|
98
211
|
{ "name": "width--mobile", "value": { "type": "string" } },
|
|
99
212
|
{ "name": "width--tablet", "value": { "type": "string" } },
|
|
100
213
|
{ "name": "width--laptop", "value": { "type": "string" } },
|
|
101
214
|
{ "name": "width--desktop", "value": { "type": "string" } },
|
|
102
215
|
{ "name": "cover", "value": { "type": "string" } },
|
|
103
|
-
{ "name": "disabled", "value": { "type": "string" } }
|
|
216
|
+
{ "name": "disabled", "value": { "type": "string" } },
|
|
217
|
+
{
|
|
218
|
+
"name": "height",
|
|
219
|
+
"description": "The Lavender height size token.",
|
|
220
|
+
"value": { "type": "string | null" }
|
|
221
|
+
}
|
|
104
222
|
],
|
|
105
223
|
"events": [],
|
|
106
224
|
"js": {
|
|
@@ -114,13 +232,13 @@
|
|
|
114
232
|
{ "name": "noBorderRadiusMobile" },
|
|
115
233
|
{ "name": "noBorderRadiusTablet" },
|
|
116
234
|
{ "name": "noBorderRadiusLaptop" },
|
|
117
|
-
{ "name": "width" },
|
|
235
|
+
{ "name": "width", "type": "string | null" },
|
|
118
236
|
{ "name": "widthMobile" },
|
|
119
237
|
{ "name": "widthTablet" },
|
|
120
238
|
{ "name": "widthLaptop" },
|
|
121
239
|
{ "name": "widthDesktop" },
|
|
122
240
|
{ "name": "disabled" },
|
|
123
|
-
{ "name": "height" },
|
|
241
|
+
{ "name": "height", "type": "string | null" },
|
|
124
242
|
{ "name": "heightMobile" },
|
|
125
243
|
{ "name": "heightTablet" },
|
|
126
244
|
{ "name": "heightLaptop" },
|