@emuanalytics/flow-rdf-ui 0.0.2 → 0.0.3
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 +8391 -7539
- package/dist/flow-rdf-ui.d.ts +3566 -0
- package/dist/flow-rdf-ui.js +2407 -1432
- package/dist/flow-rdf-ui.umd.cjs +2417 -1440
- package/dist/themes/dark.css +13 -0
- package/dist/themes/dark.styles.js +13 -0
- package/dist/themes/light.css +13 -0
- package/dist/themes/light.styles.js +13 -0
- package/dist/vscode.html-custom-data.json +327 -369
- package/package.json +7 -3
- package/dist/types/components/alert/alert.d.ts +0 -71
- package/dist/types/components/alert/alert.stories.d.ts +0 -5
- package/dist/types/components/alert/alert.styles.d.ts +0 -2
- package/dist/types/components/animation/animation.d.ts +0 -81
- package/dist/types/components/animation/animation.stories.d.ts +0 -5
- package/dist/types/components/animation/animation.styles.d.ts +0 -2
- package/dist/types/components/animation/animations.d.ts +0 -6
- package/dist/types/components/animation/index.d.ts +0 -1
- package/dist/types/components/avatar/avatar.d.ts +0 -40
- package/dist/types/components/avatar/avatar.stories.d.ts +0 -5
- package/dist/types/components/avatar/avatar.styles.d.ts +0 -2
- package/dist/types/components/badge/badge.d.ts +0 -27
- package/dist/types/components/badge/badge.stories.d.ts +0 -5
- package/dist/types/components/badge/badge.styles.d.ts +0 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +0 -35
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -5
- package/dist/types/components/breadcrumb/breadcrumb.styles.d.ts +0 -2
- package/dist/types/components/breadcrumb-item/breadcrumb-item.d.ts +0 -39
- package/dist/types/components/breadcrumb-item/breadcrumb-item.styles.d.ts +0 -2
- package/dist/types/components/button/button.d.ts +0 -133
- package/dist/types/components/button/button.stories.d.ts +0 -6
- package/dist/types/components/button/button.styles.d.ts +0 -2
- package/dist/types/components/button-group/button-group.d.ts +0 -33
- package/dist/types/components/button-group/button-group.stories.d.ts +0 -5
- package/dist/types/components/button-group/button-group.styles.d.ts +0 -2
- package/dist/types/components/card/card.d.ts +0 -34
- package/dist/types/components/card/card.stories.d.ts +0 -5
- package/dist/types/components/card/card.styles.d.ts +0 -2
- package/dist/types/components/carousel/autoplay-controller.d.ts +0 -20
- package/dist/types/components/carousel/carousel.d.ts +0 -105
- package/dist/types/components/carousel/carousel.styles.d.ts +0 -2
- package/dist/types/components/carousel/scroll-controller.d.ts +0 -28
- package/dist/types/components/carousel-item/carousel-item.d.ts +0 -24
- package/dist/types/components/carousel-item/carousel-item.styles.d.ts +0 -2
- package/dist/types/components/checkbox/checkbox.d.ts +0 -94
- package/dist/types/components/checkbox/checkbox.styles.d.ts +0 -2
- package/dist/types/components/checkbox/index.d.ts +0 -1
- package/dist/types/components/color-mapper/color-mapper.component.d.ts +0 -39
- package/dist/types/components/color-mapper/color-mapper.stories.d.ts +0 -68
- package/dist/types/components/color-mapper/color-mapper.styles.d.ts +0 -2
- package/dist/types/components/color-mapper/color-stop.component.d.ts +0 -54
- package/dist/types/components/color-mapper/color-stop.styles.d.ts +0 -2
- package/dist/types/components/color-mapper/helpers.d.ts +0 -3
- package/dist/types/components/color-mapper/index.d.ts +0 -4
- package/dist/types/components/color-mapper/types.d.ts +0 -54
- package/dist/types/components/color-picker/color-picker.d.ts +0 -193
- package/dist/types/components/color-picker/color-picker.stories.d.ts +0 -5
- package/dist/types/components/color-picker/color-picker.styles.d.ts +0 -2
- package/dist/types/components/details/details.d.ts +0 -60
- package/dist/types/components/details/details.stories.d.ts +0 -5
- package/dist/types/components/details/details.styles.d.ts +0 -2
- package/dist/types/components/dialog/dialog.d.ts +0 -91
- package/dist/types/components/dialog/dialog.styles.d.ts +0 -2
- package/dist/types/components/divider/divider.d.ts +0 -24
- package/dist/types/components/divider/divider.styles.d.ts +0 -2
- package/dist/types/components/drawer/drawer.d.ts +0 -106
- package/dist/types/components/drawer/drawer.styles.d.ts +0 -2
- package/dist/types/components/dropdown/dropdown.d.ts +0 -98
- package/dist/types/components/dropdown/dropdown.styles.d.ts +0 -2
- package/dist/types/components/icon/icon.d.ts +0 -45
- package/dist/types/components/icon/icon.stories.d.ts +0 -5
- package/dist/types/components/icon/icon.styles.d.ts +0 -2
- package/dist/types/components/icon/library.d.ts +0 -21
- package/dist/types/components/icon/library.default.d.ts +0 -3
- package/dist/types/components/icon/library.system.d.ts +0 -3
- package/dist/types/components/icon-button/icon-button.d.ts +0 -92
- package/dist/types/components/icon-button/icon-button.stories.d.ts +0 -29
- package/dist/types/components/icon-button/icon-button.styles.d.ts +0 -2
- package/dist/types/components/icon-button/index.d.ts +0 -1
- package/dist/types/components/input/input.d.ts +0 -176
- package/dist/types/components/input/input.styles.d.ts +0 -2
- package/dist/types/components/menu/menu.d.ts +0 -44
- package/dist/types/components/menu/menu.styles.d.ts +0 -2
- package/dist/types/components/menu-item/menu-item.d.ts +0 -50
- package/dist/types/components/menu-item/menu-item.styles.d.ts +0 -2
- package/dist/types/components/menu-label/menu-label.d.ts +0 -21
- package/dist/types/components/menu-label/menu-label.styles.d.ts +0 -2
- package/dist/types/components/mutation-observer/mutation-observer.d.ts +0 -44
- package/dist/types/components/mutation-observer/mutation-observer.styles.d.ts +0 -2
- package/dist/types/components/option/option.d.ts +0 -52
- package/dist/types/components/option/option.stories.d.ts +0 -7
- package/dist/types/components/option/option.styles.d.ts +0 -2
- package/dist/types/components/popup/popup.d.ts +0 -140
- package/dist/types/components/popup/popup.stories.d.ts +0 -5
- package/dist/types/components/popup/popup.styles.d.ts +0 -2
- package/dist/types/components/progress-bar/progress-bar.d.ts +0 -35
- package/dist/types/components/progress-bar/progress-bar.styles.d.ts +0 -2
- package/dist/types/components/progress-ring/progress-ring.d.ts +0 -37
- package/dist/types/components/progress-ring/progress-ring.styles.d.ts +0 -2
- package/dist/types/components/radio/radio.d.ts +0 -53
- package/dist/types/components/radio/radio.stories.d.ts +0 -5
- package/dist/types/components/radio/radio.styles.d.ts +0 -2
- package/dist/types/components/radio-button/radio-button.d.ts +0 -60
- package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -5
- package/dist/types/components/radio-button/radio-button.styles.d.ts +0 -2
- package/dist/types/components/radio-group/radio-group.d.ts +0 -89
- package/dist/types/components/radio-group/radio-group.stories.d.ts +0 -5
- package/dist/types/components/radio-group/radio-group.styles.d.ts +0 -2
- package/dist/types/components/range/range.d.ts +0 -116
- package/dist/types/components/range/range.styles.d.ts +0 -2
- package/dist/types/components/resize-observer/resize-observer.d.ts +0 -31
- package/dist/types/components/resize-observer/resize-observer.styles.d.ts +0 -2
- package/dist/types/components/select/select.d.ts +0 -174
- package/dist/types/components/select/select.stories.d.ts +0 -5
- package/dist/types/components/select/select.styles.d.ts +0 -2
- package/dist/types/components/spinner/spinner.d.ts +0 -25
- package/dist/types/components/spinner/spinner.stories.d.ts +0 -5
- package/dist/types/components/spinner/spinner.styles.d.ts +0 -2
- package/dist/types/components/split-panel/split-panel.d.ts +0 -74
- package/dist/types/components/split-panel/split-panel.stories.d.ts +0 -5
- package/dist/types/components/split-panel/split-panel.styles.d.ts +0 -2
- package/dist/types/components/switch/switch.d.ts +0 -86
- package/dist/types/components/switch/switch.stories.d.ts +0 -5
- package/dist/types/components/switch/switch.styles.d.ts +0 -2
- package/dist/types/components/tab/tab.d.ts +0 -47
- package/dist/types/components/tab/tab.styles.d.ts +0 -2
- package/dist/types/components/tab-group/tab-group.d.ts +0 -76
- package/dist/types/components/tab-group/tab-group.stories.d.ts +0 -5
- package/dist/types/components/tab-group/tab-group.styles.d.ts +0 -2
- package/dist/types/components/tab-panel/tab-panel.d.ts +0 -31
- package/dist/types/components/tab-panel/tab-panel.styles.d.ts +0 -2
- package/dist/types/components/tag/tag.d.ts +0 -38
- package/dist/types/components/tag/tag.stories.d.ts +0 -5
- package/dist/types/components/tag/tag.styles.d.ts +0 -2
- package/dist/types/components/textarea/textarea.d.ts +0 -138
- package/dist/types/components/textarea/textarea.stories.d.ts +0 -5
- package/dist/types/components/textarea/textarea.styles.d.ts +0 -2
- package/dist/types/components/tooltip/tooltip.d.ts +0 -89
- package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -5
- package/dist/types/components/tooltip/tooltip.styles.d.ts +0 -2
- package/dist/types/components/tree/tree.d.ts +0 -65
- package/dist/types/components/tree/tree.stories.d.ts +0 -5
- package/dist/types/components/tree/tree.styles.d.ts +0 -2
- package/dist/types/components/tree-item/tree-item.d.ts +0 -89
- package/dist/types/components/tree-item/tree-item.styles.d.ts +0 -2
- package/dist/types/components/visually-hidden/visually-hidden.d.ts +0 -19
- package/dist/types/components/visually-hidden/visually-hidden.stories.d.ts +0 -5
- package/dist/types/components/visually-hidden/visually-hidden.styles.d.ts +0 -2
- package/dist/types/events/events.d.ts +0 -34
- package/dist/types/events/flow-after-collapse.d.ts +0 -7
- package/dist/types/events/flow-after-expand.d.ts +0 -7
- package/dist/types/events/flow-after-hide.d.ts +0 -7
- package/dist/types/events/flow-after-show.d.ts +0 -7
- package/dist/types/events/flow-blur.d.ts +0 -7
- package/dist/types/events/flow-cancel.d.ts +0 -7
- package/dist/types/events/flow-change.d.ts +0 -7
- package/dist/types/events/flow-clear.d.ts +0 -7
- package/dist/types/events/flow-close.d.ts +0 -7
- package/dist/types/events/flow-collapse.d.ts +0 -7
- package/dist/types/events/flow-error.d.ts +0 -9
- package/dist/types/events/flow-expand.d.ts +0 -7
- package/dist/types/events/flow-finish.d.ts +0 -7
- package/dist/types/events/flow-focus.d.ts +0 -7
- package/dist/types/events/flow-hide.d.ts +0 -7
- package/dist/types/events/flow-hover.d.ts +0 -10
- package/dist/types/events/flow-initial-focus.d.ts +0 -7
- package/dist/types/events/flow-input.d.ts +0 -7
- package/dist/types/events/flow-invalid.d.ts +0 -7
- package/dist/types/events/flow-lazy-change.d.ts +0 -7
- package/dist/types/events/flow-lazy-load.d.ts +0 -7
- package/dist/types/events/flow-load.d.ts +0 -7
- package/dist/types/events/flow-mutation.d.ts +0 -9
- package/dist/types/events/flow-remove.d.ts +0 -7
- package/dist/types/events/flow-reposition.d.ts +0 -7
- package/dist/types/events/flow-request-close.d.ts +0 -9
- package/dist/types/events/flow-resize.d.ts +0 -9
- package/dist/types/events/flow-select.d.ts +0 -10
- package/dist/types/events/flow-selection-change.d.ts +0 -10
- package/dist/types/events/flow-show.d.ts +0 -7
- package/dist/types/events/flow-slide-change.d.ts +0 -11
- package/dist/types/events/flow-start.d.ts +0 -7
- package/dist/types/events/flow-tab-hide.d.ts +0 -9
- package/dist/types/events/flow-tab-show.d.ts +0 -9
- package/dist/types/flow-autoloader.d.ts +0 -4
- package/dist/types/index.d.ts +0 -52
- package/dist/types/internal/animate.d.ts +0 -22
- package/dist/types/internal/checks.util.d.ts +0 -28
- package/dist/types/internal/debounce.d.ts +0 -1
- package/dist/types/internal/default-value.d.ts +0 -2
- package/dist/types/internal/drag.d.ts +0 -15
- package/dist/types/internal/event.d.ts +0 -2
- package/dist/types/internal/flow-ui-rdf-element.d.ts +0 -43
- package/dist/types/internal/form.d.ts +0 -73
- package/dist/types/internal/math.d.ts +0 -2
- package/dist/types/internal/modal.d.ts +0 -12
- package/dist/types/internal/offset.d.ts +0 -11
- package/dist/types/internal/orderby.d.ts +0 -1
- package/dist/types/internal/scroll.d.ts +0 -11
- package/dist/types/internal/slot.d.ts +0 -23
- package/dist/types/internal/string.d.ts +0 -2
- package/dist/types/internal/tabbable.d.ts +0 -8
- package/dist/types/internal/test/data-testid-helpers.d.ts +0 -12
- package/dist/types/internal/test/element-visible-overflow.d.ts +0 -11
- package/dist/types/internal/test/form-control-base-tests.d.ts +0 -7
- package/dist/types/internal/test/wait-for-scrolling.d.ts +0 -9
- package/dist/types/internal/test.d.ts +0 -28
- package/dist/types/internal/throttle.d.ts +0 -1
- package/dist/types/internal/watch.d.ts +0 -26
- package/dist/types/styles/component.styles.d.ts +0 -2
- package/dist/types/styles/form-control.styles.d.ts +0 -2
- package/dist/types/translations/da.d.ts +0 -3
- package/dist/types/translations/de-ch.d.ts +0 -3
- package/dist/types/translations/de.d.ts +0 -3
- package/dist/types/translations/en-gb.d.ts +0 -3
- package/dist/types/translations/en.d.ts +0 -3
- package/dist/types/translations/es.d.ts +0 -3
- package/dist/types/translations/fa.d.ts +0 -3
- package/dist/types/translations/fr.d.ts +0 -3
- package/dist/types/translations/he.d.ts +0 -3
- package/dist/types/translations/hu.d.ts +0 -3
- package/dist/types/translations/ja.d.ts +0 -3
- package/dist/types/translations/nl.d.ts +0 -3
- package/dist/types/translations/pl.d.ts +0 -3
- package/dist/types/translations/pt.d.ts +0 -3
- package/dist/types/translations/ru.d.ts +0 -3
- package/dist/types/translations/sv.d.ts +0 -3
- package/dist/types/translations/tr.d.ts +0 -3
- package/dist/types/translations/zh-tw.d.ts +0 -3
- package/dist/types/utilities/animation-registry.d.ts +0 -24
- package/dist/types/utilities/animation.d.ts +0 -1
- package/dist/types/utilities/announce.d.ts +0 -1
- package/dist/types/utilities/base-path.d.ts +0 -18
- package/dist/types/utilities/form.d.ts +0 -11
- package/dist/types/utilities/icon-library.d.ts +0 -1
- package/dist/types/utilities/localize.d.ts +0 -30
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type FlowIcon from '../icon/icon';
|
|
2
|
-
export type IconLibraryResolver = (name: string) => string;
|
|
3
|
-
export type IconLibraryMutator = (svg: SVGElement) => void;
|
|
4
|
-
export interface IconLibrary {
|
|
5
|
-
name: string;
|
|
6
|
-
resolver: IconLibraryResolver;
|
|
7
|
-
mutator?: IconLibraryMutator;
|
|
8
|
-
}
|
|
9
|
-
/** Adds an icon to the list of watched icons. */
|
|
10
|
-
export declare function watchIcon(icon: FlowIcon): void;
|
|
11
|
-
/** Removes an icon from the list of watched icons. */
|
|
12
|
-
export declare function unwatchIcon(icon: FlowIcon): void;
|
|
13
|
-
/** Returns a library from the registry. */
|
|
14
|
-
export declare function getIconLibrary(name?: string): IconLibrary | undefined;
|
|
15
|
-
/** Adds an icon library to the registry, or overrides an existing one. */
|
|
16
|
-
export declare function registerIconLibrary(name: string, options: {
|
|
17
|
-
resolver: IconLibraryResolver;
|
|
18
|
-
mutator?: IconLibraryMutator;
|
|
19
|
-
}): void;
|
|
20
|
-
/** Removes an icon library from the registry. */
|
|
21
|
-
export declare function unregisterIconLibrary(name: string): void;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
2
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
import FlowTooltip from '../tooltip/tooltip';
|
|
4
|
-
/**
|
|
5
|
-
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
|
6
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/icon-button
|
|
7
|
-
* @status stable
|
|
8
|
-
* @since 2.0
|
|
9
|
-
*
|
|
10
|
-
* @dependency flow-ui-icon
|
|
11
|
-
*
|
|
12
|
-
* @event flow-ui-blur - Emitted when the icon button loses focus.
|
|
13
|
-
* @event flow-ui-focus - Emitted when the icon button gains focus.
|
|
14
|
-
*
|
|
15
|
-
* @csspart base - The component's base wrapper.
|
|
16
|
-
*/
|
|
17
|
-
export default class FlowIconButton extends FlowRdfElement {
|
|
18
|
-
static styles: CSSResultGroup;
|
|
19
|
-
private readonly hasSlotController;
|
|
20
|
-
private tooltipAnimating;
|
|
21
|
-
button: HTMLButtonElement | HTMLLinkElement;
|
|
22
|
-
tooltipElem: FlowTooltip;
|
|
23
|
-
confirmButton: HTMLButtonElement;
|
|
24
|
-
private hasFocus;
|
|
25
|
-
/** The name of the icon to draw. Available names depend on the icon library being used. */
|
|
26
|
-
name?: string;
|
|
27
|
-
/** The name of a registered custom icon library. */
|
|
28
|
-
library?: string;
|
|
29
|
-
/**
|
|
30
|
-
* An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
|
|
31
|
-
* can result in XSS attacks.
|
|
32
|
-
*/
|
|
33
|
-
src?: string;
|
|
34
|
-
/** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
|
|
35
|
-
href?: string;
|
|
36
|
-
/** Tells the browser where to open the link. Only used when `href` is set. */
|
|
37
|
-
target?: '_blank' | '_parent' | '_self' | '_top';
|
|
38
|
-
/** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
|
|
39
|
-
download?: string;
|
|
40
|
-
/**
|
|
41
|
-
* A description that gets read by assistive devices. For optimal accessibility, you should always include a label
|
|
42
|
-
* that describes what the icon button does.
|
|
43
|
-
*/
|
|
44
|
-
label: string;
|
|
45
|
-
/**
|
|
46
|
-
* Tooltip text that gets displayed when the user hovers over the icon button. If you need to display HTML, use the
|
|
47
|
-
* `tooltip` slot instead.
|
|
48
|
-
*/
|
|
49
|
-
tooltip: string;
|
|
50
|
-
/**
|
|
51
|
-
* The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
|
|
52
|
-
* inside of the viewport.
|
|
53
|
-
*/
|
|
54
|
-
tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
55
|
-
/** The distance in pixels from which to offset the tooltip away from the icon button. */
|
|
56
|
-
tooltipDistance: number;
|
|
57
|
-
/** The distance in pixels from which to offset the tooltip along the icon button. */
|
|
58
|
-
tooltipSkidding: number;
|
|
59
|
-
/** Enable checkbox behaviour for the button (clicking toggles the `checked` state) */
|
|
60
|
-
checkbox: boolean;
|
|
61
|
-
/** Disables the button. */
|
|
62
|
-
checked: boolean;
|
|
63
|
-
/** Disables the button. */
|
|
64
|
-
disabled: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Confirmation text that gets displayed in a tooltip when the user clicks the icon button.
|
|
67
|
-
* If you need to display HTML, use the `confirm` slot instead.
|
|
68
|
-
*/
|
|
69
|
-
confirm: string;
|
|
70
|
-
private handleBlur;
|
|
71
|
-
private handleFocus;
|
|
72
|
-
private handleClick;
|
|
73
|
-
/** Simulates a click on the icon button. */
|
|
74
|
-
click(): void;
|
|
75
|
-
/** Sets focus on the icon button. */
|
|
76
|
-
focus(options?: FocusOptions): void;
|
|
77
|
-
/** Removes focus from the icon button. */
|
|
78
|
-
blur(): void;
|
|
79
|
-
/** Hide the confirmation tooltip if it is showing */
|
|
80
|
-
hideConfirm(): void;
|
|
81
|
-
/** Show the confirmation tooltip */
|
|
82
|
-
showConfirm(): void;
|
|
83
|
-
private handleConfirmClick;
|
|
84
|
-
private renderWithTooltip;
|
|
85
|
-
private renderWithConfirmation;
|
|
86
|
-
render(): TemplateResult;
|
|
87
|
-
}
|
|
88
|
-
declare global {
|
|
89
|
-
interface HTMLElementTagNameMap {
|
|
90
|
-
'flow-ui-icon-button': FlowIconButton;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/web-components';
|
|
2
|
-
interface Props {
|
|
3
|
-
name: string;
|
|
4
|
-
tooltip?: string;
|
|
5
|
-
checkbox?: boolean;
|
|
6
|
-
checked?: boolean;
|
|
7
|
-
onChange?: (e: CustomEvent) => void;
|
|
8
|
-
onClick?: (e: CustomEvent) => void;
|
|
9
|
-
}
|
|
10
|
-
declare const meta: {
|
|
11
|
-
title: string;
|
|
12
|
-
component: string;
|
|
13
|
-
argTypes: {
|
|
14
|
-
onChange: {
|
|
15
|
-
action: string;
|
|
16
|
-
};
|
|
17
|
-
onClick: {
|
|
18
|
-
action: string;
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
render: (args: Props) => import("lit").TemplateResult<1>;
|
|
22
|
-
};
|
|
23
|
-
export default meta;
|
|
24
|
-
type Story = StoryObj<Props>;
|
|
25
|
-
export declare const Basic: Story;
|
|
26
|
-
export declare const Checkbox: Story;
|
|
27
|
-
export declare const TooltipAttribute: Story;
|
|
28
|
-
export declare const TooltipSlot: Story;
|
|
29
|
-
export declare const ConfirmAction: Story;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as FlowIconButton } from './icon-button';
|
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup } from 'lit';
|
|
2
|
-
import type { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
4
|
-
/**
|
|
5
|
-
* @summary Inputs collect data from the user.
|
|
6
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/input
|
|
7
|
-
* @status stable
|
|
8
|
-
* @since 2.0
|
|
9
|
-
*
|
|
10
|
-
* @dependency flow-ui-icon
|
|
11
|
-
*
|
|
12
|
-
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
13
|
-
* @slot prefix - Used to prepend a presentational icon or similar element to the input.
|
|
14
|
-
* @slot suffix - Used to append a presentational icon or similar element to the input.
|
|
15
|
-
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
16
|
-
* @slot show-password-icon - An icon to use in lieu of the default show password icon.
|
|
17
|
-
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
|
|
18
|
-
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
19
|
-
*
|
|
20
|
-
* @event flow-ui-blur - Emitted when the control loses focus.
|
|
21
|
-
* @event flow-ui-change - Emitted when an alteration to the control's value is committed by the user.
|
|
22
|
-
* @event flow-ui-clear - Emitted when the clear button is activated.
|
|
23
|
-
* @event flow-ui-focus - Emitted when the control gains focus.
|
|
24
|
-
* @event flow-ui-input - Emitted when the control receives input.
|
|
25
|
-
* @event flow-ui-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
26
|
-
*
|
|
27
|
-
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
28
|
-
* @csspart form-control-label - The label's wrapper.
|
|
29
|
-
* @csspart form-control-input - The input's wrapper.
|
|
30
|
-
* @csspart form-control-help-text - The help text's wrapper.
|
|
31
|
-
* @csspart base - The component's base wrapper.
|
|
32
|
-
* @csspart input - The internal `<input>` control.
|
|
33
|
-
* @csspart prefix - The container that wraps the prefix.
|
|
34
|
-
* @csspart clear-button - The clear button.
|
|
35
|
-
* @csspart password-toggle-button - The password toggle button.
|
|
36
|
-
* @csspart suffix - The container that wraps the suffix.
|
|
37
|
-
*/
|
|
38
|
-
export default class FlowInput extends FlowRdfElement implements FlowRdfFormControl {
|
|
39
|
-
static styles: CSSResultGroup;
|
|
40
|
-
private readonly formControlController;
|
|
41
|
-
private readonly hasSlotController;
|
|
42
|
-
private readonly localize;
|
|
43
|
-
input: HTMLInputElement;
|
|
44
|
-
private hasFocus;
|
|
45
|
-
title: string;
|
|
46
|
-
/**
|
|
47
|
-
* The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
|
|
48
|
-
* to `text`.
|
|
49
|
-
*/
|
|
50
|
-
type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
|
|
51
|
-
/** The name of the input, submitted as a name/value pair with form data. */
|
|
52
|
-
name: string;
|
|
53
|
-
/** The current value of the input, submitted as a name/value pair with form data. */
|
|
54
|
-
value: string;
|
|
55
|
-
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
56
|
-
defaultValue: string;
|
|
57
|
-
/** The input's size. */
|
|
58
|
-
size: 'small' | 'medium' | 'large';
|
|
59
|
-
/** Draws a filled input. */
|
|
60
|
-
filled: boolean;
|
|
61
|
-
/** Draws a pill-style input with rounded edges. */
|
|
62
|
-
pill: boolean;
|
|
63
|
-
/** The input's label. If you need to display HTML, use the `label` slot instead. */
|
|
64
|
-
label: string;
|
|
65
|
-
/** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
|
|
66
|
-
helpText: string;
|
|
67
|
-
/** Adds a clear button when the input is not empty. */
|
|
68
|
-
clearable: boolean;
|
|
69
|
-
/** Disables the input. */
|
|
70
|
-
disabled: boolean;
|
|
71
|
-
/** Placeholder text to show as a hint when the input is empty. */
|
|
72
|
-
placeholder: string;
|
|
73
|
-
/** Makes the input readonly. */
|
|
74
|
-
readonly: boolean;
|
|
75
|
-
/** Adds a button to toggle the password's visibility. Only applies to password types. */
|
|
76
|
-
passwordToggle: boolean;
|
|
77
|
-
/** Determines whether or not the password is currently visible. Only applies to password input types. */
|
|
78
|
-
passwordVisible: boolean;
|
|
79
|
-
/** Hides the browser's built-in increment/decrement spin buttons for number inputs. */
|
|
80
|
-
noSpinButtons: boolean;
|
|
81
|
-
/**
|
|
82
|
-
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
83
|
-
* to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
|
|
84
|
-
* the same document or shadow root for this to work.
|
|
85
|
-
*/
|
|
86
|
-
form: string;
|
|
87
|
-
/** Makes the input a required field. */
|
|
88
|
-
required: boolean;
|
|
89
|
-
/** A regular expression pattern to validate input against. */
|
|
90
|
-
pattern: string;
|
|
91
|
-
/** The minimum length of input that will be considered valid. */
|
|
92
|
-
minlength: number;
|
|
93
|
-
/** The maximum length of input that will be considered valid. */
|
|
94
|
-
maxlength: number;
|
|
95
|
-
/** The input's minimum value. Only applies to date and number input types. */
|
|
96
|
-
min: number | string;
|
|
97
|
-
/** The input's maximum value. Only applies to date and number input types. */
|
|
98
|
-
max: number | string;
|
|
99
|
-
/**
|
|
100
|
-
* Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
|
|
101
|
-
* implied, allowing any numeric value. Only applies to date and number input types.
|
|
102
|
-
*/
|
|
103
|
-
step: number | 'any';
|
|
104
|
-
/** Controls whether and how text input is automatically capitalized as it is entered by the user. */
|
|
105
|
-
autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
|
|
106
|
-
/** Indicates whether the browser's autocorrect feature is on or off. */
|
|
107
|
-
autocorrect: 'off' | 'on';
|
|
108
|
-
/**
|
|
109
|
-
* Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
|
|
110
|
-
* [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
|
|
111
|
-
*/
|
|
112
|
-
autocomplete: string;
|
|
113
|
-
/** Indicates that the input should receive focus on page load. */
|
|
114
|
-
autofocus: boolean;
|
|
115
|
-
/** Used to customize the label or icon of the Enter key on virtual keyboards. */
|
|
116
|
-
enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
|
|
117
|
-
/** Enables spell checking on the input. */
|
|
118
|
-
spellcheck: boolean;
|
|
119
|
-
/**
|
|
120
|
-
* Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
|
|
121
|
-
* keyboard on supportive devices.
|
|
122
|
-
*/
|
|
123
|
-
inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
|
|
124
|
-
/** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
|
|
125
|
-
get valueAsDate(): Date | null;
|
|
126
|
-
set valueAsDate(newValue: Date | null);
|
|
127
|
-
/** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
|
|
128
|
-
get valueAsNumber(): number;
|
|
129
|
-
set valueAsNumber(newValue: number);
|
|
130
|
-
/** Gets the validity state object */
|
|
131
|
-
get validity(): ValidityState;
|
|
132
|
-
/** Gets the validation message */
|
|
133
|
-
get validationMessage(): string;
|
|
134
|
-
firstUpdated(): void;
|
|
135
|
-
private handleBlur;
|
|
136
|
-
private handleChange;
|
|
137
|
-
private handleClearClick;
|
|
138
|
-
private handleFocus;
|
|
139
|
-
private handleInput;
|
|
140
|
-
private handleInvalid;
|
|
141
|
-
private handleKeyDown;
|
|
142
|
-
private handlePasswordToggle;
|
|
143
|
-
handleDisabledChange(): void;
|
|
144
|
-
handleStepChange(): void;
|
|
145
|
-
handleValueChange(): Promise<void>;
|
|
146
|
-
/** Sets focus on the input. */
|
|
147
|
-
focus(options?: FocusOptions): void;
|
|
148
|
-
/** Removes focus from the input. */
|
|
149
|
-
blur(): void;
|
|
150
|
-
/** Selects all the text in the input. */
|
|
151
|
-
select(): void;
|
|
152
|
-
/** Sets the start and end positions of the text selection (0-based). */
|
|
153
|
-
setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
|
|
154
|
-
/** Replaces a range of text with a new string. */
|
|
155
|
-
setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
|
|
156
|
-
/** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
|
|
157
|
-
showPicker(): void;
|
|
158
|
-
/** Increments the value of a numeric input type by the value of the step attribute. */
|
|
159
|
-
stepUp(): void;
|
|
160
|
-
/** Decrements the value of a numeric input type by the value of the step attribute. */
|
|
161
|
-
stepDown(): void;
|
|
162
|
-
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
|
163
|
-
checkValidity(): boolean;
|
|
164
|
-
/** Gets the associated form, if one exists. */
|
|
165
|
-
getForm(): HTMLFormElement | null;
|
|
166
|
-
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
167
|
-
reportValidity(): boolean;
|
|
168
|
-
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
|
169
|
-
setCustomValidity(message: string): void;
|
|
170
|
-
render(): import("lit").TemplateResult<1>;
|
|
171
|
-
}
|
|
172
|
-
declare global {
|
|
173
|
-
interface HTMLElementTagNameMap {
|
|
174
|
-
'flow-ui-input': FlowInput;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup } from 'lit';
|
|
2
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
import type FlowMenuItem from '../menu-item/menu-item';
|
|
4
|
-
export interface MenuSelectEventDetail {
|
|
5
|
-
item: FlowMenuItem;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* @summary Menus provide a list of options for the user to choose from.
|
|
9
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu
|
|
10
|
-
* @status stable
|
|
11
|
-
* @since 2.0
|
|
12
|
-
*
|
|
13
|
-
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
|
14
|
-
*
|
|
15
|
-
* @event {{ item: FlowMenuItem }} flow-ui-select - Emitted when a menu item is selected.
|
|
16
|
-
*/
|
|
17
|
-
export default class FlowMenu extends FlowRdfElement {
|
|
18
|
-
static styles: CSSResultGroup;
|
|
19
|
-
defaultSlot: HTMLSlotElement;
|
|
20
|
-
connectedCallback(): void;
|
|
21
|
-
private handleClick;
|
|
22
|
-
private handleKeyDown;
|
|
23
|
-
private handleMouseDown;
|
|
24
|
-
private handleSlotChange;
|
|
25
|
-
private isMenuItem;
|
|
26
|
-
/** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
|
|
27
|
-
getAllItems(): FlowMenuItem[];
|
|
28
|
-
/**
|
|
29
|
-
* @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
|
|
30
|
-
* The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
|
|
31
|
-
*/
|
|
32
|
-
getCurrentItem(): FlowMenuItem | undefined;
|
|
33
|
-
/**
|
|
34
|
-
* @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
|
|
35
|
-
* `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
|
|
36
|
-
*/
|
|
37
|
-
setCurrentItem(item: FlowMenuItem): void;
|
|
38
|
-
render(): import("lit").TemplateResult<1>;
|
|
39
|
-
}
|
|
40
|
-
declare global {
|
|
41
|
-
interface HTMLElementTagNameMap {
|
|
42
|
-
'flow-ui-menu': FlowMenu;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup } from 'lit';
|
|
2
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
/**
|
|
4
|
-
* @summary Menu items provide options for the user to pick from in a menu.
|
|
5
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu-item
|
|
6
|
-
* @status stable
|
|
7
|
-
* @since 2.0
|
|
8
|
-
*
|
|
9
|
-
* @dependency flow-ui-icon
|
|
10
|
-
*
|
|
11
|
-
* @slot - The menu item's label.
|
|
12
|
-
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
|
13
|
-
* @slot suffix - Used to append an icon or similar element to the menu item.
|
|
14
|
-
*
|
|
15
|
-
* @csspart base - The component's base wrapper.
|
|
16
|
-
* @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
|
|
17
|
-
* @csspart prefix - The prefix container.
|
|
18
|
-
* @csspart label - The menu item label.
|
|
19
|
-
* @csspart suffix - The suffix container.
|
|
20
|
-
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
|
|
21
|
-
*/
|
|
22
|
-
export default class FlowMenuItem extends FlowRdfElement {
|
|
23
|
-
static styles: CSSResultGroup;
|
|
24
|
-
private cachedTextLabel;
|
|
25
|
-
defaultSlot: HTMLSlotElement;
|
|
26
|
-
menuItem: HTMLElement;
|
|
27
|
-
/** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
|
|
28
|
-
type: 'normal' | 'checkbox';
|
|
29
|
-
/** Draws the item in a checked state. */
|
|
30
|
-
checked: boolean;
|
|
31
|
-
/** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
|
|
32
|
-
value: string;
|
|
33
|
-
/** Draws the menu item in a disabled state, preventing selection. */
|
|
34
|
-
disabled: boolean;
|
|
35
|
-
connectedCallback(): void;
|
|
36
|
-
disconnectedCallback(): void;
|
|
37
|
-
private handleDefaultSlotChange;
|
|
38
|
-
private handleHostClick;
|
|
39
|
-
handleCheckedChange(): void;
|
|
40
|
-
handleDisabledChange(): void;
|
|
41
|
-
handleTypeChange(): void;
|
|
42
|
-
/** Returns a text label based on the contents of the menu item's default slot. */
|
|
43
|
-
getTextLabel(): string;
|
|
44
|
-
render(): import("lit").TemplateResult<1>;
|
|
45
|
-
}
|
|
46
|
-
declare global {
|
|
47
|
-
interface HTMLElementTagNameMap {
|
|
48
|
-
'flow-ui-menu-item': FlowMenuItem;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup } from 'lit';
|
|
2
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
/**
|
|
4
|
-
* @summary Menu labels are used to describe a group of menu items.
|
|
5
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu-label
|
|
6
|
-
* @status stable
|
|
7
|
-
* @since 2.0
|
|
8
|
-
*
|
|
9
|
-
* @slot - The menu label's content.
|
|
10
|
-
*
|
|
11
|
-
* @csspart base - The component's base wrapper.
|
|
12
|
-
*/
|
|
13
|
-
export default class FlowMenuLabel extends FlowRdfElement {
|
|
14
|
-
static styles: CSSResultGroup;
|
|
15
|
-
render(): import("lit").TemplateResult<1>;
|
|
16
|
-
}
|
|
17
|
-
declare global {
|
|
18
|
-
interface HTMLElementTagNameMap {
|
|
19
|
-
'flow-ui-menu-label': FlowMenuLabel;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup } from 'lit';
|
|
2
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
/**
|
|
4
|
-
* @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
|
|
5
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/mutation-observer
|
|
6
|
-
* @status stable
|
|
7
|
-
* @since 2.0
|
|
8
|
-
*
|
|
9
|
-
* @event {{ mutationList: MutationRecord[] }} flow-ui-mutation - Emitted when a mutation occurs.
|
|
10
|
-
*
|
|
11
|
-
* @slot - The content to watch for mutations.
|
|
12
|
-
*/
|
|
13
|
-
export default class FlowMutationObserver extends FlowRdfElement {
|
|
14
|
-
static styles: CSSResultGroup;
|
|
15
|
-
private mutationObserver;
|
|
16
|
-
/**
|
|
17
|
-
* Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
|
|
18
|
-
* `attr="class id title"`. To watch all attributes, use `*`.
|
|
19
|
-
*/
|
|
20
|
-
attr: string;
|
|
21
|
-
/** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
|
|
22
|
-
attrOldValue: boolean;
|
|
23
|
-
/** Watches for changes to the character data contained within the node. */
|
|
24
|
-
charData: boolean;
|
|
25
|
-
/** Indicates whether or not the previous value of the node's text should be recorded. */
|
|
26
|
-
charDataOldValue: boolean;
|
|
27
|
-
/** Watches for the addition or removal of new child nodes. */
|
|
28
|
-
childList: boolean;
|
|
29
|
-
/** Disables the observer. */
|
|
30
|
-
disabled: boolean;
|
|
31
|
-
connectedCallback(): void;
|
|
32
|
-
disconnectedCallback(): void;
|
|
33
|
-
private handleMutation;
|
|
34
|
-
private startObserver;
|
|
35
|
-
private stopObserver;
|
|
36
|
-
handleDisabledChange(): void;
|
|
37
|
-
handleChange(): void;
|
|
38
|
-
render(): import("lit").TemplateResult<1>;
|
|
39
|
-
}
|
|
40
|
-
declare global {
|
|
41
|
-
interface HTMLElementTagNameMap {
|
|
42
|
-
'flow-ui-mutation-observer': FlowMutationObserver;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import type { CSSResultGroup } from 'lit';
|
|
2
|
-
import FlowRdfElement from '../../internal/flow-ui-rdf-element';
|
|
3
|
-
/**
|
|
4
|
-
* @summary Options define the selectable items within various form controls such as [select](/components/select).
|
|
5
|
-
* @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/option
|
|
6
|
-
* @status stable
|
|
7
|
-
* @since 2.0
|
|
8
|
-
*
|
|
9
|
-
* @dependency flow-ui-icon
|
|
10
|
-
*
|
|
11
|
-
* @slot - The option's label.
|
|
12
|
-
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
|
13
|
-
* @slot suffix - Used to append an icon or similar element to the menu item.
|
|
14
|
-
*
|
|
15
|
-
* @csspart checked-icon - The checked icon, a `<flow-ui-icon>` element.
|
|
16
|
-
* @csspart base - The component's base wrapper.
|
|
17
|
-
* @csspart label - The option's label.
|
|
18
|
-
* @csspart prefix - The container that wraps the prefix.
|
|
19
|
-
* @csspart suffix - The container that wraps the suffix.
|
|
20
|
-
*/
|
|
21
|
-
export default class FlowOption extends FlowRdfElement {
|
|
22
|
-
static styles: CSSResultGroup;
|
|
23
|
-
private cachedTextLabel;
|
|
24
|
-
private readonly localize;
|
|
25
|
-
defaultSlot: HTMLSlotElement;
|
|
26
|
-
current: boolean;
|
|
27
|
-
selected: boolean;
|
|
28
|
-
hasHover: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* The option's value. When selected, the containing form control will receive this value. The value must be unique
|
|
31
|
-
* from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
|
|
32
|
-
* multiple values.
|
|
33
|
-
*/
|
|
34
|
-
value: string;
|
|
35
|
-
/** Draws the option in a disabled state, preventing selection. */
|
|
36
|
-
disabled: boolean;
|
|
37
|
-
connectedCallback(): void;
|
|
38
|
-
private handleDefaultSlotChange;
|
|
39
|
-
private handleMouseEnter;
|
|
40
|
-
private handleMouseLeave;
|
|
41
|
-
handleDisabledChange(): void;
|
|
42
|
-
handleSelectedChange(): void;
|
|
43
|
-
handleValueChange(): void;
|
|
44
|
-
/** Returns a plain text label based on the option's content. */
|
|
45
|
-
getTextLabel(): string;
|
|
46
|
-
render(): import("lit").TemplateResult<1>;
|
|
47
|
-
}
|
|
48
|
-
declare global {
|
|
49
|
-
interface HTMLElementTagNameMap {
|
|
50
|
-
'flow-ui-option': FlowOption;
|
|
51
|
-
}
|
|
52
|
-
}
|