@emuanalytics/flow-rdf-ui 4.1.4 → 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 +8 -6
- package/dist/components/timer/ticker.mjs +1 -0
- package/dist/custom-elements.json +189 -121
- package/dist/index.d.mts +18 -0
- package/dist/index.d.ts +18 -0
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +39 -39
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ import FlowUiPopup from '../popup/popup.component.mjs';
|
|
|
14
14
|
import styles from './autocomplete.styles.mjs';
|
|
15
15
|
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.mjs';
|
|
16
16
|
import { stopAnimations, animateTo } from '../../internal/animate.mjs';
|
|
17
|
+
import { waitForEvent } from '../../internal/event.mjs';
|
|
17
18
|
|
|
18
19
|
var __defProp = Object.defineProperty;
|
|
19
20
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -158,7 +159,6 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
|
158
159
|
(inputText) => {
|
|
159
160
|
this.inputText = inputText;
|
|
160
161
|
this.emit("flow-ui-input");
|
|
161
|
-
this.toggleListbox();
|
|
162
162
|
},
|
|
163
163
|
this.debounceDelay,
|
|
164
164
|
{ leading: false, trailing: true, context: this }
|
|
@@ -203,11 +203,12 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
|
203
203
|
if (option && !option.disabled) {
|
|
204
204
|
this.setValue(option.value, { emitChangeEvent: true });
|
|
205
205
|
this.input.focus();
|
|
206
|
-
this
|
|
206
|
+
await waitForEvent(this, "flow-ui-change");
|
|
207
|
+
this.blur();
|
|
207
208
|
}
|
|
208
209
|
}
|
|
209
210
|
/** @internal */
|
|
210
|
-
handleKeyDown(event) {
|
|
211
|
+
async handleKeyDown(event) {
|
|
211
212
|
if (event.key === "Escape" && this.open) {
|
|
212
213
|
event.preventDefault();
|
|
213
214
|
event.stopPropagation();
|
|
@@ -250,8 +251,8 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
|
250
251
|
this.setSelectedOption(this.currentOption);
|
|
251
252
|
this.setValue(this.currentOption.value, { emitChangeEvent: true });
|
|
252
253
|
}
|
|
253
|
-
this
|
|
254
|
-
this.
|
|
254
|
+
await waitForEvent(this, "flow-ui-change");
|
|
255
|
+
this.blur();
|
|
255
256
|
}
|
|
256
257
|
}
|
|
257
258
|
/** @internal Add event listeners to the document when the dropdown is opened. */
|
|
@@ -334,7 +335,7 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
|
334
335
|
/** Blurs from the control. */
|
|
335
336
|
blur() {
|
|
336
337
|
if (this.hasFocus) {
|
|
337
|
-
this.input.
|
|
338
|
+
this.input.blur();
|
|
338
339
|
this.hasFocus = false;
|
|
339
340
|
this.toggleListbox();
|
|
340
341
|
this.removeListenersForDropdown();
|
|
@@ -505,6 +506,7 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
|
505
506
|
role="listbox"
|
|
506
507
|
part="listbox"
|
|
507
508
|
class="autocomplete__listbox"
|
|
509
|
+
aria-labelledby="label"
|
|
508
510
|
aria-expanded=${this.open ? "true" : "false"}
|
|
509
511
|
aria-multiselectable="false"
|
|
510
512
|
@mouseup=${this.handleListboxClick}
|
|
@@ -855,151 +855,80 @@
|
|
|
855
855
|
},
|
|
856
856
|
{
|
|
857
857
|
"kind": "javascript-module",
|
|
858
|
-
"path": "components/
|
|
858
|
+
"path": "components/autocomplete/autocomplete.component.js",
|
|
859
859
|
"declarations": [
|
|
860
860
|
{
|
|
861
861
|
"kind": "class",
|
|
862
862
|
"description": "",
|
|
863
|
-
"name": "
|
|
863
|
+
"name": "FlowUiAutocomplete",
|
|
864
864
|
"cssParts": [
|
|
865
865
|
{
|
|
866
|
-
"description": "The
|
|
867
|
-
"name": "
|
|
868
|
-
}
|
|
869
|
-
],
|
|
870
|
-
"slots": [
|
|
866
|
+
"description": "The form control that wraps the label, input, and help text.",
|
|
867
|
+
"name": "form-control"
|
|
868
|
+
},
|
|
871
869
|
{
|
|
872
|
-
"description": "The
|
|
873
|
-
"name": ""
|
|
874
|
-
}
|
|
875
|
-
],
|
|
876
|
-
"members": [
|
|
870
|
+
"description": "The label's wrapper.",
|
|
871
|
+
"name": "form-control-label"
|
|
872
|
+
},
|
|
877
873
|
{
|
|
878
|
-
"
|
|
879
|
-
"name": "
|
|
880
|
-
"type": {
|
|
881
|
-
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
882
|
-
},
|
|
883
|
-
"default": "'primary'",
|
|
884
|
-
"description": "The badge's theme variant.",
|
|
885
|
-
"attribute": "variant",
|
|
886
|
-
"reflects": true
|
|
874
|
+
"description": "The select's wrapper.",
|
|
875
|
+
"name": "form-control-input"
|
|
887
876
|
},
|
|
888
877
|
{
|
|
889
|
-
"
|
|
890
|
-
"name": "
|
|
891
|
-
"type": {
|
|
892
|
-
"text": "'small' | 'medium' | 'large'"
|
|
893
|
-
},
|
|
894
|
-
"default": "'medium'",
|
|
895
|
-
"description": "The badge size.",
|
|
896
|
-
"attribute": "size",
|
|
897
|
-
"reflects": true
|
|
878
|
+
"description": "The help text's wrapper.",
|
|
879
|
+
"name": "form-control-help-text"
|
|
898
880
|
},
|
|
899
881
|
{
|
|
900
|
-
"
|
|
901
|
-
"name": "
|
|
902
|
-
"type": {
|
|
903
|
-
"text": "boolean"
|
|
904
|
-
},
|
|
905
|
-
"default": "false",
|
|
906
|
-
"description": "Draws a pill-style badge with rounded edges.",
|
|
907
|
-
"attribute": "pill",
|
|
908
|
-
"reflects": true
|
|
882
|
+
"description": "The container the wraps the prefix, suffix, combobox, clear icon, and expand button.",
|
|
883
|
+
"name": "combobox"
|
|
909
884
|
},
|
|
910
885
|
{
|
|
911
|
-
"
|
|
912
|
-
"name": "
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
"
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
"
|
|
886
|
+
"description": "The container that wraps the prefix slot.",
|
|
887
|
+
"name": "prefix"
|
|
888
|
+
},
|
|
889
|
+
{
|
|
890
|
+
"description": "The container that wraps the suffix slot.",
|
|
891
|
+
"name": "suffix"
|
|
892
|
+
},
|
|
893
|
+
{
|
|
894
|
+
"description": "The element that displays the selected option's label, an `<input>` element.",
|
|
895
|
+
"name": "display-input"
|
|
896
|
+
},
|
|
897
|
+
{
|
|
898
|
+
"description": "The listbox container where options are slotted.",
|
|
899
|
+
"name": "listbox"
|
|
900
|
+
},
|
|
901
|
+
{
|
|
902
|
+
"description": "The clear button.",
|
|
903
|
+
"name": "clear-button"
|
|
920
904
|
}
|
|
921
905
|
],
|
|
922
|
-
"
|
|
906
|
+
"slots": [
|
|
923
907
|
{
|
|
924
|
-
"
|
|
925
|
-
"
|
|
926
|
-
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
927
|
-
},
|
|
928
|
-
"default": "'primary'",
|
|
929
|
-
"description": "The badge's theme variant.",
|
|
930
|
-
"fieldName": "variant"
|
|
908
|
+
"description": "The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.",
|
|
909
|
+
"name": ""
|
|
931
910
|
},
|
|
932
911
|
{
|
|
933
|
-
"
|
|
934
|
-
"
|
|
935
|
-
"text": "'small' | 'medium' | 'large'"
|
|
936
|
-
},
|
|
937
|
-
"default": "'medium'",
|
|
938
|
-
"description": "The badge size.",
|
|
939
|
-
"fieldName": "size"
|
|
912
|
+
"description": "The input's label. Alternatively, you can use the `label` attribute.",
|
|
913
|
+
"name": "label"
|
|
940
914
|
},
|
|
941
915
|
{
|
|
942
|
-
"
|
|
943
|
-
"
|
|
944
|
-
"text": "boolean"
|
|
945
|
-
},
|
|
946
|
-
"default": "false",
|
|
947
|
-
"description": "Draws a pill-style badge with rounded edges.",
|
|
948
|
-
"fieldName": "pill"
|
|
916
|
+
"description": "Used to prepend a presentational icon or similar element to the combobox.",
|
|
917
|
+
"name": "prefix"
|
|
949
918
|
},
|
|
950
919
|
{
|
|
951
|
-
"
|
|
952
|
-
"
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
"
|
|
956
|
-
"
|
|
957
|
-
|
|
920
|
+
"description": "Used to append a presentational icon or similar element to the combobox.",
|
|
921
|
+
"name": "suffix"
|
|
922
|
+
},
|
|
923
|
+
{
|
|
924
|
+
"description": "An icon to use in lieu of the default clear icon.",
|
|
925
|
+
"name": "clear-icon"
|
|
926
|
+
},
|
|
927
|
+
{
|
|
928
|
+
"description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
929
|
+
"name": "help-text"
|
|
958
930
|
}
|
|
959
931
|
],
|
|
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
932
|
"members": [
|
|
1004
933
|
{
|
|
1005
934
|
"kind": "field",
|
|
@@ -1655,6 +1584,145 @@
|
|
|
1655
1584
|
}
|
|
1656
1585
|
]
|
|
1657
1586
|
},
|
|
1587
|
+
{
|
|
1588
|
+
"kind": "javascript-module",
|
|
1589
|
+
"path": "components/badge/badge.component.js",
|
|
1590
|
+
"declarations": [
|
|
1591
|
+
{
|
|
1592
|
+
"kind": "class",
|
|
1593
|
+
"description": "",
|
|
1594
|
+
"name": "FlowUiBadge",
|
|
1595
|
+
"cssParts": [
|
|
1596
|
+
{
|
|
1597
|
+
"description": "The component's base wrapper.",
|
|
1598
|
+
"name": "base"
|
|
1599
|
+
}
|
|
1600
|
+
],
|
|
1601
|
+
"slots": [
|
|
1602
|
+
{
|
|
1603
|
+
"description": "The badge's content.",
|
|
1604
|
+
"name": ""
|
|
1605
|
+
}
|
|
1606
|
+
],
|
|
1607
|
+
"members": [
|
|
1608
|
+
{
|
|
1609
|
+
"kind": "field",
|
|
1610
|
+
"name": "variant",
|
|
1611
|
+
"type": {
|
|
1612
|
+
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
1613
|
+
},
|
|
1614
|
+
"default": "'primary'",
|
|
1615
|
+
"description": "The badge's theme variant.",
|
|
1616
|
+
"attribute": "variant",
|
|
1617
|
+
"reflects": true
|
|
1618
|
+
},
|
|
1619
|
+
{
|
|
1620
|
+
"kind": "field",
|
|
1621
|
+
"name": "size",
|
|
1622
|
+
"type": {
|
|
1623
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1624
|
+
},
|
|
1625
|
+
"default": "'medium'",
|
|
1626
|
+
"description": "The badge size.",
|
|
1627
|
+
"attribute": "size",
|
|
1628
|
+
"reflects": true
|
|
1629
|
+
},
|
|
1630
|
+
{
|
|
1631
|
+
"kind": "field",
|
|
1632
|
+
"name": "pill",
|
|
1633
|
+
"type": {
|
|
1634
|
+
"text": "boolean"
|
|
1635
|
+
},
|
|
1636
|
+
"default": "false",
|
|
1637
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
1638
|
+
"attribute": "pill",
|
|
1639
|
+
"reflects": true
|
|
1640
|
+
},
|
|
1641
|
+
{
|
|
1642
|
+
"kind": "field",
|
|
1643
|
+
"name": "pulse",
|
|
1644
|
+
"type": {
|
|
1645
|
+
"text": "boolean"
|
|
1646
|
+
},
|
|
1647
|
+
"default": "false",
|
|
1648
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
1649
|
+
"attribute": "pulse",
|
|
1650
|
+
"reflects": true
|
|
1651
|
+
}
|
|
1652
|
+
],
|
|
1653
|
+
"attributes": [
|
|
1654
|
+
{
|
|
1655
|
+
"name": "variant",
|
|
1656
|
+
"type": {
|
|
1657
|
+
"text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
|
|
1658
|
+
},
|
|
1659
|
+
"default": "'primary'",
|
|
1660
|
+
"description": "The badge's theme variant.",
|
|
1661
|
+
"fieldName": "variant"
|
|
1662
|
+
},
|
|
1663
|
+
{
|
|
1664
|
+
"name": "size",
|
|
1665
|
+
"type": {
|
|
1666
|
+
"text": "'small' | 'medium' | 'large'"
|
|
1667
|
+
},
|
|
1668
|
+
"default": "'medium'",
|
|
1669
|
+
"description": "The badge size.",
|
|
1670
|
+
"fieldName": "size"
|
|
1671
|
+
},
|
|
1672
|
+
{
|
|
1673
|
+
"name": "pill",
|
|
1674
|
+
"type": {
|
|
1675
|
+
"text": "boolean"
|
|
1676
|
+
},
|
|
1677
|
+
"default": "false",
|
|
1678
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
1679
|
+
"fieldName": "pill"
|
|
1680
|
+
},
|
|
1681
|
+
{
|
|
1682
|
+
"name": "pulse",
|
|
1683
|
+
"type": {
|
|
1684
|
+
"text": "boolean"
|
|
1685
|
+
},
|
|
1686
|
+
"default": "false",
|
|
1687
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
1688
|
+
"fieldName": "pulse"
|
|
1689
|
+
}
|
|
1690
|
+
],
|
|
1691
|
+
"superclass": {
|
|
1692
|
+
"name": "FlowRdfElement",
|
|
1693
|
+
"module": "/src/internal/flow-ui-rdf-element"
|
|
1694
|
+
},
|
|
1695
|
+
"tagName": "flow-ui-badge",
|
|
1696
|
+
"summary": "Badges are used to draw attention and display statuses or counts.",
|
|
1697
|
+
"customElement": true
|
|
1698
|
+
}
|
|
1699
|
+
],
|
|
1700
|
+
"exports": [
|
|
1701
|
+
{
|
|
1702
|
+
"kind": "js",
|
|
1703
|
+
"name": "default",
|
|
1704
|
+
"declaration": {
|
|
1705
|
+
"name": "FlowUiBadge",
|
|
1706
|
+
"module": "components/badge/badge.component.js"
|
|
1707
|
+
}
|
|
1708
|
+
}
|
|
1709
|
+
]
|
|
1710
|
+
},
|
|
1711
|
+
{
|
|
1712
|
+
"kind": "javascript-module",
|
|
1713
|
+
"path": "components/badge/badge.js",
|
|
1714
|
+
"declarations": [],
|
|
1715
|
+
"exports": [
|
|
1716
|
+
{
|
|
1717
|
+
"kind": "js",
|
|
1718
|
+
"name": "default",
|
|
1719
|
+
"declaration": {
|
|
1720
|
+
"name": "FlowUiBadge",
|
|
1721
|
+
"module": "components/badge/badge.js"
|
|
1722
|
+
}
|
|
1723
|
+
}
|
|
1724
|
+
]
|
|
1725
|
+
},
|
|
1658
1726
|
{
|
|
1659
1727
|
"kind": "javascript-module",
|
|
1660
1728
|
"path": "components/base-control/base-control.component.js",
|
|
@@ -25650,6 +25718,6 @@
|
|
|
25650
25718
|
],
|
|
25651
25719
|
"package": {
|
|
25652
25720
|
"name": "@emuanalytics/flow-rdf-ui",
|
|
25653
|
-
"version": "4.1.
|
|
25721
|
+
"version": "4.1.5"
|
|
25654
25722
|
}
|
|
25655
25723
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1938,6 +1938,13 @@ declare global {
|
|
|
1938
1938
|
* @dependency flow-ui-popup
|
|
1939
1939
|
* @dependency flow-ui-icon
|
|
1940
1940
|
*
|
|
1941
|
+
* @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
|
|
1942
|
+
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
1943
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
1944
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
1945
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
1946
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
1947
|
+
*
|
|
1941
1948
|
* @event flow-ui-input - Emitted when the display value changes.
|
|
1942
1949
|
* @event flow-ui-change - Emitted when the input value changes.
|
|
1943
1950
|
* @event flow-ui-focus - Emitted when the input is focused.
|
|
@@ -1952,6 +1959,17 @@ declare global {
|
|
|
1952
1959
|
* @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
|
|
1953
1960
|
* @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
|
|
1954
1961
|
* @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
|
|
1962
|
+
*
|
|
1963
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
1964
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1965
|
+
* @csspart form-control-input - The select's wrapper.
|
|
1966
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1967
|
+
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
|
1968
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
1969
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
1970
|
+
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
|
1971
|
+
* @csspart listbox - The listbox container where options are slotted.
|
|
1972
|
+
* @csspart clear-button - The clear button.
|
|
1955
1973
|
*/
|
|
1956
1974
|
declare class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
1957
1975
|
static styles: CSSResultGroup;
|
package/dist/index.d.ts
CHANGED
|
@@ -1938,6 +1938,13 @@ declare global {
|
|
|
1938
1938
|
* @dependency flow-ui-popup
|
|
1939
1939
|
* @dependency flow-ui-icon
|
|
1940
1940
|
*
|
|
1941
|
+
* @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
|
|
1942
|
+
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
1943
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
1944
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
1945
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
1946
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
1947
|
+
*
|
|
1941
1948
|
* @event flow-ui-input - Emitted when the display value changes.
|
|
1942
1949
|
* @event flow-ui-change - Emitted when the input value changes.
|
|
1943
1950
|
* @event flow-ui-focus - Emitted when the input is focused.
|
|
@@ -1952,6 +1959,17 @@ declare global {
|
|
|
1952
1959
|
* @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
|
|
1953
1960
|
* @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
|
|
1954
1961
|
* @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
|
|
1962
|
+
*
|
|
1963
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
1964
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1965
|
+
* @csspart form-control-input - The select's wrapper.
|
|
1966
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1967
|
+
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
|
1968
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
1969
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
1970
|
+
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
|
1971
|
+
* @csspart listbox - The listbox container where options are slotted.
|
|
1972
|
+
* @csspart clear-button - The clear button.
|
|
1955
1973
|
*/
|
|
1956
1974
|
declare class FlowUiAutocomplete extends FlowRdfFormControl {
|
|
1957
1975
|
static styles: CSSResultGroup;
|
package/dist/package.json.mjs
CHANGED
|
@@ -133,47 +133,9 @@
|
|
|
133
133
|
],
|
|
134
134
|
"references": []
|
|
135
135
|
},
|
|
136
|
-
{
|
|
137
|
-
"name": "flow-ui-badge",
|
|
138
|
-
"description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
139
|
-
"attributes": [
|
|
140
|
-
{
|
|
141
|
-
"name": "variant",
|
|
142
|
-
"description": "The badge's theme variant.",
|
|
143
|
-
"values": [
|
|
144
|
-
{ "name": "primary" },
|
|
145
|
-
{ "name": "secondary" },
|
|
146
|
-
{ "name": "success" },
|
|
147
|
-
{ "name": "neutral" },
|
|
148
|
-
{ "name": "warning" },
|
|
149
|
-
{ "name": "danger" }
|
|
150
|
-
]
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"name": "size",
|
|
154
|
-
"description": "The badge size.",
|
|
155
|
-
"values": [
|
|
156
|
-
{ "name": "small" },
|
|
157
|
-
{ "name": "medium" },
|
|
158
|
-
{ "name": "large" }
|
|
159
|
-
]
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"name": "pill",
|
|
163
|
-
"description": "Draws a pill-style badge with rounded edges.",
|
|
164
|
-
"values": []
|
|
165
|
-
},
|
|
166
|
-
{
|
|
167
|
-
"name": "pulse",
|
|
168
|
-
"description": "Makes the badge pulsate to draw attention.",
|
|
169
|
-
"values": []
|
|
170
|
-
}
|
|
171
|
-
],
|
|
172
|
-
"references": []
|
|
173
|
-
},
|
|
174
136
|
{
|
|
175
137
|
"name": "flow-ui-autocomplete",
|
|
176
|
-
"description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input",
|
|
138
|
+
"description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **clear-button** - The clear button.",
|
|
177
139
|
"attributes": [
|
|
178
140
|
{
|
|
179
141
|
"name": "size",
|
|
@@ -270,6 +232,44 @@
|
|
|
270
232
|
],
|
|
271
233
|
"references": []
|
|
272
234
|
},
|
|
235
|
+
{
|
|
236
|
+
"name": "flow-ui-badge",
|
|
237
|
+
"description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
238
|
+
"attributes": [
|
|
239
|
+
{
|
|
240
|
+
"name": "variant",
|
|
241
|
+
"description": "The badge's theme variant.",
|
|
242
|
+
"values": [
|
|
243
|
+
{ "name": "primary" },
|
|
244
|
+
{ "name": "secondary" },
|
|
245
|
+
{ "name": "success" },
|
|
246
|
+
{ "name": "neutral" },
|
|
247
|
+
{ "name": "warning" },
|
|
248
|
+
{ "name": "danger" }
|
|
249
|
+
]
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"name": "size",
|
|
253
|
+
"description": "The badge size.",
|
|
254
|
+
"values": [
|
|
255
|
+
{ "name": "small" },
|
|
256
|
+
{ "name": "medium" },
|
|
257
|
+
{ "name": "large" }
|
|
258
|
+
]
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "pill",
|
|
262
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
263
|
+
"values": []
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"name": "pulse",
|
|
267
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
268
|
+
"values": []
|
|
269
|
+
}
|
|
270
|
+
],
|
|
271
|
+
"references": []
|
|
272
|
+
},
|
|
273
273
|
{
|
|
274
274
|
"name": "flow-ui-base-control",
|
|
275
275
|
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|