@emuanalytics/flow-rdf-ui 0.0.41 → 0.0.43

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.
Files changed (8) hide show
  1. package/dist/custom-elements.json +1533 -1533
  2. package/dist/index.cjs +3 -1
  3. package/dist/index.d.cts +2 -0
  4. package/dist/index.d.mts +2 -0
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.mjs +3 -1
  7. package/dist/vscode.html-custom-data.json +104 -104
  8. package/package.json +3 -3
package/dist/custom-elements.json CHANGED
@@ -699,99 +699,167 @@
699
699
  },
700
700
  {
701
701
  "kind": "javascript-module",
702
- "path": "components/breadcrumb/breadcrumb.js",
702
+ "path": "components/avatar/avatar.js",
703
703
  "declarations": [
704
704
  {
705
705
  "kind": "class",
706
706
  "description": "",
707
- "name": "FlowBreadcrumb",
707
+ "name": "FlowAvatar",
708
+ "cssProperties": [
709
+ {
710
+ "description": "The size of the avatar.",
711
+ "name": "--size"
712
+ }
713
+ ],
708
714
  "cssParts": [
709
715
  {
710
716
  "description": "The component's base wrapper.",
711
717
  "name": "base"
718
+ },
719
+ {
720
+ "description": "The container that wraps the avatar's icon.",
721
+ "name": "icon"
722
+ },
723
+ {
724
+ "description": "The container that wraps the avatar's initials.",
725
+ "name": "initials"
726
+ },
727
+ {
728
+ "description": "The avatar image. Only shown when the `image` attribute is set.",
729
+ "name": "image"
712
730
  }
713
731
  ],
714
732
  "slots": [
715
733
  {
716
- "description": "One or more breadcrumb items to display.",
717
- "name": ""
718
- },
719
- {
720
- "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
721
- "name": "separator"
734
+ "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
735
+ "name": "icon"
722
736
  }
723
737
  ],
724
738
  "members": [
725
739
  {
726
740
  "kind": "field",
727
- "name": "localize",
741
+ "name": "hasError",
742
+ "type": {
743
+ "text": "boolean"
744
+ },
728
745
  "privacy": "private",
729
- "readonly": true,
730
- "default": "new LocalizeController(this)"
746
+ "default": "false"
731
747
  },
732
748
  {
733
749
  "kind": "field",
734
- "name": "separatorDir",
735
- "privacy": "private"
750
+ "name": "image",
751
+ "type": {
752
+ "text": "string"
753
+ },
754
+ "default": "''",
755
+ "description": "The image source to use for the avatar.",
756
+ "attribute": "image"
736
757
  },
737
758
  {
738
759
  "kind": "field",
739
- "name": "defaultSlot",
760
+ "name": "label",
740
761
  "type": {
741
- "text": "HTMLSlotElement"
742
- }
762
+ "text": "string"
763
+ },
764
+ "default": "''",
765
+ "description": "A label to use to describe the avatar to assistive devices.",
766
+ "attribute": "label"
743
767
  },
744
768
  {
745
769
  "kind": "field",
746
- "name": "separatorSlot",
770
+ "name": "initials",
747
771
  "type": {
748
- "text": "HTMLSlotElement"
749
- }
772
+ "text": "string"
773
+ },
774
+ "default": "''",
775
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
776
+ "attribute": "initials"
750
777
  },
751
778
  {
752
779
  "kind": "field",
753
- "name": "label",
780
+ "name": "loading",
754
781
  "type": {
755
- "text": "string"
782
+ "text": "'eager' | 'lazy'"
756
783
  },
757
- "default": "''",
758
- "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.",
759
- "attribute": "label"
784
+ "default": "'eager'",
785
+ "description": "Indicates how the browser should load the image.",
786
+ "attribute": "loading"
760
787
  },
761
788
  {
762
- "kind": "method",
763
- "name": "getSeparator",
764
- "privacy": "private"
789
+ "kind": "field",
790
+ "name": "shape",
791
+ "type": {
792
+ "text": "'circle' | 'square' | 'rounded'"
793
+ },
794
+ "default": "'circle'",
795
+ "description": "The shape of the avatar.",
796
+ "attribute": "shape",
797
+ "reflects": true
765
798
  },
766
799
  {
767
800
  "kind": "method",
768
- "name": "handleSlotChange",
769
- "privacy": "private"
801
+ "name": "handleImageChange"
770
802
  }
771
803
  ],
772
804
  "attributes": [
805
+ {
806
+ "name": "image",
807
+ "type": {
808
+ "text": "string"
809
+ },
810
+ "default": "''",
811
+ "description": "The image source to use for the avatar.",
812
+ "fieldName": "image"
813
+ },
773
814
  {
774
815
  "name": "label",
775
816
  "type": {
776
817
  "text": "string"
777
818
  },
778
819
  "default": "''",
779
- "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.",
820
+ "description": "A label to use to describe the avatar to assistive devices.",
780
821
  "fieldName": "label"
822
+ },
823
+ {
824
+ "name": "initials",
825
+ "type": {
826
+ "text": "string"
827
+ },
828
+ "default": "''",
829
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
830
+ "fieldName": "initials"
831
+ },
832
+ {
833
+ "name": "loading",
834
+ "type": {
835
+ "text": "'eager' | 'lazy'"
836
+ },
837
+ "default": "'eager'",
838
+ "description": "Indicates how the browser should load the image.",
839
+ "fieldName": "loading"
840
+ },
841
+ {
842
+ "name": "shape",
843
+ "type": {
844
+ "text": "'circle' | 'square' | 'rounded'"
845
+ },
846
+ "default": "'circle'",
847
+ "description": "The shape of the avatar.",
848
+ "fieldName": "shape"
781
849
  }
782
850
  ],
783
851
  "superclass": {
784
852
  "name": "FlowRdfElement",
785
853
  "module": "/src/internal/flow-ui-rdf-element"
786
854
  },
787
- "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
788
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
855
+ "summary": "Avatars are used to represent a person or object.",
856
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/avatar",
789
857
  "status": "stable",
790
858
  "since": "2.0",
791
859
  "dependencies": [
792
860
  "flow-ui-icon"
793
861
  ],
794
- "tagName": "flow-ui-breadcrumb",
862
+ "tagName": "flow-ui-avatar",
795
863
  "customElement": true
796
864
  }
797
865
  ],
@@ -800,16 +868,16 @@
800
868
  "kind": "js",
801
869
  "name": "default",
802
870
  "declaration": {
803
- "name": "FlowBreadcrumb",
804
- "module": "components/breadcrumb/breadcrumb.js"
871
+ "name": "FlowAvatar",
872
+ "module": "components/avatar/avatar.js"
805
873
  }
806
874
  },
807
875
  {
808
876
  "kind": "custom-element-definition",
809
- "name": "flow-ui-breadcrumb",
877
+ "name": "flow-ui-avatar",
810
878
  "declaration": {
811
- "name": "FlowBreadcrumb",
812
- "module": "components/breadcrumb/breadcrumb.js"
879
+ "name": "FlowAvatar",
880
+ "module": "components/avatar/avatar.js"
813
881
  }
814
882
  }
815
883
  ]
@@ -959,202 +1027,167 @@
959
1027
  },
960
1028
  {
961
1029
  "kind": "javascript-module",
962
- "path": "components/button-group/button-group.js",
1030
+ "path": "components/button/button.component.js",
963
1031
  "declarations": [
964
1032
  {
965
1033
  "kind": "class",
966
1034
  "description": "",
967
- "name": "FlowButtonGroup",
1035
+ "name": "FlowButton",
968
1036
  "cssParts": [
969
1037
  {
970
1038
  "description": "The component's base wrapper.",
971
1039
  "name": "base"
1040
+ },
1041
+ {
1042
+ "description": "The container that wraps the prefix.",
1043
+ "name": "prefix"
1044
+ },
1045
+ {
1046
+ "description": "The button's label.",
1047
+ "name": "label"
1048
+ },
1049
+ {
1050
+ "description": "The container that wraps the suffix.",
1051
+ "name": "suffix"
1052
+ },
1053
+ {
1054
+ "description": "The button's caret icon, an `<flow-ui-icon>` element.",
1055
+ "name": "caret"
972
1056
  }
973
1057
  ],
974
1058
  "slots": [
975
1059
  {
976
- "description": "One or more `<flow-ui-button>` elements to display in the button group.",
1060
+ "description": "The button's label.",
977
1061
  "name": ""
1062
+ },
1063
+ {
1064
+ "description": "A presentational prefix icon or similar element.",
1065
+ "name": "prefix"
1066
+ },
1067
+ {
1068
+ "description": "A presentational suffix icon or similar element.",
1069
+ "name": "suffix"
978
1070
  }
979
1071
  ],
980
1072
  "members": [
981
1073
  {
982
1074
  "kind": "field",
983
- "name": "defaultSlot",
1075
+ "name": "formControlController",
1076
+ "privacy": "private",
1077
+ "readonly": true,
1078
+ "default": "new FormControlController(this, {\n form: (input) => {\n // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n // the form from the same root using its id\n if (input.hasAttribute('form')) {\n const doc = input.getRootNode() as Document | ShadowRoot;\n const formId = input.getAttribute('form')!;\n return doc.getElementById(formId) as HTMLFormElement;\n }\n\n // Fall back to the closest containing form\n return input.closest('form');\n },\n assumeInteractionOn: ['click']\n })"
1079
+ },
1080
+ {
1081
+ "kind": "field",
1082
+ "name": "hasSlotController",
1083
+ "privacy": "private",
1084
+ "readonly": true,
1085
+ "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
1086
+ },
1087
+ {
1088
+ "kind": "field",
1089
+ "name": "localize",
1090
+ "privacy": "private",
1091
+ "readonly": true,
1092
+ "default": "new LocalizeController(this)"
1093
+ },
1094
+ {
1095
+ "kind": "field",
1096
+ "name": "button",
984
1097
  "type": {
985
- "text": "HTMLSlotElement"
1098
+ "text": "HTMLButtonElement | HTMLLinkElement"
986
1099
  }
987
1100
  },
988
1101
  {
989
1102
  "kind": "field",
990
- "name": "disableRole",
1103
+ "name": "hasFocus",
991
1104
  "type": {
992
1105
  "text": "boolean"
993
1106
  },
1107
+ "privacy": "private",
994
1108
  "default": "false"
995
1109
  },
996
1110
  {
997
1111
  "kind": "field",
998
- "name": "label",
1112
+ "name": "invalid",
1113
+ "type": {
1114
+ "text": "boolean"
1115
+ },
1116
+ "default": "false"
1117
+ },
1118
+ {
1119
+ "kind": "field",
1120
+ "name": "title",
999
1121
  "type": {
1000
1122
  "text": "string"
1001
1123
  },
1002
1124
  "default": "''",
1003
- "attribute": "label"
1125
+ "attribute": "title"
1004
1126
  },
1005
1127
  {
1006
1128
  "kind": "field",
1007
- "name": "vertical",
1129
+ "name": "variant",
1008
1130
  "type": {
1009
- "text": "boolean"
1131
+ "text": "| 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'neutral'\n | 'warning'\n | 'danger'\n | 'text'"
1010
1132
  },
1011
- "default": "false",
1012
- "description": "Use vertical layout for the button group.",
1013
- "attribute": "vertical",
1133
+ "default": "'default'",
1134
+ "description": "The button's theme variant.",
1135
+ "attribute": "variant",
1014
1136
  "reflects": true
1015
1137
  },
1016
1138
  {
1017
- "kind": "method",
1018
- "name": "handleVerticalChange"
1139
+ "kind": "field",
1140
+ "name": "size",
1141
+ "type": {
1142
+ "text": "'small' | 'medium' | 'large'"
1143
+ },
1144
+ "default": "'medium'",
1145
+ "description": "The button's size.",
1146
+ "attribute": "size",
1147
+ "reflects": true
1019
1148
  },
1020
1149
  {
1021
- "kind": "method",
1022
- "name": "handleFocus",
1023
- "privacy": "private",
1024
- "parameters": [
1025
- {
1026
- "name": "event",
1027
- "type": {
1028
- "text": "Event"
1029
- }
1030
- }
1031
- ]
1150
+ "kind": "field",
1151
+ "name": "caret",
1152
+ "type": {
1153
+ "text": "boolean"
1154
+ },
1155
+ "default": "false",
1156
+ "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
1157
+ "attribute": "caret",
1158
+ "reflects": true
1032
1159
  },
1033
1160
  {
1034
- "kind": "method",
1035
- "name": "handleBlur",
1036
- "privacy": "private",
1037
- "parameters": [
1038
- {
1039
- "name": "event",
1040
- "type": {
1041
- "text": "Event"
1042
- }
1043
- }
1044
- ]
1045
- },
1046
- {
1047
- "kind": "method",
1048
- "name": "handleMouseOver",
1049
- "privacy": "private",
1050
- "parameters": [
1051
- {
1052
- "name": "event",
1053
- "type": {
1054
- "text": "Event"
1055
- }
1056
- }
1057
- ]
1058
- },
1059
- {
1060
- "kind": "method",
1061
- "name": "handleMouseOut",
1062
- "privacy": "private",
1063
- "parameters": [
1064
- {
1065
- "name": "event",
1066
- "type": {
1067
- "text": "Event"
1068
- }
1069
- }
1070
- ]
1071
- },
1072
- {
1073
- "kind": "method",
1074
- "name": "handleSlotChange",
1075
- "privacy": "private"
1076
- }
1077
- ],
1078
- "attributes": [
1079
- {
1080
- "name": "label",
1161
+ "kind": "field",
1162
+ "name": "disabled",
1081
1163
  "type": {
1082
- "text": "string"
1164
+ "text": "boolean"
1083
1165
  },
1084
- "default": "''",
1085
- "fieldName": "label"
1166
+ "default": "false",
1167
+ "description": "Disables the button.",
1168
+ "attribute": "disabled",
1169
+ "reflects": true
1086
1170
  },
1087
1171
  {
1088
- "name": "vertical",
1172
+ "kind": "field",
1173
+ "name": "loading",
1089
1174
  "type": {
1090
1175
  "text": "boolean"
1091
1176
  },
1092
1177
  "default": "false",
1093
- "description": "Use vertical layout for the button group.",
1094
- "fieldName": "vertical"
1095
- }
1096
- ],
1097
- "superclass": {
1098
- "name": "FlowRdfElement",
1099
- "module": "/src/internal/flow-ui-rdf-element"
1100
- },
1101
- "summary": "Button groups can be used to group related buttons into sections.",
1102
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button-group",
1103
- "status": "stable",
1104
- "since": "2.0",
1105
- "tagName": "flow-ui-button-group",
1106
- "customElement": true
1107
- }
1108
- ],
1109
- "exports": [
1110
- {
1111
- "kind": "js",
1112
- "name": "default",
1113
- "declaration": {
1114
- "name": "FlowButtonGroup",
1115
- "module": "components/button-group/button-group.js"
1116
- }
1117
- },
1118
- {
1119
- "kind": "custom-element-definition",
1120
- "name": "flow-ui-button-group",
1121
- "declaration": {
1122
- "name": "FlowButtonGroup",
1123
- "module": "components/button-group/button-group.js"
1124
- }
1125
- }
1126
- ]
1127
- },
1128
- {
1129
- "kind": "javascript-module",
1130
- "path": "components/badge/badge.js",
1131
- "declarations": [
1132
- {
1133
- "kind": "class",
1134
- "description": "",
1135
- "name": "FlowBadge",
1136
- "cssParts": [
1137
- {
1138
- "description": "The component's base wrapper.",
1139
- "name": "base"
1140
- }
1141
- ],
1142
- "slots": [
1143
- {
1144
- "description": "The badge's content.",
1145
- "name": ""
1146
- }
1147
- ],
1148
- "members": [
1178
+ "description": "Draws the button in a loading state.",
1179
+ "attribute": "loading",
1180
+ "reflects": true
1181
+ },
1149
1182
  {
1150
1183
  "kind": "field",
1151
- "name": "variant",
1184
+ "name": "outline",
1152
1185
  "type": {
1153
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
1186
+ "text": "boolean"
1154
1187
  },
1155
- "default": "'primary'",
1156
- "description": "The badge's theme variant.",
1157
- "attribute": "variant",
1188
+ "default": "false",
1189
+ "description": "Draws an outlined button.",
1190
+ "attribute": "outline",
1158
1191
  "reflects": true
1159
1192
  },
1160
1193
  {
@@ -1164,329 +1197,81 @@
1164
1197
  "text": "boolean"
1165
1198
  },
1166
1199
  "default": "false",
1167
- "description": "Draws a pill-style badge with rounded edges.",
1200
+ "description": "Draws a pill-style button with rounded edges.",
1168
1201
  "attribute": "pill",
1169
1202
  "reflects": true
1170
1203
  },
1171
1204
  {
1172
1205
  "kind": "field",
1173
- "name": "pulse",
1206
+ "name": "fabCircle",
1174
1207
  "type": {
1175
1208
  "text": "boolean"
1176
1209
  },
1177
1210
  "default": "false",
1178
- "description": "Makes the badge pulsate to draw attention.",
1179
- "attribute": "pulse",
1211
+ "description": "Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the\ndefault slot.",
1212
+ "attribute": "fab-circle",
1180
1213
  "reflects": true
1181
- }
1182
- ],
1183
- "attributes": [
1184
- {
1185
- "name": "variant",
1186
- "type": {
1187
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
1188
- },
1189
- "default": "'primary'",
1190
- "description": "The badge's theme variant.",
1191
- "fieldName": "variant"
1192
1214
  },
1193
1215
  {
1194
- "name": "pill",
1216
+ "kind": "field",
1217
+ "name": "fabSquare",
1195
1218
  "type": {
1196
1219
  "text": "boolean"
1197
1220
  },
1198
1221
  "default": "false",
1199
- "description": "Draws a pill-style badge with rounded edges.",
1200
- "fieldName": "pill"
1222
+ "description": "Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the\ndefault slot.",
1223
+ "attribute": "fab-square",
1224
+ "reflects": true
1201
1225
  },
1202
1226
  {
1203
- "name": "pulse",
1227
+ "kind": "field",
1228
+ "name": "type",
1204
1229
  "type": {
1205
- "text": "boolean"
1230
+ "text": "'button' | 'submit' | 'reset'"
1206
1231
  },
1207
- "default": "false",
1208
- "description": "Makes the badge pulsate to draw attention.",
1209
- "fieldName": "pulse"
1210
- }
1211
- ],
1212
- "superclass": {
1213
- "name": "FlowRdfElement",
1214
- "module": "/src/internal/flow-ui-rdf-element"
1215
- },
1216
- "summary": "Badges are used to draw attention and display statuses or counts.",
1217
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
1218
- "status": "stable",
1219
- "since": "2.0",
1220
- "tagName": "flow-ui-badge",
1221
- "customElement": true
1222
- }
1223
- ],
1224
- "exports": [
1225
- {
1226
- "kind": "js",
1227
- "name": "default",
1228
- "declaration": {
1229
- "name": "FlowBadge",
1230
- "module": "components/badge/badge.js"
1231
- }
1232
- },
1233
- {
1234
- "kind": "custom-element-definition",
1235
- "name": "flow-ui-badge",
1236
- "declaration": {
1237
- "name": "FlowBadge",
1238
- "module": "components/badge/badge.js"
1239
- }
1240
- }
1241
- ]
1242
- },
1243
- {
1244
- "kind": "javascript-module",
1245
- "path": "components/button/button.component.js",
1246
- "declarations": [
1247
- {
1248
- "kind": "class",
1249
- "description": "",
1250
- "name": "FlowButton",
1251
- "cssParts": [
1252
- {
1253
- "description": "The component's base wrapper.",
1254
- "name": "base"
1232
+ "default": "'button'",
1233
+ "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
1234
+ "attribute": "type"
1255
1235
  },
1256
1236
  {
1257
- "description": "The container that wraps the prefix.",
1258
- "name": "prefix"
1237
+ "kind": "field",
1238
+ "name": "name",
1239
+ "type": {
1240
+ "text": "string"
1241
+ },
1242
+ "default": "''",
1243
+ "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
1244
+ "attribute": "name"
1259
1245
  },
1260
1246
  {
1261
- "description": "The button's label.",
1262
- "name": "label"
1247
+ "kind": "field",
1248
+ "name": "value",
1249
+ "type": {
1250
+ "text": "string"
1251
+ },
1252
+ "default": "''",
1253
+ "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
1254
+ "attribute": "value"
1263
1255
  },
1264
1256
  {
1265
- "description": "The container that wraps the suffix.",
1266
- "name": "suffix"
1257
+ "kind": "field",
1258
+ "name": "href",
1259
+ "type": {
1260
+ "text": "string"
1261
+ },
1262
+ "default": "''",
1263
+ "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
1264
+ "attribute": "href"
1267
1265
  },
1268
1266
  {
1269
- "description": "The button's caret icon, an `<flow-ui-icon>` element.",
1270
- "name": "caret"
1271
- }
1272
- ],
1273
- "slots": [
1274
- {
1275
- "description": "The button's label.",
1276
- "name": ""
1277
- },
1278
- {
1279
- "description": "A presentational prefix icon or similar element.",
1280
- "name": "prefix"
1281
- },
1282
- {
1283
- "description": "A presentational suffix icon or similar element.",
1284
- "name": "suffix"
1285
- }
1286
- ],
1287
- "members": [
1288
- {
1289
- "kind": "field",
1290
- "name": "formControlController",
1291
- "privacy": "private",
1292
- "readonly": true,
1293
- "default": "new FormControlController(this, {\n form: (input) => {\n // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n // the form from the same root using its id\n if (input.hasAttribute('form')) {\n const doc = input.getRootNode() as Document | ShadowRoot;\n const formId = input.getAttribute('form')!;\n return doc.getElementById(formId) as HTMLFormElement;\n }\n\n // Fall back to the closest containing form\n return input.closest('form');\n },\n assumeInteractionOn: ['click']\n })"
1294
- },
1295
- {
1296
- "kind": "field",
1297
- "name": "hasSlotController",
1298
- "privacy": "private",
1299
- "readonly": true,
1300
- "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
1301
- },
1302
- {
1303
- "kind": "field",
1304
- "name": "localize",
1305
- "privacy": "private",
1306
- "readonly": true,
1307
- "default": "new LocalizeController(this)"
1308
- },
1309
- {
1310
- "kind": "field",
1311
- "name": "button",
1312
- "type": {
1313
- "text": "HTMLButtonElement | HTMLLinkElement"
1314
- }
1315
- },
1316
- {
1317
- "kind": "field",
1318
- "name": "hasFocus",
1319
- "type": {
1320
- "text": "boolean"
1321
- },
1322
- "privacy": "private",
1323
- "default": "false"
1324
- },
1325
- {
1326
- "kind": "field",
1327
- "name": "invalid",
1328
- "type": {
1329
- "text": "boolean"
1330
- },
1331
- "default": "false"
1332
- },
1333
- {
1334
- "kind": "field",
1335
- "name": "title",
1336
- "type": {
1337
- "text": "string"
1338
- },
1339
- "default": "''",
1340
- "attribute": "title"
1341
- },
1342
- {
1343
- "kind": "field",
1344
- "name": "variant",
1345
- "type": {
1346
- "text": "| 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'neutral'\n | 'warning'\n | 'danger'\n | 'text'"
1347
- },
1348
- "default": "'default'",
1349
- "description": "The button's theme variant.",
1350
- "attribute": "variant",
1351
- "reflects": true
1352
- },
1353
- {
1354
- "kind": "field",
1355
- "name": "size",
1356
- "type": {
1357
- "text": "'small' | 'medium' | 'large'"
1358
- },
1359
- "default": "'medium'",
1360
- "description": "The button's size.",
1361
- "attribute": "size",
1362
- "reflects": true
1363
- },
1364
- {
1365
- "kind": "field",
1366
- "name": "caret",
1367
- "type": {
1368
- "text": "boolean"
1369
- },
1370
- "default": "false",
1371
- "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
1372
- "attribute": "caret",
1373
- "reflects": true
1374
- },
1375
- {
1376
- "kind": "field",
1377
- "name": "disabled",
1378
- "type": {
1379
- "text": "boolean"
1380
- },
1381
- "default": "false",
1382
- "description": "Disables the button.",
1383
- "attribute": "disabled",
1384
- "reflects": true
1385
- },
1386
- {
1387
- "kind": "field",
1388
- "name": "loading",
1389
- "type": {
1390
- "text": "boolean"
1391
- },
1392
- "default": "false",
1393
- "description": "Draws the button in a loading state.",
1394
- "attribute": "loading",
1395
- "reflects": true
1396
- },
1397
- {
1398
- "kind": "field",
1399
- "name": "outline",
1400
- "type": {
1401
- "text": "boolean"
1402
- },
1403
- "default": "false",
1404
- "description": "Draws an outlined button.",
1405
- "attribute": "outline",
1406
- "reflects": true
1407
- },
1408
- {
1409
- "kind": "field",
1410
- "name": "pill",
1411
- "type": {
1412
- "text": "boolean"
1413
- },
1414
- "default": "false",
1415
- "description": "Draws a pill-style button with rounded edges.",
1416
- "attribute": "pill",
1417
- "reflects": true
1418
- },
1419
- {
1420
- "kind": "field",
1421
- "name": "fabCircle",
1422
- "type": {
1423
- "text": "boolean"
1424
- },
1425
- "default": "false",
1426
- "description": "Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the\ndefault slot.",
1427
- "attribute": "fab-circle",
1428
- "reflects": true
1429
- },
1430
- {
1431
- "kind": "field",
1432
- "name": "fabSquare",
1433
- "type": {
1434
- "text": "boolean"
1435
- },
1436
- "default": "false",
1437
- "description": "Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the\ndefault slot.",
1438
- "attribute": "fab-square",
1439
- "reflects": true
1440
- },
1441
- {
1442
- "kind": "field",
1443
- "name": "type",
1444
- "type": {
1445
- "text": "'button' | 'submit' | 'reset'"
1446
- },
1447
- "default": "'button'",
1448
- "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
1449
- "attribute": "type"
1450
- },
1451
- {
1452
- "kind": "field",
1453
- "name": "name",
1454
- "type": {
1455
- "text": "string"
1456
- },
1457
- "default": "''",
1458
- "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
1459
- "attribute": "name"
1460
- },
1461
- {
1462
- "kind": "field",
1463
- "name": "value",
1464
- "type": {
1465
- "text": "string"
1466
- },
1467
- "default": "''",
1468
- "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
1469
- "attribute": "value"
1470
- },
1471
- {
1472
- "kind": "field",
1473
- "name": "href",
1474
- "type": {
1475
- "text": "string"
1476
- },
1477
- "default": "''",
1478
- "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
1479
- "attribute": "href"
1480
- },
1481
- {
1482
- "kind": "field",
1483
- "name": "target",
1484
- "type": {
1485
- "text": "'_blank' | '_parent' | '_self' | '_top'"
1486
- },
1487
- "description": "Tells the browser where to open the link. Only used when `href` is present.",
1488
- "attribute": "target"
1489
- },
1267
+ "kind": "field",
1268
+ "name": "target",
1269
+ "type": {
1270
+ "text": "'_blank' | '_parent' | '_self' | '_top'"
1271
+ },
1272
+ "description": "Tells the browser where to open the link. Only used when `href` is present.",
1273
+ "attribute": "target"
1274
+ },
1490
1275
  {
1491
1276
  "kind": "field",
1492
1277
  "name": "rel",
@@ -1959,167 +1744,97 @@
1959
1744
  },
1960
1745
  {
1961
1746
  "kind": "javascript-module",
1962
- "path": "components/avatar/avatar.js",
1747
+ "path": "components/badge/badge.js",
1963
1748
  "declarations": [
1964
1749
  {
1965
1750
  "kind": "class",
1966
1751
  "description": "",
1967
- "name": "FlowAvatar",
1968
- "cssProperties": [
1969
- {
1970
- "description": "The size of the avatar.",
1971
- "name": "--size"
1972
- }
1973
- ],
1752
+ "name": "FlowBadge",
1974
1753
  "cssParts": [
1975
1754
  {
1976
1755
  "description": "The component's base wrapper.",
1977
1756
  "name": "base"
1978
- },
1979
- {
1980
- "description": "The container that wraps the avatar's icon.",
1981
- "name": "icon"
1982
- },
1983
- {
1984
- "description": "The container that wraps the avatar's initials.",
1985
- "name": "initials"
1986
- },
1987
- {
1988
- "description": "The avatar image. Only shown when the `image` attribute is set.",
1989
- "name": "image"
1990
1757
  }
1991
1758
  ],
1992
1759
  "slots": [
1993
1760
  {
1994
- "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
1995
- "name": "icon"
1761
+ "description": "The badge's content.",
1762
+ "name": ""
1996
1763
  }
1997
1764
  ],
1998
1765
  "members": [
1999
1766
  {
2000
1767
  "kind": "field",
2001
- "name": "hasError",
1768
+ "name": "variant",
2002
1769
  "type": {
2003
- "text": "boolean"
1770
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
2004
1771
  },
2005
- "privacy": "private",
2006
- "default": "false"
1772
+ "default": "'primary'",
1773
+ "description": "The badge's theme variant.",
1774
+ "attribute": "variant",
1775
+ "reflects": true
2007
1776
  },
2008
1777
  {
2009
1778
  "kind": "field",
2010
- "name": "image",
1779
+ "name": "pill",
2011
1780
  "type": {
2012
- "text": "string"
1781
+ "text": "boolean"
2013
1782
  },
2014
- "default": "''",
2015
- "description": "The image source to use for the avatar.",
2016
- "attribute": "image"
2017
- },
2018
- {
2019
- "kind": "field",
2020
- "name": "label",
2021
- "type": {
2022
- "text": "string"
2023
- },
2024
- "default": "''",
2025
- "description": "A label to use to describe the avatar to assistive devices.",
2026
- "attribute": "label"
2027
- },
2028
- {
2029
- "kind": "field",
2030
- "name": "initials",
2031
- "type": {
2032
- "text": "string"
2033
- },
2034
- "default": "''",
2035
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
2036
- "attribute": "initials"
2037
- },
2038
- {
2039
- "kind": "field",
2040
- "name": "loading",
2041
- "type": {
2042
- "text": "'eager' | 'lazy'"
2043
- },
2044
- "default": "'eager'",
2045
- "description": "Indicates how the browser should load the image.",
2046
- "attribute": "loading"
1783
+ "default": "false",
1784
+ "description": "Draws a pill-style badge with rounded edges.",
1785
+ "attribute": "pill",
1786
+ "reflects": true
2047
1787
  },
2048
1788
  {
2049
1789
  "kind": "field",
2050
- "name": "shape",
1790
+ "name": "pulse",
2051
1791
  "type": {
2052
- "text": "'circle' | 'square' | 'rounded'"
1792
+ "text": "boolean"
2053
1793
  },
2054
- "default": "'circle'",
2055
- "description": "The shape of the avatar.",
2056
- "attribute": "shape",
1794
+ "default": "false",
1795
+ "description": "Makes the badge pulsate to draw attention.",
1796
+ "attribute": "pulse",
2057
1797
  "reflects": true
2058
- },
2059
- {
2060
- "kind": "method",
2061
- "name": "handleImageChange"
2062
1798
  }
2063
1799
  ],
2064
1800
  "attributes": [
2065
1801
  {
2066
- "name": "image",
2067
- "type": {
2068
- "text": "string"
2069
- },
2070
- "default": "''",
2071
- "description": "The image source to use for the avatar.",
2072
- "fieldName": "image"
2073
- },
2074
- {
2075
- "name": "label",
2076
- "type": {
2077
- "text": "string"
2078
- },
2079
- "default": "''",
2080
- "description": "A label to use to describe the avatar to assistive devices.",
2081
- "fieldName": "label"
2082
- },
2083
- {
2084
- "name": "initials",
1802
+ "name": "variant",
2085
1803
  "type": {
2086
- "text": "string"
1804
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
2087
1805
  },
2088
- "default": "''",
2089
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
2090
- "fieldName": "initials"
1806
+ "default": "'primary'",
1807
+ "description": "The badge's theme variant.",
1808
+ "fieldName": "variant"
2091
1809
  },
2092
1810
  {
2093
- "name": "loading",
1811
+ "name": "pill",
2094
1812
  "type": {
2095
- "text": "'eager' | 'lazy'"
1813
+ "text": "boolean"
2096
1814
  },
2097
- "default": "'eager'",
2098
- "description": "Indicates how the browser should load the image.",
2099
- "fieldName": "loading"
1815
+ "default": "false",
1816
+ "description": "Draws a pill-style badge with rounded edges.",
1817
+ "fieldName": "pill"
2100
1818
  },
2101
1819
  {
2102
- "name": "shape",
1820
+ "name": "pulse",
2103
1821
  "type": {
2104
- "text": "'circle' | 'square' | 'rounded'"
1822
+ "text": "boolean"
2105
1823
  },
2106
- "default": "'circle'",
2107
- "description": "The shape of the avatar.",
2108
- "fieldName": "shape"
1824
+ "default": "false",
1825
+ "description": "Makes the badge pulsate to draw attention.",
1826
+ "fieldName": "pulse"
2109
1827
  }
2110
1828
  ],
2111
1829
  "superclass": {
2112
1830
  "name": "FlowRdfElement",
2113
1831
  "module": "/src/internal/flow-ui-rdf-element"
2114
1832
  },
2115
- "summary": "Avatars are used to represent a person or object.",
2116
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/avatar",
1833
+ "summary": "Badges are used to draw attention and display statuses or counts.",
1834
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
2117
1835
  "status": "stable",
2118
1836
  "since": "2.0",
2119
- "dependencies": [
2120
- "flow-ui-icon"
2121
- ],
2122
- "tagName": "flow-ui-avatar",
1837
+ "tagName": "flow-ui-badge",
2123
1838
  "customElement": true
2124
1839
  }
2125
1840
  ],
@@ -2128,279 +1843,166 @@
2128
1843
  "kind": "js",
2129
1844
  "name": "default",
2130
1845
  "declaration": {
2131
- "name": "FlowAvatar",
2132
- "module": "components/avatar/avatar.js"
1846
+ "name": "FlowBadge",
1847
+ "module": "components/badge/badge.js"
2133
1848
  }
2134
1849
  },
2135
1850
  {
2136
1851
  "kind": "custom-element-definition",
2137
- "name": "flow-ui-avatar",
1852
+ "name": "flow-ui-badge",
2138
1853
  "declaration": {
2139
- "name": "FlowAvatar",
2140
- "module": "components/avatar/avatar.js"
1854
+ "name": "FlowBadge",
1855
+ "module": "components/badge/badge.js"
2141
1856
  }
2142
1857
  }
2143
1858
  ]
2144
1859
  },
2145
1860
  {
2146
1861
  "kind": "javascript-module",
2147
- "path": "components/calendar/calendar.component.js",
1862
+ "path": "components/button-group/button-group.js",
2148
1863
  "declarations": [
2149
1864
  {
2150
1865
  "kind": "class",
2151
1866
  "description": "",
2152
- "name": "FlowCalendar",
2153
- "members": [
1867
+ "name": "FlowButtonGroup",
1868
+ "cssParts": [
2154
1869
  {
2155
- "kind": "field",
2156
- "name": "_monthSelect",
2157
- "type": {
2158
- "text": "FlowSelect"
2159
- },
2160
- "privacy": "private"
2161
- },
1870
+ "description": "The component's base wrapper.",
1871
+ "name": "base"
1872
+ }
1873
+ ],
1874
+ "slots": [
2162
1875
  {
2163
- "kind": "field",
2164
- "name": "_yearSelect",
2165
- "type": {
2166
- "text": "FlowSelect"
2167
- },
2168
- "privacy": "private"
2169
- },
1876
+ "description": "One or more `<flow-ui-button>` elements to display in the button group.",
1877
+ "name": ""
1878
+ }
1879
+ ],
1880
+ "members": [
2170
1881
  {
2171
1882
  "kind": "field",
2172
- "name": "_displayDate",
1883
+ "name": "defaultSlot",
2173
1884
  "type": {
2174
- "text": "DateTime<true>"
2175
- },
2176
- "privacy": "private"
1885
+ "text": "HTMLSlotElement"
1886
+ }
2177
1887
  },
2178
1888
  {
2179
1889
  "kind": "field",
2180
- "name": "_selectedDate",
1890
+ "name": "disableRole",
2181
1891
  "type": {
2182
- "text": "DateTime<true> | undefined"
1892
+ "text": "boolean"
2183
1893
  },
2184
- "privacy": "private"
1894
+ "default": "false"
2185
1895
  },
2186
1896
  {
2187
1897
  "kind": "field",
2188
- "name": "value",
1898
+ "name": "label",
2189
1899
  "type": {
2190
1900
  "text": "string"
2191
1901
  },
2192
- "attribute": "value",
2193
- "reflects": true
2194
- },
2195
- {
2196
- "kind": "field",
2197
- "name": "displayMode",
2198
- "type": {
2199
- "text": "'date' | 'time' | 'datetime'"
2200
- },
2201
- "default": "'date'",
2202
- "attribute": "display-mode"
2203
- },
2204
- {
2205
- "kind": "field",
2206
- "name": "timezone",
2207
- "type": {
2208
- "text": "string | undefined"
2209
- },
2210
- "attribute": "timezone"
2211
- },
2212
- {
2213
- "kind": "field",
2214
- "name": "locale",
2215
- "type": {
2216
- "text": "string | undefined"
2217
- },
2218
- "attribute": "locale"
1902
+ "default": "''",
1903
+ "attribute": "label"
2219
1904
  },
2220
1905
  {
2221
1906
  "kind": "field",
2222
- "name": "size",
1907
+ "name": "vertical",
2223
1908
  "type": {
2224
- "text": "'small' | 'medium' | 'large'"
1909
+ "text": "boolean"
2225
1910
  },
2226
- "default": "'medium'",
2227
- "attribute": "size"
2228
- },
2229
- {
2230
- "kind": "method",
2231
- "name": "handleValueChange"
1911
+ "default": "false",
1912
+ "description": "Use vertical layout for the button group.",
1913
+ "attribute": "vertical",
1914
+ "reflects": true
2232
1915
  },
2233
1916
  {
2234
1917
  "kind": "method",
2235
- "name": "handleTimezoneChange"
1918
+ "name": "handleVerticalChange"
2236
1919
  },
2237
1920
  {
2238
1921
  "kind": "method",
2239
- "name": "dateClicked",
1922
+ "name": "handleFocus",
2240
1923
  "privacy": "private",
2241
1924
  "parameters": [
2242
1925
  {
2243
- "name": "val",
1926
+ "name": "event",
2244
1927
  "type": {
2245
- "text": "string"
1928
+ "text": "Event"
2246
1929
  }
2247
1930
  }
2248
1931
  ]
2249
1932
  },
2250
1933
  {
2251
1934
  "kind": "method",
2252
- "name": "stepDisplayDate",
1935
+ "name": "handleBlur",
2253
1936
  "privacy": "private",
2254
1937
  "parameters": [
2255
1938
  {
2256
- "name": "duration",
1939
+ "name": "event",
2257
1940
  "type": {
2258
- "text": "DurationLike"
1941
+ "text": "Event"
2259
1942
  }
2260
1943
  }
2261
1944
  ]
2262
1945
  },
2263
1946
  {
2264
1947
  "kind": "method",
2265
- "name": "yearOptionsForDate",
1948
+ "name": "handleMouseOver",
2266
1949
  "privacy": "private",
2267
- "return": {
2268
- "type": {
2269
- "text": "number[]"
2270
- }
2271
- },
2272
1950
  "parameters": [
2273
1951
  {
2274
- "name": "date",
1952
+ "name": "event",
2275
1953
  "type": {
2276
- "text": "DateTime"
1954
+ "text": "Event"
2277
1955
  }
2278
1956
  }
2279
- ],
2280
- "description": "Generate a list of years for the year select dropdown"
1957
+ ]
2281
1958
  },
2282
1959
  {
2283
1960
  "kind": "method",
2284
- "name": "makeDate",
1961
+ "name": "handleMouseOut",
2285
1962
  "privacy": "private",
2286
- "return": {
2287
- "type": {
2288
- "text": "DateTime<true> | undefined"
2289
- }
2290
- },
2291
1963
  "parameters": [
2292
1964
  {
2293
- "name": "d",
2294
- "optional": true,
1965
+ "name": "event",
2295
1966
  "type": {
2296
- "text": "string"
1967
+ "text": "Event"
2297
1968
  }
2298
1969
  }
2299
1970
  ]
2300
1971
  },
2301
1972
  {
2302
1973
  "kind": "method",
2303
- "name": "updateValue",
2304
- "privacy": "private",
2305
- "parameters": [
2306
- {
2307
- "name": "emitEvents",
2308
- "default": "true"
2309
- }
2310
- ]
2311
- },
2312
- {
2313
- "kind": "method",
2314
- "name": "handleHeaderSelectChange",
2315
- "privacy": "private",
2316
- "parameters": [
2317
- {
2318
- "name": "ev",
2319
- "type": {
2320
- "text": "FlowChangeEvent"
2321
- }
2322
- }
2323
- ]
2324
- },
2325
- {
2326
- "kind": "method",
2327
- "name": "handleTimeChange",
2328
- "privacy": "private",
2329
- "parameters": [
2330
- {
2331
- "name": "ev",
2332
- "type": {
2333
- "text": "FlowChangeEvent"
2334
- }
2335
- }
2336
- ]
2337
- },
2338
- {
2339
- "kind": "method",
2340
- "name": "calendarHeaderTemplate",
2341
- "privacy": "private"
2342
- },
2343
- {
2344
- "kind": "method",
2345
- "name": "dayOfWeekGridTemplate",
2346
- "privacy": "private"
2347
- },
2348
- {
2349
- "kind": "method",
2350
- "name": "dayGridTemplate",
2351
- "privacy": "private"
2352
- },
2353
- {
2354
- "kind": "method",
2355
- "name": "timeTemplate",
1974
+ "name": "handleSlotChange",
2356
1975
  "privacy": "private"
2357
1976
  }
2358
1977
  ],
2359
1978
  "attributes": [
2360
1979
  {
2361
- "name": "value",
1980
+ "name": "label",
2362
1981
  "type": {
2363
1982
  "text": "string"
2364
1983
  },
2365
- "fieldName": "value"
2366
- },
2367
- {
2368
- "name": "display-mode",
2369
- "type": {
2370
- "text": "'date' | 'time' | 'datetime'"
2371
- },
2372
- "default": "'date'",
2373
- "fieldName": "displayMode"
2374
- },
2375
- {
2376
- "name": "timezone",
2377
- "type": {
2378
- "text": "string | undefined"
2379
- },
2380
- "fieldName": "timezone"
2381
- },
2382
- {
2383
- "name": "locale",
2384
- "type": {
2385
- "text": "string | undefined"
2386
- },
2387
- "fieldName": "locale"
1984
+ "default": "''",
1985
+ "fieldName": "label"
2388
1986
  },
2389
1987
  {
2390
- "name": "size",
1988
+ "name": "vertical",
2391
1989
  "type": {
2392
- "text": "'small' | 'medium' | 'large'"
1990
+ "text": "boolean"
2393
1991
  },
2394
- "default": "'medium'",
2395
- "fieldName": "size"
1992
+ "default": "false",
1993
+ "description": "Use vertical layout for the button group.",
1994
+ "fieldName": "vertical"
2396
1995
  }
2397
1996
  ],
2398
1997
  "superclass": {
2399
1998
  "name": "FlowRdfElement",
2400
1999
  "module": "/src/internal/flow-ui-rdf-element"
2401
2000
  },
2402
- "tagName": "flow-ui-calendar",
2403
- "summary": "A calendar component for selecting dates and times.",
2001
+ "summary": "Button groups can be used to group related buttons into sections.",
2002
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button-group",
2003
+ "status": "stable",
2004
+ "since": "2.0",
2005
+ "tagName": "flow-ui-button-group",
2404
2006
  "customElement": true
2405
2007
  }
2406
2008
  ],
@@ -2409,119 +2011,115 @@
2409
2011
  "kind": "js",
2410
2012
  "name": "default",
2411
2013
  "declaration": {
2412
- "name": "FlowCalendar",
2413
- "module": "components/calendar/calendar.component.js"
2414
- }
2415
- }
2416
- ]
2417
- },
2418
- {
2419
- "kind": "javascript-module",
2420
- "path": "components/calendar/calendar.js",
2421
- "declarations": [],
2422
- "exports": [
2423
- {
2424
- "kind": "js",
2425
- "name": "*",
2426
- "declaration": {
2427
- "name": "*",
2428
- "package": "./calendar.component.js"
2014
+ "name": "FlowButtonGroup",
2015
+ "module": "components/button-group/button-group.js"
2429
2016
  }
2430
2017
  },
2431
2018
  {
2432
- "kind": "js",
2433
- "name": "default",
2019
+ "kind": "custom-element-definition",
2020
+ "name": "flow-ui-button-group",
2434
2021
  "declaration": {
2435
- "name": "FlowCalendar",
2436
- "module": "components/calendar/calendar.js"
2022
+ "name": "FlowButtonGroup",
2023
+ "module": "components/button-group/button-group.js"
2437
2024
  }
2438
2025
  }
2439
2026
  ]
2440
2027
  },
2441
2028
  {
2442
2029
  "kind": "javascript-module",
2443
- "path": "components/card/card.js",
2030
+ "path": "components/breadcrumb/breadcrumb.js",
2444
2031
  "declarations": [
2445
2032
  {
2446
2033
  "kind": "class",
2447
2034
  "description": "",
2448
- "name": "FlowCard",
2449
- "cssProperties": [
2450
- {
2451
- "description": "The card's border color, including borders that occur inside the card.",
2452
- "name": "--border-color"
2453
- },
2035
+ "name": "FlowBreadcrumb",
2036
+ "cssParts": [
2454
2037
  {
2455
- "description": "The border radius for the card's edges.",
2456
- "name": "--border-radius"
2457
- },
2038
+ "description": "The component's base wrapper.",
2039
+ "name": "base"
2040
+ }
2041
+ ],
2042
+ "slots": [
2458
2043
  {
2459
- "description": "The width of the card's borders.",
2460
- "name": "--border-width"
2044
+ "description": "One or more breadcrumb items to display.",
2045
+ "name": ""
2461
2046
  },
2462
2047
  {
2463
- "description": "The padding to use for the card's sections.",
2464
- "name": "--padding"
2048
+ "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
2049
+ "name": "separator"
2465
2050
  }
2466
2051
  ],
2467
- "cssParts": [
2468
- {
2469
- "description": "The component's base wrapper.",
2470
- "name": "base"
2471
- },
2052
+ "members": [
2472
2053
  {
2473
- "description": "The container that wraps the card's image.",
2474
- "name": "image"
2054
+ "kind": "field",
2055
+ "name": "localize",
2056
+ "privacy": "private",
2057
+ "readonly": true,
2058
+ "default": "new LocalizeController(this)"
2475
2059
  },
2476
2060
  {
2477
- "description": "The container that wraps the card's header.",
2478
- "name": "header"
2061
+ "kind": "field",
2062
+ "name": "separatorDir",
2063
+ "privacy": "private"
2479
2064
  },
2480
2065
  {
2481
- "description": "The container that wraps the card's main content.",
2482
- "name": "body"
2066
+ "kind": "field",
2067
+ "name": "defaultSlot",
2068
+ "type": {
2069
+ "text": "HTMLSlotElement"
2070
+ }
2483
2071
  },
2484
2072
  {
2485
- "description": "The container that wraps the card's footer.",
2486
- "name": "footer"
2487
- }
2488
- ],
2489
- "slots": [
2490
- {
2491
- "description": "The card's main content.",
2492
- "name": ""
2073
+ "kind": "field",
2074
+ "name": "separatorSlot",
2075
+ "type": {
2076
+ "text": "HTMLSlotElement"
2077
+ }
2493
2078
  },
2494
2079
  {
2495
- "description": "An optional header for the card.",
2496
- "name": "header"
2080
+ "kind": "field",
2081
+ "name": "label",
2082
+ "type": {
2083
+ "text": "string"
2084
+ },
2085
+ "default": "''",
2086
+ "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.",
2087
+ "attribute": "label"
2497
2088
  },
2498
2089
  {
2499
- "description": "An optional footer for the card.",
2500
- "name": "footer"
2090
+ "kind": "method",
2091
+ "name": "getSeparator",
2092
+ "privacy": "private"
2501
2093
  },
2502
2094
  {
2503
- "description": "An optional image to render at the start of the card.",
2504
- "name": "image"
2095
+ "kind": "method",
2096
+ "name": "handleSlotChange",
2097
+ "privacy": "private"
2505
2098
  }
2506
2099
  ],
2507
- "members": [
2100
+ "attributes": [
2508
2101
  {
2509
- "kind": "field",
2510
- "name": "hasSlotController",
2511
- "privacy": "private",
2512
- "readonly": true,
2513
- "default": "new HasSlotController(this, 'footer', 'header', 'image')"
2102
+ "name": "label",
2103
+ "type": {
2104
+ "text": "string"
2105
+ },
2106
+ "default": "''",
2107
+ "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.",
2108
+ "fieldName": "label"
2514
2109
  }
2515
2110
  ],
2516
2111
  "superclass": {
2517
2112
  "name": "FlowRdfElement",
2518
2113
  "module": "/src/internal/flow-ui-rdf-element"
2519
2114
  },
2520
- "summary": "Cards can be used to group related subjects in a container.",
2521
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/card",
2115
+ "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
2116
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
2522
2117
  "status": "stable",
2523
2118
  "since": "2.0",
2524
- "tagName": "flow-ui-card",
2119
+ "dependencies": [
2120
+ "flow-ui-icon"
2121
+ ],
2122
+ "tagName": "flow-ui-breadcrumb",
2525
2123
  "customElement": true
2526
2124
  }
2527
2125
  ],
@@ -2530,160 +2128,562 @@
2530
2128
  "kind": "js",
2531
2129
  "name": "default",
2532
2130
  "declaration": {
2533
- "name": "FlowCard",
2534
- "module": "components/card/card.js"
2131
+ "name": "FlowBreadcrumb",
2132
+ "module": "components/breadcrumb/breadcrumb.js"
2535
2133
  }
2536
2134
  },
2537
2135
  {
2538
2136
  "kind": "custom-element-definition",
2539
- "name": "flow-ui-card",
2137
+ "name": "flow-ui-breadcrumb",
2540
2138
  "declaration": {
2541
- "name": "FlowCard",
2542
- "module": "components/card/card.js"
2139
+ "name": "FlowBreadcrumb",
2140
+ "module": "components/breadcrumb/breadcrumb.js"
2543
2141
  }
2544
2142
  }
2545
2143
  ]
2546
2144
  },
2547
2145
  {
2548
2146
  "kind": "javascript-module",
2549
- "path": "components/carousel/autoplay-controller.js",
2147
+ "path": "components/calendar/calendar.component.js",
2550
2148
  "declarations": [
2551
2149
  {
2552
2150
  "kind": "class",
2553
- "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
2554
- "name": "AutoplayController",
2151
+ "description": "",
2152
+ "name": "FlowCalendar",
2555
2153
  "members": [
2556
2154
  {
2557
2155
  "kind": "field",
2558
- "name": "host",
2156
+ "name": "_monthSelect",
2559
2157
  "type": {
2560
- "text": "ReactiveElement"
2158
+ "text": "FlowSelect"
2561
2159
  },
2562
- "privacy": "private",
2563
- "default": "host"
2160
+ "privacy": "private"
2564
2161
  },
2565
2162
  {
2566
2163
  "kind": "field",
2567
- "name": "timerId",
2164
+ "name": "_yearSelect",
2568
2165
  "type": {
2569
- "text": "number"
2166
+ "text": "FlowSelect"
2570
2167
  },
2571
- "privacy": "private",
2572
- "default": "0"
2168
+ "privacy": "private"
2573
2169
  },
2574
2170
  {
2575
2171
  "kind": "field",
2576
- "name": "tickCallback",
2172
+ "name": "_displayDate",
2577
2173
  "type": {
2578
- "text": "() => void"
2174
+ "text": "DateTime<true>"
2579
2175
  },
2580
- "privacy": "private",
2581
- "default": "tickCallback"
2176
+ "privacy": "private"
2582
2177
  },
2583
2178
  {
2584
2179
  "kind": "field",
2585
- "name": "activeInteractions",
2180
+ "name": "_selectedDate",
2586
2181
  "type": {
2587
- "text": "number"
2182
+ "text": "DateTime<true> | undefined"
2588
2183
  },
2589
- "privacy": "private",
2590
- "default": "0"
2184
+ "privacy": "private"
2591
2185
  },
2592
2186
  {
2593
2187
  "kind": "field",
2594
- "name": "paused",
2188
+ "name": "value",
2595
2189
  "type": {
2596
- "text": "boolean"
2190
+ "text": "string"
2597
2191
  },
2598
- "default": "false"
2192
+ "attribute": "value",
2193
+ "reflects": true
2599
2194
  },
2600
2195
  {
2601
2196
  "kind": "field",
2602
- "name": "stopped",
2197
+ "name": "displayMode",
2603
2198
  "type": {
2604
- "text": "boolean"
2199
+ "text": "'date' | 'time' | 'datetime'"
2605
2200
  },
2606
- "default": "true"
2201
+ "default": "'date'",
2202
+ "attribute": "display-mode"
2203
+ },
2204
+ {
2205
+ "kind": "field",
2206
+ "name": "timezone",
2207
+ "type": {
2208
+ "text": "string | undefined"
2209
+ },
2210
+ "attribute": "timezone"
2211
+ },
2212
+ {
2213
+ "kind": "field",
2214
+ "name": "locale",
2215
+ "type": {
2216
+ "text": "string | undefined"
2217
+ },
2218
+ "attribute": "locale"
2219
+ },
2220
+ {
2221
+ "kind": "field",
2222
+ "name": "size",
2223
+ "type": {
2224
+ "text": "'small' | 'medium' | 'large'"
2225
+ },
2226
+ "default": "'medium'",
2227
+ "attribute": "size"
2607
2228
  },
2608
2229
  {
2609
2230
  "kind": "method",
2610
- "name": "hostConnected",
2231
+ "name": "handleValueChange"
2232
+ },
2233
+ {
2234
+ "kind": "method",
2235
+ "name": "handleTimezoneChange"
2236
+ },
2237
+ {
2238
+ "kind": "method",
2239
+ "name": "dateClicked",
2240
+ "privacy": "private",
2241
+ "parameters": [
2242
+ {
2243
+ "name": "val",
2244
+ "type": {
2245
+ "text": "string"
2246
+ }
2247
+ }
2248
+ ]
2249
+ },
2250
+ {
2251
+ "kind": "method",
2252
+ "name": "stepDisplayDate",
2253
+ "privacy": "private",
2254
+ "parameters": [
2255
+ {
2256
+ "name": "duration",
2257
+ "type": {
2258
+ "text": "DurationLike"
2259
+ }
2260
+ }
2261
+ ]
2262
+ },
2263
+ {
2264
+ "kind": "method",
2265
+ "name": "yearOptionsForDate",
2266
+ "privacy": "private",
2611
2267
  "return": {
2612
2268
  "type": {
2613
- "text": "void"
2269
+ "text": "number[]"
2614
2270
  }
2615
- }
2271
+ },
2272
+ "parameters": [
2273
+ {
2274
+ "name": "date",
2275
+ "type": {
2276
+ "text": "DateTime"
2277
+ }
2278
+ }
2279
+ ],
2280
+ "description": "Generate a list of years for the year select dropdown"
2616
2281
  },
2617
2282
  {
2618
2283
  "kind": "method",
2619
- "name": "hostDisconnected",
2284
+ "name": "makeDate",
2285
+ "privacy": "private",
2620
2286
  "return": {
2621
2287
  "type": {
2622
- "text": "void"
2288
+ "text": "DateTime<true> | undefined"
2623
2289
  }
2624
- }
2290
+ },
2291
+ "parameters": [
2292
+ {
2293
+ "name": "d",
2294
+ "optional": true,
2295
+ "type": {
2296
+ "text": "string"
2297
+ }
2298
+ }
2299
+ ]
2625
2300
  },
2626
2301
  {
2627
2302
  "kind": "method",
2628
- "name": "start",
2303
+ "name": "updateValue",
2304
+ "privacy": "private",
2629
2305
  "parameters": [
2630
2306
  {
2631
- "name": "interval",
2307
+ "name": "emitEvents",
2308
+ "default": "true"
2309
+ }
2310
+ ]
2311
+ },
2312
+ {
2313
+ "kind": "method",
2314
+ "name": "handleHeaderSelectChange",
2315
+ "privacy": "private",
2316
+ "parameters": [
2317
+ {
2318
+ "name": "ev",
2632
2319
  "type": {
2633
- "text": "number"
2320
+ "text": "FlowChangeEvent"
2634
2321
  }
2635
2322
  }
2636
2323
  ]
2637
2324
  },
2638
2325
  {
2639
2326
  "kind": "method",
2640
- "name": "stop"
2327
+ "name": "handleTimeChange",
2328
+ "privacy": "private",
2329
+ "parameters": [
2330
+ {
2331
+ "name": "ev",
2332
+ "type": {
2333
+ "text": "FlowChangeEvent"
2334
+ }
2335
+ }
2336
+ ]
2641
2337
  },
2642
2338
  {
2643
- "kind": "field",
2644
- "name": "pause"
2339
+ "kind": "method",
2340
+ "name": "calendarHeaderTemplate",
2341
+ "privacy": "private"
2645
2342
  },
2646
2343
  {
2647
- "kind": "field",
2648
- "name": "resume"
2344
+ "kind": "method",
2345
+ "name": "dayOfWeekGridTemplate",
2346
+ "privacy": "private"
2347
+ },
2348
+ {
2349
+ "kind": "method",
2350
+ "name": "dayGridTemplate",
2351
+ "privacy": "private"
2352
+ },
2353
+ {
2354
+ "kind": "method",
2355
+ "name": "timeTemplate",
2356
+ "privacy": "private"
2649
2357
  }
2650
- ]
2358
+ ],
2359
+ "attributes": [
2360
+ {
2361
+ "name": "value",
2362
+ "type": {
2363
+ "text": "string"
2364
+ },
2365
+ "fieldName": "value"
2366
+ },
2367
+ {
2368
+ "name": "display-mode",
2369
+ "type": {
2370
+ "text": "'date' | 'time' | 'datetime'"
2371
+ },
2372
+ "default": "'date'",
2373
+ "fieldName": "displayMode"
2374
+ },
2375
+ {
2376
+ "name": "timezone",
2377
+ "type": {
2378
+ "text": "string | undefined"
2379
+ },
2380
+ "fieldName": "timezone"
2381
+ },
2382
+ {
2383
+ "name": "locale",
2384
+ "type": {
2385
+ "text": "string | undefined"
2386
+ },
2387
+ "fieldName": "locale"
2388
+ },
2389
+ {
2390
+ "name": "size",
2391
+ "type": {
2392
+ "text": "'small' | 'medium' | 'large'"
2393
+ },
2394
+ "default": "'medium'",
2395
+ "fieldName": "size"
2396
+ }
2397
+ ],
2398
+ "superclass": {
2399
+ "name": "FlowRdfElement",
2400
+ "module": "/src/internal/flow-ui-rdf-element"
2401
+ },
2402
+ "tagName": "flow-ui-calendar",
2403
+ "summary": "A calendar component for selecting dates and times.",
2404
+ "customElement": true
2651
2405
  }
2652
2406
  ],
2653
2407
  "exports": [
2654
2408
  {
2655
2409
  "kind": "js",
2656
- "name": "AutoplayController",
2410
+ "name": "default",
2657
2411
  "declaration": {
2658
- "name": "AutoplayController",
2659
- "module": "components/carousel/autoplay-controller.js"
2412
+ "name": "FlowCalendar",
2413
+ "module": "components/calendar/calendar.component.js"
2660
2414
  }
2661
2415
  }
2662
2416
  ]
2663
2417
  },
2664
2418
  {
2665
2419
  "kind": "javascript-module",
2666
- "path": "components/carousel/carousel.js",
2420
+ "path": "components/calendar/calendar.js",
2421
+ "declarations": [],
2422
+ "exports": [
2423
+ {
2424
+ "kind": "js",
2425
+ "name": "*",
2426
+ "declaration": {
2427
+ "name": "*",
2428
+ "package": "./calendar.component.js"
2429
+ }
2430
+ },
2431
+ {
2432
+ "kind": "js",
2433
+ "name": "default",
2434
+ "declaration": {
2435
+ "name": "FlowCalendar",
2436
+ "module": "components/calendar/calendar.js"
2437
+ }
2438
+ }
2439
+ ]
2440
+ },
2441
+ {
2442
+ "kind": "javascript-module",
2443
+ "path": "components/card/card.js",
2667
2444
  "declarations": [
2668
2445
  {
2669
2446
  "kind": "class",
2670
2447
  "description": "",
2671
- "name": "FlowCarousel",
2448
+ "name": "FlowCard",
2672
2449
  "cssProperties": [
2673
2450
  {
2674
- "description": "The space between each slide.",
2675
- "name": "--slide-gap"
2451
+ "description": "The card's border color, including borders that occur inside the card.",
2452
+ "name": "--border-color"
2676
2453
  },
2677
2454
  {
2678
- "description": "The aspect ratio of each slide.",
2679
- "name": "--aspect-ratio"
2455
+ "description": "The border radius for the card's edges.",
2456
+ "name": "--border-radius"
2680
2457
  },
2681
2458
  {
2682
- "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
2683
- "name": "--scroll-hint"
2684
- }
2685
- ],
2686
- "cssParts": [
2459
+ "description": "The width of the card's borders.",
2460
+ "name": "--border-width"
2461
+ },
2462
+ {
2463
+ "description": "The padding to use for the card's sections.",
2464
+ "name": "--padding"
2465
+ }
2466
+ ],
2467
+ "cssParts": [
2468
+ {
2469
+ "description": "The component's base wrapper.",
2470
+ "name": "base"
2471
+ },
2472
+ {
2473
+ "description": "The container that wraps the card's image.",
2474
+ "name": "image"
2475
+ },
2476
+ {
2477
+ "description": "The container that wraps the card's header.",
2478
+ "name": "header"
2479
+ },
2480
+ {
2481
+ "description": "The container that wraps the card's main content.",
2482
+ "name": "body"
2483
+ },
2484
+ {
2485
+ "description": "The container that wraps the card's footer.",
2486
+ "name": "footer"
2487
+ }
2488
+ ],
2489
+ "slots": [
2490
+ {
2491
+ "description": "The card's main content.",
2492
+ "name": ""
2493
+ },
2494
+ {
2495
+ "description": "An optional header for the card.",
2496
+ "name": "header"
2497
+ },
2498
+ {
2499
+ "description": "An optional footer for the card.",
2500
+ "name": "footer"
2501
+ },
2502
+ {
2503
+ "description": "An optional image to render at the start of the card.",
2504
+ "name": "image"
2505
+ }
2506
+ ],
2507
+ "members": [
2508
+ {
2509
+ "kind": "field",
2510
+ "name": "hasSlotController",
2511
+ "privacy": "private",
2512
+ "readonly": true,
2513
+ "default": "new HasSlotController(this, 'footer', 'header', 'image')"
2514
+ }
2515
+ ],
2516
+ "superclass": {
2517
+ "name": "FlowRdfElement",
2518
+ "module": "/src/internal/flow-ui-rdf-element"
2519
+ },
2520
+ "summary": "Cards can be used to group related subjects in a container.",
2521
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/card",
2522
+ "status": "stable",
2523
+ "since": "2.0",
2524
+ "tagName": "flow-ui-card",
2525
+ "customElement": true
2526
+ }
2527
+ ],
2528
+ "exports": [
2529
+ {
2530
+ "kind": "js",
2531
+ "name": "default",
2532
+ "declaration": {
2533
+ "name": "FlowCard",
2534
+ "module": "components/card/card.js"
2535
+ }
2536
+ },
2537
+ {
2538
+ "kind": "custom-element-definition",
2539
+ "name": "flow-ui-card",
2540
+ "declaration": {
2541
+ "name": "FlowCard",
2542
+ "module": "components/card/card.js"
2543
+ }
2544
+ }
2545
+ ]
2546
+ },
2547
+ {
2548
+ "kind": "javascript-module",
2549
+ "path": "components/carousel/autoplay-controller.js",
2550
+ "declarations": [
2551
+ {
2552
+ "kind": "class",
2553
+ "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
2554
+ "name": "AutoplayController",
2555
+ "members": [
2556
+ {
2557
+ "kind": "field",
2558
+ "name": "host",
2559
+ "type": {
2560
+ "text": "ReactiveElement"
2561
+ },
2562
+ "privacy": "private",
2563
+ "default": "host"
2564
+ },
2565
+ {
2566
+ "kind": "field",
2567
+ "name": "timerId",
2568
+ "type": {
2569
+ "text": "number"
2570
+ },
2571
+ "privacy": "private",
2572
+ "default": "0"
2573
+ },
2574
+ {
2575
+ "kind": "field",
2576
+ "name": "tickCallback",
2577
+ "type": {
2578
+ "text": "() => void"
2579
+ },
2580
+ "privacy": "private",
2581
+ "default": "tickCallback"
2582
+ },
2583
+ {
2584
+ "kind": "field",
2585
+ "name": "activeInteractions",
2586
+ "type": {
2587
+ "text": "number"
2588
+ },
2589
+ "privacy": "private",
2590
+ "default": "0"
2591
+ },
2592
+ {
2593
+ "kind": "field",
2594
+ "name": "paused",
2595
+ "type": {
2596
+ "text": "boolean"
2597
+ },
2598
+ "default": "false"
2599
+ },
2600
+ {
2601
+ "kind": "field",
2602
+ "name": "stopped",
2603
+ "type": {
2604
+ "text": "boolean"
2605
+ },
2606
+ "default": "true"
2607
+ },
2608
+ {
2609
+ "kind": "method",
2610
+ "name": "hostConnected",
2611
+ "return": {
2612
+ "type": {
2613
+ "text": "void"
2614
+ }
2615
+ }
2616
+ },
2617
+ {
2618
+ "kind": "method",
2619
+ "name": "hostDisconnected",
2620
+ "return": {
2621
+ "type": {
2622
+ "text": "void"
2623
+ }
2624
+ }
2625
+ },
2626
+ {
2627
+ "kind": "method",
2628
+ "name": "start",
2629
+ "parameters": [
2630
+ {
2631
+ "name": "interval",
2632
+ "type": {
2633
+ "text": "number"
2634
+ }
2635
+ }
2636
+ ]
2637
+ },
2638
+ {
2639
+ "kind": "method",
2640
+ "name": "stop"
2641
+ },
2642
+ {
2643
+ "kind": "field",
2644
+ "name": "pause"
2645
+ },
2646
+ {
2647
+ "kind": "field",
2648
+ "name": "resume"
2649
+ }
2650
+ ]
2651
+ }
2652
+ ],
2653
+ "exports": [
2654
+ {
2655
+ "kind": "js",
2656
+ "name": "AutoplayController",
2657
+ "declaration": {
2658
+ "name": "AutoplayController",
2659
+ "module": "components/carousel/autoplay-controller.js"
2660
+ }
2661
+ }
2662
+ ]
2663
+ },
2664
+ {
2665
+ "kind": "javascript-module",
2666
+ "path": "components/carousel/carousel.js",
2667
+ "declarations": [
2668
+ {
2669
+ "kind": "class",
2670
+ "description": "",
2671
+ "name": "FlowCarousel",
2672
+ "cssProperties": [
2673
+ {
2674
+ "description": "The space between each slide.",
2675
+ "name": "--slide-gap"
2676
+ },
2677
+ {
2678
+ "description": "The aspect ratio of each slide.",
2679
+ "name": "--aspect-ratio"
2680
+ },
2681
+ {
2682
+ "description": "The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.",
2683
+ "name": "--scroll-hint"
2684
+ }
2685
+ ],
2686
+ "cssParts": [
2687
2687
  {
2688
2688
  "description": "The carousel's internal wrapper.",
2689
2689
  "name": "base"
@@ -3368,296 +3368,24 @@
3368
3368
  "since": "2.0",
3369
3369
  "status": "experimental",
3370
3370
  "tagName": "flow-ui-carousel-item",
3371
- "customElement": true
3372
- }
3373
- ],
3374
- "exports": [
3375
- {
3376
- "kind": "js",
3377
- "name": "default",
3378
- "declaration": {
3379
- "name": "FlowCarouselItem",
3380
- "module": "components/carousel-item/carousel-item.js"
3381
- }
3382
- },
3383
- {
3384
- "kind": "custom-element-definition",
3385
- "name": "flow-ui-carousel-item",
3386
- "declaration": {
3387
- "name": "FlowCarouselItem",
3388
- "module": "components/carousel-item/carousel-item.js"
3389
- }
3390
- }
3391
- ]
3392
- },
3393
- {
3394
- "kind": "javascript-module",
3395
- "path": "components/chart/chart.component.js",
3396
- "declarations": [
3397
- {
3398
- "kind": "class",
3399
- "description": "The chart component is a container for [Chart.js](https://www.chartjs.org/) charts. The component\nsupplies additional Flow RDF UI features including:\n\n- Consistent theming with other flow-rdf-ui components.\n- Additional plugins and charts types for commonly-used charts.\n- Convenience child components (`flow-ui-chart-data` and `flow-ui-chart-scale`) for defining chart data and scales.",
3400
- "name": "FlowChart",
3401
- "cssProperties": [
3402
- {
3403
- "description": "Chart background color (applied as the background color of the base container).",
3404
- "name": "--background-color"
3405
- },
3406
- {
3407
- "description": "General text color (titles etc.)",
3408
- "name": "--text-color"
3409
- },
3410
- {
3411
- "description": "Color of the axis lines.",
3412
- "name": "--axis-color"
3413
- },
3414
- {
3415
- "description": "Color of the x-axis lines. (defaults to `--axis-color`)",
3416
- "name": "--x-axis-color"
3417
- },
3418
- {
3419
- "description": "Color of the y-axis lines. (defaults to `--axis-color`)",
3420
- "name": "--y-axis-color"
3421
- },
3422
- {
3423
- "description": "Color of the axis grid lines.",
3424
- "name": "--axis-grid-color"
3425
- },
3426
- {
3427
- "description": "Color of the x-axis grid lines. (defaults to `--axis-grid-color`)",
3428
- "name": "--x-axis-grid-color"
3429
- },
3430
- {
3431
- "description": "Color of the y-axis grid lines. (defaults to `--axis-grid-color`)",
3432
- "name": "--y-axis-grid-color"
3433
- },
3434
- {
3435
- "description": "Color of the axis labels.",
3436
- "name": "--axis-label-color"
3437
- },
3438
- {
3439
- "description": "Color of the x-axis labels. (defaults to `--axis-label-color`)",
3440
- "name": "--x-axis-label-color"
3441
- },
3442
- {
3443
- "description": "Color of the y-axis labels. (defaults to `--axis-label-color`)",
3444
- "name": "--y-axis-label-color"
3445
- },
3446
- {
3447
- "description": "Color of the tick labels.",
3448
- "name": "--tick-label-color"
3449
- },
3450
- {
3451
- "description": "Color of the x-axis tick labels. (defaults to `--tick-label-color`)",
3452
- "name": "--x-tick-label-color"
3453
- },
3454
- {
3455
- "description": "Color of the y-axis tick labels. (defaults to `--tick-label-color`)",
3456
- "name": "--y-tick-label-color"
3457
- },
3458
- {
3459
- "description": "Color of the stroke for dataset n (where n = 0-9).",
3460
- "name": "--dataset-stroke-color-n"
3461
- },
3462
- {
3463
- "description": "Color of the fill for dataset n (where n = 0-9).",
3464
- "name": "--dataset-fill-color-n"
3465
- }
3466
- ],
3467
- "cssParts": [
3468
- {
3469
- "description": "The base container of the chart.",
3470
- "name": "base"
3471
- }
3472
- ],
3473
- "members": [
3474
- {
3475
- "kind": "field",
3476
- "name": "_chartRef",
3477
- "type": {
3478
- "text": "Ref<HTMLCanvasElement>"
3479
- },
3480
- "privacy": "private"
3481
- },
3482
- {
3483
- "kind": "field",
3484
- "name": "_chart",
3485
- "type": {
3486
- "text": "Chart | undefined"
3487
- },
3488
- "privacy": "private"
3489
- },
3490
- {
3491
- "kind": "field",
3492
- "name": "chart",
3493
- "description": "The Chart.js chart instance.",
3494
- "readonly": true
3495
- },
3496
- {
3497
- "kind": "field",
3498
- "name": "type",
3499
- "type": {
3500
- "text": "string"
3501
- },
3502
- "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
3503
- "attribute": "type"
3504
- },
3505
- {
3506
- "kind": "field",
3507
- "name": "options",
3508
- "type": {
3509
- "text": "ChartOptions"
3510
- },
3511
- "description": "The Chart.js `options` object.",
3512
- "attribute": "options"
3513
- },
3514
- {
3515
- "kind": "field",
3516
- "name": "data",
3517
- "type": {
3518
- "text": "ChartData"
3519
- },
3520
- "description": "The Chart.js `data` object",
3521
- "attribute": "data"
3522
- },
3523
- {
3524
- "kind": "field",
3525
- "name": "plugins",
3526
- "type": {
3527
- "text": "Plugin[]"
3528
- },
3529
- "default": "[]",
3530
- "description": "List of extra plugins to use for this chart.",
3531
- "attribute": "plugins"
3532
- },
3533
- {
3534
- "kind": "method",
3535
- "name": "repaint",
3536
- "description": "Trigger a repaint of the chart."
3537
- }
3538
- ],
3539
- "attributes": [
3540
- {
3541
- "name": "type",
3542
- "type": {
3543
- "text": "string"
3544
- },
3545
- "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
3546
- "fieldName": "type"
3547
- },
3548
- {
3549
- "name": "options",
3550
- "type": {
3551
- "text": "ChartOptions"
3552
- },
3553
- "description": "The Chart.js `options` object.",
3554
- "fieldName": "options"
3555
- },
3556
- {
3557
- "name": "data",
3558
- "type": {
3559
- "text": "ChartData"
3560
- },
3561
- "description": "The Chart.js `data` object",
3562
- "fieldName": "data"
3563
- },
3564
- {
3565
- "name": "plugins",
3566
- "type": {
3567
- "text": "Plugin[]"
3568
- },
3569
- "default": "[]",
3570
- "description": "List of extra plugins to use for this chart.",
3571
- "fieldName": "plugins"
3572
- }
3573
- ],
3574
- "superclass": {
3575
- "name": "FlowRdfElement",
3576
- "module": "/src/internal/flow-ui-rdf-element"
3577
- },
3578
- "tagName": "flow-ui-chart",
3579
- "summary": "The chart component displays Chart.js charts.",
3580
- "customElement": true
3581
- }
3582
- ],
3583
- "exports": [
3584
- {
3585
- "kind": "js",
3586
- "name": "default",
3587
- "declaration": {
3588
- "name": "FlowChart",
3589
- "module": "components/chart/chart.component.js"
3590
- }
3591
- }
3592
- ]
3593
- },
3594
- {
3595
- "kind": "javascript-module",
3596
- "path": "components/chart/chart.js",
3597
- "declarations": [],
3598
- "exports": [
3599
- {
3600
- "kind": "js",
3601
- "name": "*",
3602
- "declaration": {
3603
- "name": "*",
3604
- "package": "./chart.component"
3605
- }
3606
- },
3607
- {
3608
- "kind": "js",
3609
- "name": "default",
3610
- "declaration": {
3611
- "name": "FlowChart",
3612
- "module": "components/chart/chart.js"
3613
- }
3614
- }
3615
- ]
3616
- },
3617
- {
3618
- "kind": "javascript-module",
3619
- "path": "components/chart/chartjs-support.js",
3620
- "declarations": [
3621
- {
3622
- "kind": "function",
3623
- "name": "initializeChartJs"
3624
- },
3625
- {
3626
- "kind": "function",
3627
- "name": "registerChartComponent",
3628
- "parameters": [
3629
- {
3630
- "name": "components",
3631
- "type": {
3632
- "text": "ChartComponentLike[]"
3633
- }
3634
- }
3635
- ]
3636
- }
3637
- ],
3638
- "exports": [
3639
- {
3640
- "kind": "js",
3641
- "name": "ChartJs",
3642
- "declaration": {
3643
- "name": "Chart",
3644
- "package": "chart.js"
3645
- }
3646
- },
3371
+ "customElement": true
3372
+ }
3373
+ ],
3374
+ "exports": [
3647
3375
  {
3648
3376
  "kind": "js",
3649
- "name": "initializeChartJs",
3377
+ "name": "default",
3650
3378
  "declaration": {
3651
- "name": "initializeChartJs",
3652
- "module": "components/chart/chartjs-support.js"
3379
+ "name": "FlowCarouselItem",
3380
+ "module": "components/carousel-item/carousel-item.js"
3653
3381
  }
3654
3382
  },
3655
3383
  {
3656
- "kind": "js",
3657
- "name": "registerChartComponent",
3384
+ "kind": "custom-element-definition",
3385
+ "name": "flow-ui-carousel-item",
3658
3386
  "declaration": {
3659
- "name": "registerChartComponent",
3660
- "module": "components/chart/chartjs-support.js"
3387
+ "name": "FlowCarouselItem",
3388
+ "module": "components/carousel-item/carousel-item.js"
3661
3389
  }
3662
3390
  }
3663
3391
  ]
@@ -6409,141 +6137,398 @@
6409
6137
  "fieldName": "format"
6410
6138
  },
6411
6139
  {
6412
- "name": "timezone",
6140
+ "name": "timezone",
6141
+ "type": {
6142
+ "text": "string | undefined"
6143
+ },
6144
+ "fieldName": "timezone"
6145
+ },
6146
+ {
6147
+ "name": "locale",
6148
+ "type": {
6149
+ "text": "string | undefined"
6150
+ },
6151
+ "fieldName": "locale"
6152
+ },
6153
+ {
6154
+ "name": "size",
6155
+ "type": {
6156
+ "text": "'small' | 'medium' | 'large'"
6157
+ },
6158
+ "default": "'medium'",
6159
+ "description": "The select's size.",
6160
+ "fieldName": "size"
6161
+ },
6162
+ {
6163
+ "name": "placeholder",
6164
+ "type": {
6165
+ "text": "string"
6166
+ },
6167
+ "default": "''",
6168
+ "description": "Placeholder text to show as a hint when the select is empty.",
6169
+ "fieldName": "placeholder"
6170
+ },
6171
+ {
6172
+ "name": "disabled",
6173
+ "type": {
6174
+ "text": "boolean"
6175
+ },
6176
+ "default": "false",
6177
+ "description": "Disables the select control.",
6178
+ "fieldName": "disabled"
6179
+ },
6180
+ {
6181
+ "name": "clearable",
6182
+ "type": {
6183
+ "text": "boolean"
6184
+ },
6185
+ "default": "false",
6186
+ "description": "Adds a clear button when the select is not empty.",
6187
+ "fieldName": "clearable"
6188
+ },
6189
+ {
6190
+ "name": "open",
6191
+ "type": {
6192
+ "text": "boolean"
6193
+ },
6194
+ "default": "false",
6195
+ "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
6196
+ "fieldName": "open"
6197
+ },
6198
+ {
6199
+ "name": "hoist",
6200
+ "type": {
6201
+ "text": "boolean"
6202
+ },
6203
+ "default": "false",
6204
+ "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
6205
+ "fieldName": "hoist"
6206
+ },
6207
+ {
6208
+ "name": "filled",
6209
+ "type": {
6210
+ "text": "boolean"
6211
+ },
6212
+ "default": "false",
6213
+ "description": "Draws a filled select.",
6214
+ "fieldName": "filled"
6215
+ },
6216
+ {
6217
+ "name": "pill",
6218
+ "type": {
6219
+ "text": "boolean"
6220
+ },
6221
+ "default": "false",
6222
+ "description": "Draws a pill-style select with rounded edges.",
6223
+ "fieldName": "pill"
6224
+ },
6225
+ {
6226
+ "name": "label",
6227
+ "type": {
6228
+ "text": "string"
6229
+ },
6230
+ "default": "''",
6231
+ "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
6232
+ "fieldName": "label"
6233
+ },
6234
+ {
6235
+ "name": "placement",
6236
+ "type": {
6237
+ "text": "'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-end' | 'bottom-start'"
6238
+ },
6239
+ "default": "'bottom-end'",
6240
+ "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
6241
+ "fieldName": "placement"
6242
+ },
6243
+ {
6244
+ "name": "help-text",
6245
+ "type": {
6246
+ "text": "string"
6247
+ },
6248
+ "default": "''",
6249
+ "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
6250
+ "fieldName": "helpText"
6251
+ },
6252
+ {
6253
+ "name": "form",
6254
+ "type": {
6255
+ "text": "string"
6256
+ },
6257
+ "default": "''",
6258
+ "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.",
6259
+ "fieldName": "form"
6260
+ },
6261
+ {
6262
+ "name": "required",
6263
+ "type": {
6264
+ "text": "boolean"
6265
+ },
6266
+ "default": "false",
6267
+ "description": "The select's required attribute.",
6268
+ "fieldName": "required"
6269
+ }
6270
+ ],
6271
+ "superclass": {
6272
+ "name": "FlowRdfElement",
6273
+ "module": "/src/internal/flow-ui-rdf-element"
6274
+ }
6275
+ }
6276
+ ],
6277
+ "exports": [
6278
+ {
6279
+ "kind": "js",
6280
+ "name": "default",
6281
+ "declaration": {
6282
+ "name": "FlowDatetimePicker",
6283
+ "module": "components/date-time-picker/date-time-picker.component.js"
6284
+ }
6285
+ }
6286
+ ]
6287
+ },
6288
+ {
6289
+ "kind": "javascript-module",
6290
+ "path": "components/date-time-picker/date-time-picker.js",
6291
+ "declarations": [],
6292
+ "exports": [
6293
+ {
6294
+ "kind": "js",
6295
+ "name": "*",
6296
+ "declaration": {
6297
+ "name": "*",
6298
+ "package": "./date-time-picker.component.js"
6299
+ }
6300
+ },
6301
+ {
6302
+ "kind": "js",
6303
+ "name": "default",
6304
+ "declaration": {
6305
+ "name": "FlowDateTimePicker",
6306
+ "module": "components/date-time-picker/date-time-picker.js"
6307
+ }
6308
+ }
6309
+ ]
6310
+ },
6311
+ {
6312
+ "kind": "javascript-module",
6313
+ "path": "components/details/details.js",
6314
+ "declarations": [
6315
+ {
6316
+ "kind": "class",
6317
+ "description": "",
6318
+ "name": "FlowDetails",
6319
+ "cssParts": [
6320
+ {
6321
+ "description": "The component's base wrapper.",
6322
+ "name": "base"
6323
+ },
6324
+ {
6325
+ "description": "The header that wraps both the summary and the expand/collapse icon.",
6326
+ "name": "header"
6327
+ },
6328
+ {
6329
+ "description": "The container that wraps the summary.",
6330
+ "name": "summary"
6331
+ },
6332
+ {
6333
+ "description": "The container that wraps the expand/collapse icons.",
6334
+ "name": "summary-icon"
6335
+ },
6336
+ {
6337
+ "description": "The details content.",
6338
+ "name": "content"
6339
+ }
6340
+ ],
6341
+ "slots": [
6342
+ {
6343
+ "description": "The details' main content.",
6344
+ "name": ""
6345
+ },
6346
+ {
6347
+ "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
6348
+ "name": "summary"
6349
+ },
6350
+ {
6351
+ "description": "Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.",
6352
+ "name": "expand-icon"
6353
+ },
6354
+ {
6355
+ "description": "Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.",
6356
+ "name": "collapse-icon"
6357
+ }
6358
+ ],
6359
+ "members": [
6360
+ {
6361
+ "kind": "field",
6362
+ "name": "localize",
6363
+ "privacy": "private",
6364
+ "readonly": true,
6365
+ "default": "new LocalizeController(this)"
6366
+ },
6367
+ {
6368
+ "kind": "field",
6369
+ "name": "details",
6370
+ "type": {
6371
+ "text": "HTMLElement"
6372
+ }
6373
+ },
6374
+ {
6375
+ "kind": "field",
6376
+ "name": "header",
6377
+ "type": {
6378
+ "text": "HTMLElement"
6379
+ }
6380
+ },
6381
+ {
6382
+ "kind": "field",
6383
+ "name": "body",
6413
6384
  "type": {
6414
- "text": "string | undefined"
6415
- },
6416
- "fieldName": "timezone"
6385
+ "text": "HTMLElement"
6386
+ }
6417
6387
  },
6418
6388
  {
6419
- "name": "locale",
6389
+ "kind": "field",
6390
+ "name": "expandIconSlot",
6420
6391
  "type": {
6421
- "text": "string | undefined"
6422
- },
6423
- "fieldName": "locale"
6392
+ "text": "HTMLSlotElement"
6393
+ }
6424
6394
  },
6425
6395
  {
6426
- "name": "size",
6396
+ "kind": "field",
6397
+ "name": "open",
6427
6398
  "type": {
6428
- "text": "'small' | 'medium' | 'large'"
6399
+ "text": "boolean"
6429
6400
  },
6430
- "default": "'medium'",
6431
- "description": "The select's size.",
6432
- "fieldName": "size"
6401
+ "default": "false",
6402
+ "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
6403
+ "attribute": "open",
6404
+ "reflects": true
6433
6405
  },
6434
6406
  {
6435
- "name": "placeholder",
6407
+ "kind": "field",
6408
+ "name": "summary",
6436
6409
  "type": {
6437
6410
  "text": "string"
6438
6411
  },
6439
- "default": "''",
6440
- "description": "Placeholder text to show as a hint when the select is empty.",
6441
- "fieldName": "placeholder"
6412
+ "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
6413
+ "attribute": "summary"
6442
6414
  },
6443
6415
  {
6416
+ "kind": "field",
6444
6417
  "name": "disabled",
6445
6418
  "type": {
6446
6419
  "text": "boolean"
6447
6420
  },
6448
6421
  "default": "false",
6449
- "description": "Disables the select control.",
6450
- "fieldName": "disabled"
6422
+ "description": "Disables the details so it can't be toggled.",
6423
+ "attribute": "disabled",
6424
+ "reflects": true
6451
6425
  },
6452
6426
  {
6453
- "name": "clearable",
6454
- "type": {
6455
- "text": "boolean"
6456
- },
6457
- "default": "false",
6458
- "description": "Adds a clear button when the select is not empty.",
6459
- "fieldName": "clearable"
6427
+ "kind": "method",
6428
+ "name": "handleSummaryClick",
6429
+ "privacy": "private"
6460
6430
  },
6461
6431
  {
6462
- "name": "open",
6463
- "type": {
6464
- "text": "boolean"
6465
- },
6466
- "default": "false",
6467
- "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
6468
- "fieldName": "open"
6432
+ "kind": "method",
6433
+ "name": "handleSummaryKeyDown",
6434
+ "privacy": "private",
6435
+ "parameters": [
6436
+ {
6437
+ "name": "event",
6438
+ "type": {
6439
+ "text": "KeyboardEvent"
6440
+ }
6441
+ }
6442
+ ]
6469
6443
  },
6470
6444
  {
6471
- "name": "hoist",
6472
- "type": {
6473
- "text": "boolean"
6474
- },
6475
- "default": "false",
6476
- "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
6477
- "fieldName": "hoist"
6445
+ "kind": "method",
6446
+ "name": "handleOpenChange"
6478
6447
  },
6479
6448
  {
6480
- "name": "filled",
6481
- "type": {
6482
- "text": "boolean"
6483
- },
6484
- "default": "false",
6485
- "description": "Draws a filled select.",
6486
- "fieldName": "filled"
6449
+ "kind": "method",
6450
+ "name": "show",
6451
+ "description": "Shows the details."
6487
6452
  },
6488
6453
  {
6489
- "name": "pill",
6490
- "type": {
6491
- "text": "boolean"
6492
- },
6493
- "default": "false",
6494
- "description": "Draws a pill-style select with rounded edges.",
6495
- "fieldName": "pill"
6454
+ "kind": "method",
6455
+ "name": "hide",
6456
+ "description": "Hides the details"
6457
+ }
6458
+ ],
6459
+ "events": [
6460
+ {
6461
+ "description": "Emitted when the details opens.",
6462
+ "name": "flow-ui-show",
6463
+ "reactName": "onFlowUiShow"
6496
6464
  },
6497
6465
  {
6498
- "name": "label",
6499
- "type": {
6500
- "text": "string"
6501
- },
6502
- "default": "''",
6503
- "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
6504
- "fieldName": "label"
6466
+ "description": "Emitted after the details opens and all animations are complete.",
6467
+ "name": "flow-ui-after-show",
6468
+ "reactName": "onFlowUiAfterShow"
6505
6469
  },
6506
6470
  {
6507
- "name": "placement",
6508
- "type": {
6509
- "text": "'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-end' | 'bottom-start'"
6510
- },
6511
- "default": "'bottom-end'",
6512
- "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
6513
- "fieldName": "placement"
6471
+ "description": "Emitted when the details closes.",
6472
+ "name": "flow-ui-hide",
6473
+ "reactName": "onFlowUiHide"
6514
6474
  },
6515
6475
  {
6516
- "name": "help-text",
6476
+ "description": "Emitted after the details closes and all animations are complete.",
6477
+ "name": "flow-ui-after-hide",
6478
+ "reactName": "onFlowUiAfterHide"
6479
+ }
6480
+ ],
6481
+ "attributes": [
6482
+ {
6483
+ "name": "open",
6517
6484
  "type": {
6518
- "text": "string"
6485
+ "text": "boolean"
6519
6486
  },
6520
- "default": "''",
6521
- "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
6522
- "fieldName": "helpText"
6487
+ "default": "false",
6488
+ "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
6489
+ "fieldName": "open"
6523
6490
  },
6524
6491
  {
6525
- "name": "form",
6492
+ "name": "summary",
6526
6493
  "type": {
6527
6494
  "text": "string"
6528
6495
  },
6529
- "default": "''",
6530
- "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.",
6531
- "fieldName": "form"
6496
+ "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
6497
+ "fieldName": "summary"
6532
6498
  },
6533
6499
  {
6534
- "name": "required",
6500
+ "name": "disabled",
6535
6501
  "type": {
6536
6502
  "text": "boolean"
6537
6503
  },
6538
6504
  "default": "false",
6539
- "description": "The select's required attribute.",
6540
- "fieldName": "required"
6505
+ "description": "Disables the details so it can't be toggled.",
6506
+ "fieldName": "disabled"
6541
6507
  }
6542
6508
  ],
6543
6509
  "superclass": {
6544
6510
  "name": "FlowRdfElement",
6545
6511
  "module": "/src/internal/flow-ui-rdf-element"
6546
- }
6512
+ },
6513
+ "summary": "Details show a brief summary and expand to show additional content.",
6514
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/details",
6515
+ "status": "stable",
6516
+ "since": "2.0",
6517
+ "dependencies": [
6518
+ "flow-ui-icon"
6519
+ ],
6520
+ "animations": [
6521
+ {
6522
+ "name": "details.show",
6523
+ "description": "The animation to use when showing details. You can use `height: auto` with this animation."
6524
+ },
6525
+ {
6526
+ "name": "details.hide",
6527
+ "description": "The animation to use when hiding details. You can use `height: auto` with this animation."
6528
+ }
6529
+ ],
6530
+ "tagName": "flow-ui-details",
6531
+ "customElement": true
6547
6532
  }
6548
6533
  ],
6549
6534
  "exports": [
@@ -6551,273 +6536,288 @@
6551
6536
  "kind": "js",
6552
6537
  "name": "default",
6553
6538
  "declaration": {
6554
- "name": "FlowDatetimePicker",
6555
- "module": "components/date-time-picker/date-time-picker.component.js"
6556
- }
6557
- }
6558
- ]
6559
- },
6560
- {
6561
- "kind": "javascript-module",
6562
- "path": "components/date-time-picker/date-time-picker.js",
6563
- "declarations": [],
6564
- "exports": [
6565
- {
6566
- "kind": "js",
6567
- "name": "*",
6568
- "declaration": {
6569
- "name": "*",
6570
- "package": "./date-time-picker.component.js"
6539
+ "name": "FlowDetails",
6540
+ "module": "components/details/details.js"
6571
6541
  }
6572
6542
  },
6573
6543
  {
6574
- "kind": "js",
6575
- "name": "default",
6544
+ "kind": "custom-element-definition",
6545
+ "name": "flow-ui-details",
6576
6546
  "declaration": {
6577
- "name": "FlowDateTimePicker",
6578
- "module": "components/date-time-picker/date-time-picker.js"
6547
+ "name": "FlowDetails",
6548
+ "module": "components/details/details.js"
6579
6549
  }
6580
6550
  }
6581
6551
  ]
6582
6552
  },
6583
6553
  {
6584
6554
  "kind": "javascript-module",
6585
- "path": "components/details/details.js",
6555
+ "path": "components/chart/chart.component.js",
6586
6556
  "declarations": [
6587
6557
  {
6588
6558
  "kind": "class",
6589
- "description": "",
6590
- "name": "FlowDetails",
6591
- "cssParts": [
6559
+ "description": "The chart component is a container for [Chart.js](https://www.chartjs.org/) charts. The component\nsupplies additional Flow RDF UI features including:\n\n- Consistent theming with other flow-rdf-ui components.\n- Additional plugins and charts types for commonly-used charts.\n- Convenience child components (`flow-ui-chart-data` and `flow-ui-chart-scale`) for defining chart data and scales.",
6560
+ "name": "FlowChart",
6561
+ "cssProperties": [
6592
6562
  {
6593
- "description": "The component's base wrapper.",
6594
- "name": "base"
6563
+ "description": "Chart background color (applied as the background color of the base container).",
6564
+ "name": "--background-color"
6595
6565
  },
6596
6566
  {
6597
- "description": "The header that wraps both the summary and the expand/collapse icon.",
6598
- "name": "header"
6567
+ "description": "General text color (titles etc.)",
6568
+ "name": "--text-color"
6569
+ },
6570
+ {
6571
+ "description": "Color of the axis lines.",
6572
+ "name": "--axis-color"
6573
+ },
6574
+ {
6575
+ "description": "Color of the x-axis lines. (defaults to `--axis-color`)",
6576
+ "name": "--x-axis-color"
6577
+ },
6578
+ {
6579
+ "description": "Color of the y-axis lines. (defaults to `--axis-color`)",
6580
+ "name": "--y-axis-color"
6581
+ },
6582
+ {
6583
+ "description": "Color of the axis grid lines.",
6584
+ "name": "--axis-grid-color"
6585
+ },
6586
+ {
6587
+ "description": "Color of the x-axis grid lines. (defaults to `--axis-grid-color`)",
6588
+ "name": "--x-axis-grid-color"
6589
+ },
6590
+ {
6591
+ "description": "Color of the y-axis grid lines. (defaults to `--axis-grid-color`)",
6592
+ "name": "--y-axis-grid-color"
6593
+ },
6594
+ {
6595
+ "description": "Color of the axis labels.",
6596
+ "name": "--axis-label-color"
6597
+ },
6598
+ {
6599
+ "description": "Color of the x-axis labels. (defaults to `--axis-label-color`)",
6600
+ "name": "--x-axis-label-color"
6599
6601
  },
6600
6602
  {
6601
- "description": "The container that wraps the summary.",
6602
- "name": "summary"
6603
+ "description": "Color of the y-axis labels. (defaults to `--axis-label-color`)",
6604
+ "name": "--y-axis-label-color"
6603
6605
  },
6604
6606
  {
6605
- "description": "The container that wraps the expand/collapse icons.",
6606
- "name": "summary-icon"
6607
+ "description": "Color of the tick labels.",
6608
+ "name": "--tick-label-color"
6607
6609
  },
6608
6610
  {
6609
- "description": "The details content.",
6610
- "name": "content"
6611
- }
6612
- ],
6613
- "slots": [
6614
- {
6615
- "description": "The details' main content.",
6616
- "name": ""
6611
+ "description": "Color of the x-axis tick labels. (defaults to `--tick-label-color`)",
6612
+ "name": "--x-tick-label-color"
6617
6613
  },
6618
6614
  {
6619
- "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
6620
- "name": "summary"
6615
+ "description": "Color of the y-axis tick labels. (defaults to `--tick-label-color`)",
6616
+ "name": "--y-tick-label-color"
6621
6617
  },
6622
6618
  {
6623
- "description": "Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.",
6624
- "name": "expand-icon"
6619
+ "description": "Color of the stroke for dataset n (where n = 0-9).",
6620
+ "name": "--dataset-stroke-color-n"
6625
6621
  },
6626
6622
  {
6627
- "description": "Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.",
6628
- "name": "collapse-icon"
6623
+ "description": "Color of the fill for dataset n (where n = 0-9).",
6624
+ "name": "--dataset-fill-color-n"
6629
6625
  }
6630
6626
  ],
6631
- "members": [
6627
+ "cssParts": [
6632
6628
  {
6633
- "kind": "field",
6634
- "name": "localize",
6635
- "privacy": "private",
6636
- "readonly": true,
6637
- "default": "new LocalizeController(this)"
6638
- },
6629
+ "description": "The base container of the chart.",
6630
+ "name": "base"
6631
+ }
6632
+ ],
6633
+ "members": [
6639
6634
  {
6640
6635
  "kind": "field",
6641
- "name": "details",
6636
+ "name": "_chartRef",
6642
6637
  "type": {
6643
- "text": "HTMLElement"
6644
- }
6638
+ "text": "Ref<HTMLCanvasElement>"
6639
+ },
6640
+ "privacy": "private"
6645
6641
  },
6646
6642
  {
6647
6643
  "kind": "field",
6648
- "name": "header",
6644
+ "name": "_chart",
6649
6645
  "type": {
6650
- "text": "HTMLElement"
6651
- }
6646
+ "text": "Chart | undefined"
6647
+ },
6648
+ "privacy": "private"
6652
6649
  },
6653
6650
  {
6654
6651
  "kind": "field",
6655
- "name": "body",
6656
- "type": {
6657
- "text": "HTMLElement"
6658
- }
6652
+ "name": "chart",
6653
+ "description": "The Chart.js chart instance.",
6654
+ "readonly": true
6659
6655
  },
6660
6656
  {
6661
6657
  "kind": "field",
6662
- "name": "expandIconSlot",
6658
+ "name": "type",
6663
6659
  "type": {
6664
- "text": "HTMLSlotElement"
6665
- }
6660
+ "text": "string"
6661
+ },
6662
+ "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
6663
+ "attribute": "type"
6666
6664
  },
6667
6665
  {
6668
6666
  "kind": "field",
6669
- "name": "open",
6667
+ "name": "options",
6670
6668
  "type": {
6671
- "text": "boolean"
6669
+ "text": "ChartOptions"
6672
6670
  },
6673
- "default": "false",
6674
- "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
6675
- "attribute": "open",
6676
- "reflects": true
6671
+ "description": "The Chart.js `options` object.",
6672
+ "attribute": "options"
6677
6673
  },
6678
6674
  {
6679
6675
  "kind": "field",
6680
- "name": "summary",
6676
+ "name": "data",
6681
6677
  "type": {
6682
- "text": "string"
6678
+ "text": "ChartData"
6683
6679
  },
6684
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
6685
- "attribute": "summary"
6680
+ "description": "The Chart.js `data` object",
6681
+ "attribute": "data"
6686
6682
  },
6687
6683
  {
6688
6684
  "kind": "field",
6689
- "name": "disabled",
6685
+ "name": "plugins",
6690
6686
  "type": {
6691
- "text": "boolean"
6687
+ "text": "Plugin[]"
6692
6688
  },
6693
- "default": "false",
6694
- "description": "Disables the details so it can't be toggled.",
6695
- "attribute": "disabled",
6696
- "reflects": true
6697
- },
6698
- {
6699
- "kind": "method",
6700
- "name": "handleSummaryClick",
6701
- "privacy": "private"
6702
- },
6703
- {
6704
- "kind": "method",
6705
- "name": "handleSummaryKeyDown",
6706
- "privacy": "private",
6707
- "parameters": [
6708
- {
6709
- "name": "event",
6710
- "type": {
6711
- "text": "KeyboardEvent"
6712
- }
6713
- }
6714
- ]
6715
- },
6716
- {
6717
- "kind": "method",
6718
- "name": "handleOpenChange"
6719
- },
6720
- {
6721
- "kind": "method",
6722
- "name": "show",
6723
- "description": "Shows the details."
6689
+ "default": "[]",
6690
+ "description": "List of extra plugins to use for this chart.",
6691
+ "attribute": "plugins"
6724
6692
  },
6725
6693
  {
6726
6694
  "kind": "method",
6727
- "name": "hide",
6728
- "description": "Hides the details"
6695
+ "name": "repaint",
6696
+ "description": "Trigger a repaint of the chart."
6729
6697
  }
6730
6698
  ],
6731
- "events": [
6732
- {
6733
- "description": "Emitted when the details opens.",
6734
- "name": "flow-ui-show",
6735
- "reactName": "onFlowUiShow"
6736
- },
6737
- {
6738
- "description": "Emitted after the details opens and all animations are complete.",
6739
- "name": "flow-ui-after-show",
6740
- "reactName": "onFlowUiAfterShow"
6741
- },
6699
+ "attributes": [
6742
6700
  {
6743
- "description": "Emitted when the details closes.",
6744
- "name": "flow-ui-hide",
6745
- "reactName": "onFlowUiHide"
6701
+ "name": "type",
6702
+ "type": {
6703
+ "text": "string"
6704
+ },
6705
+ "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
6706
+ "fieldName": "type"
6746
6707
  },
6747
6708
  {
6748
- "description": "Emitted after the details closes and all animations are complete.",
6749
- "name": "flow-ui-after-hide",
6750
- "reactName": "onFlowUiAfterHide"
6751
- }
6752
- ],
6753
- "attributes": [
6754
- {
6755
- "name": "open",
6709
+ "name": "options",
6756
6710
  "type": {
6757
- "text": "boolean"
6711
+ "text": "ChartOptions"
6758
6712
  },
6759
- "default": "false",
6760
- "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
6761
- "fieldName": "open"
6713
+ "description": "The Chart.js `options` object.",
6714
+ "fieldName": "options"
6762
6715
  },
6763
6716
  {
6764
- "name": "summary",
6717
+ "name": "data",
6765
6718
  "type": {
6766
- "text": "string"
6719
+ "text": "ChartData"
6767
6720
  },
6768
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
6769
- "fieldName": "summary"
6721
+ "description": "The Chart.js `data` object",
6722
+ "fieldName": "data"
6770
6723
  },
6771
6724
  {
6772
- "name": "disabled",
6725
+ "name": "plugins",
6773
6726
  "type": {
6774
- "text": "boolean"
6727
+ "text": "Plugin[]"
6775
6728
  },
6776
- "default": "false",
6777
- "description": "Disables the details so it can't be toggled.",
6778
- "fieldName": "disabled"
6729
+ "default": "[]",
6730
+ "description": "List of extra plugins to use for this chart.",
6731
+ "fieldName": "plugins"
6779
6732
  }
6780
6733
  ],
6781
6734
  "superclass": {
6782
6735
  "name": "FlowRdfElement",
6783
6736
  "module": "/src/internal/flow-ui-rdf-element"
6784
6737
  },
6785
- "summary": "Details show a brief summary and expand to show additional content.",
6786
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/details",
6787
- "status": "stable",
6788
- "since": "2.0",
6789
- "dependencies": [
6790
- "flow-ui-icon"
6791
- ],
6792
- "animations": [
6793
- {
6794
- "name": "details.show",
6795
- "description": "The animation to use when showing details. You can use `height: auto` with this animation."
6796
- },
6738
+ "tagName": "flow-ui-chart",
6739
+ "summary": "The chart component displays Chart.js charts.",
6740
+ "customElement": true
6741
+ }
6742
+ ],
6743
+ "exports": [
6744
+ {
6745
+ "kind": "js",
6746
+ "name": "default",
6747
+ "declaration": {
6748
+ "name": "FlowChart",
6749
+ "module": "components/chart/chart.component.js"
6750
+ }
6751
+ }
6752
+ ]
6753
+ },
6754
+ {
6755
+ "kind": "javascript-module",
6756
+ "path": "components/chart/chart.js",
6757
+ "declarations": [],
6758
+ "exports": [
6759
+ {
6760
+ "kind": "js",
6761
+ "name": "*",
6762
+ "declaration": {
6763
+ "name": "*",
6764
+ "package": "./chart.component"
6765
+ }
6766
+ },
6767
+ {
6768
+ "kind": "js",
6769
+ "name": "default",
6770
+ "declaration": {
6771
+ "name": "FlowChart",
6772
+ "module": "components/chart/chart.js"
6773
+ }
6774
+ }
6775
+ ]
6776
+ },
6777
+ {
6778
+ "kind": "javascript-module",
6779
+ "path": "components/chart/chartjs-support.js",
6780
+ "declarations": [
6781
+ {
6782
+ "kind": "function",
6783
+ "name": "initializeChartJs"
6784
+ },
6785
+ {
6786
+ "kind": "function",
6787
+ "name": "registerChartComponent",
6788
+ "parameters": [
6797
6789
  {
6798
- "name": "details.hide",
6799
- "description": "The animation to use when hiding details. You can use `height: auto` with this animation."
6790
+ "name": "components",
6791
+ "type": {
6792
+ "text": "ChartComponentLike[]"
6793
+ }
6800
6794
  }
6801
- ],
6802
- "tagName": "flow-ui-details",
6803
- "customElement": true
6795
+ ]
6804
6796
  }
6805
6797
  ],
6806
6798
  "exports": [
6807
6799
  {
6808
6800
  "kind": "js",
6809
- "name": "default",
6801
+ "name": "ChartJs",
6810
6802
  "declaration": {
6811
- "name": "FlowDetails",
6812
- "module": "components/details/details.js"
6803
+ "name": "Chart",
6804
+ "package": "chart.js"
6813
6805
  }
6814
6806
  },
6815
6807
  {
6816
- "kind": "custom-element-definition",
6817
- "name": "flow-ui-details",
6808
+ "kind": "js",
6809
+ "name": "initializeChartJs",
6818
6810
  "declaration": {
6819
- "name": "FlowDetails",
6820
- "module": "components/details/details.js"
6811
+ "name": "initializeChartJs",
6812
+ "module": "components/chart/chartjs-support.js"
6813
+ }
6814
+ },
6815
+ {
6816
+ "kind": "js",
6817
+ "name": "registerChartComponent",
6818
+ "declaration": {
6819
+ "name": "registerChartComponent",
6820
+ "module": "components/chart/chartjs-support.js"
6821
6821
  }
6822
6822
  }
6823
6823
  ]
@@ -14551,121 +14551,6 @@
14551
14551
  }
14552
14552
  ]
14553
14553
  },
14554
- {
14555
- "kind": "javascript-module",
14556
- "path": "components/resize-observer/resize-observer.js",
14557
- "declarations": [
14558
- {
14559
- "kind": "class",
14560
- "description": "",
14561
- "name": "FlowResizeObserver",
14562
- "slots": [
14563
- {
14564
- "description": "One or more elements to watch for resizing.",
14565
- "name": ""
14566
- }
14567
- ],
14568
- "members": [
14569
- {
14570
- "kind": "field",
14571
- "name": "resizeObserver",
14572
- "type": {
14573
- "text": "ResizeObserver"
14574
- },
14575
- "privacy": "private"
14576
- },
14577
- {
14578
- "kind": "field",
14579
- "name": "observedElements",
14580
- "type": {
14581
- "text": "HTMLElement[]"
14582
- },
14583
- "privacy": "private",
14584
- "default": "[]"
14585
- },
14586
- {
14587
- "kind": "field",
14588
- "name": "disabled",
14589
- "type": {
14590
- "text": "boolean"
14591
- },
14592
- "default": "false",
14593
- "description": "Disables the observer.",
14594
- "attribute": "disabled",
14595
- "reflects": true
14596
- },
14597
- {
14598
- "kind": "method",
14599
- "name": "handleSlotChange",
14600
- "privacy": "private"
14601
- },
14602
- {
14603
- "kind": "method",
14604
- "name": "startObserver",
14605
- "privacy": "private"
14606
- },
14607
- {
14608
- "kind": "method",
14609
- "name": "stopObserver",
14610
- "privacy": "private"
14611
- },
14612
- {
14613
- "kind": "method",
14614
- "name": "handleDisabledChange"
14615
- }
14616
- ],
14617
- "events": [
14618
- {
14619
- "type": {
14620
- "text": "{ entries: ResizeObserverEntry[] }"
14621
- },
14622
- "description": "Emitted when the element is resized.",
14623
- "name": "flow-ui-resize",
14624
- "reactName": "onFlowUiResize"
14625
- }
14626
- ],
14627
- "attributes": [
14628
- {
14629
- "name": "disabled",
14630
- "type": {
14631
- "text": "boolean"
14632
- },
14633
- "default": "false",
14634
- "description": "Disables the observer.",
14635
- "fieldName": "disabled"
14636
- }
14637
- ],
14638
- "superclass": {
14639
- "name": "FlowRdfElement",
14640
- "module": "/src/internal/flow-ui-rdf-element"
14641
- },
14642
- "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
14643
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/resize-observer",
14644
- "status": "stable",
14645
- "since": "2.0",
14646
- "tagName": "flow-ui-resize-observer",
14647
- "customElement": true
14648
- }
14649
- ],
14650
- "exports": [
14651
- {
14652
- "kind": "js",
14653
- "name": "default",
14654
- "declaration": {
14655
- "name": "FlowResizeObserver",
14656
- "module": "components/resize-observer/resize-observer.js"
14657
- }
14658
- },
14659
- {
14660
- "kind": "custom-element-definition",
14661
- "name": "flow-ui-resize-observer",
14662
- "declaration": {
14663
- "name": "FlowResizeObserver",
14664
- "module": "components/resize-observer/resize-observer.js"
14665
- }
14666
- }
14667
- ]
14668
- },
14669
14554
  {
14670
14555
  "kind": "javascript-module",
14671
14556
  "path": "components/range/range.js",
@@ -15244,6 +15129,121 @@
15244
15129
  }
15245
15130
  ]
15246
15131
  },
15132
+ {
15133
+ "kind": "javascript-module",
15134
+ "path": "components/resize-observer/resize-observer.js",
15135
+ "declarations": [
15136
+ {
15137
+ "kind": "class",
15138
+ "description": "",
15139
+ "name": "FlowResizeObserver",
15140
+ "slots": [
15141
+ {
15142
+ "description": "One or more elements to watch for resizing.",
15143
+ "name": ""
15144
+ }
15145
+ ],
15146
+ "members": [
15147
+ {
15148
+ "kind": "field",
15149
+ "name": "resizeObserver",
15150
+ "type": {
15151
+ "text": "ResizeObserver"
15152
+ },
15153
+ "privacy": "private"
15154
+ },
15155
+ {
15156
+ "kind": "field",
15157
+ "name": "observedElements",
15158
+ "type": {
15159
+ "text": "HTMLElement[]"
15160
+ },
15161
+ "privacy": "private",
15162
+ "default": "[]"
15163
+ },
15164
+ {
15165
+ "kind": "field",
15166
+ "name": "disabled",
15167
+ "type": {
15168
+ "text": "boolean"
15169
+ },
15170
+ "default": "false",
15171
+ "description": "Disables the observer.",
15172
+ "attribute": "disabled",
15173
+ "reflects": true
15174
+ },
15175
+ {
15176
+ "kind": "method",
15177
+ "name": "handleSlotChange",
15178
+ "privacy": "private"
15179
+ },
15180
+ {
15181
+ "kind": "method",
15182
+ "name": "startObserver",
15183
+ "privacy": "private"
15184
+ },
15185
+ {
15186
+ "kind": "method",
15187
+ "name": "stopObserver",
15188
+ "privacy": "private"
15189
+ },
15190
+ {
15191
+ "kind": "method",
15192
+ "name": "handleDisabledChange"
15193
+ }
15194
+ ],
15195
+ "events": [
15196
+ {
15197
+ "type": {
15198
+ "text": "{ entries: ResizeObserverEntry[] }"
15199
+ },
15200
+ "description": "Emitted when the element is resized.",
15201
+ "name": "flow-ui-resize",
15202
+ "reactName": "onFlowUiResize"
15203
+ }
15204
+ ],
15205
+ "attributes": [
15206
+ {
15207
+ "name": "disabled",
15208
+ "type": {
15209
+ "text": "boolean"
15210
+ },
15211
+ "default": "false",
15212
+ "description": "Disables the observer.",
15213
+ "fieldName": "disabled"
15214
+ }
15215
+ ],
15216
+ "superclass": {
15217
+ "name": "FlowRdfElement",
15218
+ "module": "/src/internal/flow-ui-rdf-element"
15219
+ },
15220
+ "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
15221
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/resize-observer",
15222
+ "status": "stable",
15223
+ "since": "2.0",
15224
+ "tagName": "flow-ui-resize-observer",
15225
+ "customElement": true
15226
+ }
15227
+ ],
15228
+ "exports": [
15229
+ {
15230
+ "kind": "js",
15231
+ "name": "default",
15232
+ "declaration": {
15233
+ "name": "FlowResizeObserver",
15234
+ "module": "components/resize-observer/resize-observer.js"
15235
+ }
15236
+ },
15237
+ {
15238
+ "kind": "custom-element-definition",
15239
+ "name": "flow-ui-resize-observer",
15240
+ "declaration": {
15241
+ "name": "FlowResizeObserver",
15242
+ "module": "components/resize-observer/resize-observer.js"
15243
+ }
15244
+ }
15245
+ ]
15246
+ },
15247
15247
  {
15248
15248
  "kind": "javascript-module",
15249
15249
  "path": "components/scroll-view/scroll-view.component.js",
@@ -23351,6 +23351,6 @@
23351
23351
  ],
23352
23352
  "package": {
23353
23353
  "name": "@emuanalytics/flow-rdf-ui",
23354
- "version": "0.0.41"
23354
+ "version": "0.0.43"
23355
23355
  }
23356
23356
  }