@emuanalytics/flow-rdf-ui 4.1.3 → 4.1.4
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 +621 -0
- package/dist/components/autocomplete/autocomplete.mjs +5 -0
- package/dist/components/autocomplete/autocomplete.styles.mjs +233 -0
- package/dist/custom-elements.json +1199 -536
- package/dist/index.d.mts +193 -7
- package/dist/index.d.ts +193 -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 +156 -57
- 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,130 +832,58 @@
|
|
|
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/badge/badge.component.js",
|
|
797
859
|
"declarations": [
|
|
798
860
|
{
|
|
799
861
|
"kind": "class",
|
|
800
862
|
"description": "",
|
|
801
|
-
"name": "
|
|
863
|
+
"name": "FlowUiBadge",
|
|
802
864
|
"cssParts": [
|
|
803
|
-
{
|
|
804
|
-
"description": "The form control that wraps the label, input, and help text.",
|
|
805
|
-
"name": "form-control"
|
|
806
|
-
},
|
|
807
|
-
{
|
|
808
|
-
"description": "The label's wrapper.",
|
|
809
|
-
"name": "form-control-label"
|
|
810
|
-
},
|
|
811
|
-
{
|
|
812
|
-
"description": "The input's wrapper.",
|
|
813
|
-
"name": "form-control-input"
|
|
814
|
-
},
|
|
815
|
-
{
|
|
816
|
-
"description": "The help text's wrapper.",
|
|
817
|
-
"name": "form-control-help-text"
|
|
818
|
-
},
|
|
819
865
|
{
|
|
820
866
|
"description": "The component's base wrapper.",
|
|
821
867
|
"name": "base"
|
|
822
|
-
},
|
|
823
|
-
{
|
|
824
|
-
"description": "The internal `<input>` control.",
|
|
825
|
-
"name": "input"
|
|
826
|
-
},
|
|
827
|
-
{
|
|
828
|
-
"description": "The container that wraps the prefix.",
|
|
829
|
-
"name": "prefix"
|
|
830
|
-
},
|
|
831
|
-
{
|
|
832
|
-
"description": "The clear button.",
|
|
833
|
-
"name": "clear-button"
|
|
834
|
-
},
|
|
835
|
-
{
|
|
836
|
-
"description": "The password toggle button.",
|
|
837
|
-
"name": "password-toggle-button"
|
|
838
|
-
},
|
|
839
|
-
{
|
|
840
|
-
"description": "The container that wraps the suffix.",
|
|
841
|
-
"name": "suffix"
|
|
842
868
|
}
|
|
843
869
|
],
|
|
844
870
|
"slots": [
|
|
845
871
|
{
|
|
846
|
-
"description": "The
|
|
847
|
-
"name": "
|
|
848
|
-
},
|
|
849
|
-
{
|
|
850
|
-
"description": "Used to prepend a presentational icon or similar element to the input.",
|
|
851
|
-
"name": "prefix"
|
|
852
|
-
},
|
|
853
|
-
{
|
|
854
|
-
"description": "Used to append a presentational icon or similar element to the input.",
|
|
855
|
-
"name": "suffix"
|
|
856
|
-
},
|
|
857
|
-
{
|
|
858
|
-
"description": "An icon to use in lieu of the default clear icon.",
|
|
859
|
-
"name": "clear-icon"
|
|
860
|
-
},
|
|
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
|
-
{
|
|
870
|
-
"description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
871
|
-
"name": "help-text"
|
|
872
|
+
"description": "The badge's content.",
|
|
873
|
+
"name": ""
|
|
872
874
|
}
|
|
873
875
|
],
|
|
874
876
|
"members": [
|
|
875
877
|
{
|
|
876
878
|
"kind": "field",
|
|
877
|
-
"name": "
|
|
878
|
-
"privacy": "private",
|
|
879
|
-
"readonly": true,
|
|
880
|
-
"default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
|
|
881
|
-
},
|
|
882
|
-
{
|
|
883
|
-
"kind": "field",
|
|
884
|
-
"name": "hasSlotController",
|
|
885
|
-
"privacy": "private",
|
|
886
|
-
"readonly": true,
|
|
887
|
-
"default": "new HasSlotController(this, 'help-text', 'label')"
|
|
888
|
-
},
|
|
889
|
-
{
|
|
890
|
-
"kind": "field",
|
|
891
|
-
"name": "hasFocus",
|
|
879
|
+
"name": "variant",
|
|
892
880
|
"type": {
|
|
893
|
-
"text": "
|
|
881
|
+
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
894
882
|
},
|
|
895
|
-
"
|
|
896
|
-
"
|
|
883
|
+
"default": "'primary'",
|
|
884
|
+
"description": "The badge's theme variant.",
|
|
885
|
+
"attribute": "variant",
|
|
886
|
+
"reflects": true
|
|
897
887
|
},
|
|
898
888
|
{
|
|
899
889
|
"kind": "field",
|
|
@@ -902,651 +892,1193 @@
|
|
|
902
892
|
"text": "'small' | 'medium' | 'large'"
|
|
903
893
|
},
|
|
904
894
|
"default": "'medium'",
|
|
905
|
-
"description": "The
|
|
895
|
+
"description": "The badge size.",
|
|
906
896
|
"attribute": "size",
|
|
907
897
|
"reflects": true
|
|
908
898
|
},
|
|
909
899
|
{
|
|
910
900
|
"kind": "field",
|
|
911
|
-
"name": "
|
|
901
|
+
"name": "pill",
|
|
912
902
|
"type": {
|
|
913
903
|
"text": "boolean"
|
|
914
904
|
},
|
|
915
905
|
"default": "false",
|
|
916
|
-
"description": "Draws a
|
|
917
|
-
"attribute": "
|
|
906
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
907
|
+
"attribute": "pill",
|
|
918
908
|
"reflects": true
|
|
919
909
|
},
|
|
920
910
|
{
|
|
921
911
|
"kind": "field",
|
|
922
|
-
"name": "
|
|
912
|
+
"name": "pulse",
|
|
923
913
|
"type": {
|
|
924
914
|
"text": "boolean"
|
|
925
915
|
},
|
|
926
916
|
"default": "false",
|
|
927
|
-
"description": "
|
|
928
|
-
"attribute": "
|
|
917
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
918
|
+
"attribute": "pulse",
|
|
929
919
|
"reflects": true
|
|
930
|
-
}
|
|
920
|
+
}
|
|
921
|
+
],
|
|
922
|
+
"attributes": [
|
|
931
923
|
{
|
|
932
|
-
"
|
|
933
|
-
"name": "label",
|
|
924
|
+
"name": "variant",
|
|
934
925
|
"type": {
|
|
935
|
-
"text": "
|
|
926
|
+
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
936
927
|
},
|
|
937
|
-
"default": "''",
|
|
938
|
-
"description": "The
|
|
939
|
-
"
|
|
928
|
+
"default": "'primary'",
|
|
929
|
+
"description": "The badge's theme variant.",
|
|
930
|
+
"fieldName": "variant"
|
|
940
931
|
},
|
|
941
932
|
{
|
|
942
|
-
"
|
|
943
|
-
"name": "helpText",
|
|
933
|
+
"name": "size",
|
|
944
934
|
"type": {
|
|
945
|
-
"text": "
|
|
935
|
+
"text": "'small' | 'medium' | 'large'"
|
|
946
936
|
},
|
|
947
|
-
"default": "''",
|
|
948
|
-
"description": "The
|
|
949
|
-
"
|
|
937
|
+
"default": "'medium'",
|
|
938
|
+
"description": "The badge size.",
|
|
939
|
+
"fieldName": "size"
|
|
950
940
|
},
|
|
951
941
|
{
|
|
952
|
-
"
|
|
953
|
-
"name": "disabled",
|
|
942
|
+
"name": "pill",
|
|
954
943
|
"type": {
|
|
955
944
|
"text": "boolean"
|
|
956
945
|
},
|
|
957
946
|
"default": "false",
|
|
958
|
-
"description": "
|
|
959
|
-
"
|
|
960
|
-
"reflects": true
|
|
961
|
-
},
|
|
962
|
-
{
|
|
963
|
-
"kind": "field",
|
|
964
|
-
"name": "form",
|
|
965
|
-
"type": {
|
|
966
|
-
"text": "string"
|
|
967
|
-
},
|
|
968
|
-
"default": "''",
|
|
969
|
-
"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.",
|
|
970
|
-
"attribute": "form",
|
|
971
|
-
"reflects": true
|
|
947
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
948
|
+
"fieldName": "pill"
|
|
972
949
|
},
|
|
973
950
|
{
|
|
974
|
-
"
|
|
975
|
-
"name": "required",
|
|
951
|
+
"name": "pulse",
|
|
976
952
|
"type": {
|
|
977
953
|
"text": "boolean"
|
|
978
954
|
},
|
|
979
955
|
"default": "false",
|
|
980
|
-
"description": "Makes the
|
|
981
|
-
"
|
|
982
|
-
|
|
983
|
-
|
|
956
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
957
|
+
"fieldName": "pulse"
|
|
958
|
+
}
|
|
959
|
+
],
|
|
960
|
+
"superclass": {
|
|
961
|
+
"name": "FlowRdfElement",
|
|
962
|
+
"module": "/src/internal/flow-ui-rdf-element"
|
|
963
|
+
},
|
|
964
|
+
"tagName": "flow-ui-badge",
|
|
965
|
+
"summary": "Badges are used to draw attention and display statuses or counts.",
|
|
966
|
+
"customElement": true
|
|
967
|
+
}
|
|
968
|
+
],
|
|
969
|
+
"exports": [
|
|
970
|
+
{
|
|
971
|
+
"kind": "js",
|
|
972
|
+
"name": "default",
|
|
973
|
+
"declaration": {
|
|
974
|
+
"name": "FlowUiBadge",
|
|
975
|
+
"module": "components/badge/badge.component.js"
|
|
976
|
+
}
|
|
977
|
+
}
|
|
978
|
+
]
|
|
979
|
+
},
|
|
980
|
+
{
|
|
981
|
+
"kind": "javascript-module",
|
|
982
|
+
"path": "components/badge/badge.js",
|
|
983
|
+
"declarations": [],
|
|
984
|
+
"exports": [
|
|
985
|
+
{
|
|
986
|
+
"kind": "js",
|
|
987
|
+
"name": "default",
|
|
988
|
+
"declaration": {
|
|
989
|
+
"name": "FlowUiBadge",
|
|
990
|
+
"module": "components/badge/badge.js"
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
]
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
"kind": "javascript-module",
|
|
997
|
+
"path": "components/autocomplete/autocomplete.component.js",
|
|
998
|
+
"declarations": [
|
|
999
|
+
{
|
|
1000
|
+
"kind": "class",
|
|
1001
|
+
"description": "",
|
|
1002
|
+
"name": "FlowUiAutocomplete",
|
|
1003
|
+
"members": [
|
|
984
1004
|
{
|
|
985
1005
|
"kind": "field",
|
|
986
|
-
"name": "
|
|
1006
|
+
"name": "dependencies",
|
|
987
1007
|
"type": {
|
|
988
|
-
"text": "
|
|
1008
|
+
"text": "object"
|
|
989
1009
|
},
|
|
990
|
-
"
|
|
991
|
-
"
|
|
992
|
-
"attribute": "inline",
|
|
993
|
-
"reflects": true
|
|
1010
|
+
"static": true,
|
|
1011
|
+
"default": "{\n 'flow-ui-popup': FlowPopup,\n 'flow-ui-icon': FlowIcon\n }"
|
|
994
1012
|
},
|
|
995
1013
|
{
|
|
996
1014
|
"kind": "field",
|
|
997
|
-
"name": "
|
|
998
|
-
"
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
"default": "false",
|
|
1002
|
-
"description": "Indicates that the control should display a divider",
|
|
1003
|
-
"attribute": "divider",
|
|
1004
|
-
"reflects": true
|
|
1015
|
+
"name": "hasSlotController",
|
|
1016
|
+
"privacy": "private",
|
|
1017
|
+
"readonly": true,
|
|
1018
|
+
"default": "new HasSlotController(this, 'help-text', 'label')"
|
|
1005
1019
|
},
|
|
1006
1020
|
{
|
|
1007
1021
|
"kind": "field",
|
|
1008
|
-
"name": "
|
|
1009
|
-
"
|
|
1010
|
-
"readonly": true
|
|
1022
|
+
"name": "localize",
|
|
1023
|
+
"privacy": "private",
|
|
1024
|
+
"readonly": true,
|
|
1025
|
+
"default": "new LocalizeController(this)"
|
|
1011
1026
|
},
|
|
1012
1027
|
{
|
|
1013
1028
|
"kind": "field",
|
|
1014
|
-
"name": "
|
|
1015
|
-
"
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
{
|
|
1019
|
-
"kind": "method",
|
|
1020
|
-
"name": "handleBlur",
|
|
1021
|
-
"privacy": "private"
|
|
1022
|
-
},
|
|
1023
|
-
{
|
|
1024
|
-
"kind": "method",
|
|
1025
|
-
"name": "handleFocus",
|
|
1029
|
+
"name": "debouncedInput",
|
|
1030
|
+
"type": {
|
|
1031
|
+
"text": "((displayValue: string) => void)"
|
|
1032
|
+
},
|
|
1026
1033
|
"privacy": "private"
|
|
1027
1034
|
},
|
|
1028
1035
|
{
|
|
1029
|
-
"kind": "
|
|
1030
|
-
"name": "
|
|
1031
|
-
"
|
|
1032
|
-
|
|
1033
|
-
"name": "options",
|
|
1034
|
-
"optional": true,
|
|
1035
|
-
"type": {
|
|
1036
|
-
"text": "FocusOptions"
|
|
1037
|
-
}
|
|
1038
|
-
}
|
|
1039
|
-
],
|
|
1040
|
-
"description": "Sets focus on the input."
|
|
1041
|
-
},
|
|
1042
|
-
{
|
|
1043
|
-
"kind": "method",
|
|
1044
|
-
"name": "blur",
|
|
1045
|
-
"description": "Removes focus from the input."
|
|
1046
|
-
},
|
|
1047
|
-
{
|
|
1048
|
-
"kind": "method",
|
|
1049
|
-
"name": "checkValidity",
|
|
1050
|
-
"description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
|
|
1051
|
-
},
|
|
1052
|
-
{
|
|
1053
|
-
"kind": "method",
|
|
1054
|
-
"name": "getForm",
|
|
1055
|
-
"return": {
|
|
1056
|
-
"type": {
|
|
1057
|
-
"text": "HTMLFormElement | null"
|
|
1058
|
-
}
|
|
1036
|
+
"kind": "field",
|
|
1037
|
+
"name": "pendingChangeEvent",
|
|
1038
|
+
"type": {
|
|
1039
|
+
"text": "boolean"
|
|
1059
1040
|
},
|
|
1060
|
-
"
|
|
1061
|
-
|
|
1062
|
-
{
|
|
1063
|
-
"kind": "method",
|
|
1064
|
-
"name": "reportValidity",
|
|
1065
|
-
"description": "Checks for validity and shows the browser's validation message if the control is invalid."
|
|
1066
|
-
},
|
|
1067
|
-
{
|
|
1068
|
-
"kind": "method",
|
|
1069
|
-
"name": "setCustomValidity",
|
|
1070
|
-
"parameters": [
|
|
1071
|
-
{
|
|
1072
|
-
"name": "message",
|
|
1073
|
-
"type": {
|
|
1074
|
-
"text": "string"
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1077
|
-
],
|
|
1078
|
-
"description": "Sets a custom validation message. Pass an empty string to restore validity."
|
|
1079
|
-
}
|
|
1080
|
-
],
|
|
1081
|
-
"events": [
|
|
1082
|
-
{
|
|
1083
|
-
"description": "Emitted when the control loses focus.",
|
|
1084
|
-
"name": "flow-ui-blur",
|
|
1085
|
-
"reactName": "onFlowUiBlur"
|
|
1086
|
-
},
|
|
1087
|
-
{
|
|
1088
|
-
"description": "Emitted when an alteration to the control's value is committed by the user.",
|
|
1089
|
-
"name": "flow-ui-change",
|
|
1090
|
-
"reactName": "onFlowUiChange"
|
|
1041
|
+
"privacy": "private",
|
|
1042
|
+
"default": "false"
|
|
1091
1043
|
},
|
|
1092
1044
|
{
|
|
1093
|
-
"
|
|
1094
|
-
"name": "
|
|
1095
|
-
"
|
|
1045
|
+
"kind": "field",
|
|
1046
|
+
"name": "pendingInputEvent",
|
|
1047
|
+
"type": {
|
|
1048
|
+
"text": "boolean"
|
|
1049
|
+
},
|
|
1050
|
+
"privacy": "private",
|
|
1051
|
+
"default": "false"
|
|
1096
1052
|
},
|
|
1097
1053
|
{
|
|
1098
|
-
"
|
|
1099
|
-
"name": "
|
|
1100
|
-
"
|
|
1054
|
+
"kind": "field",
|
|
1055
|
+
"name": "hasOptions",
|
|
1056
|
+
"type": {
|
|
1057
|
+
"text": "boolean"
|
|
1058
|
+
},
|
|
1059
|
+
"privacy": "private",
|
|
1060
|
+
"default": "false"
|
|
1101
1061
|
},
|
|
1102
1062
|
{
|
|
1103
|
-
"
|
|
1104
|
-
"name": "
|
|
1105
|
-
"
|
|
1063
|
+
"kind": "field",
|
|
1064
|
+
"name": "formControlController",
|
|
1065
|
+
"privacy": "private",
|
|
1066
|
+
"readonly": true,
|
|
1067
|
+
"default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
|
|
1106
1068
|
},
|
|
1107
1069
|
{
|
|
1108
|
-
"
|
|
1109
|
-
"name": "flow-ui-invalid",
|
|
1110
|
-
"reactName": "onFlowUiInvalid"
|
|
1111
|
-
}
|
|
1112
|
-
],
|
|
1113
|
-
"attributes": [
|
|
1114
|
-
{
|
|
1070
|
+
"kind": "field",
|
|
1115
1071
|
"name": "size",
|
|
1116
1072
|
"type": {
|
|
1117
1073
|
"text": "'small' | 'medium' | 'large'"
|
|
1118
1074
|
},
|
|
1119
1075
|
"default": "'medium'",
|
|
1120
|
-
"description": "The
|
|
1121
|
-
"
|
|
1076
|
+
"description": "The autocomplete's size",
|
|
1077
|
+
"attribute": "size",
|
|
1078
|
+
"reflects": true
|
|
1122
1079
|
},
|
|
1123
1080
|
{
|
|
1081
|
+
"kind": "field",
|
|
1124
1082
|
"name": "filled",
|
|
1125
1083
|
"type": {
|
|
1126
1084
|
"text": "boolean"
|
|
1127
1085
|
},
|
|
1128
1086
|
"default": "false",
|
|
1129
|
-
"description": "Draws a filled input
|
|
1130
|
-
"
|
|
1087
|
+
"description": "Draws a filled autocomplete input",
|
|
1088
|
+
"attribute": "filled",
|
|
1089
|
+
"reflects": true
|
|
1131
1090
|
},
|
|
1132
1091
|
{
|
|
1092
|
+
"kind": "field",
|
|
1133
1093
|
"name": "pill",
|
|
1134
1094
|
"type": {
|
|
1135
1095
|
"text": "boolean"
|
|
1136
1096
|
},
|
|
1137
1097
|
"default": "false",
|
|
1138
|
-
"description": "Draws a pill-style input with rounded edges
|
|
1139
|
-
"
|
|
1098
|
+
"description": "Draws a pill-style autocomplete input with rounded edges",
|
|
1099
|
+
"attribute": "pill",
|
|
1100
|
+
"reflects": true
|
|
1140
1101
|
},
|
|
1141
1102
|
{
|
|
1103
|
+
"kind": "field",
|
|
1142
1104
|
"name": "label",
|
|
1143
1105
|
"type": {
|
|
1144
1106
|
"text": "string"
|
|
1145
1107
|
},
|
|
1146
1108
|
"default": "''",
|
|
1147
|
-
"description": "The input's label. If you need to display HTML, use the `
|
|
1148
|
-
"
|
|
1109
|
+
"description": "The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead",
|
|
1110
|
+
"attribute": "label"
|
|
1149
1111
|
},
|
|
1150
1112
|
{
|
|
1151
|
-
"
|
|
1113
|
+
"kind": "field",
|
|
1114
|
+
"name": "helpText",
|
|
1152
1115
|
"type": {
|
|
1153
1116
|
"text": "string"
|
|
1154
1117
|
},
|
|
1155
1118
|
"default": "''",
|
|
1156
|
-
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead
|
|
1157
|
-
"
|
|
1119
|
+
"description": "The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead",
|
|
1120
|
+
"attribute": "help-text"
|
|
1158
1121
|
},
|
|
1159
1122
|
{
|
|
1160
|
-
"
|
|
1161
|
-
"
|
|
1123
|
+
"kind": "field",
|
|
1124
|
+
"name": "placeholder",
|
|
1125
|
+
"type": {
|
|
1126
|
+
"text": "string"
|
|
1127
|
+
},
|
|
1128
|
+
"default": "''",
|
|
1129
|
+
"description": "The autocomplete input's placeholder text",
|
|
1130
|
+
"attribute": "placeholder"
|
|
1131
|
+
},
|
|
1132
|
+
{
|
|
1133
|
+
"kind": "field",
|
|
1134
|
+
"name": "disabled",
|
|
1135
|
+
"type": {
|
|
1162
1136
|
"text": "boolean"
|
|
1163
1137
|
},
|
|
1164
1138
|
"default": "false",
|
|
1165
|
-
"description": "Disables the
|
|
1166
|
-
"
|
|
1139
|
+
"description": "Disables the autocomplete",
|
|
1140
|
+
"attribute": "disabled",
|
|
1141
|
+
"reflects": true
|
|
1167
1142
|
},
|
|
1168
1143
|
{
|
|
1144
|
+
"kind": "field",
|
|
1169
1145
|
"name": "form",
|
|
1170
1146
|
"type": {
|
|
1171
1147
|
"text": "string"
|
|
1172
1148
|
},
|
|
1173
|
-
"
|
|
1174
|
-
"
|
|
1175
|
-
"fieldName": "form"
|
|
1149
|
+
"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.",
|
|
1150
|
+
"attribute": "form"
|
|
1176
1151
|
},
|
|
1177
1152
|
{
|
|
1153
|
+
"kind": "field",
|
|
1178
1154
|
"name": "required",
|
|
1179
1155
|
"type": {
|
|
1180
1156
|
"text": "boolean"
|
|
1181
1157
|
},
|
|
1182
1158
|
"default": "false",
|
|
1183
|
-
"description": "Makes the
|
|
1184
|
-
"
|
|
1159
|
+
"description": "Makes the autocomplete a required field",
|
|
1160
|
+
"attribute": "required",
|
|
1161
|
+
"reflects": true
|
|
1185
1162
|
},
|
|
1186
1163
|
{
|
|
1164
|
+
"kind": "field",
|
|
1187
1165
|
"name": "inline",
|
|
1188
1166
|
"type": {
|
|
1189
1167
|
"text": "boolean"
|
|
1190
1168
|
},
|
|
1191
1169
|
"default": "false",
|
|
1192
|
-
"description": "Display the
|
|
1193
|
-
"
|
|
1170
|
+
"description": "Display the autocomplete in the 'inline' form control style",
|
|
1171
|
+
"attribute": "inline",
|
|
1172
|
+
"reflects": true
|
|
1194
1173
|
},
|
|
1195
1174
|
{
|
|
1175
|
+
"kind": "field",
|
|
1196
1176
|
"name": "divider",
|
|
1197
1177
|
"type": {
|
|
1198
1178
|
"text": "boolean"
|
|
1199
1179
|
},
|
|
1200
1180
|
"default": "false",
|
|
1201
1181
|
"description": "Indicates that the control should display a divider",
|
|
1202
|
-
"
|
|
1203
|
-
|
|
1204
|
-
],
|
|
1205
|
-
"superclass": {
|
|
1206
|
-
"name": "FlowRdfFormControl",
|
|
1207
|
-
"module": "/src/internal/flow-ui-rdf-element"
|
|
1208
|
-
},
|
|
1209
|
-
"tagName": "flow-ui-base-control",
|
|
1210
|
-
"summary": "Inputs collect data from the user.",
|
|
1211
|
-
"documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input",
|
|
1212
|
-
"status": "stable",
|
|
1213
|
-
"since": "2.0",
|
|
1214
|
-
"dependencies": [
|
|
1215
|
-
"flow-ui-icon",
|
|
1216
|
-
"flow-ui-icon-button"
|
|
1217
|
-
],
|
|
1218
|
-
"customElement": true
|
|
1219
|
-
}
|
|
1220
|
-
],
|
|
1221
|
-
"exports": [
|
|
1222
|
-
{
|
|
1223
|
-
"kind": "js",
|
|
1224
|
-
"name": "default",
|
|
1225
|
-
"declaration": {
|
|
1226
|
-
"name": "FlowUiBaseControl",
|
|
1227
|
-
"module": "components/base-control/base-control.component.js"
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
]
|
|
1231
|
-
},
|
|
1232
|
-
{
|
|
1233
|
-
"kind": "javascript-module",
|
|
1234
|
-
"path": "components/base-control/base-control.js",
|
|
1235
|
-
"declarations": [],
|
|
1236
|
-
"exports": [
|
|
1237
|
-
{
|
|
1238
|
-
"kind": "js",
|
|
1239
|
-
"name": "*",
|
|
1240
|
-
"declaration": {
|
|
1241
|
-
"name": "*",
|
|
1242
|
-
"package": "./base-control.component"
|
|
1243
|
-
}
|
|
1244
|
-
},
|
|
1245
|
-
{
|
|
1246
|
-
"kind": "js",
|
|
1247
|
-
"name": "default",
|
|
1248
|
-
"declaration": {
|
|
1249
|
-
"name": "FlowUiBaseControl",
|
|
1250
|
-
"module": "components/base-control/base-control.js"
|
|
1251
|
-
}
|
|
1252
|
-
}
|
|
1253
|
-
]
|
|
1254
|
-
},
|
|
1255
|
-
{
|
|
1256
|
-
"kind": "javascript-module",
|
|
1257
|
-
"path": "components/avatar/avatar.component.js",
|
|
1258
|
-
"declarations": [
|
|
1259
|
-
{
|
|
1260
|
-
"kind": "class",
|
|
1261
|
-
"description": "",
|
|
1262
|
-
"name": "FlowUiAvatar",
|
|
1263
|
-
"cssProperties": [
|
|
1264
|
-
{
|
|
1265
|
-
"description": "The size of the avatar.",
|
|
1266
|
-
"name": "--size"
|
|
1267
|
-
}
|
|
1268
|
-
],
|
|
1269
|
-
"cssParts": [
|
|
1270
|
-
{
|
|
1271
|
-
"description": "The component's base wrapper.",
|
|
1272
|
-
"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"
|
|
1182
|
+
"attribute": "divider",
|
|
1183
|
+
"reflects": true
|
|
1281
1184
|
},
|
|
1282
|
-
{
|
|
1283
|
-
"description": "The avatar image. Only shown when the `image` attribute is set.",
|
|
1284
|
-
"name": "image"
|
|
1285
|
-
}
|
|
1286
|
-
],
|
|
1287
|
-
"slots": [
|
|
1288
|
-
{
|
|
1289
|
-
"description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
|
|
1290
|
-
"name": "icon"
|
|
1291
|
-
}
|
|
1292
|
-
],
|
|
1293
|
-
"members": [
|
|
1294
1185
|
{
|
|
1295
1186
|
"kind": "field",
|
|
1296
|
-
"name": "
|
|
1187
|
+
"name": "hoist",
|
|
1297
1188
|
"type": {
|
|
1298
1189
|
"text": "boolean"
|
|
1299
1190
|
},
|
|
1300
|
-
"
|
|
1301
|
-
"
|
|
1191
|
+
"default": "false",
|
|
1192
|
+
"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.",
|
|
1193
|
+
"attribute": "hoist"
|
|
1302
1194
|
},
|
|
1303
1195
|
{
|
|
1304
1196
|
"kind": "field",
|
|
1305
|
-
"name": "
|
|
1197
|
+
"name": "placement",
|
|
1306
1198
|
"type": {
|
|
1307
|
-
"text": "
|
|
1199
|
+
"text": "'top' | 'bottom'"
|
|
1308
1200
|
},
|
|
1309
|
-
"default": "''",
|
|
1310
|
-
"description": "The
|
|
1311
|
-
"attribute": "
|
|
1201
|
+
"default": "'bottom'",
|
|
1202
|
+
"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.",
|
|
1203
|
+
"attribute": "placement",
|
|
1204
|
+
"reflects": true
|
|
1312
1205
|
},
|
|
1313
1206
|
{
|
|
1314
1207
|
"kind": "field",
|
|
1315
|
-
"name": "
|
|
1208
|
+
"name": "value",
|
|
1316
1209
|
"type": {
|
|
1317
1210
|
"text": "string"
|
|
1318
1211
|
},
|
|
1319
1212
|
"default": "''",
|
|
1320
|
-
"description": "
|
|
1321
|
-
"attribute": "
|
|
1213
|
+
"description": "Current value of the control, selected from one of the valid options available",
|
|
1214
|
+
"attribute": "value"
|
|
1322
1215
|
},
|
|
1323
1216
|
{
|
|
1324
1217
|
"kind": "field",
|
|
1325
|
-
"name": "
|
|
1218
|
+
"name": "displayWith",
|
|
1326
1219
|
"type": {
|
|
1327
|
-
"text": "string"
|
|
1220
|
+
"text": "((value: string) => string) | ((value: string) => Promise<string>)"
|
|
1328
1221
|
},
|
|
1329
|
-
"default": "
|
|
1330
|
-
"description": "
|
|
1331
|
-
"attribute": "
|
|
1222
|
+
"default": "(value => value)",
|
|
1223
|
+
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
1224
|
+
"attribute": "displayWith"
|
|
1332
1225
|
},
|
|
1333
1226
|
{
|
|
1334
1227
|
"kind": "field",
|
|
1335
|
-
"name": "
|
|
1228
|
+
"name": "debounceDelay",
|
|
1336
1229
|
"type": {
|
|
1337
|
-
"text": "
|
|
1230
|
+
"text": "number"
|
|
1338
1231
|
},
|
|
1339
|
-
"default": "
|
|
1340
|
-
"description": "
|
|
1341
|
-
"attribute": "
|
|
1232
|
+
"default": "0",
|
|
1233
|
+
"description": "Debounce delay",
|
|
1234
|
+
"attribute": "debounce-delay",
|
|
1235
|
+
"reflects": true
|
|
1342
1236
|
},
|
|
1343
1237
|
{
|
|
1344
1238
|
"kind": "field",
|
|
1345
|
-
"name": "
|
|
1239
|
+
"name": "clearable",
|
|
1346
1240
|
"type": {
|
|
1347
|
-
"text": "
|
|
1241
|
+
"text": "boolean"
|
|
1348
1242
|
},
|
|
1349
|
-
"default": "
|
|
1350
|
-
"description": "
|
|
1351
|
-
"attribute": "
|
|
1243
|
+
"default": "false",
|
|
1244
|
+
"description": "Show the option to clear input",
|
|
1245
|
+
"attribute": "clearable",
|
|
1352
1246
|
"reflects": true
|
|
1353
|
-
}
|
|
1354
|
-
],
|
|
1355
|
-
"attributes": [
|
|
1247
|
+
},
|
|
1356
1248
|
{
|
|
1357
|
-
"
|
|
1249
|
+
"kind": "field",
|
|
1250
|
+
"name": "inputText",
|
|
1358
1251
|
"type": {
|
|
1359
1252
|
"text": "string"
|
|
1360
1253
|
},
|
|
1254
|
+
"privacy": "private",
|
|
1361
1255
|
"default": "''",
|
|
1362
|
-
"description": "
|
|
1363
|
-
"fieldName": "image"
|
|
1256
|
+
"description": "Current value displayed by the control; this can be what the user is typing or the label of the selected option"
|
|
1364
1257
|
},
|
|
1365
1258
|
{
|
|
1366
|
-
"
|
|
1259
|
+
"kind": "field",
|
|
1260
|
+
"name": "selectedOption",
|
|
1367
1261
|
"type": {
|
|
1368
|
-
"text": "
|
|
1262
|
+
"text": "FlowOption | null"
|
|
1369
1263
|
},
|
|
1370
|
-
"
|
|
1371
|
-
"
|
|
1372
|
-
"fieldName": "label"
|
|
1264
|
+
"privacy": "private",
|
|
1265
|
+
"default": "null"
|
|
1373
1266
|
},
|
|
1374
1267
|
{
|
|
1375
|
-
"
|
|
1268
|
+
"kind": "field",
|
|
1269
|
+
"name": "currentOption",
|
|
1376
1270
|
"type": {
|
|
1377
|
-
"text": "
|
|
1271
|
+
"text": "FlowOption | null"
|
|
1378
1272
|
},
|
|
1379
|
-
"
|
|
1380
|
-
"
|
|
1381
|
-
"fieldName": "initials"
|
|
1273
|
+
"privacy": "private",
|
|
1274
|
+
"default": "null"
|
|
1382
1275
|
},
|
|
1383
1276
|
{
|
|
1384
|
-
"
|
|
1277
|
+
"kind": "field",
|
|
1278
|
+
"name": "input",
|
|
1385
1279
|
"type": {
|
|
1386
|
-
"text": "
|
|
1280
|
+
"text": "HTMLInputElement"
|
|
1387
1281
|
},
|
|
1388
|
-
"
|
|
1389
|
-
"description": "Indicates how the browser should load the image.",
|
|
1390
|
-
"fieldName": "loading"
|
|
1282
|
+
"privacy": "private"
|
|
1391
1283
|
},
|
|
1392
1284
|
{
|
|
1393
|
-
"
|
|
1285
|
+
"kind": "field",
|
|
1286
|
+
"name": "popup",
|
|
1394
1287
|
"type": {
|
|
1395
|
-
"text": "
|
|
1288
|
+
"text": "FlowPopup"
|
|
1396
1289
|
},
|
|
1397
|
-
"
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1290
|
+
"privacy": "private"
|
|
1291
|
+
},
|
|
1292
|
+
{
|
|
1293
|
+
"kind": "method",
|
|
1294
|
+
"name": "getForm",
|
|
1295
|
+
"return": {
|
|
1296
|
+
"type": {
|
|
1297
|
+
"text": "HTMLFormElement | null"
|
|
1298
|
+
}
|
|
1299
|
+
},
|
|
1300
|
+
"description": "Gets the associated form, if one exists."
|
|
1301
|
+
},
|
|
1302
|
+
{
|
|
1303
|
+
"kind": "field",
|
|
1304
|
+
"name": "validity",
|
|
1305
|
+
"description": "Gets the validity state object.",
|
|
1306
|
+
"readonly": true
|
|
1307
|
+
},
|
|
1308
|
+
{
|
|
1309
|
+
"kind": "field",
|
|
1310
|
+
"name": "validationMessage",
|
|
1311
|
+
"description": "Gets the validation message.",
|
|
1312
|
+
"readonly": true
|
|
1313
|
+
},
|
|
1314
|
+
{
|
|
1315
|
+
"kind": "method",
|
|
1316
|
+
"name": "checkValidity",
|
|
1317
|
+
"return": {
|
|
1318
|
+
"type": {
|
|
1319
|
+
"text": "boolean"
|
|
1320
|
+
}
|
|
1321
|
+
},
|
|
1322
|
+
"description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
|
|
1323
|
+
},
|
|
1324
|
+
{
|
|
1325
|
+
"kind": "method",
|
|
1326
|
+
"name": "reportValidity",
|
|
1327
|
+
"return": {
|
|
1328
|
+
"type": {
|
|
1329
|
+
"text": "boolean"
|
|
1330
|
+
}
|
|
1331
|
+
},
|
|
1332
|
+
"description": "Checks for validity and shows the browser's validation message if the control is invalid."
|
|
1333
|
+
},
|
|
1334
|
+
{
|
|
1335
|
+
"kind": "method",
|
|
1336
|
+
"name": "setCustomValidity",
|
|
1337
|
+
"parameters": [
|
|
1338
|
+
{
|
|
1339
|
+
"name": "_",
|
|
1340
|
+
"type": {
|
|
1341
|
+
"text": "string"
|
|
1342
|
+
}
|
|
1343
|
+
}
|
|
1344
|
+
],
|
|
1345
|
+
"description": "Sets a custom validation message. Pass an empty string to restore validity."
|
|
1346
|
+
},
|
|
1347
|
+
{
|
|
1348
|
+
"kind": "method",
|
|
1349
|
+
"name": "handleClearClick",
|
|
1350
|
+
"parameters": [
|
|
1351
|
+
{
|
|
1352
|
+
"name": "event",
|
|
1353
|
+
"type": {
|
|
1354
|
+
"text": "MouseEvent"
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1357
|
+
]
|
|
1358
|
+
},
|
|
1359
|
+
{
|
|
1360
|
+
"kind": "method",
|
|
1361
|
+
"name": "focus",
|
|
1362
|
+
"description": "Focuses on the control"
|
|
1363
|
+
},
|
|
1364
|
+
{
|
|
1365
|
+
"kind": "method",
|
|
1366
|
+
"name": "blur",
|
|
1367
|
+
"description": "Blurs from the control."
|
|
1368
|
+
},
|
|
1369
|
+
{
|
|
1370
|
+
"kind": "method",
|
|
1371
|
+
"name": "show",
|
|
1372
|
+
"description": "Shows the listbox."
|
|
1373
|
+
},
|
|
1374
|
+
{
|
|
1375
|
+
"kind": "method",
|
|
1376
|
+
"name": "hide",
|
|
1377
|
+
"description": "Hides the listbox."
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
"kind": "method",
|
|
1381
|
+
"name": "getInputText",
|
|
1382
|
+
"description": "Gets the current value of the text input"
|
|
1383
|
+
}
|
|
1384
|
+
],
|
|
1385
|
+
"events": [
|
|
1386
|
+
{
|
|
1387
|
+
"description": "Emitted when the display value changes.",
|
|
1388
|
+
"name": "flow-ui-input",
|
|
1389
|
+
"reactName": "onFlowUiInput"
|
|
1390
|
+
},
|
|
1391
|
+
{
|
|
1392
|
+
"description": "Emitted when the input value changes.",
|
|
1393
|
+
"name": "flow-ui-change",
|
|
1394
|
+
"reactName": "onFlowUiChange"
|
|
1395
|
+
},
|
|
1396
|
+
{
|
|
1397
|
+
"description": "Emitted when the input is focused.",
|
|
1398
|
+
"name": "flow-ui-focus",
|
|
1399
|
+
"reactName": "onFlowUiFocus"
|
|
1400
|
+
},
|
|
1401
|
+
{
|
|
1402
|
+
"description": "Emitted when the input is blurred.",
|
|
1403
|
+
"name": "flow-ui-blur",
|
|
1404
|
+
"reactName": "onFlowUiBlur"
|
|
1405
|
+
},
|
|
1406
|
+
{
|
|
1407
|
+
"description": "Emitted when the dropdown is shown.",
|
|
1408
|
+
"name": "flow-ui-show",
|
|
1409
|
+
"reactName": "onFlowUiShow"
|
|
1410
|
+
},
|
|
1411
|
+
{
|
|
1412
|
+
"description": "Emitted when the dropdown is shown.",
|
|
1413
|
+
"name": "flow-ui-after-show",
|
|
1414
|
+
"reactName": "onFlowUiAfterShow"
|
|
1415
|
+
},
|
|
1416
|
+
{
|
|
1417
|
+
"description": "Emitted when the dropdown is hidden.",
|
|
1418
|
+
"name": "flow-ui-hide",
|
|
1419
|
+
"reactName": "onFlowUiHide"
|
|
1420
|
+
},
|
|
1421
|
+
{
|
|
1422
|
+
"description": "Emitted when the dropdown is hidden.",
|
|
1423
|
+
"name": "flow-ui-after-hide",
|
|
1424
|
+
"reactName": "onFlowUiAfterHide"
|
|
1425
|
+
},
|
|
1426
|
+
{
|
|
1427
|
+
"description": "Emitted when the input is invalid.",
|
|
1428
|
+
"name": "flow-ui-invalid",
|
|
1429
|
+
"reactName": "onFlowUiInvalid"
|
|
1430
|
+
},
|
|
1431
|
+
{
|
|
1432
|
+
"description": "Emitted when the input is valid.",
|
|
1433
|
+
"name": "flow-ui-valid",
|
|
1434
|
+
"reactName": "onFlowUiValid"
|
|
1435
|
+
},
|
|
1436
|
+
{
|
|
1437
|
+
"description": "Emitted when the input is validated.",
|
|
1438
|
+
"name": "flow-ui-validate",
|
|
1439
|
+
"reactName": "onFlowUiValidate"
|
|
1440
|
+
},
|
|
1441
|
+
{
|
|
1442
|
+
"description": "Emitted when the input is validated and the validity state is updated.",
|
|
1443
|
+
"name": "flow-ui-validate-complete",
|
|
1444
|
+
"reactName": "onFlowUiValidateComplete"
|
|
1445
|
+
},
|
|
1446
|
+
{
|
|
1447
|
+
"description": "Emitted when the input is validated and an error occurs.",
|
|
1448
|
+
"name": "flow-ui-validate-error",
|
|
1449
|
+
"reactName": "onFlowUiValidateError"
|
|
1450
|
+
},
|
|
1451
|
+
{
|
|
1452
|
+
"description": "Emitted when the input is validated and no errors occur.",
|
|
1453
|
+
"name": "flow-ui-validate-success",
|
|
1454
|
+
"reactName": "onFlowUiValidateSuccess"
|
|
1455
|
+
}
|
|
1456
|
+
],
|
|
1457
|
+
"attributes": [
|
|
1458
|
+
{
|
|
1459
|
+
"name": "size",
|
|
1460
|
+
"type": {
|
|
1461
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1462
|
+
},
|
|
1463
|
+
"default": "'medium'",
|
|
1464
|
+
"description": "The autocomplete's size",
|
|
1465
|
+
"fieldName": "size"
|
|
1466
|
+
},
|
|
1467
|
+
{
|
|
1468
|
+
"name": "filled",
|
|
1469
|
+
"type": {
|
|
1470
|
+
"text": "boolean"
|
|
1471
|
+
},
|
|
1472
|
+
"default": "false",
|
|
1473
|
+
"description": "Draws a filled autocomplete input",
|
|
1474
|
+
"fieldName": "filled"
|
|
1475
|
+
},
|
|
1476
|
+
{
|
|
1477
|
+
"name": "pill",
|
|
1478
|
+
"type": {
|
|
1479
|
+
"text": "boolean"
|
|
1480
|
+
},
|
|
1481
|
+
"default": "false",
|
|
1482
|
+
"description": "Draws a pill-style autocomplete input with rounded edges",
|
|
1483
|
+
"fieldName": "pill"
|
|
1484
|
+
},
|
|
1485
|
+
{
|
|
1486
|
+
"name": "label",
|
|
1487
|
+
"type": {
|
|
1488
|
+
"text": "string"
|
|
1489
|
+
},
|
|
1490
|
+
"default": "''",
|
|
1491
|
+
"description": "The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead",
|
|
1492
|
+
"fieldName": "label"
|
|
1493
|
+
},
|
|
1494
|
+
{
|
|
1495
|
+
"name": "help-text",
|
|
1496
|
+
"type": {
|
|
1497
|
+
"text": "string"
|
|
1498
|
+
},
|
|
1499
|
+
"default": "''",
|
|
1500
|
+
"description": "The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead",
|
|
1501
|
+
"fieldName": "helpText"
|
|
1502
|
+
},
|
|
1503
|
+
{
|
|
1504
|
+
"name": "placeholder",
|
|
1505
|
+
"type": {
|
|
1506
|
+
"text": "string"
|
|
1507
|
+
},
|
|
1508
|
+
"default": "''",
|
|
1509
|
+
"description": "The autocomplete input's placeholder text",
|
|
1510
|
+
"fieldName": "placeholder"
|
|
1511
|
+
},
|
|
1512
|
+
{
|
|
1513
|
+
"name": "disabled",
|
|
1514
|
+
"type": {
|
|
1515
|
+
"text": "boolean"
|
|
1516
|
+
},
|
|
1517
|
+
"default": "false",
|
|
1518
|
+
"description": "Disables the autocomplete",
|
|
1519
|
+
"fieldName": "disabled"
|
|
1520
|
+
},
|
|
1521
|
+
{
|
|
1522
|
+
"name": "form",
|
|
1523
|
+
"type": {
|
|
1524
|
+
"text": "string"
|
|
1525
|
+
},
|
|
1526
|
+
"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.",
|
|
1527
|
+
"fieldName": "form"
|
|
1528
|
+
},
|
|
1529
|
+
{
|
|
1530
|
+
"name": "required",
|
|
1531
|
+
"type": {
|
|
1532
|
+
"text": "boolean"
|
|
1533
|
+
},
|
|
1534
|
+
"default": "false",
|
|
1535
|
+
"description": "Makes the autocomplete a required field",
|
|
1536
|
+
"fieldName": "required"
|
|
1537
|
+
},
|
|
1538
|
+
{
|
|
1539
|
+
"name": "inline",
|
|
1540
|
+
"type": {
|
|
1541
|
+
"text": "boolean"
|
|
1542
|
+
},
|
|
1543
|
+
"default": "false",
|
|
1544
|
+
"description": "Display the autocomplete in the 'inline' form control style",
|
|
1545
|
+
"fieldName": "inline"
|
|
1546
|
+
},
|
|
1547
|
+
{
|
|
1548
|
+
"name": "divider",
|
|
1549
|
+
"type": {
|
|
1550
|
+
"text": "boolean"
|
|
1551
|
+
},
|
|
1552
|
+
"default": "false",
|
|
1553
|
+
"description": "Indicates that the control should display a divider",
|
|
1554
|
+
"fieldName": "divider"
|
|
1555
|
+
},
|
|
1556
|
+
{
|
|
1557
|
+
"name": "hoist",
|
|
1558
|
+
"type": {
|
|
1559
|
+
"text": "boolean"
|
|
1560
|
+
},
|
|
1561
|
+
"default": "false",
|
|
1562
|
+
"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.",
|
|
1563
|
+
"fieldName": "hoist"
|
|
1564
|
+
},
|
|
1565
|
+
{
|
|
1566
|
+
"name": "placement",
|
|
1567
|
+
"type": {
|
|
1568
|
+
"text": "'top' | 'bottom'"
|
|
1569
|
+
},
|
|
1570
|
+
"default": "'bottom'",
|
|
1571
|
+
"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.",
|
|
1572
|
+
"fieldName": "placement"
|
|
1573
|
+
},
|
|
1574
|
+
{
|
|
1575
|
+
"name": "value",
|
|
1576
|
+
"type": {
|
|
1577
|
+
"text": "string"
|
|
1578
|
+
},
|
|
1579
|
+
"default": "''",
|
|
1580
|
+
"description": "Current value of the control, selected from one of the valid options available",
|
|
1581
|
+
"fieldName": "value"
|
|
1582
|
+
},
|
|
1583
|
+
{
|
|
1584
|
+
"name": "displayWith",
|
|
1585
|
+
"type": {
|
|
1586
|
+
"text": "((value: string) => string) | ((value: string) => Promise<string>)"
|
|
1587
|
+
},
|
|
1588
|
+
"default": "(value => value)",
|
|
1589
|
+
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
1590
|
+
"fieldName": "displayWith"
|
|
1591
|
+
},
|
|
1592
|
+
{
|
|
1593
|
+
"name": "debounce-delay",
|
|
1594
|
+
"type": {
|
|
1595
|
+
"text": "number"
|
|
1596
|
+
},
|
|
1597
|
+
"default": "0",
|
|
1598
|
+
"description": "Debounce delay",
|
|
1599
|
+
"fieldName": "debounceDelay"
|
|
1600
|
+
},
|
|
1601
|
+
{
|
|
1602
|
+
"name": "clearable",
|
|
1603
|
+
"type": {
|
|
1604
|
+
"text": "boolean"
|
|
1605
|
+
},
|
|
1606
|
+
"default": "false",
|
|
1607
|
+
"description": "Show the option to clear input",
|
|
1608
|
+
"fieldName": "clearable"
|
|
1609
|
+
}
|
|
1610
|
+
],
|
|
1611
|
+
"superclass": {
|
|
1612
|
+
"name": "FlowRdfFormControl",
|
|
1613
|
+
"module": "/src/internal/flow-ui-rdf-element"
|
|
1614
|
+
},
|
|
1615
|
+
"tagName": "flow-ui-autocomplete",
|
|
1616
|
+
"summary": "The Autocomplete is a Text input enhanced by a panel of suggested options.",
|
|
1617
|
+
"dependencies": [
|
|
1618
|
+
"flow-ui-popup",
|
|
1619
|
+
"flow-ui-icon"
|
|
1620
|
+
],
|
|
1621
|
+
"customElement": true
|
|
1622
|
+
}
|
|
1623
|
+
],
|
|
1624
|
+
"exports": [
|
|
1625
|
+
{
|
|
1626
|
+
"kind": "js",
|
|
1627
|
+
"name": "default",
|
|
1628
|
+
"declaration": {
|
|
1629
|
+
"name": "FlowUiAutocomplete",
|
|
1630
|
+
"module": "components/autocomplete/autocomplete.component.js"
|
|
1631
|
+
}
|
|
1632
|
+
}
|
|
1633
|
+
]
|
|
1634
|
+
},
|
|
1635
|
+
{
|
|
1636
|
+
"kind": "javascript-module",
|
|
1637
|
+
"path": "components/autocomplete/autocomplete.js",
|
|
1638
|
+
"declarations": [],
|
|
1639
|
+
"exports": [
|
|
1640
|
+
{
|
|
1641
|
+
"kind": "js",
|
|
1642
|
+
"name": "*",
|
|
1643
|
+
"declaration": {
|
|
1644
|
+
"name": "*",
|
|
1645
|
+
"package": "./autocomplete.component"
|
|
1646
|
+
}
|
|
1647
|
+
},
|
|
1648
|
+
{
|
|
1649
|
+
"kind": "js",
|
|
1650
|
+
"name": "default",
|
|
1651
|
+
"declaration": {
|
|
1652
|
+
"name": "FlowUiAutocomplete",
|
|
1653
|
+
"module": "components/autocomplete/autocomplete.js"
|
|
1654
|
+
}
|
|
1655
|
+
}
|
|
1656
|
+
]
|
|
1657
|
+
},
|
|
1658
|
+
{
|
|
1659
|
+
"kind": "javascript-module",
|
|
1660
|
+
"path": "components/base-control/base-control.component.js",
|
|
1661
|
+
"declarations": [
|
|
1444
1662
|
{
|
|
1445
1663
|
"kind": "class",
|
|
1446
1664
|
"description": "",
|
|
1447
|
-
"name": "
|
|
1665
|
+
"name": "FlowUiBaseControl",
|
|
1448
1666
|
"cssParts": [
|
|
1449
1667
|
{
|
|
1450
|
-
"description": "The
|
|
1451
|
-
"name": "
|
|
1668
|
+
"description": "The form control that wraps the label, input, and help text.",
|
|
1669
|
+
"name": "form-control"
|
|
1670
|
+
},
|
|
1671
|
+
{
|
|
1672
|
+
"description": "The label's wrapper.",
|
|
1673
|
+
"name": "form-control-label"
|
|
1674
|
+
},
|
|
1675
|
+
{
|
|
1676
|
+
"description": "The input's wrapper.",
|
|
1677
|
+
"name": "form-control-input"
|
|
1678
|
+
},
|
|
1679
|
+
{
|
|
1680
|
+
"description": "The help text's wrapper.",
|
|
1681
|
+
"name": "form-control-help-text"
|
|
1682
|
+
},
|
|
1683
|
+
{
|
|
1684
|
+
"description": "The component's base wrapper.",
|
|
1685
|
+
"name": "base"
|
|
1686
|
+
},
|
|
1687
|
+
{
|
|
1688
|
+
"description": "The internal `<input>` control.",
|
|
1689
|
+
"name": "input"
|
|
1690
|
+
},
|
|
1691
|
+
{
|
|
1692
|
+
"description": "The container that wraps the prefix.",
|
|
1693
|
+
"name": "prefix"
|
|
1694
|
+
},
|
|
1695
|
+
{
|
|
1696
|
+
"description": "The clear button.",
|
|
1697
|
+
"name": "clear-button"
|
|
1698
|
+
},
|
|
1699
|
+
{
|
|
1700
|
+
"description": "The password toggle button.",
|
|
1701
|
+
"name": "password-toggle-button"
|
|
1702
|
+
},
|
|
1703
|
+
{
|
|
1704
|
+
"description": "The container that wraps the suffix.",
|
|
1705
|
+
"name": "suffix"
|
|
1706
|
+
}
|
|
1707
|
+
],
|
|
1708
|
+
"slots": [
|
|
1709
|
+
{
|
|
1710
|
+
"description": "The input's label. Alternatively, you can use the `label` attribute.",
|
|
1711
|
+
"name": "label"
|
|
1712
|
+
},
|
|
1713
|
+
{
|
|
1714
|
+
"description": "Used to prepend a presentational icon or similar element to the input.",
|
|
1715
|
+
"name": "prefix"
|
|
1716
|
+
},
|
|
1717
|
+
{
|
|
1718
|
+
"description": "Used to append a presentational icon or similar element to the input.",
|
|
1719
|
+
"name": "suffix"
|
|
1720
|
+
},
|
|
1721
|
+
{
|
|
1722
|
+
"description": "An icon to use in lieu of the default clear icon.",
|
|
1723
|
+
"name": "clear-icon"
|
|
1724
|
+
},
|
|
1725
|
+
{
|
|
1726
|
+
"description": "An icon to use in lieu of the default show password icon.",
|
|
1727
|
+
"name": "show-password-icon"
|
|
1728
|
+
},
|
|
1729
|
+
{
|
|
1730
|
+
"description": "An icon to use in lieu of the default hide password icon.",
|
|
1731
|
+
"name": "hide-password-icon"
|
|
1732
|
+
},
|
|
1733
|
+
{
|
|
1734
|
+
"description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
1735
|
+
"name": "help-text"
|
|
1452
1736
|
}
|
|
1453
1737
|
],
|
|
1454
|
-
"
|
|
1738
|
+
"members": [
|
|
1739
|
+
{
|
|
1740
|
+
"kind": "field",
|
|
1741
|
+
"name": "formControlController",
|
|
1742
|
+
"privacy": "private",
|
|
1743
|
+
"readonly": true,
|
|
1744
|
+
"default": "new FormControlController(this, {\n assumeInteractionOn: ['flow-ui-blur', 'flow-ui-input']\n })"
|
|
1745
|
+
},
|
|
1746
|
+
{
|
|
1747
|
+
"kind": "field",
|
|
1748
|
+
"name": "hasSlotController",
|
|
1749
|
+
"privacy": "private",
|
|
1750
|
+
"readonly": true,
|
|
1751
|
+
"default": "new HasSlotController(this, 'help-text', 'label')"
|
|
1752
|
+
},
|
|
1753
|
+
{
|
|
1754
|
+
"kind": "field",
|
|
1755
|
+
"name": "hasFocus",
|
|
1756
|
+
"type": {
|
|
1757
|
+
"text": "boolean"
|
|
1758
|
+
},
|
|
1759
|
+
"privacy": "private",
|
|
1760
|
+
"default": "false"
|
|
1761
|
+
},
|
|
1762
|
+
{
|
|
1763
|
+
"kind": "field",
|
|
1764
|
+
"name": "size",
|
|
1765
|
+
"type": {
|
|
1766
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1767
|
+
},
|
|
1768
|
+
"default": "'medium'",
|
|
1769
|
+
"description": "The input's size.",
|
|
1770
|
+
"attribute": "size",
|
|
1771
|
+
"reflects": true
|
|
1772
|
+
},
|
|
1773
|
+
{
|
|
1774
|
+
"kind": "field",
|
|
1775
|
+
"name": "filled",
|
|
1776
|
+
"type": {
|
|
1777
|
+
"text": "boolean"
|
|
1778
|
+
},
|
|
1779
|
+
"default": "false",
|
|
1780
|
+
"description": "Draws a filled input.",
|
|
1781
|
+
"attribute": "filled",
|
|
1782
|
+
"reflects": true
|
|
1783
|
+
},
|
|
1784
|
+
{
|
|
1785
|
+
"kind": "field",
|
|
1786
|
+
"name": "pill",
|
|
1787
|
+
"type": {
|
|
1788
|
+
"text": "boolean"
|
|
1789
|
+
},
|
|
1790
|
+
"default": "false",
|
|
1791
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
1792
|
+
"attribute": "pill",
|
|
1793
|
+
"reflects": true
|
|
1794
|
+
},
|
|
1795
|
+
{
|
|
1796
|
+
"kind": "field",
|
|
1797
|
+
"name": "label",
|
|
1798
|
+
"type": {
|
|
1799
|
+
"text": "string"
|
|
1800
|
+
},
|
|
1801
|
+
"default": "''",
|
|
1802
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
1803
|
+
"attribute": "label"
|
|
1804
|
+
},
|
|
1805
|
+
{
|
|
1806
|
+
"kind": "field",
|
|
1807
|
+
"name": "helpText",
|
|
1808
|
+
"type": {
|
|
1809
|
+
"text": "string"
|
|
1810
|
+
},
|
|
1811
|
+
"default": "''",
|
|
1812
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
1813
|
+
"attribute": "help-text"
|
|
1814
|
+
},
|
|
1815
|
+
{
|
|
1816
|
+
"kind": "field",
|
|
1817
|
+
"name": "disabled",
|
|
1818
|
+
"type": {
|
|
1819
|
+
"text": "boolean"
|
|
1820
|
+
},
|
|
1821
|
+
"default": "false",
|
|
1822
|
+
"description": "Disables the input.",
|
|
1823
|
+
"attribute": "disabled",
|
|
1824
|
+
"reflects": true
|
|
1825
|
+
},
|
|
1826
|
+
{
|
|
1827
|
+
"kind": "field",
|
|
1828
|
+
"name": "form",
|
|
1829
|
+
"type": {
|
|
1830
|
+
"text": "string"
|
|
1831
|
+
},
|
|
1832
|
+
"default": "''",
|
|
1833
|
+
"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.",
|
|
1834
|
+
"attribute": "form",
|
|
1835
|
+
"reflects": true
|
|
1836
|
+
},
|
|
1837
|
+
{
|
|
1838
|
+
"kind": "field",
|
|
1839
|
+
"name": "required",
|
|
1840
|
+
"type": {
|
|
1841
|
+
"text": "boolean"
|
|
1842
|
+
},
|
|
1843
|
+
"default": "false",
|
|
1844
|
+
"description": "Makes the input a required field.",
|
|
1845
|
+
"attribute": "required",
|
|
1846
|
+
"reflects": true
|
|
1847
|
+
},
|
|
1848
|
+
{
|
|
1849
|
+
"kind": "field",
|
|
1850
|
+
"name": "inline",
|
|
1851
|
+
"type": {
|
|
1852
|
+
"text": "boolean"
|
|
1853
|
+
},
|
|
1854
|
+
"default": "false",
|
|
1855
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
1856
|
+
"attribute": "inline",
|
|
1857
|
+
"reflects": true
|
|
1858
|
+
},
|
|
1859
|
+
{
|
|
1860
|
+
"kind": "field",
|
|
1861
|
+
"name": "divider",
|
|
1862
|
+
"type": {
|
|
1863
|
+
"text": "boolean"
|
|
1864
|
+
},
|
|
1865
|
+
"default": "false",
|
|
1866
|
+
"description": "Indicates that the control should display a divider",
|
|
1867
|
+
"attribute": "divider",
|
|
1868
|
+
"reflects": true
|
|
1869
|
+
},
|
|
1870
|
+
{
|
|
1871
|
+
"kind": "field",
|
|
1872
|
+
"name": "validity",
|
|
1873
|
+
"description": "Gets the validity state object",
|
|
1874
|
+
"readonly": true
|
|
1875
|
+
},
|
|
1876
|
+
{
|
|
1877
|
+
"kind": "field",
|
|
1878
|
+
"name": "validationMessage",
|
|
1879
|
+
"description": "Gets the validation message",
|
|
1880
|
+
"readonly": true
|
|
1881
|
+
},
|
|
1882
|
+
{
|
|
1883
|
+
"kind": "method",
|
|
1884
|
+
"name": "handleBlur",
|
|
1885
|
+
"privacy": "private"
|
|
1886
|
+
},
|
|
1887
|
+
{
|
|
1888
|
+
"kind": "method",
|
|
1889
|
+
"name": "handleFocus",
|
|
1890
|
+
"privacy": "private"
|
|
1891
|
+
},
|
|
1892
|
+
{
|
|
1893
|
+
"kind": "method",
|
|
1894
|
+
"name": "focus",
|
|
1895
|
+
"parameters": [
|
|
1896
|
+
{
|
|
1897
|
+
"name": "options",
|
|
1898
|
+
"optional": true,
|
|
1899
|
+
"type": {
|
|
1900
|
+
"text": "FocusOptions"
|
|
1901
|
+
}
|
|
1902
|
+
}
|
|
1903
|
+
],
|
|
1904
|
+
"description": "Sets focus on the input."
|
|
1905
|
+
},
|
|
1906
|
+
{
|
|
1907
|
+
"kind": "method",
|
|
1908
|
+
"name": "blur",
|
|
1909
|
+
"description": "Removes focus from the input."
|
|
1910
|
+
},
|
|
1911
|
+
{
|
|
1912
|
+
"kind": "method",
|
|
1913
|
+
"name": "checkValidity",
|
|
1914
|
+
"description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
|
|
1915
|
+
},
|
|
1916
|
+
{
|
|
1917
|
+
"kind": "method",
|
|
1918
|
+
"name": "getForm",
|
|
1919
|
+
"return": {
|
|
1920
|
+
"type": {
|
|
1921
|
+
"text": "HTMLFormElement | null"
|
|
1922
|
+
}
|
|
1923
|
+
},
|
|
1924
|
+
"description": "Gets the associated form, if one exists."
|
|
1925
|
+
},
|
|
1926
|
+
{
|
|
1927
|
+
"kind": "method",
|
|
1928
|
+
"name": "reportValidity",
|
|
1929
|
+
"description": "Checks for validity and shows the browser's validation message if the control is invalid."
|
|
1930
|
+
},
|
|
1931
|
+
{
|
|
1932
|
+
"kind": "method",
|
|
1933
|
+
"name": "setCustomValidity",
|
|
1934
|
+
"parameters": [
|
|
1935
|
+
{
|
|
1936
|
+
"name": "message",
|
|
1937
|
+
"type": {
|
|
1938
|
+
"text": "string"
|
|
1939
|
+
}
|
|
1940
|
+
}
|
|
1941
|
+
],
|
|
1942
|
+
"description": "Sets a custom validation message. Pass an empty string to restore validity."
|
|
1943
|
+
}
|
|
1944
|
+
],
|
|
1945
|
+
"events": [
|
|
1946
|
+
{
|
|
1947
|
+
"description": "Emitted when the control loses focus.",
|
|
1948
|
+
"name": "flow-ui-blur",
|
|
1949
|
+
"reactName": "onFlowUiBlur"
|
|
1950
|
+
},
|
|
1951
|
+
{
|
|
1952
|
+
"description": "Emitted when an alteration to the control's value is committed by the user.",
|
|
1953
|
+
"name": "flow-ui-change",
|
|
1954
|
+
"reactName": "onFlowUiChange"
|
|
1955
|
+
},
|
|
1956
|
+
{
|
|
1957
|
+
"description": "Emitted when the clear button is activated.",
|
|
1958
|
+
"name": "flow-ui-clear",
|
|
1959
|
+
"reactName": "onFlowUiClear"
|
|
1960
|
+
},
|
|
1961
|
+
{
|
|
1962
|
+
"description": "Emitted when the control gains focus.",
|
|
1963
|
+
"name": "flow-ui-focus",
|
|
1964
|
+
"reactName": "onFlowUiFocus"
|
|
1965
|
+
},
|
|
1966
|
+
{
|
|
1967
|
+
"description": "Emitted when the control receives input.",
|
|
1968
|
+
"name": "flow-ui-input",
|
|
1969
|
+
"reactName": "onFlowUiInput"
|
|
1970
|
+
},
|
|
1455
1971
|
{
|
|
1456
|
-
"description": "
|
|
1457
|
-
"name": ""
|
|
1972
|
+
"description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
|
|
1973
|
+
"name": "flow-ui-invalid",
|
|
1974
|
+
"reactName": "onFlowUiInvalid"
|
|
1458
1975
|
}
|
|
1459
1976
|
],
|
|
1460
|
-
"
|
|
1977
|
+
"attributes": [
|
|
1461
1978
|
{
|
|
1462
|
-
"
|
|
1463
|
-
"name": "variant",
|
|
1979
|
+
"name": "size",
|
|
1464
1980
|
"type": {
|
|
1465
|
-
"text": "'
|
|
1981
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1466
1982
|
},
|
|
1467
|
-
"default": "'
|
|
1468
|
-
"description": "The
|
|
1469
|
-
"
|
|
1470
|
-
"reflects": true
|
|
1983
|
+
"default": "'medium'",
|
|
1984
|
+
"description": "The input's size.",
|
|
1985
|
+
"fieldName": "size"
|
|
1471
1986
|
},
|
|
1472
1987
|
{
|
|
1473
|
-
"
|
|
1474
|
-
"name": "size",
|
|
1988
|
+
"name": "filled",
|
|
1475
1989
|
"type": {
|
|
1476
|
-
"text": "
|
|
1990
|
+
"text": "boolean"
|
|
1477
1991
|
},
|
|
1478
|
-
"default": "
|
|
1479
|
-
"description": "
|
|
1480
|
-
"
|
|
1481
|
-
"reflects": true
|
|
1992
|
+
"default": "false",
|
|
1993
|
+
"description": "Draws a filled input.",
|
|
1994
|
+
"fieldName": "filled"
|
|
1482
1995
|
},
|
|
1483
1996
|
{
|
|
1484
|
-
"kind": "field",
|
|
1485
1997
|
"name": "pill",
|
|
1486
1998
|
"type": {
|
|
1487
1999
|
"text": "boolean"
|
|
1488
2000
|
},
|
|
1489
2001
|
"default": "false",
|
|
1490
|
-
"description": "Draws a pill-style
|
|
1491
|
-
"
|
|
1492
|
-
"reflects": true
|
|
2002
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
2003
|
+
"fieldName": "pill"
|
|
1493
2004
|
},
|
|
1494
2005
|
{
|
|
1495
|
-
"
|
|
1496
|
-
"
|
|
2006
|
+
"name": "label",
|
|
2007
|
+
"type": {
|
|
2008
|
+
"text": "string"
|
|
2009
|
+
},
|
|
2010
|
+
"default": "''",
|
|
2011
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
2012
|
+
"fieldName": "label"
|
|
2013
|
+
},
|
|
2014
|
+
{
|
|
2015
|
+
"name": "help-text",
|
|
2016
|
+
"type": {
|
|
2017
|
+
"text": "string"
|
|
2018
|
+
},
|
|
2019
|
+
"default": "''",
|
|
2020
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2021
|
+
"fieldName": "helpText"
|
|
2022
|
+
},
|
|
2023
|
+
{
|
|
2024
|
+
"name": "disabled",
|
|
1497
2025
|
"type": {
|
|
1498
2026
|
"text": "boolean"
|
|
1499
2027
|
},
|
|
1500
2028
|
"default": "false",
|
|
1501
|
-
"description": "
|
|
1502
|
-
"
|
|
1503
|
-
|
|
1504
|
-
}
|
|
1505
|
-
],
|
|
1506
|
-
"attributes": [
|
|
2029
|
+
"description": "Disables the input.",
|
|
2030
|
+
"fieldName": "disabled"
|
|
2031
|
+
},
|
|
1507
2032
|
{
|
|
1508
|
-
"name": "
|
|
2033
|
+
"name": "form",
|
|
1509
2034
|
"type": {
|
|
1510
|
-
"text": "
|
|
2035
|
+
"text": "string"
|
|
1511
2036
|
},
|
|
1512
|
-
"default": "'
|
|
1513
|
-
"description": "The
|
|
1514
|
-
"fieldName": "
|
|
2037
|
+
"default": "''",
|
|
2038
|
+
"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.",
|
|
2039
|
+
"fieldName": "form"
|
|
1515
2040
|
},
|
|
1516
2041
|
{
|
|
1517
|
-
"name": "
|
|
2042
|
+
"name": "required",
|
|
1518
2043
|
"type": {
|
|
1519
|
-
"text": "
|
|
2044
|
+
"text": "boolean"
|
|
1520
2045
|
},
|
|
1521
|
-
"default": "
|
|
1522
|
-
"description": "
|
|
1523
|
-
"fieldName": "
|
|
2046
|
+
"default": "false",
|
|
2047
|
+
"description": "Makes the input a required field.",
|
|
2048
|
+
"fieldName": "required"
|
|
1524
2049
|
},
|
|
1525
2050
|
{
|
|
1526
|
-
"name": "
|
|
2051
|
+
"name": "inline",
|
|
1527
2052
|
"type": {
|
|
1528
2053
|
"text": "boolean"
|
|
1529
2054
|
},
|
|
1530
2055
|
"default": "false",
|
|
1531
|
-
"description": "
|
|
1532
|
-
"fieldName": "
|
|
2056
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
2057
|
+
"fieldName": "inline"
|
|
1533
2058
|
},
|
|
1534
2059
|
{
|
|
1535
|
-
"name": "
|
|
2060
|
+
"name": "divider",
|
|
1536
2061
|
"type": {
|
|
1537
2062
|
"text": "boolean"
|
|
1538
2063
|
},
|
|
1539
2064
|
"default": "false",
|
|
1540
|
-
"description": "
|
|
1541
|
-
"fieldName": "
|
|
2065
|
+
"description": "Indicates that the control should display a divider",
|
|
2066
|
+
"fieldName": "divider"
|
|
1542
2067
|
}
|
|
1543
2068
|
],
|
|
1544
2069
|
"superclass": {
|
|
1545
|
-
"name": "
|
|
2070
|
+
"name": "FlowRdfFormControl",
|
|
1546
2071
|
"module": "/src/internal/flow-ui-rdf-element"
|
|
1547
2072
|
},
|
|
1548
|
-
"tagName": "flow-ui-
|
|
1549
|
-
"summary": "
|
|
2073
|
+
"tagName": "flow-ui-base-control",
|
|
2074
|
+
"summary": "Inputs collect data from the user.",
|
|
2075
|
+
"documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input",
|
|
2076
|
+
"status": "stable",
|
|
2077
|
+
"since": "2.0",
|
|
2078
|
+
"dependencies": [
|
|
2079
|
+
"flow-ui-icon",
|
|
2080
|
+
"flow-ui-icon-button"
|
|
2081
|
+
],
|
|
1550
2082
|
"customElement": true
|
|
1551
2083
|
}
|
|
1552
2084
|
],
|
|
@@ -1555,23 +2087,31 @@
|
|
|
1555
2087
|
"kind": "js",
|
|
1556
2088
|
"name": "default",
|
|
1557
2089
|
"declaration": {
|
|
1558
|
-
"name": "
|
|
1559
|
-
"module": "components/
|
|
2090
|
+
"name": "FlowUiBaseControl",
|
|
2091
|
+
"module": "components/base-control/base-control.component.js"
|
|
1560
2092
|
}
|
|
1561
2093
|
}
|
|
1562
2094
|
]
|
|
1563
2095
|
},
|
|
1564
2096
|
{
|
|
1565
2097
|
"kind": "javascript-module",
|
|
1566
|
-
"path": "components/
|
|
2098
|
+
"path": "components/base-control/base-control.js",
|
|
1567
2099
|
"declarations": [],
|
|
1568
2100
|
"exports": [
|
|
2101
|
+
{
|
|
2102
|
+
"kind": "js",
|
|
2103
|
+
"name": "*",
|
|
2104
|
+
"declaration": {
|
|
2105
|
+
"name": "*",
|
|
2106
|
+
"package": "./base-control.component"
|
|
2107
|
+
}
|
|
2108
|
+
},
|
|
1569
2109
|
{
|
|
1570
2110
|
"kind": "js",
|
|
1571
2111
|
"name": "default",
|
|
1572
2112
|
"declaration": {
|
|
1573
|
-
"name": "
|
|
1574
|
-
"module": "components/
|
|
2113
|
+
"name": "FlowUiBaseControl",
|
|
2114
|
+
"module": "components/base-control/base-control.js"
|
|
1575
2115
|
}
|
|
1576
2116
|
}
|
|
1577
2117
|
]
|
|
@@ -1723,6 +2263,129 @@
|
|
|
1723
2263
|
}
|
|
1724
2264
|
]
|
|
1725
2265
|
},
|
|
2266
|
+
{
|
|
2267
|
+
"kind": "javascript-module",
|
|
2268
|
+
"path": "components/breadcrumb/breadcrumb.component.js",
|
|
2269
|
+
"declarations": [
|
|
2270
|
+
{
|
|
2271
|
+
"kind": "class",
|
|
2272
|
+
"description": "",
|
|
2273
|
+
"name": "FlowUiBreadcrumb",
|
|
2274
|
+
"cssParts": [
|
|
2275
|
+
{
|
|
2276
|
+
"description": "The component's base wrapper.",
|
|
2277
|
+
"name": "base"
|
|
2278
|
+
}
|
|
2279
|
+
],
|
|
2280
|
+
"slots": [
|
|
2281
|
+
{
|
|
2282
|
+
"description": "One or more breadcrumb items to display.",
|
|
2283
|
+
"name": ""
|
|
2284
|
+
},
|
|
2285
|
+
{
|
|
2286
|
+
"description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
|
|
2287
|
+
"name": "separator"
|
|
2288
|
+
}
|
|
2289
|
+
],
|
|
2290
|
+
"members": [
|
|
2291
|
+
{
|
|
2292
|
+
"kind": "field",
|
|
2293
|
+
"name": "localize",
|
|
2294
|
+
"privacy": "private",
|
|
2295
|
+
"readonly": true,
|
|
2296
|
+
"default": "new LocalizeController(this)"
|
|
2297
|
+
},
|
|
2298
|
+
{
|
|
2299
|
+
"kind": "field",
|
|
2300
|
+
"name": "separatorDir",
|
|
2301
|
+
"privacy": "private"
|
|
2302
|
+
},
|
|
2303
|
+
{
|
|
2304
|
+
"kind": "field",
|
|
2305
|
+
"name": "defaultSlot",
|
|
2306
|
+
"type": {
|
|
2307
|
+
"text": "HTMLSlotElement"
|
|
2308
|
+
},
|
|
2309
|
+
"privacy": "private"
|
|
2310
|
+
},
|
|
2311
|
+
{
|
|
2312
|
+
"kind": "field",
|
|
2313
|
+
"name": "separatorSlot",
|
|
2314
|
+
"type": {
|
|
2315
|
+
"text": "HTMLSlotElement"
|
|
2316
|
+
},
|
|
2317
|
+
"privacy": "private"
|
|
2318
|
+
},
|
|
2319
|
+
{
|
|
2320
|
+
"kind": "field",
|
|
2321
|
+
"name": "label",
|
|
2322
|
+
"type": {
|
|
2323
|
+
"text": "string"
|
|
2324
|
+
},
|
|
2325
|
+
"default": "''",
|
|
2326
|
+
"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.",
|
|
2327
|
+
"attribute": "label"
|
|
2328
|
+
},
|
|
2329
|
+
{
|
|
2330
|
+
"kind": "method",
|
|
2331
|
+
"name": "getSeparator",
|
|
2332
|
+
"privacy": "private"
|
|
2333
|
+
},
|
|
2334
|
+
{
|
|
2335
|
+
"kind": "method",
|
|
2336
|
+
"name": "handleSlotChange",
|
|
2337
|
+
"privacy": "private"
|
|
2338
|
+
}
|
|
2339
|
+
],
|
|
2340
|
+
"attributes": [
|
|
2341
|
+
{
|
|
2342
|
+
"name": "label",
|
|
2343
|
+
"type": {
|
|
2344
|
+
"text": "string"
|
|
2345
|
+
},
|
|
2346
|
+
"default": "''",
|
|
2347
|
+
"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.",
|
|
2348
|
+
"fieldName": "label"
|
|
2349
|
+
}
|
|
2350
|
+
],
|
|
2351
|
+
"superclass": {
|
|
2352
|
+
"name": "FlowRdfElement",
|
|
2353
|
+
"module": "/src/internal/flow-ui-rdf-element"
|
|
2354
|
+
},
|
|
2355
|
+
"tagName": "flow-ui-breadcrumb",
|
|
2356
|
+
"summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
|
|
2357
|
+
"dependencies": [
|
|
2358
|
+
"flow-ui-icon"
|
|
2359
|
+
],
|
|
2360
|
+
"customElement": true
|
|
2361
|
+
}
|
|
2362
|
+
],
|
|
2363
|
+
"exports": [
|
|
2364
|
+
{
|
|
2365
|
+
"kind": "js",
|
|
2366
|
+
"name": "default",
|
|
2367
|
+
"declaration": {
|
|
2368
|
+
"name": "FlowUiBreadcrumb",
|
|
2369
|
+
"module": "components/breadcrumb/breadcrumb.component.js"
|
|
2370
|
+
}
|
|
2371
|
+
}
|
|
2372
|
+
]
|
|
2373
|
+
},
|
|
2374
|
+
{
|
|
2375
|
+
"kind": "javascript-module",
|
|
2376
|
+
"path": "components/breadcrumb/breadcrumb.js",
|
|
2377
|
+
"declarations": [],
|
|
2378
|
+
"exports": [
|
|
2379
|
+
{
|
|
2380
|
+
"kind": "js",
|
|
2381
|
+
"name": "default",
|
|
2382
|
+
"declaration": {
|
|
2383
|
+
"name": "FlowUiBreadcrumb",
|
|
2384
|
+
"module": "components/breadcrumb/breadcrumb.js"
|
|
2385
|
+
}
|
|
2386
|
+
}
|
|
2387
|
+
]
|
|
2388
|
+
},
|
|
1726
2389
|
{
|
|
1727
2390
|
"kind": "javascript-module",
|
|
1728
2391
|
"path": "components/busy-overlay/busy-overlay.component.js",
|
|
@@ -24987,6 +25650,6 @@
|
|
|
24987
25650
|
],
|
|
24988
25651
|
"package": {
|
|
24989
25652
|
"name": "@emuanalytics/flow-rdf-ui",
|
|
24990
|
-
"version": "4.1.
|
|
25653
|
+
"version": "4.1.2"
|
|
24991
25654
|
}
|
|
24992
25655
|
}
|