@emuanalytics/flow-rdf-ui 0.0.24 → 0.0.26
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/custom-elements.json +8483 -7207
- package/dist/index.cjs +2705 -1290
- package/dist/index.d.cts +283 -60
- package/dist/index.d.mts +283 -60
- package/dist/index.d.ts +283 -60
- package/dist/index.mjs +2657 -1243
- package/dist/themes/dark.css +1 -0
- package/dist/themes/dark.styles.js +1 -0
- package/dist/themes/light.css +1 -0
- package/dist/themes/light.styles.js +1 -0
- package/dist/vscode.html-custom-data.json +140 -430
- package/package.json +5 -3
package/dist/index.d.cts
CHANGED
|
@@ -49,6 +49,8 @@ interface FlowRdfFormControl extends FlowRdfElement {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
|
+
*
|
|
53
|
+
*
|
|
52
54
|
* @tagname flow-ui-icon
|
|
53
55
|
* @summary Icons are symbols that can be used to represent various options within an application.
|
|
54
56
|
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/icon
|
|
@@ -83,18 +85,28 @@ declare class FlowIcon extends FlowRdfElement {
|
|
|
83
85
|
firstUpdated(): void;
|
|
84
86
|
disconnectedCallback(): void;
|
|
85
87
|
private getUrl;
|
|
88
|
+
/**
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
86
91
|
handleLabelChange(): void;
|
|
92
|
+
/**
|
|
93
|
+
* @internal
|
|
94
|
+
*/
|
|
87
95
|
setIcon(): Promise<void>;
|
|
88
96
|
render(): SVGElement | null;
|
|
89
97
|
}
|
|
90
98
|
|
|
99
|
+
interface VirtualElement {
|
|
100
|
+
getBoundingClientRect: () => DOMRect;
|
|
101
|
+
contextElement?: Element;
|
|
102
|
+
}
|
|
91
103
|
/**
|
|
92
104
|
* @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
|
|
93
|
-
* @documentation https://
|
|
105
|
+
* @documentation https://shoelace.style/components/popup
|
|
94
106
|
* @status stable
|
|
95
107
|
* @since 2.0
|
|
96
108
|
*
|
|
97
|
-
* @event
|
|
109
|
+
* @event sl-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
|
|
98
110
|
* operations in your listener or consider debouncing it.
|
|
99
111
|
*
|
|
100
112
|
* @slot - The popup's content.
|
|
@@ -105,10 +117,11 @@ declare class FlowIcon extends FlowRdfElement {
|
|
|
105
117
|
* assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
|
|
106
118
|
* maybe a border or box shadow.
|
|
107
119
|
* @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
|
|
120
|
+
* @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
|
|
108
121
|
*
|
|
109
122
|
* @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
|
|
110
123
|
* attribute is used.
|
|
111
|
-
* @cssproperty [--arrow-color=var(--
|
|
124
|
+
* @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
|
|
112
125
|
* @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
|
|
113
126
|
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
|
114
127
|
* available when using `auto-size`.
|
|
@@ -116,7 +129,7 @@ declare class FlowIcon extends FlowRdfElement {
|
|
|
116
129
|
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
|
117
130
|
* available when using `auto-size`.
|
|
118
131
|
*/
|
|
119
|
-
declare class
|
|
132
|
+
declare class SlPopup extends FlowRdfElement {
|
|
120
133
|
static styles: CSSResultGroup;
|
|
121
134
|
private anchorEl;
|
|
122
135
|
private cleanup;
|
|
@@ -124,10 +137,11 @@ declare class FlowPopup extends FlowRdfElement {
|
|
|
124
137
|
popup: HTMLElement;
|
|
125
138
|
private arrowEl;
|
|
126
139
|
/**
|
|
127
|
-
* The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide
|
|
128
|
-
* reference
|
|
140
|
+
* The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
|
|
141
|
+
* element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
|
|
142
|
+
* `anchor` slot instead.
|
|
129
143
|
*/
|
|
130
|
-
anchor: Element | string;
|
|
144
|
+
anchor: Element | string | VirtualElement;
|
|
131
145
|
/**
|
|
132
146
|
* Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
|
|
133
147
|
* down and the popup will be hidden.
|
|
@@ -211,6 +225,13 @@ declare class FlowPopup extends FlowRdfElement {
|
|
|
211
225
|
autoSizeBoundary: Element | Element[];
|
|
212
226
|
/** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
|
|
213
227
|
autoSizePadding: number;
|
|
228
|
+
/**
|
|
229
|
+
* When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
|
|
230
|
+
* gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
|
|
231
|
+
* because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
|
|
232
|
+
* active.
|
|
233
|
+
*/
|
|
234
|
+
hoverBridge: boolean;
|
|
214
235
|
connectedCallback(): Promise<void>;
|
|
215
236
|
disconnectedCallback(): void;
|
|
216
237
|
updated(changedProps: Map<string, unknown>): Promise<void>;
|
|
@@ -219,11 +240,13 @@ declare class FlowPopup extends FlowRdfElement {
|
|
|
219
240
|
private stop;
|
|
220
241
|
/** Forces the popup to recalculate and reposition itself. */
|
|
221
242
|
reposition(): void;
|
|
243
|
+
private updateHoverBridge;
|
|
222
244
|
render(): lit.TemplateResult<1>;
|
|
223
245
|
}
|
|
246
|
+
|
|
224
247
|
declare global {
|
|
225
248
|
interface HTMLElementTagNameMap {
|
|
226
|
-
'flow-ui-popup':
|
|
249
|
+
'flow-ui-popup': SlPopup;
|
|
227
250
|
}
|
|
228
251
|
}
|
|
229
252
|
|
|
@@ -261,7 +284,7 @@ declare class FlowTooltip extends FlowRdfElement {
|
|
|
261
284
|
private readonly localize;
|
|
262
285
|
defaultSlot: HTMLSlotElement;
|
|
263
286
|
body: HTMLElement;
|
|
264
|
-
popup:
|
|
287
|
+
popup: SlPopup;
|
|
265
288
|
/** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
|
|
266
289
|
content: string;
|
|
267
290
|
/**
|
|
@@ -880,17 +903,33 @@ declare global {
|
|
|
880
903
|
*/
|
|
881
904
|
declare class FlowCalendar extends FlowRdfElement {
|
|
882
905
|
static styles: CSSResultGroup;
|
|
906
|
+
private _monthSelect;
|
|
907
|
+
private _yearSelect;
|
|
883
908
|
private _displayDate;
|
|
884
|
-
private _selectedDate
|
|
909
|
+
private _selectedDate?;
|
|
885
910
|
value: string;
|
|
911
|
+
displayMode: 'date' | 'time' | 'datetime';
|
|
912
|
+
timezone?: string;
|
|
913
|
+
locale?: string;
|
|
914
|
+
size: 'small' | 'medium' | 'large';
|
|
886
915
|
connectedCallback(): void;
|
|
887
916
|
disconnectedCallback(): void;
|
|
888
917
|
handleValueChange(): void;
|
|
918
|
+
handleTimezoneChange(): void;
|
|
889
919
|
private dateClicked;
|
|
890
|
-
private
|
|
920
|
+
private stepDisplayDate;
|
|
921
|
+
/**
|
|
922
|
+
* Generate a list of years for the year select dropdown
|
|
923
|
+
*/
|
|
924
|
+
private yearOptionsForDate;
|
|
925
|
+
private makeDate;
|
|
926
|
+
private updateValue;
|
|
927
|
+
private handleHeaderSelectChange;
|
|
928
|
+
private handleTimeChange;
|
|
891
929
|
private calendarHeaderTemplate;
|
|
892
930
|
private dayOfWeekGridTemplate;
|
|
893
931
|
private dayGridTemplate;
|
|
932
|
+
private timeTemplate;
|
|
894
933
|
render(): lit.TemplateResult<1>;
|
|
895
934
|
}
|
|
896
935
|
|
|
@@ -1332,7 +1371,7 @@ declare global {
|
|
|
1332
1371
|
*/
|
|
1333
1372
|
declare class FlowDropdown extends FlowRdfElement {
|
|
1334
1373
|
static styles: CSSResultGroup;
|
|
1335
|
-
popup:
|
|
1374
|
+
popup: SlPopup;
|
|
1336
1375
|
trigger: HTMLSlotElement;
|
|
1337
1376
|
panel: HTMLSlotElement;
|
|
1338
1377
|
private readonly localize;
|
|
@@ -1789,6 +1828,155 @@ declare global {
|
|
|
1789
1828
|
}
|
|
1790
1829
|
}
|
|
1791
1830
|
|
|
1831
|
+
/**
|
|
1832
|
+
* @summary Tags are used as labels to organize things or to indicate a selection.
|
|
1833
|
+
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tag
|
|
1834
|
+
* @status stable
|
|
1835
|
+
* @since 2.0
|
|
1836
|
+
*
|
|
1837
|
+
* @dependency flow-ui-icon-button
|
|
1838
|
+
*
|
|
1839
|
+
* @slot - The tag's content.
|
|
1840
|
+
*
|
|
1841
|
+
* @event flow-ui-remove - Emitted when the remove button is activated.
|
|
1842
|
+
*
|
|
1843
|
+
* @csspart base - The component's base wrapper.
|
|
1844
|
+
* @csspart content - The tag's content.
|
|
1845
|
+
* @csspart remove-button - The tag's remove button, an `<flow-ui-icon-button>`.
|
|
1846
|
+
* @csspart remove-button__base - The remove button's exported `base` part.
|
|
1847
|
+
*/
|
|
1848
|
+
declare class FlowTag extends FlowRdfElement {
|
|
1849
|
+
static styles: CSSResultGroup;
|
|
1850
|
+
static dependencies: {
|
|
1851
|
+
'flow-icon-button': typeof FlowIconButton;
|
|
1852
|
+
};
|
|
1853
|
+
private readonly localize;
|
|
1854
|
+
/** The tag's theme variant. */
|
|
1855
|
+
variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
|
|
1856
|
+
/** The tag's size. */
|
|
1857
|
+
size: 'small' | 'medium' | 'large';
|
|
1858
|
+
/** Draws a pill-style tag with rounded edges. */
|
|
1859
|
+
pill: boolean;
|
|
1860
|
+
/** Makes the tag removable and shows a remove button. */
|
|
1861
|
+
removable: boolean;
|
|
1862
|
+
private handleRemoveClick;
|
|
1863
|
+
render(): lit.TemplateResult<1>;
|
|
1864
|
+
}
|
|
1865
|
+
|
|
1866
|
+
declare global {
|
|
1867
|
+
interface HTMLElementTagNameMap {
|
|
1868
|
+
'flow-ui-tag': FlowTag;
|
|
1869
|
+
}
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormControl {
|
|
1873
|
+
static styles: CSSResultGroup;
|
|
1874
|
+
private readonly formControlController;
|
|
1875
|
+
private readonly hasSlotController;
|
|
1876
|
+
private readonly localize;
|
|
1877
|
+
popup: SlPopup;
|
|
1878
|
+
combobox: HTMLSlotElement;
|
|
1879
|
+
displayInput: HTMLInputElement;
|
|
1880
|
+
valueInput: HTMLInputElement;
|
|
1881
|
+
calendarContainer: HTMLDivElement;
|
|
1882
|
+
private hasFocus;
|
|
1883
|
+
displayLabel: string;
|
|
1884
|
+
/** The name of the select, submitted as a name/value pair with form data. */
|
|
1885
|
+
name: string;
|
|
1886
|
+
value: string;
|
|
1887
|
+
displayMode: 'date' | 'time' | 'datetime';
|
|
1888
|
+
format: string;
|
|
1889
|
+
timezone?: string;
|
|
1890
|
+
locale?: string;
|
|
1891
|
+
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
1892
|
+
defaultValue: string;
|
|
1893
|
+
/** The select's size. */
|
|
1894
|
+
size: 'small' | 'medium' | 'large';
|
|
1895
|
+
/** Placeholder text to show as a hint when the select is empty. */
|
|
1896
|
+
placeholder: string;
|
|
1897
|
+
/** Disables the select control. */
|
|
1898
|
+
disabled: boolean;
|
|
1899
|
+
/** Adds a clear button when the select is not empty. */
|
|
1900
|
+
clearable: boolean;
|
|
1901
|
+
/**
|
|
1902
|
+
* Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
|
|
1903
|
+
* use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
|
|
1904
|
+
*/
|
|
1905
|
+
open: boolean;
|
|
1906
|
+
/**
|
|
1907
|
+
* Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
|
|
1908
|
+
* `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
|
|
1909
|
+
*/
|
|
1910
|
+
hoist: boolean;
|
|
1911
|
+
/** Draws a filled select. */
|
|
1912
|
+
filled: boolean;
|
|
1913
|
+
/** Draws a pill-style select with rounded edges. */
|
|
1914
|
+
pill: boolean;
|
|
1915
|
+
/** The select's label. If you need to display HTML, use the `label` slot instead. */
|
|
1916
|
+
label: string;
|
|
1917
|
+
/**
|
|
1918
|
+
* The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
|
|
1919
|
+
* inside of the viewport.
|
|
1920
|
+
*/
|
|
1921
|
+
placement: 'top' | 'top-end' | 'top-start' | 'bottom' | 'bottom-end' | 'bottom-start';
|
|
1922
|
+
/** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
|
|
1923
|
+
helpText: string;
|
|
1924
|
+
/**
|
|
1925
|
+
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
1926
|
+
* to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
|
|
1927
|
+
* the same document or shadow root for this to work.
|
|
1928
|
+
*/
|
|
1929
|
+
form: string;
|
|
1930
|
+
/** The select's required attribute. */
|
|
1931
|
+
required: boolean;
|
|
1932
|
+
/** Gets the validity state object */
|
|
1933
|
+
get validity(): ValidityState;
|
|
1934
|
+
/** Gets the validation message */
|
|
1935
|
+
get validationMessage(): string;
|
|
1936
|
+
connectedCallback(): void;
|
|
1937
|
+
private addOpenListeners;
|
|
1938
|
+
private removeOpenListeners;
|
|
1939
|
+
updateDisplayLabel(): void;
|
|
1940
|
+
private handleFocus;
|
|
1941
|
+
private handleBlur;
|
|
1942
|
+
private handleDocumentFocusIn;
|
|
1943
|
+
private handleDocumentKeyDown;
|
|
1944
|
+
private handleDocumentMouseDown;
|
|
1945
|
+
private handleLabelClick;
|
|
1946
|
+
private handleComboboxMouseDown;
|
|
1947
|
+
private handleComboboxKeyDown;
|
|
1948
|
+
private handleClearClick;
|
|
1949
|
+
private handleClearMouseDown;
|
|
1950
|
+
private handleCalendarChange;
|
|
1951
|
+
private handleInvalid;
|
|
1952
|
+
handleDisabledChange(): void;
|
|
1953
|
+
handleValueChange(): void;
|
|
1954
|
+
handleOpenChange(): Promise<void>;
|
|
1955
|
+
/** Shows the listbox. */
|
|
1956
|
+
show(): Promise<void>;
|
|
1957
|
+
/** Hides the listbox. */
|
|
1958
|
+
hide(): Promise<void>;
|
|
1959
|
+
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
|
1960
|
+
checkValidity(): boolean;
|
|
1961
|
+
/** Gets the associated form, if one exists. */
|
|
1962
|
+
getForm(): HTMLFormElement | null;
|
|
1963
|
+
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
1964
|
+
reportValidity(): boolean;
|
|
1965
|
+
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
|
1966
|
+
setCustomValidity(message: string): void;
|
|
1967
|
+
/** Sets focus on the control. */
|
|
1968
|
+
focus(options?: FocusOptions): void;
|
|
1969
|
+
/** Removes focus from the control. */
|
|
1970
|
+
blur(): void;
|
|
1971
|
+
render(): lit.TemplateResult<1>;
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
declare global {
|
|
1975
|
+
interface HTMLElementTagNameMap {
|
|
1976
|
+
'flow-ui-date-time-picker': FlowDatetimePicker;
|
|
1977
|
+
}
|
|
1978
|
+
}
|
|
1979
|
+
|
|
1792
1980
|
/**
|
|
1793
1981
|
* @summary Details show a brief summary and expand to show additional content.
|
|
1794
1982
|
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/details
|
|
@@ -2175,6 +2363,37 @@ declare global {
|
|
|
2175
2363
|
}
|
|
2176
2364
|
}
|
|
2177
2365
|
|
|
2366
|
+
/**
|
|
2367
|
+
|
|
2368
|
+
*/
|
|
2369
|
+
declare class FlowNumberStepper extends FlowRdfElement {
|
|
2370
|
+
static styles: CSSResultGroup;
|
|
2371
|
+
private _input;
|
|
2372
|
+
private _formatter;
|
|
2373
|
+
value: number | '';
|
|
2374
|
+
step: number;
|
|
2375
|
+
min: number;
|
|
2376
|
+
max: number;
|
|
2377
|
+
format: string;
|
|
2378
|
+
size: 'small' | 'medium' | 'large';
|
|
2379
|
+
placeholder: string;
|
|
2380
|
+
connectedCallback(): void;
|
|
2381
|
+
disconnectedCallback(): void;
|
|
2382
|
+
stepUp(emitEvent?: boolean): void;
|
|
2383
|
+
stepDown(emitEvent?: boolean): void;
|
|
2384
|
+
handleValueChange(): void;
|
|
2385
|
+
handleFormatChange(): void;
|
|
2386
|
+
private handleInputChange;
|
|
2387
|
+
private clampValue;
|
|
2388
|
+
render(): lit.TemplateResult<1>;
|
|
2389
|
+
}
|
|
2390
|
+
|
|
2391
|
+
declare global {
|
|
2392
|
+
interface HTMLElementTagNameMap {
|
|
2393
|
+
'flow-ui-number-stepper': FlowNumberStepper;
|
|
2394
|
+
}
|
|
2395
|
+
}
|
|
2396
|
+
|
|
2178
2397
|
/**
|
|
2179
2398
|
* @summary Options define the selectable items within various form controls such as [select](/components/select).
|
|
2180
2399
|
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/option
|
|
@@ -2195,6 +2414,9 @@ declare global {
|
|
|
2195
2414
|
*/
|
|
2196
2415
|
declare class FlowOption extends FlowRdfElement {
|
|
2197
2416
|
static styles: CSSResultGroup;
|
|
2417
|
+
static dependencies: {
|
|
2418
|
+
'flow-ui-icon': typeof FlowIcon;
|
|
2419
|
+
};
|
|
2198
2420
|
private cachedTextLabel;
|
|
2199
2421
|
private readonly localize;
|
|
2200
2422
|
defaultSlot: HTMLSlotElement;
|
|
@@ -2220,6 +2442,7 @@ declare class FlowOption extends FlowRdfElement {
|
|
|
2220
2442
|
getTextLabel(): string;
|
|
2221
2443
|
render(): lit.TemplateResult<1>;
|
|
2222
2444
|
}
|
|
2445
|
+
|
|
2223
2446
|
declare global {
|
|
2224
2447
|
interface HTMLElementTagNameMap {
|
|
2225
2448
|
'flow-ui-option': FlowOption;
|
|
@@ -2784,56 +3007,20 @@ declare global {
|
|
|
2784
3007
|
}
|
|
2785
3008
|
}
|
|
2786
3009
|
|
|
2787
|
-
/**
|
|
2788
|
-
* @summary Tags are used as labels to organize things or to indicate a selection.
|
|
2789
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tag
|
|
2790
|
-
* @status stable
|
|
2791
|
-
* @since 2.0
|
|
2792
|
-
*
|
|
2793
|
-
* @dependency flow-ui-icon-button
|
|
2794
|
-
*
|
|
2795
|
-
* @slot - The tag's content.
|
|
2796
|
-
*
|
|
2797
|
-
* @event flow-ui-remove - Emitted when the remove button is activated.
|
|
2798
|
-
*
|
|
2799
|
-
* @csspart base - The component's base wrapper.
|
|
2800
|
-
* @csspart content - The tag's content.
|
|
2801
|
-
* @csspart remove-button - The tag's remove button, an `<flow-ui-icon-button>`.
|
|
2802
|
-
* @csspart remove-button__base - The remove button's exported `base` part.
|
|
2803
|
-
*/
|
|
2804
|
-
declare class FlowTag extends FlowRdfElement {
|
|
2805
|
-
static styles: CSSResultGroup;
|
|
2806
|
-
private readonly localize;
|
|
2807
|
-
/** The tag's theme variant. */
|
|
2808
|
-
variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
|
|
2809
|
-
/** The tag's size. */
|
|
2810
|
-
size: 'small' | 'medium' | 'large';
|
|
2811
|
-
/** Draws a pill-style tag with rounded edges. */
|
|
2812
|
-
pill: boolean;
|
|
2813
|
-
/** Makes the tag removable and shows a remove button. */
|
|
2814
|
-
removable: boolean;
|
|
2815
|
-
private handleRemoveClick;
|
|
2816
|
-
render(): lit.TemplateResult<1>;
|
|
2817
|
-
}
|
|
2818
|
-
declare global {
|
|
2819
|
-
interface HTMLElementTagNameMap {
|
|
2820
|
-
'flow-ui-tag': FlowTag;
|
|
2821
|
-
}
|
|
2822
|
-
}
|
|
2823
|
-
|
|
2824
3010
|
/**
|
|
2825
3011
|
* @summary Selects allow you to choose items from a menu of predefined options.
|
|
2826
|
-
* @documentation https://
|
|
3012
|
+
* @documentation https://shoelace.style/components/select
|
|
2827
3013
|
* @status stable
|
|
2828
3014
|
* @since 2.0
|
|
2829
3015
|
*
|
|
2830
|
-
* @dependency flow-
|
|
2831
|
-
* @dependency flow-
|
|
2832
|
-
* @dependency flow-
|
|
3016
|
+
* @dependency flow-icon
|
|
3017
|
+
* @dependency flow-popup
|
|
3018
|
+
* @dependency flow-tag
|
|
2833
3019
|
*
|
|
2834
|
-
* @slot - The listbox options. Must be `<flow-
|
|
3020
|
+
* @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
|
|
2835
3021
|
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
2836
3022
|
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
3023
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
2837
3024
|
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
2838
3025
|
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
|
|
2839
3026
|
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
@@ -2853,8 +3040,9 @@ declare global {
|
|
|
2853
3040
|
* @csspart form-control-label - The label's wrapper.
|
|
2854
3041
|
* @csspart form-control-input - The select's wrapper.
|
|
2855
3042
|
* @csspart form-control-help-text - The help text's wrapper.
|
|
2856
|
-
* @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
|
|
3043
|
+
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
|
2857
3044
|
* @csspart prefix - The container that wraps the prefix slot.
|
|
3045
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
2858
3046
|
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
|
2859
3047
|
* @csspart listbox - The listbox container where options are slotted.
|
|
2860
3048
|
* @csspart tags - The container that houses option tags when `multiselect` is used.
|
|
@@ -2868,13 +3056,19 @@ declare global {
|
|
|
2868
3056
|
*/
|
|
2869
3057
|
declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
|
|
2870
3058
|
static styles: CSSResultGroup;
|
|
3059
|
+
static dependencies: {
|
|
3060
|
+
'flow-icon': typeof FlowIcon;
|
|
3061
|
+
'flow-popup': typeof SlPopup;
|
|
3062
|
+
'flow-tag': typeof FlowTag;
|
|
3063
|
+
};
|
|
2871
3064
|
private readonly formControlController;
|
|
2872
3065
|
private readonly hasSlotController;
|
|
2873
3066
|
private readonly localize;
|
|
2874
3067
|
private typeToSelectString;
|
|
2875
3068
|
private typeToSelectTimeout;
|
|
2876
|
-
private
|
|
2877
|
-
|
|
3069
|
+
private closeWatcher;
|
|
3070
|
+
private mutationObserver;
|
|
3071
|
+
popup: SlPopup;
|
|
2878
3072
|
combobox: HTMLSlotElement;
|
|
2879
3073
|
displayInput: HTMLInputElement;
|
|
2880
3074
|
valueInput: HTMLInputElement;
|
|
@@ -2887,7 +3081,8 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
|
|
|
2887
3081
|
name: string;
|
|
2888
3082
|
/**
|
|
2889
3083
|
* The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
|
|
2890
|
-
* value will be a space-delimited list of values based on the options selected
|
|
3084
|
+
* value attribute will be a space-delimited list of values based on the options selected, and the value property will
|
|
3085
|
+
* be an array. **For this reason, values must not contain spaces.**
|
|
2891
3086
|
*/
|
|
2892
3087
|
value: string | string[];
|
|
2893
3088
|
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
@@ -2938,11 +3133,18 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
|
|
|
2938
3133
|
form: string;
|
|
2939
3134
|
/** The select's required attribute. */
|
|
2940
3135
|
required: boolean;
|
|
3136
|
+
/**
|
|
3137
|
+
* A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
|
|
3138
|
+
* is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
|
|
3139
|
+
* the specified value.
|
|
3140
|
+
*/
|
|
3141
|
+
getTag: (option: FlowOption, index: number) => TemplateResult | string | HTMLElement;
|
|
2941
3142
|
/** Gets the validity state object */
|
|
2942
3143
|
get validity(): ValidityState;
|
|
2943
3144
|
/** Gets the validation message */
|
|
2944
3145
|
get validationMessage(): string;
|
|
2945
3146
|
connectedCallback(): void;
|
|
3147
|
+
disconnectedCallback(): void;
|
|
2946
3148
|
private addOpenListeners;
|
|
2947
3149
|
private removeOpenListeners;
|
|
2948
3150
|
private handleFocus;
|
|
@@ -2964,6 +3166,7 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
|
|
|
2964
3166
|
private setSelectedOptions;
|
|
2965
3167
|
private toggleOptionSelection;
|
|
2966
3168
|
private selectionChanged;
|
|
3169
|
+
protected get tags(): TemplateResult<1>[];
|
|
2967
3170
|
private handleInvalid;
|
|
2968
3171
|
handleDisabledChange(): void;
|
|
2969
3172
|
handleValueChange(): void;
|
|
@@ -2984,8 +3187,9 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
|
|
|
2984
3187
|
focus(options?: FocusOptions): void;
|
|
2985
3188
|
/** Removes focus from the control. */
|
|
2986
3189
|
blur(): void;
|
|
2987
|
-
render():
|
|
3190
|
+
render(): TemplateResult<1>;
|
|
2988
3191
|
}
|
|
3192
|
+
|
|
2989
3193
|
declare global {
|
|
2990
3194
|
interface HTMLElementTagNameMap {
|
|
2991
3195
|
'flow-ui-select': FlowSelect;
|
|
@@ -3626,6 +3830,22 @@ declare global {
|
|
|
3626
3830
|
}
|
|
3627
3831
|
}
|
|
3628
3832
|
|
|
3833
|
+
/**
|
|
3834
|
+
|
|
3835
|
+
*/
|
|
3836
|
+
declare class FlowTimer extends FlowRdfElement {
|
|
3837
|
+
static styles: CSSResultGroup;
|
|
3838
|
+
connectedCallback(): void;
|
|
3839
|
+
disconnectedCallback(): void;
|
|
3840
|
+
render(): lit.TemplateResult<1>;
|
|
3841
|
+
}
|
|
3842
|
+
|
|
3843
|
+
declare global {
|
|
3844
|
+
interface HTMLElementTagNameMap {
|
|
3845
|
+
'flow-ui-timer': FlowTimer;
|
|
3846
|
+
}
|
|
3847
|
+
}
|
|
3848
|
+
|
|
3629
3849
|
/**
|
|
3630
3850
|
* @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
|
|
3631
3851
|
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tree-item
|
|
@@ -4425,4 +4645,7 @@ declare function registerIconLibrary(name: string, options: {
|
|
|
4425
4645
|
/** Removes an icon library from the registry. */
|
|
4426
4646
|
declare function unregisterIconLibrary(name: string): void;
|
|
4427
4647
|
|
|
4428
|
-
|
|
4648
|
+
declare function setDefaultLocale(locale: string): void;
|
|
4649
|
+
declare function setDefaultTimeZone(timeZone: string): void;
|
|
4650
|
+
|
|
4651
|
+
export { BaseColorMapperField, BaseColorStopOptions, ColorMapperField, ColorMapperOptions, ColorMapperValue, ColorStopOptions, ColorStopValue, FlowAfterCollapseEvent, FlowAfterExpandEvent, FlowAfterHideEvent, FlowAfterShowEvent, FlowAlert, FlowAnimation, FlowAvatar, FlowBadge, FlowBlurEvent, FlowBreadcrumb, FlowBreadcrumbItem, FlowButton, FlowButtonGroup, FlowCalendar, FlowCancelEvent, FlowCard, FlowCarousel, FlowCarouselItem, FlowChangeEvent, FlowChart, FlowCheckbox, FlowClearEvent, FlowCloseEvent, FlowCollapseEvent, FlowColorMapper, FlowColorPicker, FlowColorStopComponent as FlowColorStop, FlowDatetimePicker as FlowDateTimePicker, FlowDetails, FlowDialog, FlowDivider, FlowDragEndEvent, FlowDragEvent, FlowDragStartEvent, FlowDrawer, FlowDropdown, FlowErrorEvent, FlowExpandEvent, FlowFinishEvent, FlowFocusEvent, FlowGauge, FlowHideEvent, FlowHoverEvent, FlowIcon, FlowIconButton, FlowInitialFocusEvent, FlowInput, FlowInputEvent, FlowInvalidEvent, FlowLazyChangeEvent, FlowLazyLoadEvent, FlowLoadEvent, FlowMenu, FlowMenuItem, FlowMenuLabel, FlowMutationEvent, FlowMutationObserver, FlowNumberStepper, FlowOption, FlowSplitViewPanel as FlowPanel, FlowPanelHeader, FlowPanelToggleEvent, SlPopup as FlowPopup, FlowProgressBar, FlowProgressRing, FlowRadio, FlowRadioGroup, FlowRange, FlowRemoveEvent, FlowRepositionEvent, FlowRequestCloseEvent, FlowResizeEvent, FlowResizeObserver, FlowScrollView, FlowSelect, FlowSelectEvent, FlowSelectionChangeEvent, FlowShowEvent, FlowSlideChange, FlowSpinner, FlowSplitView, FlowPanelDivider as FlowSplitViewDivider, FlowSplitViewPane, FlowSplitViewToggleButton, FlowStartEvent, FlowStepper, FlowStepperPanel, FlowSwitch, FlowTab, FlowTabGroup, FlowTabHideEvent, FlowTabPanel, FlowTabShowEvent, FlowTag, FlowTextarea, FlowTimer, FlowToolButton, FlowToolButtonGroup, FlowTooltip, FlowTree, FlowTreeItem, FlowVisuallyHidden, NumberColorMapperField, NumberColorStopOptions, SelectColorMapperField, SelectColorStopOptions, StringColorMapperField, StringColorStopOptions, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, getAnimationNames, getBasePath, getEasingNames, initializeChartJs, registerChartComponent, registerIconLibrary, setBasePath, setDefaultLocale, setDefaultTimeZone, unregisterIconLibrary };
|