@emuanalytics/flow-rdf-ui 0.0.25 → 0.0.26

package/dist/index.d.ts

@@ -4,7 +4,6 @@ import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
 import * as chart_js from 'chart.js';
 import { Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin, ChartComponentLike } from 'chart.js';
 export { Chart as ChartJs } from 'chart.js';
-export { default as dayjs } from 'dayjs';
 
 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;
 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 {
     render(): SVGElement | null;
 }
 
+interface VirtualElement {
+    getBoundingClientRect: () => DOMRect;
+    contextElement?: Element;
+}
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/popup
+ * @documentation https://shoelace.style/components/popup
  * @status stable
  * @since 2.0
  *
- * @event flow-ui-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ * @event sl-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
  *  operations in your listener or consider debouncing it.
  *
  * @slot - The popup's content.
@@ -114,10 +117,11 @@ declare class FlowIcon extends FlowRdfElement {
  *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
  *  maybe a border or box shadow.
  * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
  *
  * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
  *  attribute is used.
- * @cssproperty [--arrow-color=var(--flow-ui-color-neutral-0)] - The color of the arrow.
+ * @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
  * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
  *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
  *  available when using `auto-size`.
@@ -125,7 +129,7 @@ declare class FlowIcon extends FlowRdfElement {
  *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
  *  available when using `auto-size`.
  */
-declare class FlowPopup extends FlowRdfElement {
+declare class SlPopup extends FlowRdfElement {
     static styles: CSSResultGroup;
     private anchorEl;
     private cleanup;
@@ -133,10 +137,11 @@ declare class FlowPopup extends FlowRdfElement {
     popup: HTMLElement;
     private arrowEl;
     /**
-     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
-     * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
+     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
+     * `anchor` slot instead.
      */
-    anchor: Element | string;
+    anchor: Element | string | VirtualElement;
     /**
      * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
      * down and the popup will be hidden.
@@ -220,6 +225,13 @@ declare class FlowPopup extends FlowRdfElement {
     autoSizeBoundary: Element | Element[];
     /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
     autoSizePadding: number;
+    /**
+     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
+     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
+     * active.
+     */
+    hoverBridge: boolean;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     updated(changedProps: Map<string, unknown>): Promise<void>;
@@ -228,11 +240,13 @@ declare class FlowPopup extends FlowRdfElement {
     private stop;
     /** Forces the popup to recalculate and reposition itself. */
     reposition(): void;
+    private updateHoverBridge;
     render(): lit.TemplateResult<1>;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
-        'flow-ui-popup': FlowPopup;
+        'flow-ui-popup': SlPopup;
     }
 }
 
@@ -270,7 +284,7 @@ declare class FlowTooltip extends FlowRdfElement {
     private readonly localize;
     defaultSlot: HTMLSlotElement;
     body: HTMLElement;
-    popup: FlowPopup;
+    popup: SlPopup;
     /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
     /**
@@ -895,13 +909,18 @@ declare class FlowCalendar extends FlowRdfElement {
     private _selectedDate?;
     value: string;
     displayMode: 'date' | 'time' | 'datetime';
-    timezone: string;
+    timezone?: string;
+    locale?: string;
     size: 'small' | 'medium' | 'large';
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleValueChange(): void;
+    handleTimezoneChange(): void;
     private dateClicked;
     private stepDisplayDate;
+    /**
+     * Generate a list of years for the year select dropdown
+     */
     private yearOptionsForDate;
     private makeDate;
     private updateValue;
@@ -1352,7 +1371,7 @@ declare global {
  */
 declare class FlowDropdown extends FlowRdfElement {
     static styles: CSSResultGroup;
-    popup: FlowPopup;
+    popup: SlPopup;
     trigger: HTMLSlotElement;
     panel: HTMLSlotElement;
     private readonly localize;
@@ -1828,6 +1847,9 @@ declare global {
  */
 declare class FlowTag extends FlowRdfElement {
     static styles: CSSResultGroup;
+    static dependencies: {
+        'flow-icon-button': typeof FlowIconButton;
+    };
     private readonly localize;
     /** The tag's theme variant. */
     variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
@@ -1840,6 +1862,7 @@ declare class FlowTag extends FlowRdfElement {
     private handleRemoveClick;
     render(): lit.TemplateResult<1>;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
         'flow-ui-tag': FlowTag;
@@ -1851,7 +1874,7 @@ declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormCo
     private readonly formControlController;
     private readonly hasSlotController;
     private readonly localize;
-    popup: FlowPopup;
+    popup: SlPopup;
     combobox: HTMLSlotElement;
     displayInput: HTMLInputElement;
     valueInput: HTMLInputElement;
@@ -1863,7 +1886,8 @@ declare class FlowDatetimePicker extends FlowRdfElement implements FlowRdfFormCo
     value: string;
     displayMode: 'date' | 'time' | 'datetime';
     format: string;
-    timezone: string;
+    timezone?: string;
+    locale?: string;
     /** The default value of the form control. Primarily used for resetting the form control. */
     defaultValue: string;
     /** The select's size. */
@@ -2390,6 +2414,9 @@ declare global {
  */
 declare class FlowOption extends FlowRdfElement {
     static styles: CSSResultGroup;
+    static dependencies: {
+        'flow-ui-icon': typeof FlowIcon;
+    };
     private cachedTextLabel;
     private readonly localize;
     defaultSlot: HTMLSlotElement;
@@ -2415,6 +2442,7 @@ declare class FlowOption extends FlowRdfElement {
     getTextLabel(): string;
     render(): lit.TemplateResult<1>;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
         'flow-ui-option': FlowOption;
@@ -2981,17 +3009,18 @@ declare global {
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/select
+ * @documentation https://shoelace.style/components/select
  * @status stable
  * @since 2.0
  *
- * @dependency flow-ui-icon
- * @dependency flow-ui-popup
- * @dependency flow-ui-tag
+ * @dependency flow-icon
+ * @dependency flow-popup
+ * @dependency flow-tag
  *
- * @slot - The listbox options. Must be `<flow-ui-option>` elements. You can use `<flow-ui-divider>` to group items visually.
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @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 {
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -3026,13 +3056,19 @@ declare global {
  */
 declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
     static styles: CSSResultGroup;
+    static dependencies: {
+        'flow-icon': typeof FlowIcon;
+        'flow-popup': typeof SlPopup;
+        'flow-tag': typeof FlowTag;
+    };
     private readonly formControlController;
     private readonly hasSlotController;
     private readonly localize;
     private typeToSelectString;
     private typeToSelectTimeout;
-    private pendingValue;
-    popup: FlowPopup;
+    private closeWatcher;
+    private mutationObserver;
+    popup: SlPopup;
     combobox: HTMLSlotElement;
     displayInput: HTMLInputElement;
     valueInput: HTMLInputElement;
@@ -3045,7 +3081,8 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
     name: string;
     /**
      * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
-     * value will be a space-delimited list of values based on the options selected.
+     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
+     * be an array. **For this reason, values must not contain spaces.**
      */
     value: string | string[];
     /** 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 {
     form: string;
     /** The select's required attribute. */
     required: boolean;
+    /**
+     * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
+     * 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
+     * the specified value.
+     */
+    getTag: (option: FlowOption, index: number) => TemplateResult | string | HTMLElement;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     private addOpenListeners;
     private removeOpenListeners;
     private handleFocus;
@@ -3122,6 +3166,7 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
     private setSelectedOptions;
     private toggleOptionSelection;
     private selectionChanged;
+    protected get tags(): TemplateResult<1>[];
     private handleInvalid;
     handleDisabledChange(): void;
     handleValueChange(): void;
@@ -3142,8 +3187,9 @@ declare class FlowSelect extends FlowRdfElement implements FlowRdfFormControl {
     focus(options?: FocusOptions): void;
     /** Removes focus from the control. */
     blur(): void;
-    render(): lit.TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
         'flow-ui-select': FlowSelect;
@@ -4599,4 +4645,7 @@ declare function registerIconLibrary(name: string, options: {
 /** Removes an icon library from the registry. */
 declare function unregisterIconLibrary(name: string): void;
 
-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 };
+declare function setDefaultLocale(locale: string): void;
+declare function setDefaultTimeZone(timeZone: string): void;
+
+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 };