@emuanalytics/flow-rdf-ui 4.1.0-preview.12 → 4.1.0-preview.13

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.
@@ -265,191 +265,6 @@
265
265
  }
266
266
  ]
267
267
  },
268
- {
269
- "kind": "javascript-module",
270
- "path": "components/avatar/avatar.component.js",
271
- "declarations": [
272
- {
273
- "kind": "class",
274
- "description": "",
275
- "name": "FlowUiAvatar",
276
- "cssProperties": [
277
- {
278
- "description": "The size of the avatar.",
279
- "name": "--size"
280
- }
281
- ],
282
- "cssParts": [
283
- {
284
- "description": "The component's base wrapper.",
285
- "name": "base"
286
- },
287
- {
288
- "description": "The container that wraps the avatar's icon.",
289
- "name": "icon"
290
- },
291
- {
292
- "description": "The container that wraps the avatar's initials.",
293
- "name": "initials"
294
- },
295
- {
296
- "description": "The avatar image. Only shown when the `image` attribute is set.",
297
- "name": "image"
298
- }
299
- ],
300
- "slots": [
301
- {
302
- "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
303
- "name": "icon"
304
- }
305
- ],
306
- "members": [
307
- {
308
- "kind": "field",
309
- "name": "hasError",
310
- "type": {
311
- "text": "boolean"
312
- },
313
- "privacy": "private",
314
- "default": "false"
315
- },
316
- {
317
- "kind": "field",
318
- "name": "image",
319
- "type": {
320
- "text": "string"
321
- },
322
- "default": "''",
323
- "description": "The image source to use for the avatar.",
324
- "attribute": "image"
325
- },
326
- {
327
- "kind": "field",
328
- "name": "label",
329
- "type": {
330
- "text": "string"
331
- },
332
- "default": "''",
333
- "description": "A label to use to describe the avatar to assistive devices.",
334
- "attribute": "label"
335
- },
336
- {
337
- "kind": "field",
338
- "name": "initials",
339
- "type": {
340
- "text": "string"
341
- },
342
- "default": "''",
343
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
344
- "attribute": "initials"
345
- },
346
- {
347
- "kind": "field",
348
- "name": "loading",
349
- "type": {
350
- "text": "'eager' | 'lazy'"
351
- },
352
- "default": "'eager'",
353
- "description": "Indicates how the browser should load the image.",
354
- "attribute": "loading"
355
- },
356
- {
357
- "kind": "field",
358
- "name": "shape",
359
- "type": {
360
- "text": "'circle' | 'square' | 'rounded'"
361
- },
362
- "default": "'circle'",
363
- "description": "The shape of the avatar.",
364
- "attribute": "shape",
365
- "reflects": true
366
- }
367
- ],
368
- "attributes": [
369
- {
370
- "name": "image",
371
- "type": {
372
- "text": "string"
373
- },
374
- "default": "''",
375
- "description": "The image source to use for the avatar.",
376
- "fieldName": "image"
377
- },
378
- {
379
- "name": "label",
380
- "type": {
381
- "text": "string"
382
- },
383
- "default": "''",
384
- "description": "A label to use to describe the avatar to assistive devices.",
385
- "fieldName": "label"
386
- },
387
- {
388
- "name": "initials",
389
- "type": {
390
- "text": "string"
391
- },
392
- "default": "''",
393
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
394
- "fieldName": "initials"
395
- },
396
- {
397
- "name": "loading",
398
- "type": {
399
- "text": "'eager' | 'lazy'"
400
- },
401
- "default": "'eager'",
402
- "description": "Indicates how the browser should load the image.",
403
- "fieldName": "loading"
404
- },
405
- {
406
- "name": "shape",
407
- "type": {
408
- "text": "'circle' | 'square' | 'rounded'"
409
- },
410
- "default": "'circle'",
411
- "description": "The shape of the avatar.",
412
- "fieldName": "shape"
413
- }
414
- ],
415
- "superclass": {
416
- "name": "FlowRdfElement",
417
- "module": "/src/internal/flow-ui-rdf-element"
418
- },
419
- "tagName": "flow-ui-avatar",
420
- "summary": "Avatars are used to represent a person or object.",
421
- "dependencies": [
422
- "flow-ui-icon"
423
- ],
424
- "customElement": true
425
- }
426
- ],
427
- "exports": [
428
- {
429
- "kind": "js",
430
- "name": "default",
431
- "declaration": {
432
- "name": "FlowUiAvatar",
433
- "module": "components/avatar/avatar.component.js"
434
- }
435
- }
436
- ]
437
- },
438
- {
439
- "kind": "javascript-module",
440
- "path": "components/avatar/avatar.js",
441
- "declarations": [],
442
- "exports": [
443
- {
444
- "kind": "js",
445
- "name": "default",
446
- "declaration": {
447
- "name": "FlowUiAvatar",
448
- "module": "components/avatar/avatar.js"
449
- }
450
- }
451
- ]
452
- },
453
268
  {
454
269
  "kind": "javascript-module",
455
270
  "path": "components/animation/animation.component.js",
@@ -1316,12 +1131,12 @@
1316
1131
  },
1317
1132
  {
1318
1133
  "kind": "javascript-module",
1319
- "path": "components/badge/badge.component.js",
1134
+ "path": "components/breadcrumb/breadcrumb.component.js",
1320
1135
  "declarations": [
1321
1136
  {
1322
1137
  "kind": "class",
1323
1138
  "description": "",
1324
- "name": "FlowUiBadge",
1139
+ "name": "FlowUiBreadcrumb",
1325
1140
  "cssParts": [
1326
1141
  {
1327
1142
  "description": "The component's base wrapper.",
@@ -1330,80 +1145,84 @@
1330
1145
  ],
1331
1146
  "slots": [
1332
1147
  {
1333
- "description": "The badge's content.",
1148
+ "description": "One or more breadcrumb items to display.",
1334
1149
  "name": ""
1150
+ },
1151
+ {
1152
+ "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
1153
+ "name": "separator"
1335
1154
  }
1336
1155
  ],
1337
1156
  "members": [
1338
1157
  {
1339
1158
  "kind": "field",
1340
- "name": "variant",
1159
+ "name": "localize",
1160
+ "privacy": "private",
1161
+ "readonly": true,
1162
+ "default": "new LocalizeController(this)"
1163
+ },
1164
+ {
1165
+ "kind": "field",
1166
+ "name": "separatorDir",
1167
+ "privacy": "private"
1168
+ },
1169
+ {
1170
+ "kind": "field",
1171
+ "name": "defaultSlot",
1341
1172
  "type": {
1342
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1173
+ "text": "HTMLSlotElement"
1343
1174
  },
1344
- "default": "'primary'",
1345
- "description": "The badge's theme variant.",
1346
- "attribute": "variant",
1347
- "reflects": true
1175
+ "privacy": "private"
1348
1176
  },
1349
1177
  {
1350
1178
  "kind": "field",
1351
- "name": "pill",
1179
+ "name": "separatorSlot",
1352
1180
  "type": {
1353
- "text": "boolean"
1181
+ "text": "HTMLSlotElement"
1354
1182
  },
1355
- "default": "false",
1356
- "description": "Draws a pill-style badge with rounded edges.",
1357
- "attribute": "pill",
1358
- "reflects": true
1183
+ "privacy": "private"
1359
1184
  },
1360
1185
  {
1361
1186
  "kind": "field",
1362
- "name": "pulse",
1187
+ "name": "label",
1363
1188
  "type": {
1364
- "text": "boolean"
1189
+ "text": "string"
1365
1190
  },
1366
- "default": "false",
1367
- "description": "Makes the badge pulsate to draw attention.",
1368
- "attribute": "pulse",
1369
- "reflects": true
1191
+ "default": "''",
1192
+ "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
1193
+ "attribute": "label"
1194
+ },
1195
+ {
1196
+ "kind": "method",
1197
+ "name": "getSeparator",
1198
+ "privacy": "private"
1199
+ },
1200
+ {
1201
+ "kind": "method",
1202
+ "name": "handleSlotChange",
1203
+ "privacy": "private"
1370
1204
  }
1371
1205
  ],
1372
1206
  "attributes": [
1373
1207
  {
1374
- "name": "variant",
1208
+ "name": "label",
1375
1209
  "type": {
1376
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1210
+ "text": "string"
1377
1211
  },
1378
- "default": "'primary'",
1379
- "description": "The badge's theme variant.",
1380
- "fieldName": "variant"
1381
- },
1382
- {
1383
- "name": "pill",
1384
- "type": {
1385
- "text": "boolean"
1386
- },
1387
- "default": "false",
1388
- "description": "Draws a pill-style badge with rounded edges.",
1389
- "fieldName": "pill"
1390
- },
1391
- {
1392
- "name": "pulse",
1393
- "type": {
1394
- "text": "boolean"
1395
- },
1396
- "default": "false",
1397
- "description": "Makes the badge pulsate to draw attention.",
1398
- "fieldName": "pulse"
1212
+ "default": "''",
1213
+ "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
1214
+ "fieldName": "label"
1399
1215
  }
1400
1216
  ],
1401
1217
  "superclass": {
1402
1218
  "name": "FlowRdfElement",
1403
1219
  "module": "/src/internal/flow-ui-rdf-element"
1404
1220
  },
1405
- "tagName": "flow-ui-badge",
1406
- "summary": "Badges are used to draw attention and display statuses or counts.",
1221
+ "tagName": "flow-ui-breadcrumb",
1222
+ "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
1223
+ "dependencies": [
1224
+ "flow-ui-icon"
1225
+ ],
1407
1226
  "customElement": true
1408
1227
  }
1409
1228
  ],
@@ -1412,145 +1231,183 @@
1412
1231
  "kind": "js",
1413
1232
  "name": "default",
1414
1233
  "declaration": {
1415
- "name": "FlowUiBadge",
1416
- "module": "components/badge/badge.component.js"
1234
+ "name": "FlowUiBreadcrumb",
1235
+ "module": "components/breadcrumb/breadcrumb.component.js"
1417
1236
  }
1418
1237
  }
1419
1238
  ]
1420
1239
  },
1421
1240
  {
1422
1241
  "kind": "javascript-module",
1423
- "path": "components/badge/badge.js",
1242
+ "path": "components/breadcrumb/breadcrumb.js",
1424
1243
  "declarations": [],
1425
1244
  "exports": [
1426
1245
  {
1427
1246
  "kind": "js",
1428
1247
  "name": "default",
1429
1248
  "declaration": {
1430
- "name": "FlowUiBadge",
1431
- "module": "components/badge/badge.js"
1249
+ "name": "FlowUiBreadcrumb",
1250
+ "module": "components/breadcrumb/breadcrumb.js"
1432
1251
  }
1433
1252
  }
1434
1253
  ]
1435
1254
  },
1436
1255
  {
1437
1256
  "kind": "javascript-module",
1438
- "path": "components/breadcrumb-item/breadcrumb-item.component.js",
1257
+ "path": "components/avatar/avatar.component.js",
1439
1258
  "declarations": [
1440
1259
  {
1441
1260
  "kind": "class",
1442
1261
  "description": "",
1443
- "name": "FlowUiBreadcrumbItem",
1262
+ "name": "FlowUiAvatar",
1263
+ "cssProperties": [
1264
+ {
1265
+ "description": "The size of the avatar.",
1266
+ "name": "--size"
1267
+ }
1268
+ ],
1444
1269
  "cssParts": [
1445
1270
  {
1446
1271
  "description": "The component's base wrapper.",
1447
1272
  "name": "base"
1448
1273
  },
1449
1274
  {
1450
- "description": "The breadcrumb item's label.",
1451
- "name": "label"
1452
- },
1453
- {
1454
- "description": "The container that wraps the prefix.",
1455
- "name": "prefix"
1275
+ "description": "The container that wraps the avatar's icon.",
1276
+ "name": "icon"
1456
1277
  },
1457
1278
  {
1458
- "description": "The container that wraps the suffix.",
1459
- "name": "suffix"
1279
+ "description": "The container that wraps the avatar's initials.",
1280
+ "name": "initials"
1460
1281
  },
1461
1282
  {
1462
- "description": "The container that wraps the separator.",
1463
- "name": "separator"
1283
+ "description": "The avatar image. Only shown when the `image` attribute is set.",
1284
+ "name": "image"
1464
1285
  }
1465
1286
  ],
1466
1287
  "slots": [
1467
1288
  {
1468
- "description": "The breadcrumb item's label.",
1469
- "name": ""
1470
- },
1471
- {
1472
- "description": "An optional prefix, usually an icon or icon button.",
1473
- "name": "prefix"
1474
- },
1475
- {
1476
- "description": "An optional suffix, usually an icon or icon button.",
1477
- "name": "suffix"
1478
- },
1479
- {
1480
- "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.",
1481
- "name": "separator"
1289
+ "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
1290
+ "name": "icon"
1482
1291
  }
1483
1292
  ],
1484
1293
  "members": [
1485
1294
  {
1486
1295
  "kind": "field",
1487
- "name": "hasSlotController",
1296
+ "name": "hasError",
1297
+ "type": {
1298
+ "text": "boolean"
1299
+ },
1488
1300
  "privacy": "private",
1489
- "readonly": true,
1490
- "default": "new HasSlotController(this, 'prefix', 'suffix')"
1301
+ "default": "false"
1491
1302
  },
1492
1303
  {
1493
1304
  "kind": "field",
1494
- "name": "href",
1305
+ "name": "image",
1495
1306
  "type": {
1496
- "text": "string | undefined"
1307
+ "text": "string"
1497
1308
  },
1498
- "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1499
- "attribute": "href"
1309
+ "default": "''",
1310
+ "description": "The image source to use for the avatar.",
1311
+ "attribute": "image"
1500
1312
  },
1501
1313
  {
1502
1314
  "kind": "field",
1503
- "name": "target",
1315
+ "name": "label",
1504
1316
  "type": {
1505
- "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1317
+ "text": "string"
1506
1318
  },
1507
- "description": "Tells the browser where to open the link. Only used when `href` is set.",
1508
- "attribute": "target"
1319
+ "default": "''",
1320
+ "description": "A label to use to describe the avatar to assistive devices.",
1321
+ "attribute": "label"
1509
1322
  },
1510
1323
  {
1511
1324
  "kind": "field",
1512
- "name": "rel",
1325
+ "name": "initials",
1513
1326
  "type": {
1514
1327
  "text": "string"
1515
1328
  },
1516
- "default": "'noreferrer noopener'",
1517
- "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1518
- "attribute": "rel"
1329
+ "default": "''",
1330
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1331
+ "attribute": "initials"
1332
+ },
1333
+ {
1334
+ "kind": "field",
1335
+ "name": "loading",
1336
+ "type": {
1337
+ "text": "'eager' | 'lazy'"
1338
+ },
1339
+ "default": "'eager'",
1340
+ "description": "Indicates how the browser should load the image.",
1341
+ "attribute": "loading"
1342
+ },
1343
+ {
1344
+ "kind": "field",
1345
+ "name": "shape",
1346
+ "type": {
1347
+ "text": "'circle' | 'square' | 'rounded'"
1348
+ },
1349
+ "default": "'circle'",
1350
+ "description": "The shape of the avatar.",
1351
+ "attribute": "shape",
1352
+ "reflects": true
1519
1353
  }
1520
1354
  ],
1521
1355
  "attributes": [
1522
1356
  {
1523
- "name": "href",
1357
+ "name": "image",
1524
1358
  "type": {
1525
- "text": "string | undefined"
1359
+ "text": "string"
1526
1360
  },
1527
- "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1528
- "fieldName": "href"
1361
+ "default": "''",
1362
+ "description": "The image source to use for the avatar.",
1363
+ "fieldName": "image"
1529
1364
  },
1530
1365
  {
1531
- "name": "target",
1366
+ "name": "label",
1532
1367
  "type": {
1533
- "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1368
+ "text": "string"
1534
1369
  },
1535
- "description": "Tells the browser where to open the link. Only used when `href` is set.",
1536
- "fieldName": "target"
1370
+ "default": "''",
1371
+ "description": "A label to use to describe the avatar to assistive devices.",
1372
+ "fieldName": "label"
1537
1373
  },
1538
1374
  {
1539
- "name": "rel",
1375
+ "name": "initials",
1540
1376
  "type": {
1541
1377
  "text": "string"
1542
1378
  },
1543
- "default": "'noreferrer noopener'",
1544
- "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1545
- "fieldName": "rel"
1379
+ "default": "''",
1380
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1381
+ "fieldName": "initials"
1382
+ },
1383
+ {
1384
+ "name": "loading",
1385
+ "type": {
1386
+ "text": "'eager' | 'lazy'"
1387
+ },
1388
+ "default": "'eager'",
1389
+ "description": "Indicates how the browser should load the image.",
1390
+ "fieldName": "loading"
1391
+ },
1392
+ {
1393
+ "name": "shape",
1394
+ "type": {
1395
+ "text": "'circle' | 'square' | 'rounded'"
1396
+ },
1397
+ "default": "'circle'",
1398
+ "description": "The shape of the avatar.",
1399
+ "fieldName": "shape"
1546
1400
  }
1547
1401
  ],
1548
1402
  "superclass": {
1549
1403
  "name": "FlowRdfElement",
1550
1404
  "module": "/src/internal/flow-ui-rdf-element"
1551
1405
  },
1552
- "tagName": "flow-ui-breadcrumb-item",
1553
- "summary": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.",
1406
+ "tagName": "flow-ui-avatar",
1407
+ "summary": "Avatars are used to represent a person or object.",
1408
+ "dependencies": [
1409
+ "flow-ui-icon"
1410
+ ],
1554
1411
  "customElement": true
1555
1412
  }
1556
1413
  ],
@@ -1559,35 +1416,35 @@
1559
1416
  "kind": "js",
1560
1417
  "name": "default",
1561
1418
  "declaration": {
1562
- "name": "FlowUiBreadcrumbItem",
1563
- "module": "components/breadcrumb-item/breadcrumb-item.component.js"
1419
+ "name": "FlowUiAvatar",
1420
+ "module": "components/avatar/avatar.component.js"
1564
1421
  }
1565
1422
  }
1566
1423
  ]
1567
1424
  },
1568
1425
  {
1569
1426
  "kind": "javascript-module",
1570
- "path": "components/breadcrumb-item/breadcrumb-item.js",
1427
+ "path": "components/avatar/avatar.js",
1571
1428
  "declarations": [],
1572
1429
  "exports": [
1573
1430
  {
1574
1431
  "kind": "js",
1575
1432
  "name": "default",
1576
1433
  "declaration": {
1577
- "name": "FlowUiBreadcrumbItem",
1578
- "module": "components/breadcrumb-item/breadcrumb-item.js"
1434
+ "name": "FlowUiAvatar",
1435
+ "module": "components/avatar/avatar.js"
1579
1436
  }
1580
1437
  }
1581
1438
  ]
1582
1439
  },
1583
1440
  {
1584
1441
  "kind": "javascript-module",
1585
- "path": "components/breadcrumb/breadcrumb.component.js",
1442
+ "path": "components/badge/badge.component.js",
1586
1443
  "declarations": [
1587
1444
  {
1588
1445
  "kind": "class",
1589
1446
  "description": "",
1590
- "name": "FlowUiBreadcrumb",
1447
+ "name": "FlowUiBadge",
1591
1448
  "cssParts": [
1592
1449
  {
1593
1450
  "description": "The component's base wrapper.",
@@ -1596,84 +1453,227 @@
1596
1453
  ],
1597
1454
  "slots": [
1598
1455
  {
1599
- "description": "One or more breadcrumb items to display.",
1456
+ "description": "The badge's content.",
1600
1457
  "name": ""
1601
- },
1602
- {
1603
- "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
1604
- "name": "separator"
1605
1458
  }
1606
1459
  ],
1607
1460
  "members": [
1608
1461
  {
1609
1462
  "kind": "field",
1610
- "name": "localize",
1611
- "privacy": "private",
1612
- "readonly": true,
1613
- "default": "new LocalizeController(this)"
1614
- },
1615
- {
1616
- "kind": "field",
1617
- "name": "separatorDir",
1618
- "privacy": "private"
1619
- },
1620
- {
1621
- "kind": "field",
1622
- "name": "defaultSlot",
1463
+ "name": "variant",
1623
1464
  "type": {
1624
- "text": "HTMLSlotElement"
1465
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1625
1466
  },
1626
- "privacy": "private"
1467
+ "default": "'primary'",
1468
+ "description": "The badge's theme variant.",
1469
+ "attribute": "variant",
1470
+ "reflects": true
1627
1471
  },
1628
1472
  {
1629
1473
  "kind": "field",
1630
- "name": "separatorSlot",
1474
+ "name": "pill",
1631
1475
  "type": {
1632
- "text": "HTMLSlotElement"
1476
+ "text": "boolean"
1633
1477
  },
1634
- "privacy": "private"
1478
+ "default": "false",
1479
+ "description": "Draws a pill-style badge with rounded edges.",
1480
+ "attribute": "pill",
1481
+ "reflects": true
1635
1482
  },
1636
1483
  {
1637
1484
  "kind": "field",
1638
- "name": "label",
1485
+ "name": "pulse",
1639
1486
  "type": {
1640
- "text": "string"
1487
+ "text": "boolean"
1641
1488
  },
1642
- "default": "''",
1643
- "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
1644
- "attribute": "label"
1645
- },
1646
- {
1647
- "kind": "method",
1648
- "name": "getSeparator",
1649
- "privacy": "private"
1650
- },
1651
- {
1652
- "kind": "method",
1653
- "name": "handleSlotChange",
1654
- "privacy": "private"
1489
+ "default": "false",
1490
+ "description": "Makes the badge pulsate to draw attention.",
1491
+ "attribute": "pulse",
1492
+ "reflects": true
1655
1493
  }
1656
1494
  ],
1657
1495
  "attributes": [
1658
1496
  {
1659
- "name": "label",
1497
+ "name": "variant",
1660
1498
  "type": {
1661
- "text": "string"
1499
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1662
1500
  },
1663
- "default": "''",
1664
- "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
1665
- "fieldName": "label"
1501
+ "default": "'primary'",
1502
+ "description": "The badge's theme variant.",
1503
+ "fieldName": "variant"
1504
+ },
1505
+ {
1506
+ "name": "pill",
1507
+ "type": {
1508
+ "text": "boolean"
1509
+ },
1510
+ "default": "false",
1511
+ "description": "Draws a pill-style badge with rounded edges.",
1512
+ "fieldName": "pill"
1513
+ },
1514
+ {
1515
+ "name": "pulse",
1516
+ "type": {
1517
+ "text": "boolean"
1518
+ },
1519
+ "default": "false",
1520
+ "description": "Makes the badge pulsate to draw attention.",
1521
+ "fieldName": "pulse"
1666
1522
  }
1667
1523
  ],
1668
1524
  "superclass": {
1669
1525
  "name": "FlowRdfElement",
1670
1526
  "module": "/src/internal/flow-ui-rdf-element"
1671
1527
  },
1672
- "tagName": "flow-ui-breadcrumb",
1673
- "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
1674
- "dependencies": [
1675
- "flow-ui-icon"
1528
+ "tagName": "flow-ui-badge",
1529
+ "summary": "Badges are used to draw attention and display statuses or counts.",
1530
+ "customElement": true
1531
+ }
1532
+ ],
1533
+ "exports": [
1534
+ {
1535
+ "kind": "js",
1536
+ "name": "default",
1537
+ "declaration": {
1538
+ "name": "FlowUiBadge",
1539
+ "module": "components/badge/badge.component.js"
1540
+ }
1541
+ }
1542
+ ]
1543
+ },
1544
+ {
1545
+ "kind": "javascript-module",
1546
+ "path": "components/badge/badge.js",
1547
+ "declarations": [],
1548
+ "exports": [
1549
+ {
1550
+ "kind": "js",
1551
+ "name": "default",
1552
+ "declaration": {
1553
+ "name": "FlowUiBadge",
1554
+ "module": "components/badge/badge.js"
1555
+ }
1556
+ }
1557
+ ]
1558
+ },
1559
+ {
1560
+ "kind": "javascript-module",
1561
+ "path": "components/breadcrumb-item/breadcrumb-item.component.js",
1562
+ "declarations": [
1563
+ {
1564
+ "kind": "class",
1565
+ "description": "",
1566
+ "name": "FlowUiBreadcrumbItem",
1567
+ "cssParts": [
1568
+ {
1569
+ "description": "The component's base wrapper.",
1570
+ "name": "base"
1571
+ },
1572
+ {
1573
+ "description": "The breadcrumb item's label.",
1574
+ "name": "label"
1575
+ },
1576
+ {
1577
+ "description": "The container that wraps the prefix.",
1578
+ "name": "prefix"
1579
+ },
1580
+ {
1581
+ "description": "The container that wraps the suffix.",
1582
+ "name": "suffix"
1583
+ },
1584
+ {
1585
+ "description": "The container that wraps the separator.",
1586
+ "name": "separator"
1587
+ }
1588
+ ],
1589
+ "slots": [
1590
+ {
1591
+ "description": "The breadcrumb item's label.",
1592
+ "name": ""
1593
+ },
1594
+ {
1595
+ "description": "An optional prefix, usually an icon or icon button.",
1596
+ "name": "prefix"
1597
+ },
1598
+ {
1599
+ "description": "An optional suffix, usually an icon or icon button.",
1600
+ "name": "suffix"
1601
+ },
1602
+ {
1603
+ "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.",
1604
+ "name": "separator"
1605
+ }
1606
+ ],
1607
+ "members": [
1608
+ {
1609
+ "kind": "field",
1610
+ "name": "hasSlotController",
1611
+ "privacy": "private",
1612
+ "readonly": true,
1613
+ "default": "new HasSlotController(this, 'prefix', 'suffix')"
1614
+ },
1615
+ {
1616
+ "kind": "field",
1617
+ "name": "href",
1618
+ "type": {
1619
+ "text": "string | undefined"
1620
+ },
1621
+ "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1622
+ "attribute": "href"
1623
+ },
1624
+ {
1625
+ "kind": "field",
1626
+ "name": "target",
1627
+ "type": {
1628
+ "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1629
+ },
1630
+ "description": "Tells the browser where to open the link. Only used when `href` is set.",
1631
+ "attribute": "target"
1632
+ },
1633
+ {
1634
+ "kind": "field",
1635
+ "name": "rel",
1636
+ "type": {
1637
+ "text": "string"
1638
+ },
1639
+ "default": "'noreferrer noopener'",
1640
+ "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1641
+ "attribute": "rel"
1642
+ }
1643
+ ],
1644
+ "attributes": [
1645
+ {
1646
+ "name": "href",
1647
+ "type": {
1648
+ "text": "string | undefined"
1649
+ },
1650
+ "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1651
+ "fieldName": "href"
1652
+ },
1653
+ {
1654
+ "name": "target",
1655
+ "type": {
1656
+ "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1657
+ },
1658
+ "description": "Tells the browser where to open the link. Only used when `href` is set.",
1659
+ "fieldName": "target"
1660
+ },
1661
+ {
1662
+ "name": "rel",
1663
+ "type": {
1664
+ "text": "string"
1665
+ },
1666
+ "default": "'noreferrer noopener'",
1667
+ "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1668
+ "fieldName": "rel"
1669
+ }
1676
1670
  ],
1671
+ "superclass": {
1672
+ "name": "FlowRdfElement",
1673
+ "module": "/src/internal/flow-ui-rdf-element"
1674
+ },
1675
+ "tagName": "flow-ui-breadcrumb-item",
1676
+ "summary": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.",
1677
1677
  "customElement": true
1678
1678
  }
1679
1679
  ],
@@ -1682,23 +1682,23 @@
1682
1682
  "kind": "js",
1683
1683
  "name": "default",
1684
1684
  "declaration": {
1685
- "name": "FlowUiBreadcrumb",
1686
- "module": "components/breadcrumb/breadcrumb.component.js"
1685
+ "name": "FlowUiBreadcrumbItem",
1686
+ "module": "components/breadcrumb-item/breadcrumb-item.component.js"
1687
1687
  }
1688
1688
  }
1689
1689
  ]
1690
1690
  },
1691
1691
  {
1692
1692
  "kind": "javascript-module",
1693
- "path": "components/breadcrumb/breadcrumb.js",
1693
+ "path": "components/breadcrumb-item/breadcrumb-item.js",
1694
1694
  "declarations": [],
1695
1695
  "exports": [
1696
1696
  {
1697
1697
  "kind": "js",
1698
1698
  "name": "default",
1699
1699
  "declaration": {
1700
- "name": "FlowUiBreadcrumb",
1701
- "module": "components/breadcrumb/breadcrumb.js"
1700
+ "name": "FlowUiBreadcrumbItem",
1701
+ "module": "components/breadcrumb-item/breadcrumb-item.js"
1702
1702
  }
1703
1703
  }
1704
1704
  ]
@@ -4498,77 +4498,126 @@
4498
4498
  },
4499
4499
  {
4500
4500
  "kind": "javascript-module",
4501
- "path": "components/color-mapper/color-mapper.component.js",
4501
+ "path": "components/checkbox-group/checkbox-group.component.js",
4502
4502
  "declarations": [
4503
4503
  {
4504
4504
  "kind": "class",
4505
4505
  "description": "",
4506
- "name": "FlowUiColorMapper",
4506
+ "name": "FlowUiCheckboxGroup",
4507
+ "cssParts": [
4508
+ {
4509
+ "description": "The form control that wraps the label, input, and help text.",
4510
+ "name": "form-control"
4511
+ },
4512
+ {
4513
+ "description": "The label's wrapper.",
4514
+ "name": "form-control-label"
4515
+ },
4516
+ {
4517
+ "description": "The input's wrapper.",
4518
+ "name": "form-control-input"
4519
+ },
4520
+ {
4521
+ "description": "The help text's wrapper.",
4522
+ "name": "form-control-help-text"
4523
+ },
4524
+ {
4525
+ "description": "The button group that wraps radio buttons.",
4526
+ "name": "button-group"
4527
+ },
4528
+ {
4529
+ "description": "The button group's `base` part.",
4530
+ "name": "button-group__base"
4531
+ }
4532
+ ],
4533
+ "slots": [
4534
+ {
4535
+ "description": "The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.",
4536
+ "name": ""
4537
+ },
4538
+ {
4539
+ "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
4540
+ "name": "label"
4541
+ }
4542
+ ],
4507
4543
  "members": [
4508
4544
  {
4509
4545
  "kind": "field",
4510
- "name": "currentField",
4511
- "type": {
4512
- "text": "string | undefined"
4513
- },
4514
- "privacy": "private"
4546
+ "name": "formControlController",
4547
+ "privacy": "protected",
4548
+ "readonly": true,
4549
+ "default": "new FormControlController(this)"
4515
4550
  },
4516
4551
  {
4517
4552
  "kind": "field",
4518
4553
  "name": "hasSlotController",
4519
4554
  "privacy": "private",
4520
4555
  "readonly": true,
4521
- "default": "new HasSlotController(this, 'info')"
4556
+ "default": "new HasSlotController(this, 'help-text', 'label')"
4522
4557
  },
4523
4558
  {
4524
4559
  "kind": "field",
4525
- "name": "modeRadioGroup",
4560
+ "name": "customValidityMessage",
4526
4561
  "type": {
4527
- "text": "FlowRadioGroup"
4562
+ "text": "string"
4528
4563
  },
4529
- "privacy": "private"
4564
+ "privacy": "private",
4565
+ "default": "''"
4530
4566
  },
4531
4567
  {
4532
4568
  "kind": "field",
4533
- "name": "fixedColorPicker",
4569
+ "name": "validationTimeout",
4534
4570
  "type": {
4535
- "text": "FlowColorPicker"
4571
+ "text": "number"
4536
4572
  },
4537
4573
  "privacy": "private"
4538
4574
  },
4539
4575
  {
4540
4576
  "kind": "field",
4541
- "name": "fieldSelect",
4577
+ "name": "errorMessage",
4542
4578
  "type": {
4543
- "text": "FlowSelect"
4579
+ "text": "string"
4544
4580
  },
4545
- "privacy": "private"
4546
- },
4581
+ "privacy": "private",
4582
+ "default": "''"
4583
+ },
4547
4584
  {
4548
4585
  "kind": "field",
4549
- "name": "infoDialog",
4586
+ "name": "label",
4550
4587
  "type": {
4551
- "text": "FlowDialog"
4588
+ "text": "string"
4552
4589
  },
4553
- "privacy": "private"
4590
+ "default": "''",
4591
+ "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
4592
+ "attribute": "label"
4554
4593
  },
4555
4594
  {
4556
4595
  "kind": "field",
4557
- "name": "options",
4596
+ "name": "helpText",
4558
4597
  "type": {
4559
- "text": "ColorMapperOptions"
4598
+ "text": "string"
4560
4599
  },
4561
- "description": "The color mapper configuration specifying available fields.",
4562
- "attribute": "options"
4600
+ "default": "''",
4601
+ "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.",
4602
+ "attribute": "help-text"
4603
+ },
4604
+ {
4605
+ "kind": "field",
4606
+ "name": "name",
4607
+ "type": {
4608
+ "text": "string"
4609
+ },
4610
+ "default": "'option'",
4611
+ "description": "The name of the checkbox group, submitted as a name/value pair with form data.",
4612
+ "attribute": "name"
4563
4613
  },
4564
4614
  {
4565
4615
  "kind": "field",
4566
4616
  "name": "value",
4567
4617
  "type": {
4568
- "text": "ColorMapperValue"
4618
+ "text": "string[]"
4569
4619
  },
4570
- "default": "{\n mode: 'fixed',\n field: undefined,\n defaultColor: 'gray',\n colorStops: []\n }",
4571
- "description": "The current value of the color mapper.",
4620
+ "default": "[]",
4572
4621
  "attribute": "value"
4573
4622
  },
4574
4623
  {
@@ -4577,118 +4626,214 @@
4577
4626
  "type": {
4578
4627
  "text": "'small' | 'medium' | 'large'"
4579
4628
  },
4580
- "default": "'small'",
4581
- "description": "The size of the color mapper component.",
4582
- "attribute": "size"
4629
+ "default": "'medium'",
4630
+ "description": "The radio group's size. This size will be applied to all child checkboxes.",
4631
+ "attribute": "size",
4632
+ "reflects": true
4583
4633
  },
4584
4634
  {
4585
4635
  "kind": "field",
4586
- "name": "swatches",
4636
+ "name": "form",
4587
4637
  "type": {
4588
- "text": "string | string[]"
4638
+ "text": "string"
4589
4639
  },
4590
- "default": "[\n '#d7191c',\n '#ffa500',\n '#ffe909',\n '#a6d96a',\n '#1a9641',\n '#3c58fd',\n 'white',\n 'black'\n ]",
4591
- "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
4592
- "attribute": "swatches"
4640
+ "default": "''",
4641
+ "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
4642
+ "attribute": "form",
4643
+ "reflects": true
4644
+ },
4645
+ {
4646
+ "kind": "field",
4647
+ "name": "required",
4648
+ "type": {
4649
+ "text": "boolean"
4650
+ },
4651
+ "default": "false",
4652
+ "description": "Ensures a child radio is checked before allowing the containing form to submit.",
4653
+ "attribute": "required",
4654
+ "reflects": true
4655
+ },
4656
+ {
4657
+ "kind": "field",
4658
+ "name": "reverse",
4659
+ "type": {
4660
+ "text": "boolean"
4661
+ },
4662
+ "default": "false",
4663
+ "description": "Display the radio using a reversed style with left-aligned label.",
4664
+ "attribute": "reverse",
4665
+ "reflects": true
4666
+ },
4667
+ {
4668
+ "kind": "field",
4669
+ "name": "divider",
4670
+ "type": {
4671
+ "text": "boolean"
4672
+ },
4673
+ "default": "false",
4674
+ "description": "Indicates that the control should display a divider",
4675
+ "attribute": "divider",
4676
+ "reflects": true
4677
+ },
4678
+ {
4679
+ "kind": "field",
4680
+ "name": "validity",
4681
+ "description": "Gets the validity state object",
4682
+ "readonly": true
4683
+ },
4684
+ {
4685
+ "kind": "field",
4686
+ "name": "validationMessage",
4687
+ "description": "Gets the validation message",
4688
+ "readonly": true
4593
4689
  },
4594
4690
  {
4595
4691
  "kind": "method",
4596
- "name": "handleFixedPickerClick",
4597
- "privacy": "private",
4598
- "parameters": [
4599
- {
4600
- "name": "event",
4601
- "type": {
4602
- "text": "MouseEvent"
4603
- }
4604
- }
4605
- ]
4692
+ "name": "getAllCheckboxes",
4693
+ "privacy": "private"
4606
4694
  },
4607
4695
  {
4608
4696
  "kind": "method",
4609
- "name": "handleChange",
4697
+ "name": "handleCheckboxClick",
4610
4698
  "privacy": "private",
4611
4699
  "parameters": [
4612
4700
  {
4613
4701
  "name": "event",
4614
4702
  "type": {
4615
- "text": "FlowChangeEvent"
4703
+ "text": "MouseEvent"
4616
4704
  }
4617
4705
  }
4618
4706
  ]
4619
4707
  },
4620
4708
  {
4621
4709
  "kind": "method",
4622
- "name": "emitChange",
4710
+ "name": "handleLabelClick",
4623
4711
  "privacy": "private"
4624
4712
  },
4625
4713
  {
4626
4714
  "kind": "method",
4627
- "name": "handleColorStopRemove",
4715
+ "name": "handleInvalid",
4628
4716
  "privacy": "private",
4629
4717
  "parameters": [
4630
4718
  {
4631
4719
  "name": "event",
4632
4720
  "type": {
4633
- "text": "FlowRemoveEvent"
4721
+ "text": "Event"
4634
4722
  }
4635
4723
  }
4636
4724
  ]
4637
4725
  },
4638
4726
  {
4639
4727
  "kind": "method",
4640
- "name": "getAllColorStops",
4728
+ "name": "syncCheckboxes",
4641
4729
  "privacy": "private"
4642
4730
  },
4643
4731
  {
4644
4732
  "kind": "method",
4645
- "name": "getColorStopPlaceholder",
4733
+ "name": "updateCheckedState",
4646
4734
  "privacy": "private"
4647
4735
  },
4648
4736
  {
4649
4737
  "kind": "method",
4650
- "name": "fixedColorTemplate",
4651
- "privacy": "private"
4738
+ "name": "checkValidity",
4739
+ "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
4652
4740
  },
4653
4741
  {
4654
4742
  "kind": "method",
4655
- "name": "dataDrivenColorTemplate",
4656
- "privacy": "private"
4743
+ "name": "getForm",
4744
+ "return": {
4745
+ "type": {
4746
+ "text": "HTMLFormElement | null"
4747
+ }
4748
+ },
4749
+ "description": "Gets the associated form, if one exists."
4657
4750
  },
4658
4751
  {
4659
4752
  "kind": "method",
4660
- "name": "colorStopsTemplate",
4661
- "privacy": "private"
4753
+ "name": "reportValidity",
4754
+ "return": {
4755
+ "type": {
4756
+ "text": "boolean"
4757
+ }
4758
+ },
4759
+ "description": "Checks for validity and shows the browser's validation message if the control is invalid."
4662
4760
  },
4663
4761
  {
4664
4762
  "kind": "method",
4665
- "name": "infoDialogTemplate",
4666
- "privacy": "private"
4763
+ "name": "setCustomValidity",
4764
+ "parameters": [
4765
+ {
4766
+ "name": "message",
4767
+ "default": "''"
4768
+ }
4769
+ ],
4770
+ "description": "Sets a custom validation message. Pass an empty string to restore validity."
4771
+ },
4772
+ {
4773
+ "kind": "method",
4774
+ "name": "handleChildEvents",
4775
+ "parameters": [
4776
+ {
4777
+ "name": "event",
4778
+ "type": {
4779
+ "text": "Event"
4780
+ }
4781
+ }
4782
+ ],
4783
+ "description": "Stop propagation of flow-ui-input and flow-ui-change from child checkboxes"
4667
4784
  }
4668
4785
  ],
4669
4786
  "events": [
4670
4787
  {
4671
- "description": "Fired when the color mapper's value changes.",
4788
+ "description": "Emitted when the radio group's selected value changes.",
4672
4789
  "name": "flow-ui-change",
4673
4790
  "reactName": "onFlowUiChange"
4791
+ },
4792
+ {
4793
+ "description": "Emitted when the radio group receives user input.",
4794
+ "name": "flow-ui-input",
4795
+ "reactName": "onFlowUiInput"
4796
+ },
4797
+ {
4798
+ "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
4799
+ "name": "flow-ui-invalid",
4800
+ "reactName": "onFlowUiInvalid"
4674
4801
  }
4675
4802
  ],
4676
4803
  "attributes": [
4677
4804
  {
4678
- "name": "options",
4805
+ "name": "label",
4679
4806
  "type": {
4680
- "text": "ColorMapperOptions"
4807
+ "text": "string"
4681
4808
  },
4682
- "description": "The color mapper configuration specifying available fields.",
4683
- "fieldName": "options"
4809
+ "default": "''",
4810
+ "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
4811
+ "fieldName": "label"
4812
+ },
4813
+ {
4814
+ "name": "help-text",
4815
+ "type": {
4816
+ "text": "string"
4817
+ },
4818
+ "default": "''",
4819
+ "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.",
4820
+ "fieldName": "helpText"
4821
+ },
4822
+ {
4823
+ "name": "name",
4824
+ "type": {
4825
+ "text": "string"
4826
+ },
4827
+ "default": "'option'",
4828
+ "description": "The name of the checkbox group, submitted as a name/value pair with form data.",
4829
+ "fieldName": "name"
4684
4830
  },
4685
4831
  {
4686
4832
  "name": "value",
4687
4833
  "type": {
4688
- "text": "ColorMapperValue"
4834
+ "text": "string[]"
4689
4835
  },
4690
- "default": "{\n mode: 'fixed',\n field: undefined,\n defaultColor: 'gray',\n colorStops: []\n }",
4691
- "description": "The current value of the color mapper.",
4836
+ "default": "[]",
4692
4837
  "fieldName": "value"
4693
4838
  },
4694
4839
  {
@@ -4696,36 +4841,55 @@
4696
4841
  "type": {
4697
4842
  "text": "'small' | 'medium' | 'large'"
4698
4843
  },
4699
- "default": "'small'",
4700
- "description": "The size of the color mapper component.",
4844
+ "default": "'medium'",
4845
+ "description": "The radio group's size. This size will be applied to all child checkboxes.",
4701
4846
  "fieldName": "size"
4702
4847
  },
4703
4848
  {
4704
- "name": "swatches",
4849
+ "name": "form",
4705
4850
  "type": {
4706
- "text": "string | string[]"
4851
+ "text": "string"
4707
4852
  },
4708
- "default": "[\n '#d7191c',\n '#ffa500',\n '#ffe909',\n '#a6d96a',\n '#1a9641',\n '#3c58fd',\n 'white',\n 'black'\n ]",
4709
- "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
4710
- "fieldName": "swatches"
4853
+ "default": "''",
4854
+ "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
4855
+ "fieldName": "form"
4856
+ },
4857
+ {
4858
+ "name": "required",
4859
+ "type": {
4860
+ "text": "boolean"
4861
+ },
4862
+ "default": "false",
4863
+ "description": "Ensures a child radio is checked before allowing the containing form to submit.",
4864
+ "fieldName": "required"
4865
+ },
4866
+ {
4867
+ "name": "reverse",
4868
+ "type": {
4869
+ "text": "boolean"
4870
+ },
4871
+ "default": "false",
4872
+ "description": "Display the radio using a reversed style with left-aligned label.",
4873
+ "fieldName": "reverse"
4874
+ },
4875
+ {
4876
+ "name": "divider",
4877
+ "type": {
4878
+ "text": "boolean"
4879
+ },
4880
+ "default": "false",
4881
+ "description": "Indicates that the control should display a divider",
4882
+ "fieldName": "divider"
4711
4883
  }
4712
4884
  ],
4713
4885
  "superclass": {
4714
- "name": "FlowRdfElement",
4886
+ "name": "FlowRdfFormControl",
4715
4887
  "module": "/src/internal/flow-ui-rdf-element"
4716
4888
  },
4717
- "tagName": "flow-ui-color-mapper",
4718
- "summary": "A component for defining mappings between data values and colors.",
4889
+ "tagName": "flow-ui-checkbox-group",
4890
+ "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.",
4719
4891
  "dependencies": [
4720
- "flow-ui-color-picker",
4721
- "flow-ui-color-stop",
4722
- "flow-ui-dialog",
4723
- "flow-ui-button",
4724
- "flow-ui-radio-group",
4725
- "flow-ui-radio",
4726
- "flow-ui-select",
4727
- "flow-ui-option",
4728
- "flow-ui-icon-button"
4892
+ "flow-ui-button-group"
4729
4893
  ],
4730
4894
  "customElement": true
4731
4895
  }
@@ -4735,424 +4899,228 @@
4735
4899
  "kind": "js",
4736
4900
  "name": "default",
4737
4901
  "declaration": {
4738
- "name": "FlowUiColorMapper",
4739
- "module": "components/color-mapper/color-mapper.component.js"
4902
+ "name": "FlowUiCheckboxGroup",
4903
+ "module": "components/checkbox-group/checkbox-group.component.js"
4740
4904
  }
4741
4905
  }
4742
4906
  ]
4743
4907
  },
4744
4908
  {
4745
4909
  "kind": "javascript-module",
4746
- "path": "components/color-mapper/color-mapper.js",
4910
+ "path": "components/checkbox-group/checkbox-group.js",
4747
4911
  "declarations": [],
4748
4912
  "exports": [
4749
4913
  {
4750
4914
  "kind": "js",
4751
- "name": "default",
4752
- "declaration": {
4753
- "name": "FlowUiColorMapper",
4754
- "module": "components/color-mapper/color-mapper.js"
4755
- }
4756
- }
4757
- ]
4758
- },
4759
- {
4760
- "kind": "javascript-module",
4761
- "path": "components/color-mapper/helpers.js",
4762
- "declarations": [
4763
- {
4764
- "kind": "function",
4765
- "name": "colorMapperValueToMaplibreExpression",
4766
- "return": {
4767
- "type": {
4768
- "text": "string"
4769
- }
4770
- },
4771
- "parameters": [
4772
- {
4773
- "name": "value",
4774
- "type": {
4775
- "text": "ColorMapperValue"
4776
- }
4777
- }
4778
- ]
4779
- },
4780
- {
4781
- "kind": "function",
4782
- "name": "escapeMaplibreString",
4783
- "parameters": [
4784
- {
4785
- "name": "value",
4786
- "type": {
4787
- "text": "string"
4788
- }
4789
- }
4790
- ]
4791
- }
4792
- ],
4793
- "exports": [
4794
- {
4795
- "kind": "js",
4796
- "name": "colorMapperValueToMaplibreExpression",
4915
+ "name": "*",
4797
4916
  "declaration": {
4798
- "name": "colorMapperValueToMaplibreExpression",
4799
- "module": "components/color-mapper/helpers.js"
4917
+ "name": "*",
4918
+ "package": "./checkbox-group.component"
4800
4919
  }
4801
4920
  },
4802
4921
  {
4803
4922
  "kind": "js",
4804
- "name": "escapeMaplibreString",
4923
+ "name": "default",
4805
4924
  "declaration": {
4806
- "name": "escapeMaplibreString",
4807
- "module": "components/color-mapper/helpers.js"
4925
+ "name": "FlowUiCheckboxGroup",
4926
+ "module": "components/checkbox-group/checkbox-group.js"
4808
4927
  }
4809
4928
  }
4810
4929
  ]
4811
4930
  },
4812
4931
  {
4813
4932
  "kind": "javascript-module",
4814
- "path": "components/color-mapper/types.js",
4815
- "declarations": [],
4816
- "exports": []
4817
- },
4818
- {
4819
- "kind": "javascript-module",
4820
- "path": "components/checkbox-group/checkbox-group.component.js",
4933
+ "path": "components/color-mapper/color-mapper.component.js",
4821
4934
  "declarations": [
4822
4935
  {
4823
4936
  "kind": "class",
4824
4937
  "description": "",
4825
- "name": "FlowUiCheckboxGroup",
4826
- "cssParts": [
4827
- {
4828
- "description": "The form control that wraps the label, input, and help text.",
4829
- "name": "form-control"
4830
- },
4831
- {
4832
- "description": "The label's wrapper.",
4833
- "name": "form-control-label"
4834
- },
4835
- {
4836
- "description": "The input's wrapper.",
4837
- "name": "form-control-input"
4838
- },
4839
- {
4840
- "description": "The help text's wrapper.",
4841
- "name": "form-control-help-text"
4842
- },
4843
- {
4844
- "description": "The button group that wraps radio buttons.",
4845
- "name": "button-group"
4846
- },
4847
- {
4848
- "description": "The button group's `base` part.",
4849
- "name": "button-group__base"
4850
- }
4851
- ],
4852
- "slots": [
4853
- {
4854
- "description": "The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.",
4855
- "name": ""
4856
- },
4857
- {
4858
- "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
4859
- "name": "label"
4860
- }
4861
- ],
4938
+ "name": "FlowUiColorMapper",
4862
4939
  "members": [
4863
4940
  {
4864
4941
  "kind": "field",
4865
- "name": "formControlController",
4866
- "privacy": "protected",
4867
- "readonly": true,
4868
- "default": "new FormControlController(this)"
4942
+ "name": "currentField",
4943
+ "type": {
4944
+ "text": "string | undefined"
4945
+ },
4946
+ "privacy": "private"
4869
4947
  },
4870
4948
  {
4871
4949
  "kind": "field",
4872
4950
  "name": "hasSlotController",
4873
4951
  "privacy": "private",
4874
4952
  "readonly": true,
4875
- "default": "new HasSlotController(this, 'help-text', 'label')"
4876
- },
4877
- {
4878
- "kind": "field",
4879
- "name": "customValidityMessage",
4880
- "type": {
4881
- "text": "string"
4882
- },
4883
- "privacy": "private",
4884
- "default": "''"
4953
+ "default": "new HasSlotController(this, 'info')"
4885
4954
  },
4886
4955
  {
4887
4956
  "kind": "field",
4888
- "name": "validationTimeout",
4957
+ "name": "modeRadioGroup",
4889
4958
  "type": {
4890
- "text": "number"
4959
+ "text": "FlowRadioGroup"
4891
4960
  },
4892
4961
  "privacy": "private"
4893
4962
  },
4894
4963
  {
4895
4964
  "kind": "field",
4896
- "name": "errorMessage",
4965
+ "name": "fixedColorPicker",
4897
4966
  "type": {
4898
- "text": "string"
4967
+ "text": "FlowColorPicker"
4899
4968
  },
4900
- "privacy": "private",
4901
- "default": "''"
4969
+ "privacy": "private"
4902
4970
  },
4903
4971
  {
4904
4972
  "kind": "field",
4905
- "name": "label",
4973
+ "name": "fieldSelect",
4906
4974
  "type": {
4907
- "text": "string"
4975
+ "text": "FlowSelect"
4908
4976
  },
4909
- "default": "''",
4910
- "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
4911
- "attribute": "label"
4977
+ "privacy": "private"
4912
4978
  },
4913
4979
  {
4914
4980
  "kind": "field",
4915
- "name": "helpText",
4981
+ "name": "infoDialog",
4916
4982
  "type": {
4917
- "text": "string"
4983
+ "text": "FlowDialog"
4918
4984
  },
4919
- "default": "''",
4920
- "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.",
4921
- "attribute": "help-text"
4985
+ "privacy": "private"
4922
4986
  },
4923
4987
  {
4924
4988
  "kind": "field",
4925
- "name": "name",
4989
+ "name": "options",
4926
4990
  "type": {
4927
- "text": "string"
4991
+ "text": "ColorMapperOptions"
4928
4992
  },
4929
- "default": "'option'",
4930
- "description": "The name of the checkbox group, submitted as a name/value pair with form data.",
4931
- "attribute": "name"
4993
+ "description": "The color mapper configuration specifying available fields.",
4994
+ "attribute": "options"
4932
4995
  },
4933
4996
  {
4934
4997
  "kind": "field",
4935
4998
  "name": "value",
4936
4999
  "type": {
4937
- "text": "string[]"
5000
+ "text": "ColorMapperValue"
4938
5001
  },
4939
- "default": "[]",
5002
+ "default": "{\n mode: 'fixed',\n field: undefined,\n defaultColor: 'gray',\n colorStops: []\n }",
5003
+ "description": "The current value of the color mapper.",
4940
5004
  "attribute": "value"
4941
5005
  },
4942
5006
  {
4943
5007
  "kind": "field",
4944
5008
  "name": "size",
4945
5009
  "type": {
4946
- "text": "'small' | 'medium' | 'large'"
4947
- },
4948
- "default": "'medium'",
4949
- "description": "The radio group's size. This size will be applied to all child checkboxes.",
4950
- "attribute": "size",
4951
- "reflects": true
4952
- },
4953
- {
4954
- "kind": "field",
4955
- "name": "form",
4956
- "type": {
4957
- "text": "string"
4958
- },
4959
- "default": "''",
4960
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
4961
- "attribute": "form",
4962
- "reflects": true
4963
- },
4964
- {
4965
- "kind": "field",
4966
- "name": "required",
4967
- "type": {
4968
- "text": "boolean"
4969
- },
4970
- "default": "false",
4971
- "description": "Ensures a child radio is checked before allowing the containing form to submit.",
4972
- "attribute": "required",
4973
- "reflects": true
4974
- },
4975
- {
4976
- "kind": "field",
4977
- "name": "reverse",
4978
- "type": {
4979
- "text": "boolean"
4980
- },
4981
- "default": "false",
4982
- "description": "Display the radio using a reversed style with left-aligned label.",
4983
- "attribute": "reverse",
4984
- "reflects": true
4985
- },
4986
- {
4987
- "kind": "field",
4988
- "name": "divider",
4989
- "type": {
4990
- "text": "boolean"
4991
- },
4992
- "default": "false",
4993
- "description": "Indicates that the control should display a divider",
4994
- "attribute": "divider",
4995
- "reflects": true
4996
- },
4997
- {
4998
- "kind": "field",
4999
- "name": "validity",
5000
- "description": "Gets the validity state object",
5001
- "readonly": true
5010
+ "text": "'small' | 'medium' | 'large'"
5011
+ },
5012
+ "default": "'small'",
5013
+ "description": "The size of the color mapper component.",
5014
+ "attribute": "size"
5002
5015
  },
5003
5016
  {
5004
5017
  "kind": "field",
5005
- "name": "validationMessage",
5006
- "description": "Gets the validation message",
5007
- "readonly": true
5018
+ "name": "swatches",
5019
+ "type": {
5020
+ "text": "string | string[]"
5021
+ },
5022
+ "default": "[\n '#d7191c',\n '#ffa500',\n '#ffe909',\n '#a6d96a',\n '#1a9641',\n '#3c58fd',\n 'white',\n 'black'\n ]",
5023
+ "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
5024
+ "attribute": "swatches"
5008
5025
  },
5009
5026
  {
5010
5027
  "kind": "method",
5011
- "name": "getAllCheckboxes",
5012
- "privacy": "private"
5028
+ "name": "handleFixedPickerClick",
5029
+ "privacy": "private",
5030
+ "parameters": [
5031
+ {
5032
+ "name": "event",
5033
+ "type": {
5034
+ "text": "MouseEvent"
5035
+ }
5036
+ }
5037
+ ]
5013
5038
  },
5014
5039
  {
5015
5040
  "kind": "method",
5016
- "name": "handleCheckboxClick",
5041
+ "name": "handleChange",
5017
5042
  "privacy": "private",
5018
5043
  "parameters": [
5019
5044
  {
5020
5045
  "name": "event",
5021
5046
  "type": {
5022
- "text": "MouseEvent"
5047
+ "text": "FlowChangeEvent"
5023
5048
  }
5024
5049
  }
5025
5050
  ]
5026
5051
  },
5027
5052
  {
5028
5053
  "kind": "method",
5029
- "name": "handleLabelClick",
5054
+ "name": "emitChange",
5030
5055
  "privacy": "private"
5031
5056
  },
5032
5057
  {
5033
5058
  "kind": "method",
5034
- "name": "handleInvalid",
5059
+ "name": "handleColorStopRemove",
5035
5060
  "privacy": "private",
5036
5061
  "parameters": [
5037
5062
  {
5038
5063
  "name": "event",
5039
5064
  "type": {
5040
- "text": "Event"
5065
+ "text": "FlowRemoveEvent"
5041
5066
  }
5042
5067
  }
5043
5068
  ]
5044
5069
  },
5045
5070
  {
5046
5071
  "kind": "method",
5047
- "name": "syncCheckboxes",
5072
+ "name": "getAllColorStops",
5048
5073
  "privacy": "private"
5049
5074
  },
5050
5075
  {
5051
5076
  "kind": "method",
5052
- "name": "updateCheckedState",
5077
+ "name": "getColorStopPlaceholder",
5053
5078
  "privacy": "private"
5054
5079
  },
5055
5080
  {
5056
5081
  "kind": "method",
5057
- "name": "checkValidity",
5058
- "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
5059
- },
5060
- {
5061
- "kind": "method",
5062
- "name": "getForm",
5063
- "return": {
5064
- "type": {
5065
- "text": "HTMLFormElement | null"
5066
- }
5067
- },
5068
- "description": "Gets the associated form, if one exists."
5082
+ "name": "fixedColorTemplate",
5083
+ "privacy": "private"
5069
5084
  },
5070
5085
  {
5071
5086
  "kind": "method",
5072
- "name": "reportValidity",
5073
- "return": {
5074
- "type": {
5075
- "text": "boolean"
5076
- }
5077
- },
5078
- "description": "Checks for validity and shows the browser's validation message if the control is invalid."
5087
+ "name": "dataDrivenColorTemplate",
5088
+ "privacy": "private"
5079
5089
  },
5080
5090
  {
5081
5091
  "kind": "method",
5082
- "name": "setCustomValidity",
5083
- "parameters": [
5084
- {
5085
- "name": "message",
5086
- "default": "''"
5087
- }
5088
- ],
5089
- "description": "Sets a custom validation message. Pass an empty string to restore validity."
5092
+ "name": "colorStopsTemplate",
5093
+ "privacy": "private"
5090
5094
  },
5091
5095
  {
5092
5096
  "kind": "method",
5093
- "name": "handleChildEvents",
5094
- "parameters": [
5095
- {
5096
- "name": "event",
5097
- "type": {
5098
- "text": "Event"
5099
- }
5100
- }
5101
- ],
5102
- "description": "Stop propagation of flow-ui-input and flow-ui-change from child checkboxes"
5097
+ "name": "infoDialogTemplate",
5098
+ "privacy": "private"
5103
5099
  }
5104
5100
  ],
5105
5101
  "events": [
5106
5102
  {
5107
- "description": "Emitted when the radio group's selected value changes.",
5103
+ "description": "Fired when the color mapper's value changes.",
5108
5104
  "name": "flow-ui-change",
5109
5105
  "reactName": "onFlowUiChange"
5110
- },
5111
- {
5112
- "description": "Emitted when the radio group receives user input.",
5113
- "name": "flow-ui-input",
5114
- "reactName": "onFlowUiInput"
5115
- },
5116
- {
5117
- "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
5118
- "name": "flow-ui-invalid",
5119
- "reactName": "onFlowUiInvalid"
5120
5106
  }
5121
5107
  ],
5122
5108
  "attributes": [
5123
5109
  {
5124
- "name": "label",
5125
- "type": {
5126
- "text": "string"
5127
- },
5128
- "default": "''",
5129
- "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
5130
- "fieldName": "label"
5131
- },
5132
- {
5133
- "name": "help-text",
5134
- "type": {
5135
- "text": "string"
5136
- },
5137
- "default": "''",
5138
- "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.",
5139
- "fieldName": "helpText"
5140
- },
5141
- {
5142
- "name": "name",
5110
+ "name": "options",
5143
5111
  "type": {
5144
- "text": "string"
5112
+ "text": "ColorMapperOptions"
5145
5113
  },
5146
- "default": "'option'",
5147
- "description": "The name of the checkbox group, submitted as a name/value pair with form data.",
5148
- "fieldName": "name"
5114
+ "description": "The color mapper configuration specifying available fields.",
5115
+ "fieldName": "options"
5149
5116
  },
5150
5117
  {
5151
5118
  "name": "value",
5152
5119
  "type": {
5153
- "text": "string[]"
5120
+ "text": "ColorMapperValue"
5154
5121
  },
5155
- "default": "[]",
5122
+ "default": "{\n mode: 'fixed',\n field: undefined,\n defaultColor: 'gray',\n colorStops: []\n }",
5123
+ "description": "The current value of the color mapper.",
5156
5124
  "fieldName": "value"
5157
5125
  },
5158
5126
  {
@@ -5160,55 +5128,36 @@
5160
5128
  "type": {
5161
5129
  "text": "'small' | 'medium' | 'large'"
5162
5130
  },
5163
- "default": "'medium'",
5164
- "description": "The radio group's size. This size will be applied to all child checkboxes.",
5131
+ "default": "'small'",
5132
+ "description": "The size of the color mapper component.",
5165
5133
  "fieldName": "size"
5166
5134
  },
5167
5135
  {
5168
- "name": "form",
5169
- "type": {
5170
- "text": "string"
5171
- },
5172
- "default": "''",
5173
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
5174
- "fieldName": "form"
5175
- },
5176
- {
5177
- "name": "required",
5178
- "type": {
5179
- "text": "boolean"
5180
- },
5181
- "default": "false",
5182
- "description": "Ensures a child radio is checked before allowing the containing form to submit.",
5183
- "fieldName": "required"
5184
- },
5185
- {
5186
- "name": "reverse",
5187
- "type": {
5188
- "text": "boolean"
5189
- },
5190
- "default": "false",
5191
- "description": "Display the radio using a reversed style with left-aligned label.",
5192
- "fieldName": "reverse"
5193
- },
5194
- {
5195
- "name": "divider",
5136
+ "name": "swatches",
5196
5137
  "type": {
5197
- "text": "boolean"
5138
+ "text": "string | string[]"
5198
5139
  },
5199
- "default": "false",
5200
- "description": "Indicates that the control should display a divider",
5201
- "fieldName": "divider"
5140
+ "default": "[\n '#d7191c',\n '#ffa500',\n '#ffe909',\n '#a6d96a',\n '#1a9641',\n '#3c58fd',\n 'white',\n 'black'\n ]",
5141
+ "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
5142
+ "fieldName": "swatches"
5202
5143
  }
5203
5144
  ],
5204
5145
  "superclass": {
5205
- "name": "FlowRdfFormControl",
5146
+ "name": "FlowRdfElement",
5206
5147
  "module": "/src/internal/flow-ui-rdf-element"
5207
5148
  },
5208
- "tagName": "flow-ui-checkbox-group",
5209
- "summary": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.",
5149
+ "tagName": "flow-ui-color-mapper",
5150
+ "summary": "A component for defining mappings between data values and colors.",
5210
5151
  "dependencies": [
5211
- "flow-ui-button-group"
5152
+ "flow-ui-color-picker",
5153
+ "flow-ui-color-stop",
5154
+ "flow-ui-dialog",
5155
+ "flow-ui-button",
5156
+ "flow-ui-radio-group",
5157
+ "flow-ui-radio",
5158
+ "flow-ui-select",
5159
+ "flow-ui-option",
5160
+ "flow-ui-icon-button"
5212
5161
  ],
5213
5162
  "customElement": true
5214
5163
  }
@@ -5218,35 +5167,86 @@
5218
5167
  "kind": "js",
5219
5168
  "name": "default",
5220
5169
  "declaration": {
5221
- "name": "FlowUiCheckboxGroup",
5222
- "module": "components/checkbox-group/checkbox-group.component.js"
5170
+ "name": "FlowUiColorMapper",
5171
+ "module": "components/color-mapper/color-mapper.component.js"
5223
5172
  }
5224
5173
  }
5225
5174
  ]
5226
5175
  },
5227
5176
  {
5228
5177
  "kind": "javascript-module",
5229
- "path": "components/checkbox-group/checkbox-group.js",
5178
+ "path": "components/color-mapper/color-mapper.js",
5230
5179
  "declarations": [],
5231
5180
  "exports": [
5232
5181
  {
5233
5182
  "kind": "js",
5234
- "name": "*",
5183
+ "name": "default",
5235
5184
  "declaration": {
5236
- "name": "*",
5237
- "package": "./checkbox-group.component"
5185
+ "name": "FlowUiColorMapper",
5186
+ "module": "components/color-mapper/color-mapper.js"
5187
+ }
5188
+ }
5189
+ ]
5190
+ },
5191
+ {
5192
+ "kind": "javascript-module",
5193
+ "path": "components/color-mapper/helpers.js",
5194
+ "declarations": [
5195
+ {
5196
+ "kind": "function",
5197
+ "name": "colorMapperValueToMaplibreExpression",
5198
+ "return": {
5199
+ "type": {
5200
+ "text": "string"
5201
+ }
5202
+ },
5203
+ "parameters": [
5204
+ {
5205
+ "name": "value",
5206
+ "type": {
5207
+ "text": "ColorMapperValue"
5208
+ }
5209
+ }
5210
+ ]
5211
+ },
5212
+ {
5213
+ "kind": "function",
5214
+ "name": "escapeMaplibreString",
5215
+ "parameters": [
5216
+ {
5217
+ "name": "value",
5218
+ "type": {
5219
+ "text": "string"
5220
+ }
5221
+ }
5222
+ ]
5223
+ }
5224
+ ],
5225
+ "exports": [
5226
+ {
5227
+ "kind": "js",
5228
+ "name": "colorMapperValueToMaplibreExpression",
5229
+ "declaration": {
5230
+ "name": "colorMapperValueToMaplibreExpression",
5231
+ "module": "components/color-mapper/helpers.js"
5238
5232
  }
5239
5233
  },
5240
5234
  {
5241
5235
  "kind": "js",
5242
- "name": "default",
5236
+ "name": "escapeMaplibreString",
5243
5237
  "declaration": {
5244
- "name": "FlowUiCheckboxGroup",
5245
- "module": "components/checkbox-group/checkbox-group.js"
5238
+ "name": "escapeMaplibreString",
5239
+ "module": "components/color-mapper/helpers.js"
5246
5240
  }
5247
5241
  }
5248
5242
  ]
5249
5243
  },
5244
+ {
5245
+ "kind": "javascript-module",
5246
+ "path": "components/color-mapper/types.js",
5247
+ "declarations": [],
5248
+ "exports": []
5249
+ },
5250
5250
  {
5251
5251
  "kind": "javascript-module",
5252
5252
  "path": "components/color-picker/color-picker.component.js",
@@ -24587,6 +24587,6 @@
24587
24587
  ],
24588
24588
  "package": {
24589
24589
  "name": "@emuanalytics/flow-rdf-ui",
24590
- "version": "4.1.0-preview.12"
24590
+ "version": "4.1.0-preview.13"
24591
24591
  }
24592
24592
  }