@emuanalytics/flow-rdf-ui 4.1.3 → 4.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/autocomplete/autocomplete.component.mjs +623 -0
- package/dist/components/autocomplete/autocomplete.mjs +5 -0
- package/dist/components/autocomplete/autocomplete.styles.mjs +233 -0
- package/dist/components/timer/ticker.mjs +1 -0
- package/dist/custom-elements.json +1061 -330
- package/dist/index.d.mts +211 -7
- package/dist/index.d.ts +211 -7
- package/dist/index.mjs +1 -0
- package/dist/package.json.mjs +1 -1
- package/dist/utilities/register-components.mjs +2 -0
- package/dist/vscode.html-custom-data.json +138 -39
- package/package.json +3 -3
|
@@ -670,95 +670,157 @@
|
|
|
670
670
|
},
|
|
671
671
|
{
|
|
672
672
|
"kind": "javascript-module",
|
|
673
|
-
"path": "components/
|
|
673
|
+
"path": "components/avatar/avatar.component.js",
|
|
674
674
|
"declarations": [
|
|
675
675
|
{
|
|
676
676
|
"kind": "class",
|
|
677
677
|
"description": "",
|
|
678
|
-
"name": "
|
|
678
|
+
"name": "FlowUiAvatar",
|
|
679
|
+
"cssProperties": [
|
|
680
|
+
{
|
|
681
|
+
"description": "The size of the avatar.",
|
|
682
|
+
"name": "--size"
|
|
683
|
+
}
|
|
684
|
+
],
|
|
679
685
|
"cssParts": [
|
|
680
686
|
{
|
|
681
687
|
"description": "The component's base wrapper.",
|
|
682
688
|
"name": "base"
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"description": "The container that wraps the avatar's icon.",
|
|
692
|
+
"name": "icon"
|
|
693
|
+
},
|
|
694
|
+
{
|
|
695
|
+
"description": "The container that wraps the avatar's initials.",
|
|
696
|
+
"name": "initials"
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
"description": "The avatar image. Only shown when the `image` attribute is set.",
|
|
700
|
+
"name": "image"
|
|
683
701
|
}
|
|
684
702
|
],
|
|
685
703
|
"slots": [
|
|
686
704
|
{
|
|
687
|
-
"description": "
|
|
688
|
-
"name": ""
|
|
689
|
-
},
|
|
690
|
-
{
|
|
691
|
-
"description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
|
|
692
|
-
"name": "separator"
|
|
705
|
+
"description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
|
|
706
|
+
"name": "icon"
|
|
693
707
|
}
|
|
694
708
|
],
|
|
695
709
|
"members": [
|
|
696
710
|
{
|
|
697
711
|
"kind": "field",
|
|
698
|
-
"name": "
|
|
712
|
+
"name": "hasError",
|
|
713
|
+
"type": {
|
|
714
|
+
"text": "boolean"
|
|
715
|
+
},
|
|
699
716
|
"privacy": "private",
|
|
700
|
-
"
|
|
701
|
-
"default": "new LocalizeController(this)"
|
|
702
|
-
},
|
|
703
|
-
{
|
|
704
|
-
"kind": "field",
|
|
705
|
-
"name": "separatorDir",
|
|
706
|
-
"privacy": "private"
|
|
717
|
+
"default": "false"
|
|
707
718
|
},
|
|
708
719
|
{
|
|
709
720
|
"kind": "field",
|
|
710
|
-
"name": "
|
|
721
|
+
"name": "image",
|
|
711
722
|
"type": {
|
|
712
|
-
"text": "
|
|
723
|
+
"text": "string"
|
|
713
724
|
},
|
|
714
|
-
"
|
|
725
|
+
"default": "''",
|
|
726
|
+
"description": "The image source to use for the avatar.",
|
|
727
|
+
"attribute": "image"
|
|
715
728
|
},
|
|
716
729
|
{
|
|
717
730
|
"kind": "field",
|
|
718
|
-
"name": "
|
|
731
|
+
"name": "label",
|
|
719
732
|
"type": {
|
|
720
|
-
"text": "
|
|
733
|
+
"text": "string"
|
|
721
734
|
},
|
|
722
|
-
"
|
|
735
|
+
"default": "''",
|
|
736
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
737
|
+
"attribute": "label"
|
|
723
738
|
},
|
|
724
739
|
{
|
|
725
740
|
"kind": "field",
|
|
726
|
-
"name": "
|
|
741
|
+
"name": "initials",
|
|
727
742
|
"type": {
|
|
728
743
|
"text": "string"
|
|
729
744
|
},
|
|
730
745
|
"default": "''",
|
|
731
|
-
"description": "
|
|
732
|
-
"attribute": "
|
|
746
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
747
|
+
"attribute": "initials"
|
|
733
748
|
},
|
|
734
749
|
{
|
|
735
|
-
"kind": "
|
|
736
|
-
"name": "
|
|
737
|
-
"
|
|
750
|
+
"kind": "field",
|
|
751
|
+
"name": "loading",
|
|
752
|
+
"type": {
|
|
753
|
+
"text": "'eager' | 'lazy'"
|
|
754
|
+
},
|
|
755
|
+
"default": "'eager'",
|
|
756
|
+
"description": "Indicates how the browser should load the image.",
|
|
757
|
+
"attribute": "loading"
|
|
738
758
|
},
|
|
739
759
|
{
|
|
740
|
-
"kind": "
|
|
741
|
-
"name": "
|
|
742
|
-
"
|
|
760
|
+
"kind": "field",
|
|
761
|
+
"name": "shape",
|
|
762
|
+
"type": {
|
|
763
|
+
"text": "'circle' | 'square' | 'rounded'"
|
|
764
|
+
},
|
|
765
|
+
"default": "'circle'",
|
|
766
|
+
"description": "The shape of the avatar.",
|
|
767
|
+
"attribute": "shape",
|
|
768
|
+
"reflects": true
|
|
743
769
|
}
|
|
744
770
|
],
|
|
745
771
|
"attributes": [
|
|
772
|
+
{
|
|
773
|
+
"name": "image",
|
|
774
|
+
"type": {
|
|
775
|
+
"text": "string"
|
|
776
|
+
},
|
|
777
|
+
"default": "''",
|
|
778
|
+
"description": "The image source to use for the avatar.",
|
|
779
|
+
"fieldName": "image"
|
|
780
|
+
},
|
|
746
781
|
{
|
|
747
782
|
"name": "label",
|
|
748
783
|
"type": {
|
|
749
784
|
"text": "string"
|
|
750
785
|
},
|
|
751
786
|
"default": "''",
|
|
752
|
-
"description": "
|
|
787
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
753
788
|
"fieldName": "label"
|
|
789
|
+
},
|
|
790
|
+
{
|
|
791
|
+
"name": "initials",
|
|
792
|
+
"type": {
|
|
793
|
+
"text": "string"
|
|
794
|
+
},
|
|
795
|
+
"default": "''",
|
|
796
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
797
|
+
"fieldName": "initials"
|
|
798
|
+
},
|
|
799
|
+
{
|
|
800
|
+
"name": "loading",
|
|
801
|
+
"type": {
|
|
802
|
+
"text": "'eager' | 'lazy'"
|
|
803
|
+
},
|
|
804
|
+
"default": "'eager'",
|
|
805
|
+
"description": "Indicates how the browser should load the image.",
|
|
806
|
+
"fieldName": "loading"
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
"name": "shape",
|
|
810
|
+
"type": {
|
|
811
|
+
"text": "'circle' | 'square' | 'rounded'"
|
|
812
|
+
},
|
|
813
|
+
"default": "'circle'",
|
|
814
|
+
"description": "The shape of the avatar.",
|
|
815
|
+
"fieldName": "shape"
|
|
754
816
|
}
|
|
755
817
|
],
|
|
756
818
|
"superclass": {
|
|
757
819
|
"name": "FlowRdfElement",
|
|
758
820
|
"module": "/src/internal/flow-ui-rdf-element"
|
|
759
821
|
},
|
|
760
|
-
"tagName": "flow-ui-
|
|
761
|
-
"summary": "
|
|
822
|
+
"tagName": "flow-ui-avatar",
|
|
823
|
+
"summary": "Avatars are used to represent a person or object.",
|
|
762
824
|
"dependencies": [
|
|
763
825
|
"flow-ui-icon"
|
|
764
826
|
],
|
|
@@ -770,35 +832,35 @@
|
|
|
770
832
|
"kind": "js",
|
|
771
833
|
"name": "default",
|
|
772
834
|
"declaration": {
|
|
773
|
-
"name": "
|
|
774
|
-
"module": "components/
|
|
835
|
+
"name": "FlowUiAvatar",
|
|
836
|
+
"module": "components/avatar/avatar.component.js"
|
|
775
837
|
}
|
|
776
838
|
}
|
|
777
839
|
]
|
|
778
840
|
},
|
|
779
841
|
{
|
|
780
842
|
"kind": "javascript-module",
|
|
781
|
-
"path": "components/
|
|
843
|
+
"path": "components/avatar/avatar.js",
|
|
782
844
|
"declarations": [],
|
|
783
845
|
"exports": [
|
|
784
846
|
{
|
|
785
847
|
"kind": "js",
|
|
786
848
|
"name": "default",
|
|
787
849
|
"declaration": {
|
|
788
|
-
"name": "
|
|
789
|
-
"module": "components/
|
|
850
|
+
"name": "FlowUiAvatar",
|
|
851
|
+
"module": "components/avatar/avatar.js"
|
|
790
852
|
}
|
|
791
853
|
}
|
|
792
854
|
]
|
|
793
855
|
},
|
|
794
856
|
{
|
|
795
857
|
"kind": "javascript-module",
|
|
796
|
-
"path": "components/
|
|
858
|
+
"path": "components/autocomplete/autocomplete.component.js",
|
|
797
859
|
"declarations": [
|
|
798
860
|
{
|
|
799
861
|
"kind": "class",
|
|
800
862
|
"description": "",
|
|
801
|
-
"name": "
|
|
863
|
+
"name": "FlowUiAutocomplete",
|
|
802
864
|
"cssParts": [
|
|
803
865
|
{
|
|
804
866
|
"description": "The form control that wraps the label, input, and help text.",
|
|
@@ -809,7 +871,7 @@
|
|
|
809
871
|
"name": "form-control-label"
|
|
810
872
|
},
|
|
811
873
|
{
|
|
812
|
-
"description": "The
|
|
874
|
+
"description": "The select's wrapper.",
|
|
813
875
|
"name": "form-control-input"
|
|
814
876
|
},
|
|
815
877
|
{
|
|
@@ -817,55 +879,51 @@
|
|
|
817
879
|
"name": "form-control-help-text"
|
|
818
880
|
},
|
|
819
881
|
{
|
|
820
|
-
"description": "The
|
|
821
|
-
"name": "
|
|
882
|
+
"description": "The container the wraps the prefix, suffix, combobox, clear icon, and expand button.",
|
|
883
|
+
"name": "combobox"
|
|
822
884
|
},
|
|
823
885
|
{
|
|
824
|
-
"description": "The
|
|
825
|
-
"name": "
|
|
886
|
+
"description": "The container that wraps the prefix slot.",
|
|
887
|
+
"name": "prefix"
|
|
826
888
|
},
|
|
827
889
|
{
|
|
828
|
-
"description": "The container that wraps the
|
|
829
|
-
"name": "
|
|
890
|
+
"description": "The container that wraps the suffix slot.",
|
|
891
|
+
"name": "suffix"
|
|
830
892
|
},
|
|
831
893
|
{
|
|
832
|
-
"description": "The
|
|
833
|
-
"name": "
|
|
894
|
+
"description": "The element that displays the selected option's label, an `<input>` element.",
|
|
895
|
+
"name": "display-input"
|
|
834
896
|
},
|
|
835
897
|
{
|
|
836
|
-
"description": "The
|
|
837
|
-
"name": "
|
|
898
|
+
"description": "The listbox container where options are slotted.",
|
|
899
|
+
"name": "listbox"
|
|
838
900
|
},
|
|
839
901
|
{
|
|
840
|
-
"description": "The
|
|
841
|
-
"name": "
|
|
902
|
+
"description": "The clear button.",
|
|
903
|
+
"name": "clear-button"
|
|
842
904
|
}
|
|
843
905
|
],
|
|
844
906
|
"slots": [
|
|
907
|
+
{
|
|
908
|
+
"description": "The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.",
|
|
909
|
+
"name": ""
|
|
910
|
+
},
|
|
845
911
|
{
|
|
846
912
|
"description": "The input's label. Alternatively, you can use the `label` attribute.",
|
|
847
913
|
"name": "label"
|
|
848
914
|
},
|
|
849
915
|
{
|
|
850
|
-
"description": "Used to prepend a presentational icon or similar element to the
|
|
916
|
+
"description": "Used to prepend a presentational icon or similar element to the combobox.",
|
|
851
917
|
"name": "prefix"
|
|
852
918
|
},
|
|
853
919
|
{
|
|
854
|
-
"description": "Used to append a presentational icon or similar element to the
|
|
920
|
+
"description": "Used to append a presentational icon or similar element to the combobox.",
|
|
855
921
|
"name": "suffix"
|
|
856
922
|
},
|
|
857
923
|
{
|
|
858
924
|
"description": "An icon to use in lieu of the default clear icon.",
|
|
859
925
|
"name": "clear-icon"
|
|
860
926
|
},
|
|
861
|
-
{
|
|
862
|
-
"description": "An icon to use in lieu of the default show password icon.",
|
|
863
|
-
"name": "show-password-icon"
|
|
864
|
-
},
|
|
865
|
-
{
|
|
866
|
-
"description": "An icon to use in lieu of the default hide password icon.",
|
|
867
|
-
"name": "hide-password-icon"
|
|
868
|
-
},
|
|
869
927
|
{
|
|
870
928
|
"description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
871
929
|
"name": "help-text"
|
|
@@ -874,10 +932,12 @@
|
|
|
874
932
|
"members": [
|
|
875
933
|
{
|
|
876
934
|
"kind": "field",
|
|
877
|
-
"name": "
|
|
878
|
-
"
|
|
879
|
-
|
|
880
|
-
|
|
935
|
+
"name": "dependencies",
|
|
936
|
+
"type": {
|
|
937
|
+
"text": "object"
|
|
938
|
+
},
|
|
939
|
+
"static": true,
|
|
940
|
+
"default": "{\n 'flow-ui-popup': FlowPopup,\n 'flow-ui-icon': FlowIcon\n }"
|
|
881
941
|
},
|
|
882
942
|
{
|
|
883
943
|
"kind": "field",
|
|
@@ -888,13 +948,53 @@
|
|
|
888
948
|
},
|
|
889
949
|
{
|
|
890
950
|
"kind": "field",
|
|
891
|
-
"name": "
|
|
951
|
+
"name": "localize",
|
|
952
|
+
"privacy": "private",
|
|
953
|
+
"readonly": true,
|
|
954
|
+
"default": "new LocalizeController(this)"
|
|
955
|
+
},
|
|
956
|
+
{
|
|
957
|
+
"kind": "field",
|
|
958
|
+
"name": "debouncedInput",
|
|
959
|
+
"type": {
|
|
960
|
+
"text": "((displayValue: string) => void)"
|
|
961
|
+
},
|
|
962
|
+
"privacy": "private"
|
|
963
|
+
},
|
|
964
|
+
{
|
|
965
|
+
"kind": "field",
|
|
966
|
+
"name": "pendingChangeEvent",
|
|
967
|
+
"type": {
|
|
968
|
+
"text": "boolean"
|
|
969
|
+
},
|
|
970
|
+
"privacy": "private",
|
|
971
|
+
"default": "false"
|
|
972
|
+
},
|
|
973
|
+
{
|
|
974
|
+
"kind": "field",
|
|
975
|
+
"name": "pendingInputEvent",
|
|
976
|
+
"type": {
|
|
977
|
+
"text": "boolean"
|
|
978
|
+
},
|
|
979
|
+
"privacy": "private",
|
|
980
|
+
"default": "false"
|
|
981
|
+
},
|
|
982
|
+
{
|
|
983
|
+
"kind": "field",
|
|
984
|
+
"name": "hasOptions",
|
|
892
985
|
"type": {
|
|
893
986
|
"text": "boolean"
|
|
894
987
|
},
|
|
895
988
|
"privacy": "private",
|
|
896
989
|
"default": "false"
|
|
897
990
|
},
|
|
991
|
+
{
|
|
992
|
+
"kind": "field",
|
|
993
|
+
"name": "formControlController",
|
|
994
|
+
"privacy": "private",
|
|
995
|
+
"readonly": true,
|
|
996
|
+
"default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
|
|
997
|
+
},
|
|
898
998
|
{
|
|
899
999
|
"kind": "field",
|
|
900
1000
|
"name": "size",
|
|
@@ -902,7 +1002,7 @@
|
|
|
902
1002
|
"text": "'small' | 'medium' | 'large'"
|
|
903
1003
|
},
|
|
904
1004
|
"default": "'medium'",
|
|
905
|
-
"description": "The
|
|
1005
|
+
"description": "The autocomplete's size",
|
|
906
1006
|
"attribute": "size",
|
|
907
1007
|
"reflects": true
|
|
908
1008
|
},
|
|
@@ -913,7 +1013,7 @@
|
|
|
913
1013
|
"text": "boolean"
|
|
914
1014
|
},
|
|
915
1015
|
"default": "false",
|
|
916
|
-
"description": "Draws a filled input
|
|
1016
|
+
"description": "Draws a filled autocomplete input",
|
|
917
1017
|
"attribute": "filled",
|
|
918
1018
|
"reflects": true
|
|
919
1019
|
},
|
|
@@ -924,7 +1024,7 @@
|
|
|
924
1024
|
"text": "boolean"
|
|
925
1025
|
},
|
|
926
1026
|
"default": "false",
|
|
927
|
-
"description": "Draws a pill-style input with rounded edges
|
|
1027
|
+
"description": "Draws a pill-style autocomplete input with rounded edges",
|
|
928
1028
|
"attribute": "pill",
|
|
929
1029
|
"reflects": true
|
|
930
1030
|
},
|
|
@@ -935,7 +1035,7 @@
|
|
|
935
1035
|
"text": "string"
|
|
936
1036
|
},
|
|
937
1037
|
"default": "''",
|
|
938
|
-
"description": "The input's label. If you need to display HTML, use the `
|
|
1038
|
+
"description": "The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead",
|
|
939
1039
|
"attribute": "label"
|
|
940
1040
|
},
|
|
941
1041
|
{
|
|
@@ -945,9 +1045,19 @@
|
|
|
945
1045
|
"text": "string"
|
|
946
1046
|
},
|
|
947
1047
|
"default": "''",
|
|
948
|
-
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead
|
|
1048
|
+
"description": "The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead",
|
|
949
1049
|
"attribute": "help-text"
|
|
950
1050
|
},
|
|
1051
|
+
{
|
|
1052
|
+
"kind": "field",
|
|
1053
|
+
"name": "placeholder",
|
|
1054
|
+
"type": {
|
|
1055
|
+
"text": "string"
|
|
1056
|
+
},
|
|
1057
|
+
"default": "''",
|
|
1058
|
+
"description": "The autocomplete input's placeholder text",
|
|
1059
|
+
"attribute": "placeholder"
|
|
1060
|
+
},
|
|
951
1061
|
{
|
|
952
1062
|
"kind": "field",
|
|
953
1063
|
"name": "disabled",
|
|
@@ -955,7 +1065,7 @@
|
|
|
955
1065
|
"text": "boolean"
|
|
956
1066
|
},
|
|
957
1067
|
"default": "false",
|
|
958
|
-
"description": "Disables the
|
|
1068
|
+
"description": "Disables the autocomplete",
|
|
959
1069
|
"attribute": "disabled",
|
|
960
1070
|
"reflects": true
|
|
961
1071
|
},
|
|
@@ -965,10 +1075,8 @@
|
|
|
965
1075
|
"type": {
|
|
966
1076
|
"text": "string"
|
|
967
1077
|
},
|
|
968
|
-
"
|
|
969
|
-
"
|
|
970
|
-
"attribute": "form",
|
|
971
|
-
"reflects": true
|
|
1078
|
+
"description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
|
|
1079
|
+
"attribute": "form"
|
|
972
1080
|
},
|
|
973
1081
|
{
|
|
974
1082
|
"kind": "field",
|
|
@@ -977,7 +1085,7 @@
|
|
|
977
1085
|
"text": "boolean"
|
|
978
1086
|
},
|
|
979
1087
|
"default": "false",
|
|
980
|
-
"description": "Makes the
|
|
1088
|
+
"description": "Makes the autocomplete a required field",
|
|
981
1089
|
"attribute": "required",
|
|
982
1090
|
"reflects": true
|
|
983
1091
|
},
|
|
@@ -988,7 +1096,7 @@
|
|
|
988
1096
|
"text": "boolean"
|
|
989
1097
|
},
|
|
990
1098
|
"default": "false",
|
|
991
|
-
"description": "Display the
|
|
1099
|
+
"description": "Display the autocomplete in the 'inline' form control style",
|
|
992
1100
|
"attribute": "inline",
|
|
993
1101
|
"reflects": true
|
|
994
1102
|
},
|
|
@@ -1005,63 +1113,151 @@
|
|
|
1005
1113
|
},
|
|
1006
1114
|
{
|
|
1007
1115
|
"kind": "field",
|
|
1008
|
-
"name": "
|
|
1009
|
-
"
|
|
1010
|
-
|
|
1116
|
+
"name": "hoist",
|
|
1117
|
+
"type": {
|
|
1118
|
+
"text": "boolean"
|
|
1119
|
+
},
|
|
1120
|
+
"default": "false",
|
|
1121
|
+
"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.",
|
|
1122
|
+
"attribute": "hoist"
|
|
1011
1123
|
},
|
|
1012
1124
|
{
|
|
1013
1125
|
"kind": "field",
|
|
1014
|
-
"name": "
|
|
1015
|
-
"
|
|
1016
|
-
|
|
1126
|
+
"name": "placement",
|
|
1127
|
+
"type": {
|
|
1128
|
+
"text": "'top' | 'bottom'"
|
|
1129
|
+
},
|
|
1130
|
+
"default": "'bottom'",
|
|
1131
|
+
"description": "The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
1132
|
+
"attribute": "placement",
|
|
1133
|
+
"reflects": true
|
|
1017
1134
|
},
|
|
1018
1135
|
{
|
|
1019
|
-
"kind": "
|
|
1020
|
-
"name": "
|
|
1136
|
+
"kind": "field",
|
|
1137
|
+
"name": "value",
|
|
1138
|
+
"type": {
|
|
1139
|
+
"text": "string"
|
|
1140
|
+
},
|
|
1141
|
+
"default": "''",
|
|
1142
|
+
"description": "Current value of the control, selected from one of the valid options available",
|
|
1143
|
+
"attribute": "value"
|
|
1144
|
+
},
|
|
1145
|
+
{
|
|
1146
|
+
"kind": "field",
|
|
1147
|
+
"name": "displayWith",
|
|
1148
|
+
"type": {
|
|
1149
|
+
"text": "((value: string) => string) | ((value: string) => Promise<string>)"
|
|
1150
|
+
},
|
|
1151
|
+
"default": "(value => value)",
|
|
1152
|
+
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
1153
|
+
"attribute": "displayWith"
|
|
1154
|
+
},
|
|
1155
|
+
{
|
|
1156
|
+
"kind": "field",
|
|
1157
|
+
"name": "debounceDelay",
|
|
1158
|
+
"type": {
|
|
1159
|
+
"text": "number"
|
|
1160
|
+
},
|
|
1161
|
+
"default": "0",
|
|
1162
|
+
"description": "Debounce delay",
|
|
1163
|
+
"attribute": "debounce-delay",
|
|
1164
|
+
"reflects": true
|
|
1165
|
+
},
|
|
1166
|
+
{
|
|
1167
|
+
"kind": "field",
|
|
1168
|
+
"name": "clearable",
|
|
1169
|
+
"type": {
|
|
1170
|
+
"text": "boolean"
|
|
1171
|
+
},
|
|
1172
|
+
"default": "false",
|
|
1173
|
+
"description": "Show the option to clear input",
|
|
1174
|
+
"attribute": "clearable",
|
|
1175
|
+
"reflects": true
|
|
1176
|
+
},
|
|
1177
|
+
{
|
|
1178
|
+
"kind": "field",
|
|
1179
|
+
"name": "inputText",
|
|
1180
|
+
"type": {
|
|
1181
|
+
"text": "string"
|
|
1182
|
+
},
|
|
1183
|
+
"privacy": "private",
|
|
1184
|
+
"default": "''",
|
|
1185
|
+
"description": "Current value displayed by the control; this can be what the user is typing or the label of the selected option"
|
|
1186
|
+
},
|
|
1187
|
+
{
|
|
1188
|
+
"kind": "field",
|
|
1189
|
+
"name": "selectedOption",
|
|
1190
|
+
"type": {
|
|
1191
|
+
"text": "FlowOption | null"
|
|
1192
|
+
},
|
|
1193
|
+
"privacy": "private",
|
|
1194
|
+
"default": "null"
|
|
1195
|
+
},
|
|
1196
|
+
{
|
|
1197
|
+
"kind": "field",
|
|
1198
|
+
"name": "currentOption",
|
|
1199
|
+
"type": {
|
|
1200
|
+
"text": "FlowOption | null"
|
|
1201
|
+
},
|
|
1202
|
+
"privacy": "private",
|
|
1203
|
+
"default": "null"
|
|
1204
|
+
},
|
|
1205
|
+
{
|
|
1206
|
+
"kind": "field",
|
|
1207
|
+
"name": "input",
|
|
1208
|
+
"type": {
|
|
1209
|
+
"text": "HTMLInputElement"
|
|
1210
|
+
},
|
|
1021
1211
|
"privacy": "private"
|
|
1022
1212
|
},
|
|
1023
1213
|
{
|
|
1024
|
-
"kind": "
|
|
1025
|
-
"name": "
|
|
1214
|
+
"kind": "field",
|
|
1215
|
+
"name": "popup",
|
|
1216
|
+
"type": {
|
|
1217
|
+
"text": "FlowPopup"
|
|
1218
|
+
},
|
|
1026
1219
|
"privacy": "private"
|
|
1027
1220
|
},
|
|
1028
1221
|
{
|
|
1029
1222
|
"kind": "method",
|
|
1030
|
-
"name": "
|
|
1031
|
-
"
|
|
1032
|
-
{
|
|
1033
|
-
"
|
|
1034
|
-
"optional": true,
|
|
1035
|
-
"type": {
|
|
1036
|
-
"text": "FocusOptions"
|
|
1037
|
-
}
|
|
1223
|
+
"name": "getForm",
|
|
1224
|
+
"return": {
|
|
1225
|
+
"type": {
|
|
1226
|
+
"text": "HTMLFormElement | null"
|
|
1038
1227
|
}
|
|
1039
|
-
|
|
1040
|
-
"description": "
|
|
1228
|
+
},
|
|
1229
|
+
"description": "Gets the associated form, if one exists."
|
|
1041
1230
|
},
|
|
1042
1231
|
{
|
|
1043
|
-
"kind": "
|
|
1044
|
-
"name": "
|
|
1045
|
-
"description": "
|
|
1232
|
+
"kind": "field",
|
|
1233
|
+
"name": "validity",
|
|
1234
|
+
"description": "Gets the validity state object.",
|
|
1235
|
+
"readonly": true
|
|
1046
1236
|
},
|
|
1047
1237
|
{
|
|
1048
|
-
"kind": "
|
|
1049
|
-
"name": "
|
|
1050
|
-
"description": "
|
|
1238
|
+
"kind": "field",
|
|
1239
|
+
"name": "validationMessage",
|
|
1240
|
+
"description": "Gets the validation message.",
|
|
1241
|
+
"readonly": true
|
|
1051
1242
|
},
|
|
1052
1243
|
{
|
|
1053
1244
|
"kind": "method",
|
|
1054
|
-
"name": "
|
|
1245
|
+
"name": "checkValidity",
|
|
1055
1246
|
"return": {
|
|
1056
1247
|
"type": {
|
|
1057
|
-
"text": "
|
|
1248
|
+
"text": "boolean"
|
|
1058
1249
|
}
|
|
1059
1250
|
},
|
|
1060
|
-
"description": "
|
|
1251
|
+
"description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
|
|
1061
1252
|
},
|
|
1062
1253
|
{
|
|
1063
1254
|
"kind": "method",
|
|
1064
1255
|
"name": "reportValidity",
|
|
1256
|
+
"return": {
|
|
1257
|
+
"type": {
|
|
1258
|
+
"text": "boolean"
|
|
1259
|
+
}
|
|
1260
|
+
},
|
|
1065
1261
|
"description": "Checks for validity and shows the browser's validation message if the control is invalid."
|
|
1066
1262
|
},
|
|
1067
1263
|
{
|
|
@@ -1069,45 +1265,122 @@
|
|
|
1069
1265
|
"name": "setCustomValidity",
|
|
1070
1266
|
"parameters": [
|
|
1071
1267
|
{
|
|
1072
|
-
"name": "
|
|
1268
|
+
"name": "_",
|
|
1073
1269
|
"type": {
|
|
1074
1270
|
"text": "string"
|
|
1075
1271
|
}
|
|
1076
1272
|
}
|
|
1077
1273
|
],
|
|
1078
1274
|
"description": "Sets a custom validation message. Pass an empty string to restore validity."
|
|
1275
|
+
},
|
|
1276
|
+
{
|
|
1277
|
+
"kind": "method",
|
|
1278
|
+
"name": "handleClearClick",
|
|
1279
|
+
"parameters": [
|
|
1280
|
+
{
|
|
1281
|
+
"name": "event",
|
|
1282
|
+
"type": {
|
|
1283
|
+
"text": "MouseEvent"
|
|
1284
|
+
}
|
|
1285
|
+
}
|
|
1286
|
+
]
|
|
1287
|
+
},
|
|
1288
|
+
{
|
|
1289
|
+
"kind": "method",
|
|
1290
|
+
"name": "focus",
|
|
1291
|
+
"description": "Focuses on the control"
|
|
1292
|
+
},
|
|
1293
|
+
{
|
|
1294
|
+
"kind": "method",
|
|
1295
|
+
"name": "blur",
|
|
1296
|
+
"description": "Blurs from the control."
|
|
1297
|
+
},
|
|
1298
|
+
{
|
|
1299
|
+
"kind": "method",
|
|
1300
|
+
"name": "show",
|
|
1301
|
+
"description": "Shows the listbox."
|
|
1302
|
+
},
|
|
1303
|
+
{
|
|
1304
|
+
"kind": "method",
|
|
1305
|
+
"name": "hide",
|
|
1306
|
+
"description": "Hides the listbox."
|
|
1307
|
+
},
|
|
1308
|
+
{
|
|
1309
|
+
"kind": "method",
|
|
1310
|
+
"name": "getInputText",
|
|
1311
|
+
"description": "Gets the current value of the text input"
|
|
1079
1312
|
}
|
|
1080
1313
|
],
|
|
1081
1314
|
"events": [
|
|
1082
1315
|
{
|
|
1083
|
-
"description": "Emitted when the
|
|
1084
|
-
"name": "flow-ui-
|
|
1085
|
-
"reactName": "
|
|
1316
|
+
"description": "Emitted when the display value changes.",
|
|
1317
|
+
"name": "flow-ui-input",
|
|
1318
|
+
"reactName": "onFlowUiInput"
|
|
1086
1319
|
},
|
|
1087
1320
|
{
|
|
1088
|
-
"description": "Emitted when
|
|
1321
|
+
"description": "Emitted when the input value changes.",
|
|
1089
1322
|
"name": "flow-ui-change",
|
|
1090
1323
|
"reactName": "onFlowUiChange"
|
|
1091
1324
|
},
|
|
1092
1325
|
{
|
|
1093
|
-
"description": "Emitted when the
|
|
1094
|
-
"name": "flow-ui-clear",
|
|
1095
|
-
"reactName": "onFlowUiClear"
|
|
1096
|
-
},
|
|
1097
|
-
{
|
|
1098
|
-
"description": "Emitted when the control gains focus.",
|
|
1326
|
+
"description": "Emitted when the input is focused.",
|
|
1099
1327
|
"name": "flow-ui-focus",
|
|
1100
1328
|
"reactName": "onFlowUiFocus"
|
|
1101
1329
|
},
|
|
1102
1330
|
{
|
|
1103
|
-
"description": "Emitted when the
|
|
1104
|
-
"name": "flow-ui-
|
|
1105
|
-
"reactName": "
|
|
1331
|
+
"description": "Emitted when the input is blurred.",
|
|
1332
|
+
"name": "flow-ui-blur",
|
|
1333
|
+
"reactName": "onFlowUiBlur"
|
|
1106
1334
|
},
|
|
1107
1335
|
{
|
|
1108
|
-
"description": "Emitted when the
|
|
1336
|
+
"description": "Emitted when the dropdown is shown.",
|
|
1337
|
+
"name": "flow-ui-show",
|
|
1338
|
+
"reactName": "onFlowUiShow"
|
|
1339
|
+
},
|
|
1340
|
+
{
|
|
1341
|
+
"description": "Emitted when the dropdown is shown.",
|
|
1342
|
+
"name": "flow-ui-after-show",
|
|
1343
|
+
"reactName": "onFlowUiAfterShow"
|
|
1344
|
+
},
|
|
1345
|
+
{
|
|
1346
|
+
"description": "Emitted when the dropdown is hidden.",
|
|
1347
|
+
"name": "flow-ui-hide",
|
|
1348
|
+
"reactName": "onFlowUiHide"
|
|
1349
|
+
},
|
|
1350
|
+
{
|
|
1351
|
+
"description": "Emitted when the dropdown is hidden.",
|
|
1352
|
+
"name": "flow-ui-after-hide",
|
|
1353
|
+
"reactName": "onFlowUiAfterHide"
|
|
1354
|
+
},
|
|
1355
|
+
{
|
|
1356
|
+
"description": "Emitted when the input is invalid.",
|
|
1109
1357
|
"name": "flow-ui-invalid",
|
|
1110
1358
|
"reactName": "onFlowUiInvalid"
|
|
1359
|
+
},
|
|
1360
|
+
{
|
|
1361
|
+
"description": "Emitted when the input is valid.",
|
|
1362
|
+
"name": "flow-ui-valid",
|
|
1363
|
+
"reactName": "onFlowUiValid"
|
|
1364
|
+
},
|
|
1365
|
+
{
|
|
1366
|
+
"description": "Emitted when the input is validated.",
|
|
1367
|
+
"name": "flow-ui-validate",
|
|
1368
|
+
"reactName": "onFlowUiValidate"
|
|
1369
|
+
},
|
|
1370
|
+
{
|
|
1371
|
+
"description": "Emitted when the input is validated and the validity state is updated.",
|
|
1372
|
+
"name": "flow-ui-validate-complete",
|
|
1373
|
+
"reactName": "onFlowUiValidateComplete"
|
|
1374
|
+
},
|
|
1375
|
+
{
|
|
1376
|
+
"description": "Emitted when the input is validated and an error occurs.",
|
|
1377
|
+
"name": "flow-ui-validate-error",
|
|
1378
|
+
"reactName": "onFlowUiValidateError"
|
|
1379
|
+
},
|
|
1380
|
+
{
|
|
1381
|
+
"description": "Emitted when the input is validated and no errors occur.",
|
|
1382
|
+
"name": "flow-ui-validate-success",
|
|
1383
|
+
"reactName": "onFlowUiValidateSuccess"
|
|
1111
1384
|
}
|
|
1112
1385
|
],
|
|
1113
1386
|
"attributes": [
|
|
@@ -1117,7 +1390,7 @@
|
|
|
1117
1390
|
"text": "'small' | 'medium' | 'large'"
|
|
1118
1391
|
},
|
|
1119
1392
|
"default": "'medium'",
|
|
1120
|
-
"description": "The
|
|
1393
|
+
"description": "The autocomplete's size",
|
|
1121
1394
|
"fieldName": "size"
|
|
1122
1395
|
},
|
|
1123
1396
|
{
|
|
@@ -1126,7 +1399,7 @@
|
|
|
1126
1399
|
"text": "boolean"
|
|
1127
1400
|
},
|
|
1128
1401
|
"default": "false",
|
|
1129
|
-
"description": "Draws a filled input
|
|
1402
|
+
"description": "Draws a filled autocomplete input",
|
|
1130
1403
|
"fieldName": "filled"
|
|
1131
1404
|
},
|
|
1132
1405
|
{
|
|
@@ -1135,7 +1408,7 @@
|
|
|
1135
1408
|
"text": "boolean"
|
|
1136
1409
|
},
|
|
1137
1410
|
"default": "false",
|
|
1138
|
-
"description": "Draws a pill-style input with rounded edges
|
|
1411
|
+
"description": "Draws a pill-style autocomplete input with rounded edges",
|
|
1139
1412
|
"fieldName": "pill"
|
|
1140
1413
|
},
|
|
1141
1414
|
{
|
|
@@ -1144,7 +1417,7 @@
|
|
|
1144
1417
|
"text": "string"
|
|
1145
1418
|
},
|
|
1146
1419
|
"default": "''",
|
|
1147
|
-
"description": "The input's label. If you need to display HTML, use the `
|
|
1420
|
+
"description": "The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead",
|
|
1148
1421
|
"fieldName": "label"
|
|
1149
1422
|
},
|
|
1150
1423
|
{
|
|
@@ -1153,16 +1426,25 @@
|
|
|
1153
1426
|
"text": "string"
|
|
1154
1427
|
},
|
|
1155
1428
|
"default": "''",
|
|
1156
|
-
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead
|
|
1429
|
+
"description": "The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead",
|
|
1157
1430
|
"fieldName": "helpText"
|
|
1158
1431
|
},
|
|
1432
|
+
{
|
|
1433
|
+
"name": "placeholder",
|
|
1434
|
+
"type": {
|
|
1435
|
+
"text": "string"
|
|
1436
|
+
},
|
|
1437
|
+
"default": "''",
|
|
1438
|
+
"description": "The autocomplete input's placeholder text",
|
|
1439
|
+
"fieldName": "placeholder"
|
|
1440
|
+
},
|
|
1159
1441
|
{
|
|
1160
1442
|
"name": "disabled",
|
|
1161
1443
|
"type": {
|
|
1162
1444
|
"text": "boolean"
|
|
1163
1445
|
},
|
|
1164
1446
|
"default": "false",
|
|
1165
|
-
"description": "Disables the
|
|
1447
|
+
"description": "Disables the autocomplete",
|
|
1166
1448
|
"fieldName": "disabled"
|
|
1167
1449
|
},
|
|
1168
1450
|
{
|
|
@@ -1170,8 +1452,7 @@
|
|
|
1170
1452
|
"type": {
|
|
1171
1453
|
"text": "string"
|
|
1172
1454
|
},
|
|
1173
|
-
"
|
|
1174
|
-
"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.",
|
|
1455
|
+
"description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
|
|
1175
1456
|
"fieldName": "form"
|
|
1176
1457
|
},
|
|
1177
1458
|
{
|
|
@@ -1180,7 +1461,7 @@
|
|
|
1180
1461
|
"text": "boolean"
|
|
1181
1462
|
},
|
|
1182
1463
|
"default": "false",
|
|
1183
|
-
"description": "Makes the
|
|
1464
|
+
"description": "Makes the autocomplete a required field",
|
|
1184
1465
|
"fieldName": "required"
|
|
1185
1466
|
},
|
|
1186
1467
|
{
|
|
@@ -1189,7 +1470,7 @@
|
|
|
1189
1470
|
"text": "boolean"
|
|
1190
1471
|
},
|
|
1191
1472
|
"default": "false",
|
|
1192
|
-
"description": "Display the
|
|
1473
|
+
"description": "Display the autocomplete in the 'inline' form control style",
|
|
1193
1474
|
"fieldName": "inline"
|
|
1194
1475
|
},
|
|
1195
1476
|
{
|
|
@@ -1200,214 +1481,219 @@
|
|
|
1200
1481
|
"default": "false",
|
|
1201
1482
|
"description": "Indicates that the control should display a divider",
|
|
1202
1483
|
"fieldName": "divider"
|
|
1203
|
-
}
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1484
|
+
},
|
|
1485
|
+
{
|
|
1486
|
+
"name": "hoist",
|
|
1487
|
+
"type": {
|
|
1488
|
+
"text": "boolean"
|
|
1489
|
+
},
|
|
1490
|
+
"default": "false",
|
|
1491
|
+
"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.",
|
|
1492
|
+
"fieldName": "hoist"
|
|
1493
|
+
},
|
|
1494
|
+
{
|
|
1495
|
+
"name": "placement",
|
|
1496
|
+
"type": {
|
|
1497
|
+
"text": "'top' | 'bottom'"
|
|
1498
|
+
},
|
|
1499
|
+
"default": "'bottom'",
|
|
1500
|
+
"description": "The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
1501
|
+
"fieldName": "placement"
|
|
1502
|
+
},
|
|
1503
|
+
{
|
|
1504
|
+
"name": "value",
|
|
1505
|
+
"type": {
|
|
1506
|
+
"text": "string"
|
|
1507
|
+
},
|
|
1508
|
+
"default": "''",
|
|
1509
|
+
"description": "Current value of the control, selected from one of the valid options available",
|
|
1510
|
+
"fieldName": "value"
|
|
1511
|
+
},
|
|
1512
|
+
{
|
|
1513
|
+
"name": "displayWith",
|
|
1514
|
+
"type": {
|
|
1515
|
+
"text": "((value: string) => string) | ((value: string) => Promise<string>)"
|
|
1516
|
+
},
|
|
1517
|
+
"default": "(value => value)",
|
|
1518
|
+
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
1519
|
+
"fieldName": "displayWith"
|
|
1520
|
+
},
|
|
1521
|
+
{
|
|
1522
|
+
"name": "debounce-delay",
|
|
1523
|
+
"type": {
|
|
1524
|
+
"text": "number"
|
|
1525
|
+
},
|
|
1526
|
+
"default": "0",
|
|
1527
|
+
"description": "Debounce delay",
|
|
1528
|
+
"fieldName": "debounceDelay"
|
|
1529
|
+
},
|
|
1530
|
+
{
|
|
1531
|
+
"name": "clearable",
|
|
1532
|
+
"type": {
|
|
1533
|
+
"text": "boolean"
|
|
1534
|
+
},
|
|
1535
|
+
"default": "false",
|
|
1536
|
+
"description": "Show the option to clear input",
|
|
1537
|
+
"fieldName": "clearable"
|
|
1538
|
+
}
|
|
1539
|
+
],
|
|
1540
|
+
"superclass": {
|
|
1541
|
+
"name": "FlowRdfFormControl",
|
|
1542
|
+
"module": "/src/internal/flow-ui-rdf-element"
|
|
1543
|
+
},
|
|
1544
|
+
"tagName": "flow-ui-autocomplete",
|
|
1545
|
+
"summary": "The Autocomplete is a Text input enhanced by a panel of suggested options.",
|
|
1546
|
+
"dependencies": [
|
|
1547
|
+
"flow-ui-popup",
|
|
1548
|
+
"flow-ui-icon"
|
|
1549
|
+
],
|
|
1550
|
+
"customElement": true
|
|
1551
|
+
}
|
|
1552
|
+
],
|
|
1553
|
+
"exports": [
|
|
1554
|
+
{
|
|
1555
|
+
"kind": "js",
|
|
1556
|
+
"name": "default",
|
|
1557
|
+
"declaration": {
|
|
1558
|
+
"name": "FlowUiAutocomplete",
|
|
1559
|
+
"module": "components/autocomplete/autocomplete.component.js"
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
]
|
|
1563
|
+
},
|
|
1564
|
+
{
|
|
1565
|
+
"kind": "javascript-module",
|
|
1566
|
+
"path": "components/autocomplete/autocomplete.js",
|
|
1567
|
+
"declarations": [],
|
|
1236
1568
|
"exports": [
|
|
1237
1569
|
{
|
|
1238
1570
|
"kind": "js",
|
|
1239
1571
|
"name": "*",
|
|
1240
1572
|
"declaration": {
|
|
1241
1573
|
"name": "*",
|
|
1242
|
-
"package": "./
|
|
1574
|
+
"package": "./autocomplete.component"
|
|
1243
1575
|
}
|
|
1244
1576
|
},
|
|
1245
1577
|
{
|
|
1246
1578
|
"kind": "js",
|
|
1247
1579
|
"name": "default",
|
|
1248
1580
|
"declaration": {
|
|
1249
|
-
"name": "
|
|
1250
|
-
"module": "components/
|
|
1581
|
+
"name": "FlowUiAutocomplete",
|
|
1582
|
+
"module": "components/autocomplete/autocomplete.js"
|
|
1251
1583
|
}
|
|
1252
1584
|
}
|
|
1253
1585
|
]
|
|
1254
1586
|
},
|
|
1255
1587
|
{
|
|
1256
1588
|
"kind": "javascript-module",
|
|
1257
|
-
"path": "components/
|
|
1589
|
+
"path": "components/badge/badge.component.js",
|
|
1258
1590
|
"declarations": [
|
|
1259
1591
|
{
|
|
1260
1592
|
"kind": "class",
|
|
1261
1593
|
"description": "",
|
|
1262
|
-
"name": "
|
|
1263
|
-
"cssProperties": [
|
|
1264
|
-
{
|
|
1265
|
-
"description": "The size of the avatar.",
|
|
1266
|
-
"name": "--size"
|
|
1267
|
-
}
|
|
1268
|
-
],
|
|
1594
|
+
"name": "FlowUiBadge",
|
|
1269
1595
|
"cssParts": [
|
|
1270
1596
|
{
|
|
1271
1597
|
"description": "The component's base wrapper.",
|
|
1272
1598
|
"name": "base"
|
|
1273
|
-
},
|
|
1274
|
-
{
|
|
1275
|
-
"description": "The container that wraps the avatar's icon.",
|
|
1276
|
-
"name": "icon"
|
|
1277
|
-
},
|
|
1278
|
-
{
|
|
1279
|
-
"description": "The container that wraps the avatar's initials.",
|
|
1280
|
-
"name": "initials"
|
|
1281
|
-
},
|
|
1282
|
-
{
|
|
1283
|
-
"description": "The avatar image. Only shown when the `image` attribute is set.",
|
|
1284
|
-
"name": "image"
|
|
1285
1599
|
}
|
|
1286
1600
|
],
|
|
1287
1601
|
"slots": [
|
|
1288
1602
|
{
|
|
1289
|
-
"description": "The
|
|
1290
|
-
"name": "
|
|
1603
|
+
"description": "The badge's content.",
|
|
1604
|
+
"name": ""
|
|
1291
1605
|
}
|
|
1292
1606
|
],
|
|
1293
1607
|
"members": [
|
|
1294
1608
|
{
|
|
1295
1609
|
"kind": "field",
|
|
1296
|
-
"name": "
|
|
1297
|
-
"type": {
|
|
1298
|
-
"text": "boolean"
|
|
1299
|
-
},
|
|
1300
|
-
"privacy": "private",
|
|
1301
|
-
"default": "false"
|
|
1302
|
-
},
|
|
1303
|
-
{
|
|
1304
|
-
"kind": "field",
|
|
1305
|
-
"name": "image",
|
|
1306
|
-
"type": {
|
|
1307
|
-
"text": "string"
|
|
1308
|
-
},
|
|
1309
|
-
"default": "''",
|
|
1310
|
-
"description": "The image source to use for the avatar.",
|
|
1311
|
-
"attribute": "image"
|
|
1312
|
-
},
|
|
1313
|
-
{
|
|
1314
|
-
"kind": "field",
|
|
1315
|
-
"name": "label",
|
|
1610
|
+
"name": "variant",
|
|
1316
1611
|
"type": {
|
|
1317
|
-
"text": "
|
|
1612
|
+
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
1318
1613
|
},
|
|
1319
|
-
"default": "''",
|
|
1320
|
-
"description": "
|
|
1321
|
-
"attribute": "
|
|
1614
|
+
"default": "'primary'",
|
|
1615
|
+
"description": "The badge's theme variant.",
|
|
1616
|
+
"attribute": "variant",
|
|
1617
|
+
"reflects": true
|
|
1322
1618
|
},
|
|
1323
1619
|
{
|
|
1324
1620
|
"kind": "field",
|
|
1325
|
-
"name": "
|
|
1621
|
+
"name": "size",
|
|
1326
1622
|
"type": {
|
|
1327
|
-
"text": "
|
|
1623
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1328
1624
|
},
|
|
1329
|
-
"default": "''",
|
|
1330
|
-
"description": "
|
|
1331
|
-
"attribute": "
|
|
1625
|
+
"default": "'medium'",
|
|
1626
|
+
"description": "The badge size.",
|
|
1627
|
+
"attribute": "size",
|
|
1628
|
+
"reflects": true
|
|
1332
1629
|
},
|
|
1333
1630
|
{
|
|
1334
1631
|
"kind": "field",
|
|
1335
|
-
"name": "
|
|
1632
|
+
"name": "pill",
|
|
1336
1633
|
"type": {
|
|
1337
|
-
"text": "
|
|
1634
|
+
"text": "boolean"
|
|
1338
1635
|
},
|
|
1339
|
-
"default": "
|
|
1340
|
-
"description": "
|
|
1341
|
-
"attribute": "
|
|
1636
|
+
"default": "false",
|
|
1637
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
1638
|
+
"attribute": "pill",
|
|
1639
|
+
"reflects": true
|
|
1342
1640
|
},
|
|
1343
1641
|
{
|
|
1344
1642
|
"kind": "field",
|
|
1345
|
-
"name": "
|
|
1643
|
+
"name": "pulse",
|
|
1346
1644
|
"type": {
|
|
1347
|
-
"text": "
|
|
1645
|
+
"text": "boolean"
|
|
1348
1646
|
},
|
|
1349
|
-
"default": "
|
|
1350
|
-
"description": "
|
|
1351
|
-
"attribute": "
|
|
1647
|
+
"default": "false",
|
|
1648
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
1649
|
+
"attribute": "pulse",
|
|
1352
1650
|
"reflects": true
|
|
1353
1651
|
}
|
|
1354
1652
|
],
|
|
1355
1653
|
"attributes": [
|
|
1356
1654
|
{
|
|
1357
|
-
"name": "
|
|
1358
|
-
"type": {
|
|
1359
|
-
"text": "string"
|
|
1360
|
-
},
|
|
1361
|
-
"default": "''",
|
|
1362
|
-
"description": "The image source to use for the avatar.",
|
|
1363
|
-
"fieldName": "image"
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "label",
|
|
1655
|
+
"name": "variant",
|
|
1367
1656
|
"type": {
|
|
1368
|
-
"text": "
|
|
1657
|
+
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
1369
1658
|
},
|
|
1370
|
-
"default": "''",
|
|
1371
|
-
"description": "
|
|
1372
|
-
"fieldName": "
|
|
1659
|
+
"default": "'primary'",
|
|
1660
|
+
"description": "The badge's theme variant.",
|
|
1661
|
+
"fieldName": "variant"
|
|
1373
1662
|
},
|
|
1374
1663
|
{
|
|
1375
|
-
"name": "
|
|
1664
|
+
"name": "size",
|
|
1376
1665
|
"type": {
|
|
1377
|
-
"text": "
|
|
1666
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1378
1667
|
},
|
|
1379
|
-
"default": "''",
|
|
1380
|
-
"description": "
|
|
1381
|
-
"fieldName": "
|
|
1668
|
+
"default": "'medium'",
|
|
1669
|
+
"description": "The badge size.",
|
|
1670
|
+
"fieldName": "size"
|
|
1382
1671
|
},
|
|
1383
1672
|
{
|
|
1384
|
-
"name": "
|
|
1673
|
+
"name": "pill",
|
|
1385
1674
|
"type": {
|
|
1386
|
-
"text": "
|
|
1675
|
+
"text": "boolean"
|
|
1387
1676
|
},
|
|
1388
|
-
"default": "
|
|
1389
|
-
"description": "
|
|
1390
|
-
"fieldName": "
|
|
1677
|
+
"default": "false",
|
|
1678
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
1679
|
+
"fieldName": "pill"
|
|
1391
1680
|
},
|
|
1392
1681
|
{
|
|
1393
|
-
"name": "
|
|
1682
|
+
"name": "pulse",
|
|
1394
1683
|
"type": {
|
|
1395
|
-
"text": "
|
|
1684
|
+
"text": "boolean"
|
|
1396
1685
|
},
|
|
1397
|
-
"default": "
|
|
1398
|
-
"description": "
|
|
1399
|
-
"fieldName": "
|
|
1686
|
+
"default": "false",
|
|
1687
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
1688
|
+
"fieldName": "pulse"
|
|
1400
1689
|
}
|
|
1401
1690
|
],
|
|
1402
1691
|
"superclass": {
|
|
1403
1692
|
"name": "FlowRdfElement",
|
|
1404
1693
|
"module": "/src/internal/flow-ui-rdf-element"
|
|
1405
1694
|
},
|
|
1406
|
-
"tagName": "flow-ui-
|
|
1407
|
-
"summary": "
|
|
1408
|
-
"dependencies": [
|
|
1409
|
-
"flow-ui-icon"
|
|
1410
|
-
],
|
|
1695
|
+
"tagName": "flow-ui-badge",
|
|
1696
|
+
"summary": "Badges are used to draw attention and display statuses or counts.",
|
|
1411
1697
|
"customElement": true
|
|
1412
1698
|
}
|
|
1413
1699
|
],
|
|
@@ -1416,137 +1702,451 @@
|
|
|
1416
1702
|
"kind": "js",
|
|
1417
1703
|
"name": "default",
|
|
1418
1704
|
"declaration": {
|
|
1419
|
-
"name": "
|
|
1420
|
-
"module": "components/
|
|
1705
|
+
"name": "FlowUiBadge",
|
|
1706
|
+
"module": "components/badge/badge.component.js"
|
|
1421
1707
|
}
|
|
1422
1708
|
}
|
|
1423
1709
|
]
|
|
1424
1710
|
},
|
|
1425
1711
|
{
|
|
1426
1712
|
"kind": "javascript-module",
|
|
1427
|
-
"path": "components/
|
|
1713
|
+
"path": "components/badge/badge.js",
|
|
1428
1714
|
"declarations": [],
|
|
1429
1715
|
"exports": [
|
|
1430
1716
|
{
|
|
1431
1717
|
"kind": "js",
|
|
1432
1718
|
"name": "default",
|
|
1433
1719
|
"declaration": {
|
|
1434
|
-
"name": "
|
|
1435
|
-
"module": "components/
|
|
1720
|
+
"name": "FlowUiBadge",
|
|
1721
|
+
"module": "components/badge/badge.js"
|
|
1436
1722
|
}
|
|
1437
1723
|
}
|
|
1438
1724
|
]
|
|
1439
1725
|
},
|
|
1440
1726
|
{
|
|
1441
1727
|
"kind": "javascript-module",
|
|
1442
|
-
"path": "components/
|
|
1728
|
+
"path": "components/base-control/base-control.component.js",
|
|
1443
1729
|
"declarations": [
|
|
1444
1730
|
{
|
|
1445
1731
|
"kind": "class",
|
|
1446
1732
|
"description": "",
|
|
1447
|
-
"name": "
|
|
1733
|
+
"name": "FlowUiBaseControl",
|
|
1448
1734
|
"cssParts": [
|
|
1735
|
+
{
|
|
1736
|
+
"description": "The form control that wraps the label, input, and help text.",
|
|
1737
|
+
"name": "form-control"
|
|
1738
|
+
},
|
|
1739
|
+
{
|
|
1740
|
+
"description": "The label's wrapper.",
|
|
1741
|
+
"name": "form-control-label"
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
"description": "The input's wrapper.",
|
|
1745
|
+
"name": "form-control-input"
|
|
1746
|
+
},
|
|
1747
|
+
{
|
|
1748
|
+
"description": "The help text's wrapper.",
|
|
1749
|
+
"name": "form-control-help-text"
|
|
1750
|
+
},
|
|
1449
1751
|
{
|
|
1450
1752
|
"description": "The component's base wrapper.",
|
|
1451
1753
|
"name": "base"
|
|
1452
|
-
}
|
|
1453
|
-
|
|
1454
|
-
|
|
1754
|
+
},
|
|
1755
|
+
{
|
|
1756
|
+
"description": "The internal `<input>` control.",
|
|
1757
|
+
"name": "input"
|
|
1758
|
+
},
|
|
1759
|
+
{
|
|
1760
|
+
"description": "The container that wraps the prefix.",
|
|
1761
|
+
"name": "prefix"
|
|
1762
|
+
},
|
|
1763
|
+
{
|
|
1764
|
+
"description": "The clear button.",
|
|
1765
|
+
"name": "clear-button"
|
|
1766
|
+
},
|
|
1767
|
+
{
|
|
1768
|
+
"description": "The password toggle button.",
|
|
1769
|
+
"name": "password-toggle-button"
|
|
1770
|
+
},
|
|
1771
|
+
{
|
|
1772
|
+
"description": "The container that wraps the suffix.",
|
|
1773
|
+
"name": "suffix"
|
|
1774
|
+
}
|
|
1775
|
+
],
|
|
1776
|
+
"slots": [
|
|
1777
|
+
{
|
|
1778
|
+
"description": "The input's label. Alternatively, you can use the `label` attribute.",
|
|
1779
|
+
"name": "label"
|
|
1780
|
+
},
|
|
1781
|
+
{
|
|
1782
|
+
"description": "Used to prepend a presentational icon or similar element to the input.",
|
|
1783
|
+
"name": "prefix"
|
|
1784
|
+
},
|
|
1785
|
+
{
|
|
1786
|
+
"description": "Used to append a presentational icon or similar element to the input.",
|
|
1787
|
+
"name": "suffix"
|
|
1788
|
+
},
|
|
1789
|
+
{
|
|
1790
|
+
"description": "An icon to use in lieu of the default clear icon.",
|
|
1791
|
+
"name": "clear-icon"
|
|
1792
|
+
},
|
|
1793
|
+
{
|
|
1794
|
+
"description": "An icon to use in lieu of the default show password icon.",
|
|
1795
|
+
"name": "show-password-icon"
|
|
1796
|
+
},
|
|
1797
|
+
{
|
|
1798
|
+
"description": "An icon to use in lieu of the default hide password icon.",
|
|
1799
|
+
"name": "hide-password-icon"
|
|
1800
|
+
},
|
|
1801
|
+
{
|
|
1802
|
+
"description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
1803
|
+
"name": "help-text"
|
|
1804
|
+
}
|
|
1805
|
+
],
|
|
1806
|
+
"members": [
|
|
1807
|
+
{
|
|
1808
|
+
"kind": "field",
|
|
1809
|
+
"name": "formControlController",
|
|
1810
|
+
"privacy": "private",
|
|
1811
|
+
"readonly": true,
|
|
1812
|
+
"default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
|
|
1813
|
+
},
|
|
1814
|
+
{
|
|
1815
|
+
"kind": "field",
|
|
1816
|
+
"name": "hasSlotController",
|
|
1817
|
+
"privacy": "private",
|
|
1818
|
+
"readonly": true,
|
|
1819
|
+
"default": "new HasSlotController(this, 'help-text', 'label')"
|
|
1820
|
+
},
|
|
1821
|
+
{
|
|
1822
|
+
"kind": "field",
|
|
1823
|
+
"name": "hasFocus",
|
|
1824
|
+
"type": {
|
|
1825
|
+
"text": "boolean"
|
|
1826
|
+
},
|
|
1827
|
+
"privacy": "private",
|
|
1828
|
+
"default": "false"
|
|
1829
|
+
},
|
|
1830
|
+
{
|
|
1831
|
+
"kind": "field",
|
|
1832
|
+
"name": "size",
|
|
1833
|
+
"type": {
|
|
1834
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1835
|
+
},
|
|
1836
|
+
"default": "'medium'",
|
|
1837
|
+
"description": "The input's size.",
|
|
1838
|
+
"attribute": "size",
|
|
1839
|
+
"reflects": true
|
|
1840
|
+
},
|
|
1841
|
+
{
|
|
1842
|
+
"kind": "field",
|
|
1843
|
+
"name": "filled",
|
|
1844
|
+
"type": {
|
|
1845
|
+
"text": "boolean"
|
|
1846
|
+
},
|
|
1847
|
+
"default": "false",
|
|
1848
|
+
"description": "Draws a filled input.",
|
|
1849
|
+
"attribute": "filled",
|
|
1850
|
+
"reflects": true
|
|
1851
|
+
},
|
|
1852
|
+
{
|
|
1853
|
+
"kind": "field",
|
|
1854
|
+
"name": "pill",
|
|
1855
|
+
"type": {
|
|
1856
|
+
"text": "boolean"
|
|
1857
|
+
},
|
|
1858
|
+
"default": "false",
|
|
1859
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
1860
|
+
"attribute": "pill",
|
|
1861
|
+
"reflects": true
|
|
1862
|
+
},
|
|
1863
|
+
{
|
|
1864
|
+
"kind": "field",
|
|
1865
|
+
"name": "label",
|
|
1866
|
+
"type": {
|
|
1867
|
+
"text": "string"
|
|
1868
|
+
},
|
|
1869
|
+
"default": "''",
|
|
1870
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
1871
|
+
"attribute": "label"
|
|
1872
|
+
},
|
|
1873
|
+
{
|
|
1874
|
+
"kind": "field",
|
|
1875
|
+
"name": "helpText",
|
|
1876
|
+
"type": {
|
|
1877
|
+
"text": "string"
|
|
1878
|
+
},
|
|
1879
|
+
"default": "''",
|
|
1880
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
1881
|
+
"attribute": "help-text"
|
|
1882
|
+
},
|
|
1883
|
+
{
|
|
1884
|
+
"kind": "field",
|
|
1885
|
+
"name": "disabled",
|
|
1886
|
+
"type": {
|
|
1887
|
+
"text": "boolean"
|
|
1888
|
+
},
|
|
1889
|
+
"default": "false",
|
|
1890
|
+
"description": "Disables the input.",
|
|
1891
|
+
"attribute": "disabled",
|
|
1892
|
+
"reflects": true
|
|
1893
|
+
},
|
|
1894
|
+
{
|
|
1895
|
+
"kind": "field",
|
|
1896
|
+
"name": "form",
|
|
1897
|
+
"type": {
|
|
1898
|
+
"text": "string"
|
|
1899
|
+
},
|
|
1900
|
+
"default": "''",
|
|
1901
|
+
"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.",
|
|
1902
|
+
"attribute": "form",
|
|
1903
|
+
"reflects": true
|
|
1904
|
+
},
|
|
1905
|
+
{
|
|
1906
|
+
"kind": "field",
|
|
1907
|
+
"name": "required",
|
|
1908
|
+
"type": {
|
|
1909
|
+
"text": "boolean"
|
|
1910
|
+
},
|
|
1911
|
+
"default": "false",
|
|
1912
|
+
"description": "Makes the input a required field.",
|
|
1913
|
+
"attribute": "required",
|
|
1914
|
+
"reflects": true
|
|
1915
|
+
},
|
|
1916
|
+
{
|
|
1917
|
+
"kind": "field",
|
|
1918
|
+
"name": "inline",
|
|
1919
|
+
"type": {
|
|
1920
|
+
"text": "boolean"
|
|
1921
|
+
},
|
|
1922
|
+
"default": "false",
|
|
1923
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
1924
|
+
"attribute": "inline",
|
|
1925
|
+
"reflects": true
|
|
1926
|
+
},
|
|
1927
|
+
{
|
|
1928
|
+
"kind": "field",
|
|
1929
|
+
"name": "divider",
|
|
1930
|
+
"type": {
|
|
1931
|
+
"text": "boolean"
|
|
1932
|
+
},
|
|
1933
|
+
"default": "false",
|
|
1934
|
+
"description": "Indicates that the control should display a divider",
|
|
1935
|
+
"attribute": "divider",
|
|
1936
|
+
"reflects": true
|
|
1937
|
+
},
|
|
1938
|
+
{
|
|
1939
|
+
"kind": "field",
|
|
1940
|
+
"name": "validity",
|
|
1941
|
+
"description": "Gets the validity state object",
|
|
1942
|
+
"readonly": true
|
|
1943
|
+
},
|
|
1944
|
+
{
|
|
1945
|
+
"kind": "field",
|
|
1946
|
+
"name": "validationMessage",
|
|
1947
|
+
"description": "Gets the validation message",
|
|
1948
|
+
"readonly": true
|
|
1949
|
+
},
|
|
1950
|
+
{
|
|
1951
|
+
"kind": "method",
|
|
1952
|
+
"name": "handleBlur",
|
|
1953
|
+
"privacy": "private"
|
|
1954
|
+
},
|
|
1955
|
+
{
|
|
1956
|
+
"kind": "method",
|
|
1957
|
+
"name": "handleFocus",
|
|
1958
|
+
"privacy": "private"
|
|
1959
|
+
},
|
|
1960
|
+
{
|
|
1961
|
+
"kind": "method",
|
|
1962
|
+
"name": "focus",
|
|
1963
|
+
"parameters": [
|
|
1964
|
+
{
|
|
1965
|
+
"name": "options",
|
|
1966
|
+
"optional": true,
|
|
1967
|
+
"type": {
|
|
1968
|
+
"text": "FocusOptions"
|
|
1969
|
+
}
|
|
1970
|
+
}
|
|
1971
|
+
],
|
|
1972
|
+
"description": "Sets focus on the input."
|
|
1973
|
+
},
|
|
1974
|
+
{
|
|
1975
|
+
"kind": "method",
|
|
1976
|
+
"name": "blur",
|
|
1977
|
+
"description": "Removes focus from the input."
|
|
1978
|
+
},
|
|
1979
|
+
{
|
|
1980
|
+
"kind": "method",
|
|
1981
|
+
"name": "checkValidity",
|
|
1982
|
+
"description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
|
|
1983
|
+
},
|
|
1984
|
+
{
|
|
1985
|
+
"kind": "method",
|
|
1986
|
+
"name": "getForm",
|
|
1987
|
+
"return": {
|
|
1988
|
+
"type": {
|
|
1989
|
+
"text": "HTMLFormElement | null"
|
|
1990
|
+
}
|
|
1991
|
+
},
|
|
1992
|
+
"description": "Gets the associated form, if one exists."
|
|
1993
|
+
},
|
|
1994
|
+
{
|
|
1995
|
+
"kind": "method",
|
|
1996
|
+
"name": "reportValidity",
|
|
1997
|
+
"description": "Checks for validity and shows the browser's validation message if the control is invalid."
|
|
1998
|
+
},
|
|
1999
|
+
{
|
|
2000
|
+
"kind": "method",
|
|
2001
|
+
"name": "setCustomValidity",
|
|
2002
|
+
"parameters": [
|
|
2003
|
+
{
|
|
2004
|
+
"name": "message",
|
|
2005
|
+
"type": {
|
|
2006
|
+
"text": "string"
|
|
2007
|
+
}
|
|
2008
|
+
}
|
|
2009
|
+
],
|
|
2010
|
+
"description": "Sets a custom validation message. Pass an empty string to restore validity."
|
|
2011
|
+
}
|
|
2012
|
+
],
|
|
2013
|
+
"events": [
|
|
2014
|
+
{
|
|
2015
|
+
"description": "Emitted when the control loses focus.",
|
|
2016
|
+
"name": "flow-ui-blur",
|
|
2017
|
+
"reactName": "onFlowUiBlur"
|
|
2018
|
+
},
|
|
2019
|
+
{
|
|
2020
|
+
"description": "Emitted when an alteration to the control's value is committed by the user.",
|
|
2021
|
+
"name": "flow-ui-change",
|
|
2022
|
+
"reactName": "onFlowUiChange"
|
|
2023
|
+
},
|
|
2024
|
+
{
|
|
2025
|
+
"description": "Emitted when the clear button is activated.",
|
|
2026
|
+
"name": "flow-ui-clear",
|
|
2027
|
+
"reactName": "onFlowUiClear"
|
|
2028
|
+
},
|
|
2029
|
+
{
|
|
2030
|
+
"description": "Emitted when the control gains focus.",
|
|
2031
|
+
"name": "flow-ui-focus",
|
|
2032
|
+
"reactName": "onFlowUiFocus"
|
|
2033
|
+
},
|
|
2034
|
+
{
|
|
2035
|
+
"description": "Emitted when the control receives input.",
|
|
2036
|
+
"name": "flow-ui-input",
|
|
2037
|
+
"reactName": "onFlowUiInput"
|
|
2038
|
+
},
|
|
1455
2039
|
{
|
|
1456
|
-
"description": "
|
|
1457
|
-
"name": ""
|
|
2040
|
+
"description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
|
|
2041
|
+
"name": "flow-ui-invalid",
|
|
2042
|
+
"reactName": "onFlowUiInvalid"
|
|
1458
2043
|
}
|
|
1459
2044
|
],
|
|
1460
|
-
"
|
|
2045
|
+
"attributes": [
|
|
1461
2046
|
{
|
|
1462
|
-
"
|
|
1463
|
-
"name": "variant",
|
|
2047
|
+
"name": "size",
|
|
1464
2048
|
"type": {
|
|
1465
|
-
"text": "'
|
|
2049
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1466
2050
|
},
|
|
1467
|
-
"default": "'
|
|
1468
|
-
"description": "The
|
|
1469
|
-
"
|
|
1470
|
-
"reflects": true
|
|
2051
|
+
"default": "'medium'",
|
|
2052
|
+
"description": "The input's size.",
|
|
2053
|
+
"fieldName": "size"
|
|
1471
2054
|
},
|
|
1472
2055
|
{
|
|
1473
|
-
"
|
|
1474
|
-
"name": "size",
|
|
2056
|
+
"name": "filled",
|
|
1475
2057
|
"type": {
|
|
1476
|
-
"text": "
|
|
2058
|
+
"text": "boolean"
|
|
1477
2059
|
},
|
|
1478
|
-
"default": "
|
|
1479
|
-
"description": "
|
|
1480
|
-
"
|
|
1481
|
-
"reflects": true
|
|
2060
|
+
"default": "false",
|
|
2061
|
+
"description": "Draws a filled input.",
|
|
2062
|
+
"fieldName": "filled"
|
|
1482
2063
|
},
|
|
1483
2064
|
{
|
|
1484
|
-
"kind": "field",
|
|
1485
2065
|
"name": "pill",
|
|
1486
2066
|
"type": {
|
|
1487
2067
|
"text": "boolean"
|
|
1488
2068
|
},
|
|
1489
2069
|
"default": "false",
|
|
1490
|
-
"description": "Draws a pill-style
|
|
1491
|
-
"
|
|
1492
|
-
"reflects": true
|
|
2070
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
2071
|
+
"fieldName": "pill"
|
|
1493
2072
|
},
|
|
1494
2073
|
{
|
|
1495
|
-
"
|
|
1496
|
-
"
|
|
2074
|
+
"name": "label",
|
|
2075
|
+
"type": {
|
|
2076
|
+
"text": "string"
|
|
2077
|
+
},
|
|
2078
|
+
"default": "''",
|
|
2079
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
2080
|
+
"fieldName": "label"
|
|
2081
|
+
},
|
|
2082
|
+
{
|
|
2083
|
+
"name": "help-text",
|
|
2084
|
+
"type": {
|
|
2085
|
+
"text": "string"
|
|
2086
|
+
},
|
|
2087
|
+
"default": "''",
|
|
2088
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2089
|
+
"fieldName": "helpText"
|
|
2090
|
+
},
|
|
2091
|
+
{
|
|
2092
|
+
"name": "disabled",
|
|
1497
2093
|
"type": {
|
|
1498
2094
|
"text": "boolean"
|
|
1499
2095
|
},
|
|
1500
2096
|
"default": "false",
|
|
1501
|
-
"description": "
|
|
1502
|
-
"
|
|
1503
|
-
|
|
1504
|
-
}
|
|
1505
|
-
],
|
|
1506
|
-
"attributes": [
|
|
2097
|
+
"description": "Disables the input.",
|
|
2098
|
+
"fieldName": "disabled"
|
|
2099
|
+
},
|
|
1507
2100
|
{
|
|
1508
|
-
"name": "
|
|
2101
|
+
"name": "form",
|
|
1509
2102
|
"type": {
|
|
1510
|
-
"text": "
|
|
2103
|
+
"text": "string"
|
|
1511
2104
|
},
|
|
1512
|
-
"default": "'
|
|
1513
|
-
"description": "The
|
|
1514
|
-
"fieldName": "
|
|
2105
|
+
"default": "''",
|
|
2106
|
+
"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.",
|
|
2107
|
+
"fieldName": "form"
|
|
1515
2108
|
},
|
|
1516
2109
|
{
|
|
1517
|
-
"name": "
|
|
2110
|
+
"name": "required",
|
|
1518
2111
|
"type": {
|
|
1519
|
-
"text": "
|
|
2112
|
+
"text": "boolean"
|
|
1520
2113
|
},
|
|
1521
|
-
"default": "
|
|
1522
|
-
"description": "
|
|
1523
|
-
"fieldName": "
|
|
2114
|
+
"default": "false",
|
|
2115
|
+
"description": "Makes the input a required field.",
|
|
2116
|
+
"fieldName": "required"
|
|
1524
2117
|
},
|
|
1525
2118
|
{
|
|
1526
|
-
"name": "
|
|
2119
|
+
"name": "inline",
|
|
1527
2120
|
"type": {
|
|
1528
2121
|
"text": "boolean"
|
|
1529
2122
|
},
|
|
1530
2123
|
"default": "false",
|
|
1531
|
-
"description": "
|
|
1532
|
-
"fieldName": "
|
|
2124
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
2125
|
+
"fieldName": "inline"
|
|
1533
2126
|
},
|
|
1534
2127
|
{
|
|
1535
|
-
"name": "
|
|
2128
|
+
"name": "divider",
|
|
1536
2129
|
"type": {
|
|
1537
2130
|
"text": "boolean"
|
|
1538
2131
|
},
|
|
1539
2132
|
"default": "false",
|
|
1540
|
-
"description": "
|
|
1541
|
-
"fieldName": "
|
|
2133
|
+
"description": "Indicates that the control should display a divider",
|
|
2134
|
+
"fieldName": "divider"
|
|
1542
2135
|
}
|
|
1543
2136
|
],
|
|
1544
2137
|
"superclass": {
|
|
1545
|
-
"name": "
|
|
2138
|
+
"name": "FlowRdfFormControl",
|
|
1546
2139
|
"module": "/src/internal/flow-ui-rdf-element"
|
|
1547
2140
|
},
|
|
1548
|
-
"tagName": "flow-ui-
|
|
1549
|
-
"summary": "
|
|
2141
|
+
"tagName": "flow-ui-base-control",
|
|
2142
|
+
"summary": "Inputs collect data from the user.",
|
|
2143
|
+
"documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input",
|
|
2144
|
+
"status": "stable",
|
|
2145
|
+
"since": "2.0",
|
|
2146
|
+
"dependencies": [
|
|
2147
|
+
"flow-ui-icon",
|
|
2148
|
+
"flow-ui-icon-button"
|
|
2149
|
+
],
|
|
1550
2150
|
"customElement": true
|
|
1551
2151
|
}
|
|
1552
2152
|
],
|
|
@@ -1555,23 +2155,31 @@
|
|
|
1555
2155
|
"kind": "js",
|
|
1556
2156
|
"name": "default",
|
|
1557
2157
|
"declaration": {
|
|
1558
|
-
"name": "
|
|
1559
|
-
"module": "components/
|
|
2158
|
+
"name": "FlowUiBaseControl",
|
|
2159
|
+
"module": "components/base-control/base-control.component.js"
|
|
1560
2160
|
}
|
|
1561
2161
|
}
|
|
1562
2162
|
]
|
|
1563
2163
|
},
|
|
1564
2164
|
{
|
|
1565
2165
|
"kind": "javascript-module",
|
|
1566
|
-
"path": "components/
|
|
2166
|
+
"path": "components/base-control/base-control.js",
|
|
1567
2167
|
"declarations": [],
|
|
1568
2168
|
"exports": [
|
|
2169
|
+
{
|
|
2170
|
+
"kind": "js",
|
|
2171
|
+
"name": "*",
|
|
2172
|
+
"declaration": {
|
|
2173
|
+
"name": "*",
|
|
2174
|
+
"package": "./base-control.component"
|
|
2175
|
+
}
|
|
2176
|
+
},
|
|
1569
2177
|
{
|
|
1570
2178
|
"kind": "js",
|
|
1571
2179
|
"name": "default",
|
|
1572
2180
|
"declaration": {
|
|
1573
|
-
"name": "
|
|
1574
|
-
"module": "components/
|
|
2181
|
+
"name": "FlowUiBaseControl",
|
|
2182
|
+
"module": "components/base-control/base-control.js"
|
|
1575
2183
|
}
|
|
1576
2184
|
}
|
|
1577
2185
|
]
|
|
@@ -1723,6 +2331,129 @@
|
|
|
1723
2331
|
}
|
|
1724
2332
|
]
|
|
1725
2333
|
},
|
|
2334
|
+
{
|
|
2335
|
+
"kind": "javascript-module",
|
|
2336
|
+
"path": "components/breadcrumb/breadcrumb.component.js",
|
|
2337
|
+
"declarations": [
|
|
2338
|
+
{
|
|
2339
|
+
"kind": "class",
|
|
2340
|
+
"description": "",
|
|
2341
|
+
"name": "FlowUiBreadcrumb",
|
|
2342
|
+
"cssParts": [
|
|
2343
|
+
{
|
|
2344
|
+
"description": "The component's base wrapper.",
|
|
2345
|
+
"name": "base"
|
|
2346
|
+
}
|
|
2347
|
+
],
|
|
2348
|
+
"slots": [
|
|
2349
|
+
{
|
|
2350
|
+
"description": "One or more breadcrumb items to display.",
|
|
2351
|
+
"name": ""
|
|
2352
|
+
},
|
|
2353
|
+
{
|
|
2354
|
+
"description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
|
|
2355
|
+
"name": "separator"
|
|
2356
|
+
}
|
|
2357
|
+
],
|
|
2358
|
+
"members": [
|
|
2359
|
+
{
|
|
2360
|
+
"kind": "field",
|
|
2361
|
+
"name": "localize",
|
|
2362
|
+
"privacy": "private",
|
|
2363
|
+
"readonly": true,
|
|
2364
|
+
"default": "new LocalizeController(this)"
|
|
2365
|
+
},
|
|
2366
|
+
{
|
|
2367
|
+
"kind": "field",
|
|
2368
|
+
"name": "separatorDir",
|
|
2369
|
+
"privacy": "private"
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
"kind": "field",
|
|
2373
|
+
"name": "defaultSlot",
|
|
2374
|
+
"type": {
|
|
2375
|
+
"text": "HTMLSlotElement"
|
|
2376
|
+
},
|
|
2377
|
+
"privacy": "private"
|
|
2378
|
+
},
|
|
2379
|
+
{
|
|
2380
|
+
"kind": "field",
|
|
2381
|
+
"name": "separatorSlot",
|
|
2382
|
+
"type": {
|
|
2383
|
+
"text": "HTMLSlotElement"
|
|
2384
|
+
},
|
|
2385
|
+
"privacy": "private"
|
|
2386
|
+
},
|
|
2387
|
+
{
|
|
2388
|
+
"kind": "field",
|
|
2389
|
+
"name": "label",
|
|
2390
|
+
"type": {
|
|
2391
|
+
"text": "string"
|
|
2392
|
+
},
|
|
2393
|
+
"default": "''",
|
|
2394
|
+
"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.",
|
|
2395
|
+
"attribute": "label"
|
|
2396
|
+
},
|
|
2397
|
+
{
|
|
2398
|
+
"kind": "method",
|
|
2399
|
+
"name": "getSeparator",
|
|
2400
|
+
"privacy": "private"
|
|
2401
|
+
},
|
|
2402
|
+
{
|
|
2403
|
+
"kind": "method",
|
|
2404
|
+
"name": "handleSlotChange",
|
|
2405
|
+
"privacy": "private"
|
|
2406
|
+
}
|
|
2407
|
+
],
|
|
2408
|
+
"attributes": [
|
|
2409
|
+
{
|
|
2410
|
+
"name": "label",
|
|
2411
|
+
"type": {
|
|
2412
|
+
"text": "string"
|
|
2413
|
+
},
|
|
2414
|
+
"default": "''",
|
|
2415
|
+
"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.",
|
|
2416
|
+
"fieldName": "label"
|
|
2417
|
+
}
|
|
2418
|
+
],
|
|
2419
|
+
"superclass": {
|
|
2420
|
+
"name": "FlowRdfElement",
|
|
2421
|
+
"module": "/src/internal/flow-ui-rdf-element"
|
|
2422
|
+
},
|
|
2423
|
+
"tagName": "flow-ui-breadcrumb",
|
|
2424
|
+
"summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
|
|
2425
|
+
"dependencies": [
|
|
2426
|
+
"flow-ui-icon"
|
|
2427
|
+
],
|
|
2428
|
+
"customElement": true
|
|
2429
|
+
}
|
|
2430
|
+
],
|
|
2431
|
+
"exports": [
|
|
2432
|
+
{
|
|
2433
|
+
"kind": "js",
|
|
2434
|
+
"name": "default",
|
|
2435
|
+
"declaration": {
|
|
2436
|
+
"name": "FlowUiBreadcrumb",
|
|
2437
|
+
"module": "components/breadcrumb/breadcrumb.component.js"
|
|
2438
|
+
}
|
|
2439
|
+
}
|
|
2440
|
+
]
|
|
2441
|
+
},
|
|
2442
|
+
{
|
|
2443
|
+
"kind": "javascript-module",
|
|
2444
|
+
"path": "components/breadcrumb/breadcrumb.js",
|
|
2445
|
+
"declarations": [],
|
|
2446
|
+
"exports": [
|
|
2447
|
+
{
|
|
2448
|
+
"kind": "js",
|
|
2449
|
+
"name": "default",
|
|
2450
|
+
"declaration": {
|
|
2451
|
+
"name": "FlowUiBreadcrumb",
|
|
2452
|
+
"module": "components/breadcrumb/breadcrumb.js"
|
|
2453
|
+
}
|
|
2454
|
+
}
|
|
2455
|
+
]
|
|
2456
|
+
},
|
|
1726
2457
|
{
|
|
1727
2458
|
"kind": "javascript-module",
|
|
1728
2459
|
"path": "components/busy-overlay/busy-overlay.component.js",
|
|
@@ -24987,6 +25718,6 @@
|
|
|
24987
25718
|
],
|
|
24988
25719
|
"package": {
|
|
24989
25720
|
"name": "@emuanalytics/flow-rdf-ui",
|
|
24990
|
-
"version": "4.1.
|
|
25721
|
+
"version": "4.1.5"
|
|
24991
25722
|
}
|
|
24992
25723
|
}
|