@emuanalytics/flow-rdf-ui 0.0.25 → 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/index.d.cts CHANGED
@@ -4,7 +4,6 @@ import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
4
4
  import * as chart_js from 'chart.js';
5
5
  import { Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin, ChartComponentLike } from 'chart.js';
6
6
  export { Chart as ChartJs } from 'chart.js';
7
- export { default as dayjs } from 'dayjs';
8
7
 
9
8
  type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
10
9
  type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
@@ -97,13 +96,17 @@ declare class FlowIcon extends FlowRdfElement {
97
96
  render(): SVGElement | null;
98
97
  }
99
98
 
99
+ interface VirtualElement {
100
+ getBoundingClientRect: () => DOMRect;
101
+ contextElement?: Element;
102
+ }
100
103
  /**
101
104
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
102
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/popup
105
+ * @documentation https://shoelace.style/components/popup
103
106
  * @status stable
104
107
  * @since 2.0
105
108
  *
106
- * @event flow-ui-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
109
+ * @event sl-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
107
110
  * operations in your listener or consider debouncing it.
108
111
  *
109
112
  * @slot - The popup's content.
@@ -114,10 +117,11 @@ declare class FlowIcon extends FlowRdfElement {
114
117
  * assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
115
118
  * maybe a border or box shadow.
116
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.
117
121
  *
118
122
  * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
119
123
  * attribute is used.
120
- * @cssproperty [--arrow-color=var(--flow-ui-color-neutral-0)] - The color of the arrow.
124
+ * @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
121
125
  * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
122
126
  * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
123
127
  * available when using `auto-size`.
@@ -125,7 +129,7 @@ declare class FlowIcon extends FlowRdfElement {
125
129
  * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
126
130
  * available when using `auto-size`.
127
131
  */
128
- declare class FlowPopup extends FlowRdfElement {
132
+ declare class SlPopup extends FlowRdfElement {
129
133
  static styles: CSSResultGroup;
130
134
  private anchorEl;
131
135
  private cleanup;
@@ -133,10 +137,11 @@ declare class FlowPopup extends FlowRdfElement {
133
137
  popup: HTMLElement;
134
138
  private arrowEl;
135
139
  /**
136
- * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
137
- * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
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.
138
143
  */
139
- anchor: Element | string;
144
+ anchor: Element | string | VirtualElement;
140
145
  /**
141
146
  * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
142
147
  * down and the popup will be hidden.
@@ -220,6 +225,13 @@ declare class FlowPopup extends FlowRdfElement {
220
225
  autoSizeBoundary: Element | Element[];
221
226
  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
222
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;
223
235
  connectedCallback(): Promise<void>;
224
236
  disconnectedCallback(): void;
225
237
  updated(changedProps: Map<string, unknown>): Promise<void>;
@@ -228,11 +240,13 @@ declare class FlowPopup extends FlowRdfElement {
228
240
  private stop;
229
241
  /** Forces the popup to recalculate and reposition itself. */
230
242
  reposition(): void;
243
+ private updateHoverBridge;
231
244
  render(): lit.TemplateResult<1>;
232
245
  }
246
+
233
247
  declare global {
234
248
  interface HTMLElementTagNameMap {
235
- 'flow-ui-popup': FlowPopup;
249
+ 'flow-ui-popup': SlPopup;
236
250
  }
237
251
  }
238
252
 
@@ -270,7 +284,7 @@ declare class FlowTooltip extends FlowRdfElement {
270
284
  private readonly localize;
271
285
  defaultSlot: HTMLSlotElement;
272
286
  body: HTMLElement;
273
- popup: FlowPopup;
287
+ popup: SlPopup;
274
288
  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
275
289
  content: string;
276
290
  /**
@@ -895,13 +909,18 @@ declare class FlowCalendar extends FlowRdfElement {
895
909
  private _selectedDate?;
896
910
  value: string;
897
911
  displayMode: 'date' | 'time' | 'datetime';
898
- timezone: string;
912
+ timezone?: string;
913
+ locale?: string;
899
914
  size: 'small' | 'medium' | 'large';
900
915
  connectedCallback(): void;
901
916
  disconnectedCallback(): void;
902
917
  handleValueChange(): void;
918
+ handleTimezoneChange(): void;
903
919
  private dateClicked;
904
920
  private stepDisplayDate;
921
+ /**
922
+ * Generate a list of years for the year select dropdown
923
+ */
905
924
  private yearOptionsForDate;
906
925
  private makeDate;
907
926
  private updateValue;
@@ -1352,7 +1371,7 @@ declare global {
1352
1371
  */
1353
1372
  declare class FlowDropdown extends FlowRdfElement {
1354
1373
  static styles: CSSResultGroup;
1355
- popup: FlowPopup;
1374
+ popup: SlPopup;
1356
1375
  trigger: HTMLSlotElement;
1357
1376
  panel: HTMLSlotElement;
1358
1377
  private readonly localize;
@@ -1828,6 +1847,9 @@ declare global {
1828
1847
  */
1829
1848
  declare class FlowTag extends FlowRdfElement {
1830
1849
  static styles: CSSResultGroup;
1850
+ static dependencies: {
1851
+ 'flow-icon-button': typeof FlowIconButton;
1852
+ };
1831
1853
  private readonly localize;
1832
1854
  /** The tag's theme variant. */
1833
1855
  variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
@@ -1840,6 +1862,7 @@ declare class FlowTag extends FlowRdfElement {
1840
1862
  private handleRemoveClick;
1841
1863
  render(): lit.TemplateResult<1>;
1842
1864
  }
1865
+
1843
1866
  declare global {
1844
1867
  interface HTMLElementTagNameMap {
1845
1868
  'flow-ui-tag': FlowTag;
@@ -1851,7 +1874,7 @@ declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormCo
1851
1874
  private readonly formControlController;
1852
1875
  private readonly hasSlotController;
1853
1876
  private readonly localize;
1854
- popup: FlowPopup;
1877
+ popup: SlPopup;
1855
1878
  combobox: HTMLSlotElement;
1856
1879
  displayInput: HTMLInputElement;
1857
1880
  valueInput: HTMLInputElement;
@@ -1863,7 +1886,8 @@ declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormCo
1863
1886
  value: string;
1864
1887
  displayMode: 'date' | 'time' | 'datetime';
1865
1888
  format: string;
1866
- timezone: string;
1889
+ timezone?: string;
1890
+ locale?: string;
1867
1891
  /** The default value of the form control. Primarily used for resetting the form control. */
1868
1892
  defaultValue: string;
1869
1893
  /** The select's size. */
@@ -2390,6 +2414,9 @@ declare global {
2390
2414
  */
2391
2415
  declare class FlowOption extends FlowRdfElement {
2392
2416
  static styles: CSSResultGroup;
2417
+ static dependencies: {
2418
+ 'flow-ui-icon': typeof FlowIcon;
2419
+ };
2393
2420
  private cachedTextLabel;
2394
2421
  private readonly localize;
2395
2422
  defaultSlot: HTMLSlotElement;
@@ -2415,6 +2442,7 @@ declare class FlowOption extends FlowRdfElement {
2415
2442
  getTextLabel(): string;
2416
2443
  render(): lit.TemplateResult<1>;
2417
2444
  }
2445
+
2418
2446
  declare global {
2419
2447
  interface HTMLElementTagNameMap {
2420
2448
  'flow-ui-option': FlowOption;
@@ -2981,17 +3009,18 @@ declare global {
2981
3009
 
2982
3010
  /**
2983
3011
  * @summary Selects allow you to choose items from a menu of predefined options.
2984
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/select
3012
+ * @documentation https://shoelace.style/components/select
2985
3013
  * @status stable
2986
3014
  * @since 2.0
2987
3015
  *
2988
- * @dependency flow-ui-icon
2989
- * @dependency flow-ui-popup
2990
- * @dependency flow-ui-tag
3016
+ * @dependency flow-icon
3017
+ * @dependency flow-popup
3018
+ * @dependency flow-tag
2991
3019
  *
2992
- * @slot - The listbox options. Must be `<flow-ui-option>` elements. You can use `<flow-ui-divider>` to group items visually.
3020
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
2993
3021
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
2994
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.
2995
3024
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
2996
3025
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
2997
3026
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -3011,8 +3040,9 @@ declare global {
3011
3040
  * @csspart form-control-label - The label's wrapper.
3012
3041
  * @csspart form-control-input - The select's wrapper.
3013
3042
  * @csspart form-control-help-text - The help text's wrapper.
3014
- * @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.
3015
3044
  * @csspart prefix - The container that wraps the prefix slot.
3045
+ * @csspart suffix - The container that wraps the suffix slot.
3016
3046
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
3017
3047
  * @csspart listbox - The listbox container where options are slotted.
3018
3048
  * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -3026,13 +3056,19 @@ declare global {
3026
3056
  */
3027
3057
  declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3028
3058
  static styles: CSSResultGroup;
3059
+ static dependencies: {
3060
+ 'flow-icon': typeof FlowIcon;
3061
+ 'flow-popup': typeof SlPopup;
3062
+ 'flow-tag': typeof FlowTag;
3063
+ };
3029
3064
  private readonly formControlController;
3030
3065
  private readonly hasSlotController;
3031
3066
  private readonly localize;
3032
3067
  private typeToSelectString;
3033
3068
  private typeToSelectTimeout;
3034
- private pendingValue;
3035
- popup: FlowPopup;
3069
+ private closeWatcher;
3070
+ private mutationObserver;
3071
+ popup: SlPopup;
3036
3072
  combobox: HTMLSlotElement;
3037
3073
  displayInput: HTMLInputElement;
3038
3074
  valueInput: HTMLInputElement;
@@ -3045,7 +3081,8 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3045
3081
  name: string;
3046
3082
  /**
3047
3083
  * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
3048
- * 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.**
3049
3086
  */
3050
3087
  value: string | string[];
3051
3088
  /** The default value of the form control. Primarily used for resetting the form control. */
@@ -3096,11 +3133,18 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3096
3133
  form: string;
3097
3134
  /** The select's required attribute. */
3098
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;
3099
3142
  /** Gets the validity state object */
3100
3143
  get validity(): ValidityState;
3101
3144
  /** Gets the validation message */
3102
3145
  get validationMessage(): string;
3103
3146
  connectedCallback(): void;
3147
+ disconnectedCallback(): void;
3104
3148
  private addOpenListeners;
3105
3149
  private removeOpenListeners;
3106
3150
  private handleFocus;
@@ -3122,6 +3166,7 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3122
3166
  private setSelectedOptions;
3123
3167
  private toggleOptionSelection;
3124
3168
  private selectionChanged;
3169
+ protected get tags(): TemplateResult<1>[];
3125
3170
  private handleInvalid;
3126
3171
  handleDisabledChange(): void;
3127
3172
  handleValueChange(): void;
@@ -3142,8 +3187,9 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3142
3187
  focus(options?: FocusOptions): void;
3143
3188
  /** Removes focus from the control. */
3144
3189
  blur(): void;
3145
- render(): lit.TemplateResult<1>;
3190
+ render(): TemplateResult<1>;
3146
3191
  }
3192
+
3147
3193
  declare global {
3148
3194
  interface HTMLElementTagNameMap {
3149
3195
  'flow-ui-select': FlowSelect;
@@ -4599,4 +4645,7 @@ declare function registerIconLibrary(name: string, options: {
4599
4645
  /** Removes an icon library from the registry. */
4600
4646
  declare function unregisterIconLibrary(name: string): void;
4601
4647
 
4602
- 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, 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, unregisterIconLibrary };
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 };
package/dist/index.d.mts CHANGED
@@ -4,7 +4,6 @@ import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
4
4
  import * as chart_js from 'chart.js';
5
5
  import { Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin, ChartComponentLike } from 'chart.js';
6
6
  export { Chart as ChartJs } from 'chart.js';
7
- export { default as dayjs } from 'dayjs';
8
7
 
9
8
  type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
10
9
  type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
@@ -97,13 +96,17 @@ declare class FlowIcon extends FlowRdfElement {
97
96
  render(): SVGElement | null;
98
97
  }
99
98
 
99
+ interface VirtualElement {
100
+ getBoundingClientRect: () => DOMRect;
101
+ contextElement?: Element;
102
+ }
100
103
  /**
101
104
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
102
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/popup
105
+ * @documentation https://shoelace.style/components/popup
103
106
  * @status stable
104
107
  * @since 2.0
105
108
  *
106
- * @event flow-ui-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
109
+ * @event sl-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
107
110
  * operations in your listener or consider debouncing it.
108
111
  *
109
112
  * @slot - The popup's content.
@@ -114,10 +117,11 @@ declare class FlowIcon extends FlowRdfElement {
114
117
  * assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
115
118
  * maybe a border or box shadow.
116
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.
117
121
  *
118
122
  * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
119
123
  * attribute is used.
120
- * @cssproperty [--arrow-color=var(--flow-ui-color-neutral-0)] - The color of the arrow.
124
+ * @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
121
125
  * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
122
126
  * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
123
127
  * available when using `auto-size`.
@@ -125,7 +129,7 @@ declare class FlowIcon extends FlowRdfElement {
125
129
  * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
126
130
  * available when using `auto-size`.
127
131
  */
128
- declare class FlowPopup extends FlowRdfElement {
132
+ declare class SlPopup extends FlowRdfElement {
129
133
  static styles: CSSResultGroup;
130
134
  private anchorEl;
131
135
  private cleanup;
@@ -133,10 +137,11 @@ declare class FlowPopup extends FlowRdfElement {
133
137
  popup: HTMLElement;
134
138
  private arrowEl;
135
139
  /**
136
- * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
137
- * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
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.
138
143
  */
139
- anchor: Element | string;
144
+ anchor: Element | string | VirtualElement;
140
145
  /**
141
146
  * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
142
147
  * down and the popup will be hidden.
@@ -220,6 +225,13 @@ declare class FlowPopup extends FlowRdfElement {
220
225
  autoSizeBoundary: Element | Element[];
221
226
  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
222
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;
223
235
  connectedCallback(): Promise<void>;
224
236
  disconnectedCallback(): void;
225
237
  updated(changedProps: Map<string, unknown>): Promise<void>;
@@ -228,11 +240,13 @@ declare class FlowPopup extends FlowRdfElement {
228
240
  private stop;
229
241
  /** Forces the popup to recalculate and reposition itself. */
230
242
  reposition(): void;
243
+ private updateHoverBridge;
231
244
  render(): lit.TemplateResult<1>;
232
245
  }
246
+
233
247
  declare global {
234
248
  interface HTMLElementTagNameMap {
235
- 'flow-ui-popup': FlowPopup;
249
+ 'flow-ui-popup': SlPopup;
236
250
  }
237
251
  }
238
252
 
@@ -270,7 +284,7 @@ declare class FlowTooltip extends FlowRdfElement {
270
284
  private readonly localize;
271
285
  defaultSlot: HTMLSlotElement;
272
286
  body: HTMLElement;
273
- popup: FlowPopup;
287
+ popup: SlPopup;
274
288
  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
275
289
  content: string;
276
290
  /**
@@ -895,13 +909,18 @@ declare class FlowCalendar extends FlowRdfElement {
895
909
  private _selectedDate?;
896
910
  value: string;
897
911
  displayMode: 'date' | 'time' | 'datetime';
898
- timezone: string;
912
+ timezone?: string;
913
+ locale?: string;
899
914
  size: 'small' | 'medium' | 'large';
900
915
  connectedCallback(): void;
901
916
  disconnectedCallback(): void;
902
917
  handleValueChange(): void;
918
+ handleTimezoneChange(): void;
903
919
  private dateClicked;
904
920
  private stepDisplayDate;
921
+ /**
922
+ * Generate a list of years for the year select dropdown
923
+ */
905
924
  private yearOptionsForDate;
906
925
  private makeDate;
907
926
  private updateValue;
@@ -1352,7 +1371,7 @@ declare global {
1352
1371
  */
1353
1372
  declare class FlowDropdown extends FlowRdfElement {
1354
1373
  static styles: CSSResultGroup;
1355
- popup: FlowPopup;
1374
+ popup: SlPopup;
1356
1375
  trigger: HTMLSlotElement;
1357
1376
  panel: HTMLSlotElement;
1358
1377
  private readonly localize;
@@ -1828,6 +1847,9 @@ declare global {
1828
1847
  */
1829
1848
  declare class FlowTag extends FlowRdfElement {
1830
1849
  static styles: CSSResultGroup;
1850
+ static dependencies: {
1851
+ 'flow-icon-button': typeof FlowIconButton;
1852
+ };
1831
1853
  private readonly localize;
1832
1854
  /** The tag's theme variant. */
1833
1855
  variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
@@ -1840,6 +1862,7 @@ declare class FlowTag extends FlowRdfElement {
1840
1862
  private handleRemoveClick;
1841
1863
  render(): lit.TemplateResult<1>;
1842
1864
  }
1865
+
1843
1866
  declare global {
1844
1867
  interface HTMLElementTagNameMap {
1845
1868
  'flow-ui-tag': FlowTag;
@@ -1851,7 +1874,7 @@ declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormCo
1851
1874
  private readonly formControlController;
1852
1875
  private readonly hasSlotController;
1853
1876
  private readonly localize;
1854
- popup: FlowPopup;
1877
+ popup: SlPopup;
1855
1878
  combobox: HTMLSlotElement;
1856
1879
  displayInput: HTMLInputElement;
1857
1880
  valueInput: HTMLInputElement;
@@ -1863,7 +1886,8 @@ declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormCo
1863
1886
  value: string;
1864
1887
  displayMode: 'date' | 'time' | 'datetime';
1865
1888
  format: string;
1866
- timezone: string;
1889
+ timezone?: string;
1890
+ locale?: string;
1867
1891
  /** The default value of the form control. Primarily used for resetting the form control. */
1868
1892
  defaultValue: string;
1869
1893
  /** The select's size. */
@@ -2390,6 +2414,9 @@ declare global {
2390
2414
  */
2391
2415
  declare class FlowOption extends FlowRdfElement {
2392
2416
  static styles: CSSResultGroup;
2417
+ static dependencies: {
2418
+ 'flow-ui-icon': typeof FlowIcon;
2419
+ };
2393
2420
  private cachedTextLabel;
2394
2421
  private readonly localize;
2395
2422
  defaultSlot: HTMLSlotElement;
@@ -2415,6 +2442,7 @@ declare class FlowOption extends FlowRdfElement {
2415
2442
  getTextLabel(): string;
2416
2443
  render(): lit.TemplateResult<1>;
2417
2444
  }
2445
+
2418
2446
  declare global {
2419
2447
  interface HTMLElementTagNameMap {
2420
2448
  'flow-ui-option': FlowOption;
@@ -2981,17 +3009,18 @@ declare global {
2981
3009
 
2982
3010
  /**
2983
3011
  * @summary Selects allow you to choose items from a menu of predefined options.
2984
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/select
3012
+ * @documentation https://shoelace.style/components/select
2985
3013
  * @status stable
2986
3014
  * @since 2.0
2987
3015
  *
2988
- * @dependency flow-ui-icon
2989
- * @dependency flow-ui-popup
2990
- * @dependency flow-ui-tag
3016
+ * @dependency flow-icon
3017
+ * @dependency flow-popup
3018
+ * @dependency flow-tag
2991
3019
  *
2992
- * @slot - The listbox options. Must be `<flow-ui-option>` elements. You can use `<flow-ui-divider>` to group items visually.
3020
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
2993
3021
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
2994
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.
2995
3024
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
2996
3025
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
2997
3026
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -3011,8 +3040,9 @@ declare global {
3011
3040
  * @csspart form-control-label - The label's wrapper.
3012
3041
  * @csspart form-control-input - The select's wrapper.
3013
3042
  * @csspart form-control-help-text - The help text's wrapper.
3014
- * @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.
3015
3044
  * @csspart prefix - The container that wraps the prefix slot.
3045
+ * @csspart suffix - The container that wraps the suffix slot.
3016
3046
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
3017
3047
  * @csspart listbox - The listbox container where options are slotted.
3018
3048
  * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -3026,13 +3056,19 @@ declare global {
3026
3056
  */
3027
3057
  declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3028
3058
  static styles: CSSResultGroup;
3059
+ static dependencies: {
3060
+ 'flow-icon': typeof FlowIcon;
3061
+ 'flow-popup': typeof SlPopup;
3062
+ 'flow-tag': typeof FlowTag;
3063
+ };
3029
3064
  private readonly formControlController;
3030
3065
  private readonly hasSlotController;
3031
3066
  private readonly localize;
3032
3067
  private typeToSelectString;
3033
3068
  private typeToSelectTimeout;
3034
- private pendingValue;
3035
- popup: FlowPopup;
3069
+ private closeWatcher;
3070
+ private mutationObserver;
3071
+ popup: SlPopup;
3036
3072
  combobox: HTMLSlotElement;
3037
3073
  displayInput: HTMLInputElement;
3038
3074
  valueInput: HTMLInputElement;
@@ -3045,7 +3081,8 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3045
3081
  name: string;
3046
3082
  /**
3047
3083
  * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
3048
- * 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.**
3049
3086
  */
3050
3087
  value: string | string[];
3051
3088
  /** The default value of the form control. Primarily used for resetting the form control. */
@@ -3096,11 +3133,18 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3096
3133
  form: string;
3097
3134
  /** The select's required attribute. */
3098
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;
3099
3142
  /** Gets the validity state object */
3100
3143
  get validity(): ValidityState;
3101
3144
  /** Gets the validation message */
3102
3145
  get validationMessage(): string;
3103
3146
  connectedCallback(): void;
3147
+ disconnectedCallback(): void;
3104
3148
  private addOpenListeners;
3105
3149
  private removeOpenListeners;
3106
3150
  private handleFocus;
@@ -3122,6 +3166,7 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3122
3166
  private setSelectedOptions;
3123
3167
  private toggleOptionSelection;
3124
3168
  private selectionChanged;
3169
+ protected get tags(): TemplateResult<1>[];
3125
3170
  private handleInvalid;
3126
3171
  handleDisabledChange(): void;
3127
3172
  handleValueChange(): void;
@@ -3142,8 +3187,9 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
3142
3187
  focus(options?: FocusOptions): void;
3143
3188
  /** Removes focus from the control. */
3144
3189
  blur(): void;
3145
- render(): lit.TemplateResult<1>;
3190
+ render(): TemplateResult<1>;
3146
3191
  }
3192
+
3147
3193
  declare global {
3148
3194
  interface HTMLElementTagNameMap {
3149
3195
  'flow-ui-select': FlowSelect;
@@ -4599,4 +4645,7 @@ declare function registerIconLibrary(name: string, options: {
4599
4645
  /** Removes an icon library from the registry. */
4600
4646
  declare function unregisterIconLibrary(name: string): void;
4601
4647
 
4602
- 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, 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, unregisterIconLibrary };
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 };