@m3e/react 2.0.0 → 2.0.2
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/README.md +1 -7
- package/dist/all.js +338 -91
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +1 -1
- package/dist/all.min.js.map +1 -1
- package/dist/app-bar.js +33 -2
- package/dist/app-bar.js.map +1 -1
- package/dist/app-bar.min.js +1 -1
- package/dist/app-bar.min.js.map +1 -1
- package/dist/autocomplete.js +33 -2
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/avatar.js +33 -2
- package/dist/avatar.js.map +1 -1
- package/dist/avatar.min.js +1 -1
- package/dist/avatar.min.js.map +1 -1
- package/dist/badge.js +33 -2
- package/dist/badge.js.map +1 -1
- package/dist/badge.min.js +1 -1
- package/dist/badge.min.js.map +1 -1
- package/dist/bottom-sheet.js +35 -4
- package/dist/bottom-sheet.js.map +1 -1
- package/dist/bottom-sheet.min.js +1 -1
- package/dist/bottom-sheet.min.js.map +1 -1
- package/dist/button-group.js +33 -2
- package/dist/button-group.js.map +1 -1
- package/dist/button-group.min.js +1 -1
- package/dist/button-group.min.js.map +1 -1
- package/dist/button.js +33 -2
- package/dist/button.js.map +1 -1
- package/dist/button.min.js +1 -1
- package/dist/button.min.js.map +1 -1
- package/dist/card.js +33 -2
- package/dist/card.js.map +1 -1
- package/dist/card.min.js +1 -1
- package/dist/card.min.js.map +1 -1
- package/dist/checkbox.js +33 -2
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.min.js +1 -1
- package/dist/checkbox.min.js.map +1 -1
- package/dist/chips.js +40 -9
- package/dist/chips.js.map +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/chips.min.js.map +1 -1
- package/dist/core.js +259 -0
- package/dist/core.js.map +1 -0
- package/dist/core.min.js +7 -0
- package/dist/core.min.js.map +1 -0
- package/dist/dialog.js +35 -4
- package/dist/dialog.js.map +1 -1
- package/dist/dialog.min.js +1 -1
- package/dist/dialog.min.js.map +1 -1
- package/dist/divider.js +33 -2
- package/dist/divider.js.map +1 -1
- package/dist/divider.min.js +1 -1
- package/dist/divider.min.js.map +1 -1
- package/dist/drawer-container.js +34 -3
- package/dist/drawer-container.js.map +1 -1
- package/dist/drawer-container.min.js +1 -1
- package/dist/drawer-container.min.js.map +1 -1
- package/dist/expansion-panel.js +34 -3
- package/dist/expansion-panel.js.map +1 -1
- package/dist/expansion-panel.min.js +1 -1
- package/dist/expansion-panel.min.js.map +1 -1
- package/dist/fab-menu.js +35 -4
- package/dist/fab-menu.js.map +1 -1
- package/dist/fab-menu.min.js +1 -1
- package/dist/fab-menu.min.js.map +1 -1
- package/dist/fab.js +33 -2
- package/dist/fab.js.map +1 -1
- package/dist/fab.min.js +1 -1
- package/dist/fab.min.js.map +1 -1
- package/dist/form-field.js +33 -2
- package/dist/form-field.js.map +1 -1
- package/dist/form-field.min.js +1 -1
- package/dist/form-field.min.js.map +1 -1
- package/dist/heading.js +33 -2
- package/dist/heading.js.map +1 -1
- package/dist/heading.min.js +1 -1
- package/dist/heading.min.js.map +1 -1
- package/dist/icon-button.js +33 -2
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.min.js +1 -1
- package/dist/icon-button.min.js.map +1 -1
- package/dist/icon.js +33 -2
- package/dist/icon.js.map +1 -1
- package/dist/icon.min.js +1 -1
- package/dist/icon.min.js.map +1 -1
- package/dist/list.js +39 -8
- package/dist/list.js.map +1 -1
- package/dist/list.min.js +1 -1
- package/dist/list.min.js.map +1 -1
- package/dist/loading-indicator.js +33 -2
- package/dist/loading-indicator.js.map +1 -1
- package/dist/loading-indicator.min.js +1 -1
- package/dist/loading-indicator.min.js.map +1 -1
- package/dist/menu.js +38 -7
- package/dist/menu.js.map +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/menu.min.js.map +1 -1
- package/dist/nav-bar.js +34 -3
- package/dist/nav-bar.js.map +1 -1
- package/dist/nav-bar.min.js +1 -1
- package/dist/nav-bar.min.js.map +1 -1
- package/dist/nav-menu.js +35 -4
- package/dist/nav-menu.js.map +1 -1
- package/dist/nav-menu.min.js +1 -1
- package/dist/nav-menu.min.js.map +1 -1
- package/dist/nav-rail.js +34 -3
- package/dist/nav-rail.js.map +1 -1
- package/dist/nav-rail.min.js +1 -1
- package/dist/nav-rail.min.js.map +1 -1
- package/dist/option.js +34 -3
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/paginator.js +1 -1
- package/dist/paginator.js.map +1 -1
- package/dist/paginator.min.js.map +1 -1
- package/dist/progress-indicator.js +34 -3
- package/dist/progress-indicator.js.map +1 -1
- package/dist/progress-indicator.min.js +1 -1
- package/dist/progress-indicator.min.js.map +1 -1
- package/dist/radio-group.js +34 -3
- package/dist/radio-group.js.map +1 -1
- package/dist/radio-group.min.js +1 -1
- package/dist/radio-group.min.js.map +1 -1
- package/dist/segmented-button.js +34 -3
- package/dist/segmented-button.js.map +1 -1
- package/dist/segmented-button.min.js +1 -1
- package/dist/segmented-button.min.js.map +1 -1
- package/dist/select.js +33 -2
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/shape.js +33 -2
- package/dist/shape.js.map +1 -1
- package/dist/shape.min.js +1 -1
- package/dist/shape.min.js.map +1 -1
- package/dist/slide-group.js +33 -2
- package/dist/slide-group.js.map +1 -1
- package/dist/slide-group.min.js +1 -1
- package/dist/slide-group.min.js.map +1 -1
- package/dist/slider.js +34 -3
- package/dist/slider.js.map +1 -1
- package/dist/slider.min.js +1 -1
- package/dist/slider.min.js.map +1 -1
- package/dist/split-button.js +33 -2
- package/dist/split-button.js.map +1 -1
- package/dist/split-button.min.js +1 -1
- package/dist/split-button.min.js.map +1 -1
- package/dist/src/all.d.ts +1 -0
- package/dist/src/all.d.ts.map +1 -1
- package/dist/src/app-bar/AppBar.d.ts +1 -1
- package/dist/src/autocomplete/Autocomplete.d.ts +1 -1
- package/dist/src/avatar/Avatar.d.ts +1 -1
- package/dist/src/badge/Badge.d.ts +1 -1
- package/dist/src/bottom-sheet/BottomSheet.d.ts +1 -1
- package/dist/src/bottom-sheet/BottomSheetAction.d.ts +1 -1
- package/dist/src/bottom-sheet/BottomSheetTrigger.d.ts +1 -1
- package/dist/src/button/Button.d.ts +1 -1
- package/dist/src/button-group/ButtonGroup.d.ts +1 -1
- package/dist/src/card/Card.d.ts +1 -1
- package/dist/src/checkbox/Checkbox.d.ts +1 -1
- package/dist/src/chips/AssistChip.d.ts +1 -1
- package/dist/src/chips/Chip.d.ts +1 -1
- package/dist/src/chips/ChipSet.d.ts +1 -1
- package/dist/src/chips/FilterChip.d.ts +1 -1
- package/dist/src/chips/FilterChipSet.d.ts +1 -1
- package/dist/src/chips/InputChip.d.ts +1 -1
- package/dist/src/chips/InputChipSet.d.ts +1 -1
- package/dist/src/chips/SuggestionChip.d.ts +1 -1
- package/dist/src/core/Collapsible.d.ts +22 -0
- package/dist/src/core/Collapsible.d.ts.map +1 -0
- package/dist/src/core/Elevation.d.ts +17 -0
- package/dist/src/core/Elevation.d.ts.map +1 -0
- package/dist/src/core/FocusRing.d.ts +17 -0
- package/dist/src/core/FocusRing.d.ts.map +1 -0
- package/dist/src/core/PseudoCheckbox.d.ts +17 -0
- package/dist/src/core/PseudoCheckbox.d.ts.map +1 -0
- package/dist/src/core/PseudoRadio.d.ts +17 -0
- package/dist/src/core/PseudoRadio.d.ts.map +1 -0
- package/dist/src/core/Ripple.d.ts +17 -0
- package/dist/src/core/Ripple.d.ts.map +1 -0
- package/dist/src/core/ScrollContainer.d.ts +17 -0
- package/dist/src/core/ScrollContainer.d.ts.map +1 -0
- package/dist/src/core/Slide.d.ts +17 -0
- package/dist/src/core/Slide.d.ts.map +1 -0
- package/dist/src/core/StateLayer.d.ts +17 -0
- package/dist/src/core/StateLayer.d.ts.map +1 -0
- package/dist/src/core/TextHighlight.d.ts +17 -0
- package/dist/src/core/TextHighlight.d.ts.map +1 -0
- package/dist/src/core/TextOverflow.d.ts +17 -0
- package/dist/src/core/TextOverflow.d.ts.map +1 -0
- package/dist/src/core/index.d.ts +12 -0
- package/dist/src/core/index.d.ts.map +1 -0
- package/dist/src/dialog/Dialog.d.ts +1 -1
- package/dist/src/dialog/DialogAction.d.ts +1 -1
- package/dist/src/dialog/DialogTrigger.d.ts +1 -1
- package/dist/src/divider/Divider.d.ts +1 -1
- package/dist/src/drawer-container/DrawerContainer.d.ts +1 -1
- package/dist/src/drawer-container/DrawerToggle.d.ts +1 -1
- package/dist/src/expansion-panel/Accordion.d.ts +1 -1
- package/dist/src/expansion-panel/ExpansionPanel.d.ts +1 -1
- package/dist/src/fab/Fab.d.ts +1 -1
- package/dist/src/fab-menu/FabMenu.d.ts +1 -1
- package/dist/src/fab-menu/FabMenuItem.d.ts +1 -1
- package/dist/src/fab-menu/FabMenuTrigger.d.ts +1 -1
- package/dist/src/form-field/FormField.d.ts +1 -1
- package/dist/src/heading/Heading.d.ts +1 -1
- package/dist/src/icon/Icon.d.ts +1 -1
- package/dist/src/icon-button/IconButton.d.ts +1 -1
- package/dist/src/list/ActionList.d.ts +1 -1
- package/dist/src/list/ExpandableListItem.d.ts +1 -1
- package/dist/src/list/List.d.ts +1 -1
- package/dist/src/list/ListAction.d.ts +1 -1
- package/dist/src/list/ListItem.d.ts +1 -1
- package/dist/src/list/ListOption.d.ts +1 -1
- package/dist/src/list/SelectionList.d.ts +1 -1
- package/dist/src/loading-indicator/LoadingIndicator.d.ts +1 -1
- package/dist/src/menu/Menu.d.ts +1 -1
- package/dist/src/menu/MenuItem.d.ts +1 -1
- package/dist/src/menu/MenuItemCheckbox.d.ts +1 -1
- package/dist/src/menu/MenuItemGroup.d.ts +1 -1
- package/dist/src/menu/MenuItemRadio.d.ts +1 -1
- package/dist/src/menu/MenuTrigger.d.ts +1 -1
- package/dist/src/nav-bar/NavBar.d.ts +1 -1
- package/dist/src/nav-bar/NavItem.d.ts +1 -1
- package/dist/src/nav-menu/NavMenu.d.ts +1 -1
- package/dist/src/nav-menu/NavMenuItem.d.ts +1 -1
- package/dist/src/nav-menu/NavMenuItemGroup.d.ts +1 -1
- package/dist/src/nav-rail/NavRail.d.ts +1 -1
- package/dist/src/nav-rail/NavRailToggle.d.ts +1 -1
- package/dist/src/option/OptGroup.d.ts +1 -1
- package/dist/src/option/Option.d.ts +1 -1
- package/dist/src/paginator/Paginator.d.ts +1 -1
- package/dist/src/progress-indicator/CircularProgressIndicator.d.ts +1 -1
- package/dist/src/progress-indicator/LinearProgressIndicator.d.ts +1 -1
- package/dist/src/radio-group/Radio.d.ts +1 -1
- package/dist/src/radio-group/RadioGroup.d.ts +1 -1
- package/dist/src/segmented-button/ButtonSegment.d.ts +1 -1
- package/dist/src/segmented-button/SegmentedButton.d.ts +1 -1
- package/dist/src/select/Select.d.ts +1 -1
- package/dist/src/shape/Shape.d.ts +1 -1
- package/dist/src/slide-group/SlideGroup.d.ts +1 -1
- package/dist/src/slider/Slider.d.ts +1 -1
- package/dist/src/slider/SliderThumb.d.ts +1 -1
- package/dist/src/split-button/SplitButton.d.ts +1 -1
- package/dist/src/stepper/Step.d.ts +1 -1
- package/dist/src/stepper/StepPanel.d.ts +1 -1
- package/dist/src/stepper/Stepper.d.ts +1 -1
- package/dist/src/stepper/StepperNext.d.ts +1 -1
- package/dist/src/stepper/StepperPrevious.d.ts +1 -1
- package/dist/src/stepper/StepperReset.d.ts +1 -1
- package/dist/src/switch/Switch.d.ts +1 -1
- package/dist/src/tabs/Tab.d.ts +1 -1
- package/dist/src/tabs/TabPanel.d.ts +1 -1
- package/dist/src/tabs/Tabs.d.ts +1 -1
- package/dist/src/textarea-autosize/TextareaAutosize.d.ts +1 -1
- package/dist/src/theme/Theme.d.ts +1 -1
- package/dist/src/toc/Toc.d.ts +1 -1
- package/dist/src/toolbar/Toolbar.d.ts +1 -1
- package/dist/src/tooltip/RichTooltip.d.ts +1 -1
- package/dist/src/tooltip/RichTooltipAction.d.ts +1 -1
- package/dist/src/tooltip/Tooltip.d.ts +1 -1
- package/dist/src/utils/createComponent.d.ts +29 -0
- package/dist/src/utils/createComponent.d.ts.map +1 -0
- package/dist/src/utils/index.d.ts +2 -0
- package/dist/src/utils/index.d.ts.map +1 -0
- package/dist/stepper.js +38 -7
- package/dist/stepper.js.map +1 -1
- package/dist/stepper.min.js +1 -1
- package/dist/stepper.min.js.map +1 -1
- package/dist/switch.js +33 -2
- package/dist/switch.js.map +1 -1
- package/dist/switch.min.js +1 -1
- package/dist/switch.min.js.map +1 -1
- package/dist/tabs.js +35 -4
- package/dist/tabs.js.map +1 -1
- package/dist/tabs.min.js +1 -1
- package/dist/tabs.min.js.map +1 -1
- package/dist/textarea-autosize.js +33 -2
- package/dist/textarea-autosize.js.map +1 -1
- package/dist/textarea-autosize.min.js +1 -1
- package/dist/textarea-autosize.min.js.map +1 -1
- package/dist/theme.js +33 -2
- package/dist/theme.js.map +1 -1
- package/dist/theme.min.js +1 -1
- package/dist/theme.min.js.map +1 -1
- package/dist/toc.js +33 -2
- package/dist/toc.js.map +1 -1
- package/dist/toc.min.js +1 -1
- package/dist/toc.min.js.map +1 -1
- package/dist/toolbar.js +33 -2
- package/dist/toolbar.js.map +1 -1
- package/dist/toolbar.min.js +1 -1
- package/dist/toolbar.min.js.map +1 -1
- package/dist/tooltip.js +35 -4
- package/dist/tooltip.js.map +1 -1
- package/dist/tooltip.min.js +1 -1
- package/dist/tooltip.min.js.map +1 -1
- package/package.json +6 -2
package/dist/button.js
CHANGED
|
@@ -6,11 +6,42 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
|
-
import { createComponent } from '@lit/react';
|
|
9
|
+
import { createComponent as createComponent$1 } from '@lit/react';
|
|
10
10
|
import { M3eButtonElement } from '@m3e/web/button';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* React
|
|
13
|
+
* Creates an SSR-safe React component for a custom element. Properties are distinguished
|
|
14
|
+
* from attributes automatically, and events can be configured so they are added
|
|
15
|
+
* to the custom element as event listeners.
|
|
16
|
+
*
|
|
17
|
+
* @param options An options bag containing the parameters needed to generate a
|
|
18
|
+
* wrapped web component.
|
|
19
|
+
*
|
|
20
|
+
* @param options.react The React module, typically imported from the `react`
|
|
21
|
+
* npm package.
|
|
22
|
+
* @param options.tagName The custom element tag name registered via
|
|
23
|
+
* `customElements.define`.
|
|
24
|
+
* @param options.elementClass The custom element class registered via
|
|
25
|
+
* `customElements.define`.
|
|
26
|
+
* @param options.events An object listing events to which the component can
|
|
27
|
+
* listen. The object keys are the event property names passed in via React
|
|
28
|
+
* props and the object values are the names of the corresponding events
|
|
29
|
+
* generated by the custom element. For example, given `{onactivate:
|
|
30
|
+
* 'activate'}` an event function may be passed via the component's `onactivate`
|
|
31
|
+
* prop and will be called when the custom element fires its `activate` event.
|
|
32
|
+
* @param options.displayName A React component display name, used in debugging
|
|
33
|
+
* messages. Default value is inferred from the name of custom element class
|
|
34
|
+
* registered via `customElements.define`.
|
|
35
|
+
*/
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
37
|
+
function createComponent({ react, tagName, elementClass, events, displayName, }) {
|
|
38
|
+
return typeof window !== "undefined"
|
|
39
|
+
? createComponent$1({ react, tagName, elementClass, events, displayName })
|
|
40
|
+
: null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* React binding for the `m3e-button` Web Component from `@m3e/web/button`.
|
|
14
45
|
*
|
|
15
46
|
* This component renders the underlying `<m3e-button>` element and exposes its
|
|
16
47
|
* properties, attributes, and events through an idiomatic React interface.
|
package/dist/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../src/button/Button.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/utils/createComponent.ts","../../src/button/Button.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nexport type { ButtonShape, ButtonSize, ButtonVariant, M3eButtonElement } from \"@m3e/web/button\";\r\n\r\n/**\r\n * React binding for the `m3e-button` Web Component from `@m3e/web/button`.\r\n *\r\n * This component renders the underlying `<m3e-button>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-button>` instance for imperative access.\r\n *\r\n * See the `m3e-button` documentation in `@m3e/button` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eButton = createComponent({\r\n tagName: \"m3e-button\",\r\n elementClass: M3eButtonElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
|
package/dist/button.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* @license MIT
|
|
4
4
|
* Copyright (c) 2025 matraic
|
|
5
5
|
* See LICENSE file in the project root for full license text.
|
|
6
|
-
*/import
|
|
6
|
+
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eButtonElement as n}from"@m3e/web/button";const a=function({react:e,tagName:n,elementClass:a,events:o,displayName:m}){return"undefined"!=typeof window?t({react:e,tagName:n,elementClass:a,events:o,displayName:m}):null}({tagName:"m3e-button",elementClass:n,react:e,events:{onInput:"input",onChange:"change",onClick:"click"}});export{a as M3eButton};
|
|
7
7
|
//# sourceMappingURL=button.min.js.map
|
package/dist/button.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.min.js","sources":["../../src/button/Button.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"
|
|
1
|
+
{"version":3,"file":"button.min.js","sources":["../../src/button/Button.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eButtonElement } from \"@m3e/web/button\";\r\nexport type { ButtonShape, ButtonSize, ButtonVariant, M3eButtonElement } from \"@m3e/web/button\";\r\n\r\n/**\r\n * React binding for the `m3e-button` Web Component from `@m3e/web/button`.\r\n *\r\n * This component renders the underlying `<m3e-button>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-button>` instance for imperative access.\r\n *\r\n * See the `m3e-button` documentation in `@m3e/button` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eButton = createComponent({\r\n tagName: \"m3e-button\",\r\n elementClass: M3eButtonElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n","import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n"],"names":["M3eButton","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eButtonElement","React","onInput","onChange","onClick"],"mappings":";;;;;wHAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpByBG,CAAgB,CACvCN,QAAS,aACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS,QACTC,SAAU,SACVC,QAAS"}
|
package/dist/card.js
CHANGED
|
@@ -6,11 +6,42 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
|
-
import { createComponent } from '@lit/react';
|
|
9
|
+
import { createComponent as createComponent$1 } from '@lit/react';
|
|
10
10
|
import { M3eCardElement } from '@m3e/web/card';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* React
|
|
13
|
+
* Creates an SSR-safe React component for a custom element. Properties are distinguished
|
|
14
|
+
* from attributes automatically, and events can be configured so they are added
|
|
15
|
+
* to the custom element as event listeners.
|
|
16
|
+
*
|
|
17
|
+
* @param options An options bag containing the parameters needed to generate a
|
|
18
|
+
* wrapped web component.
|
|
19
|
+
*
|
|
20
|
+
* @param options.react The React module, typically imported from the `react`
|
|
21
|
+
* npm package.
|
|
22
|
+
* @param options.tagName The custom element tag name registered via
|
|
23
|
+
* `customElements.define`.
|
|
24
|
+
* @param options.elementClass The custom element class registered via
|
|
25
|
+
* `customElements.define`.
|
|
26
|
+
* @param options.events An object listing events to which the component can
|
|
27
|
+
* listen. The object keys are the event property names passed in via React
|
|
28
|
+
* props and the object values are the names of the corresponding events
|
|
29
|
+
* generated by the custom element. For example, given `{onactivate:
|
|
30
|
+
* 'activate'}` an event function may be passed via the component's `onactivate`
|
|
31
|
+
* prop and will be called when the custom element fires its `activate` event.
|
|
32
|
+
* @param options.displayName A React component display name, used in debugging
|
|
33
|
+
* messages. Default value is inferred from the name of custom element class
|
|
34
|
+
* registered via `customElements.define`.
|
|
35
|
+
*/
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
37
|
+
function createComponent({ react, tagName, elementClass, events, displayName, }) {
|
|
38
|
+
return typeof window !== "undefined"
|
|
39
|
+
? createComponent$1({ react, tagName, elementClass, events, displayName })
|
|
40
|
+
: null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* React binding for the `m3e-card` Web Component from `@m3e/web/card`.
|
|
14
45
|
*
|
|
15
46
|
* This component renders the underlying `<m3e-card>` element and exposes its
|
|
16
47
|
* properties, attributes, and events through an idiomatic React interface.
|
package/dist/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sources":["../../src/card/Card.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../src/utils/createComponent.ts","../../src/card/Card.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eCardElement } from \"@m3e/web/card\";\r\nexport type { CardOrientation, CardVariant, M3eCardElement } from \"@m3e/web/card\";\r\n\r\n/**\r\n * React binding for the `m3e-card` Web Component from `@m3e/web/card`.\r\n *\r\n * This component renders the underlying `<m3e-card>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-card>` instance for imperative access.\r\n *\r\n * See the `m3e-card` documentation in `@m3e/card` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eCard = createComponent({\r\n tagName: \"m3e-card\",\r\n elementClass: M3eCardElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAG,eAAe,CAAC;AACrC,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,YAAY,EAAE,cAAc;AAC5B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
|
package/dist/card.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* @license MIT
|
|
4
4
|
* Copyright (c) 2025 matraic
|
|
5
5
|
* See LICENSE file in the project root for full license text.
|
|
6
|
-
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eCardElement as
|
|
6
|
+
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eCardElement as a}from"@m3e/web/card";const n=function({react:e,tagName:a,elementClass:n,events:m,displayName:r}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:n,events:m,displayName:r}):null}({tagName:"m3e-card",elementClass:a,react:e,events:{onClick:"click"}});export{n as M3eCard};
|
|
7
7
|
//# sourceMappingURL=card.min.js.map
|
package/dist/card.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.min.js","sources":["../../src/card/Card.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"
|
|
1
|
+
{"version":3,"file":"card.min.js","sources":["../../src/card/Card.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eCardElement } from \"@m3e/web/card\";\r\nexport type { CardOrientation, CardVariant, M3eCardElement } from \"@m3e/web/card\";\r\n\r\n/**\r\n * React binding for the `m3e-card` Web Component from `@m3e/web/card`.\r\n *\r\n * This component renders the underlying `<m3e-card>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-card>` instance for imperative access.\r\n *\r\n * See the `m3e-card` documentation in `@m3e/card` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eCard = createComponent({\r\n tagName: \"m3e-card\",\r\n elementClass: M3eCardElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n","import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n"],"names":["M3eCard","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eCardElement","React","onClick"],"mappings":";;;;;oHAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpBuBG,CAAgB,CACrCN,QAAS,WACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS"}
|
package/dist/checkbox.js
CHANGED
|
@@ -6,11 +6,42 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
|
-
import { createComponent } from '@lit/react';
|
|
9
|
+
import { createComponent as createComponent$1 } from '@lit/react';
|
|
10
10
|
import { M3eCheckboxElement } from '@m3e/web/checkbox';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* React
|
|
13
|
+
* Creates an SSR-safe React component for a custom element. Properties are distinguished
|
|
14
|
+
* from attributes automatically, and events can be configured so they are added
|
|
15
|
+
* to the custom element as event listeners.
|
|
16
|
+
*
|
|
17
|
+
* @param options An options bag containing the parameters needed to generate a
|
|
18
|
+
* wrapped web component.
|
|
19
|
+
*
|
|
20
|
+
* @param options.react The React module, typically imported from the `react`
|
|
21
|
+
* npm package.
|
|
22
|
+
* @param options.tagName The custom element tag name registered via
|
|
23
|
+
* `customElements.define`.
|
|
24
|
+
* @param options.elementClass The custom element class registered via
|
|
25
|
+
* `customElements.define`.
|
|
26
|
+
* @param options.events An object listing events to which the component can
|
|
27
|
+
* listen. The object keys are the event property names passed in via React
|
|
28
|
+
* props and the object values are the names of the corresponding events
|
|
29
|
+
* generated by the custom element. For example, given `{onactivate:
|
|
30
|
+
* 'activate'}` an event function may be passed via the component's `onactivate`
|
|
31
|
+
* prop and will be called when the custom element fires its `activate` event.
|
|
32
|
+
* @param options.displayName A React component display name, used in debugging
|
|
33
|
+
* messages. Default value is inferred from the name of custom element class
|
|
34
|
+
* registered via `customElements.define`.
|
|
35
|
+
*/
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
37
|
+
function createComponent({ react, tagName, elementClass, events, displayName, }) {
|
|
38
|
+
return typeof window !== "undefined"
|
|
39
|
+
? createComponent$1({ react, tagName, elementClass, events, displayName })
|
|
40
|
+
: null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* React binding for the `m3e-checkbox` Web Component from `@m3e/web/checkbox`.
|
|
14
45
|
*
|
|
15
46
|
* This component renders the underlying `<m3e-checkbox>` element and exposes its
|
|
16
47
|
* properties, attributes, and events through an idiomatic React interface.
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/Checkbox.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../src/utils/createComponent.ts","../../src/checkbox/Checkbox.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eCheckboxElement } from \"@m3e/web/checkbox\";\r\nexport type { M3eCheckboxElement } from \"@m3e/web/checkbox\";\r\n\r\n/**\r\n * React binding for the `m3e-checkbox` Web Component from `@m3e/web/checkbox`.\r\n *\r\n * This component renders the underlying `<m3e-checkbox>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-checkbox>` instance for imperative access.\r\n *\r\n * See the `m3e-checkbox` documentation in `@m3e/checkbox` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eCheckbox = createComponent({\r\n tagName: \"m3e-checkbox\",\r\n elementClass: M3eCheckboxElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onInvalid: \"invalid\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,WAAW,GAAG,eAAe,CAAC;AACzC,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAE,kBAAkB;AAChC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
|
package/dist/checkbox.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* @license MIT
|
|
4
4
|
* Copyright (c) 2025 matraic
|
|
5
5
|
* See LICENSE file in the project root for full license text.
|
|
6
|
-
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eCheckboxElement as n}from"@m3e/web/checkbox";const o
|
|
6
|
+
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eCheckboxElement as n}from"@m3e/web/checkbox";const a=function({react:e,tagName:n,elementClass:a,events:o,displayName:c}){return"undefined"!=typeof window?t({react:e,tagName:n,elementClass:a,events:o,displayName:c}):null}({tagName:"m3e-checkbox",elementClass:n,react:e,events:{onInput:"input",onInvalid:"invalid",onChange:"change",onClick:"click"}});export{a as M3eCheckbox};
|
|
7
7
|
//# sourceMappingURL=checkbox.min.js.map
|
package/dist/checkbox.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.min.js","sources":["../../src/checkbox/Checkbox.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"
|
|
1
|
+
{"version":3,"file":"checkbox.min.js","sources":["../../src/checkbox/Checkbox.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eCheckboxElement } from \"@m3e/web/checkbox\";\r\nexport type { M3eCheckboxElement } from \"@m3e/web/checkbox\";\r\n\r\n/**\r\n * React binding for the `m3e-checkbox` Web Component from `@m3e/web/checkbox`.\r\n *\r\n * This component renders the underlying `<m3e-checkbox>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-checkbox>` instance for imperative access.\r\n *\r\n * See the `m3e-checkbox` documentation in `@m3e/checkbox` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eCheckbox = createComponent({\r\n tagName: \"m3e-checkbox\",\r\n elementClass: M3eCheckboxElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onInvalid: \"invalid\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n","import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n"],"names":["M3eCheckbox","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eCheckboxElement","React","onInput","onInvalid","onChange","onClick"],"mappings":";;;;;4HAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpB2BG,CAAgB,CACzCN,QAAS,eACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS,QACTC,UAAW,UACXC,SAAU,SACVC,QAAS"}
|
package/dist/chips.js
CHANGED
|
@@ -6,11 +6,42 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
|
-
import { createComponent } from '@lit/react';
|
|
9
|
+
import { createComponent as createComponent$1 } from '@lit/react';
|
|
10
10
|
import { M3eAssistChipElement, M3eChipElement, M3eChipSetElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eInputChipElement, M3eInputChipSetElement, M3eSuggestionChipElement } from '@m3e/web/chips';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* React
|
|
13
|
+
* Creates an SSR-safe React component for a custom element. Properties are distinguished
|
|
14
|
+
* from attributes automatically, and events can be configured so they are added
|
|
15
|
+
* to the custom element as event listeners.
|
|
16
|
+
*
|
|
17
|
+
* @param options An options bag containing the parameters needed to generate a
|
|
18
|
+
* wrapped web component.
|
|
19
|
+
*
|
|
20
|
+
* @param options.react The React module, typically imported from the `react`
|
|
21
|
+
* npm package.
|
|
22
|
+
* @param options.tagName The custom element tag name registered via
|
|
23
|
+
* `customElements.define`.
|
|
24
|
+
* @param options.elementClass The custom element class registered via
|
|
25
|
+
* `customElements.define`.
|
|
26
|
+
* @param options.events An object listing events to which the component can
|
|
27
|
+
* listen. The object keys are the event property names passed in via React
|
|
28
|
+
* props and the object values are the names of the corresponding events
|
|
29
|
+
* generated by the custom element. For example, given `{onactivate:
|
|
30
|
+
* 'activate'}` an event function may be passed via the component's `onactivate`
|
|
31
|
+
* prop and will be called when the custom element fires its `activate` event.
|
|
32
|
+
* @param options.displayName A React component display name, used in debugging
|
|
33
|
+
* messages. Default value is inferred from the name of custom element class
|
|
34
|
+
* registered via `customElements.define`.
|
|
35
|
+
*/
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
37
|
+
function createComponent({ react, tagName, elementClass, events, displayName, }) {
|
|
38
|
+
return typeof window !== "undefined"
|
|
39
|
+
? createComponent$1({ react, tagName, elementClass, events, displayName })
|
|
40
|
+
: null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* React binding for the `m3e-assist-chip` Web Component from `@m3e/web/chips`.
|
|
14
45
|
*
|
|
15
46
|
* This component renders the underlying `<m3e-assist-chip>` element and exposes its
|
|
16
47
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -32,7 +63,7 @@ const M3eAssistChip = createComponent({
|
|
|
32
63
|
});
|
|
33
64
|
|
|
34
65
|
/**
|
|
35
|
-
* React binding for the `m3e-chip` Web Component from `@m3e/chips`.
|
|
66
|
+
* React binding for the `m3e-chip` Web Component from `@m3e/web/chips`.
|
|
36
67
|
*
|
|
37
68
|
* This component renders the underlying `<m3e-chip>` element and exposes its
|
|
38
69
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -51,7 +82,7 @@ const M3eChip = createComponent({
|
|
|
51
82
|
});
|
|
52
83
|
|
|
53
84
|
/**
|
|
54
|
-
* React binding for the `m3e-chip-set` Web Component from `@m3e/chips`.
|
|
85
|
+
* React binding for the `m3e-chip-set` Web Component from `@m3e/web/chips`.
|
|
55
86
|
*
|
|
56
87
|
* This component renders the underlying `<m3e-chip-set>` element and exposes its
|
|
57
88
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -70,7 +101,7 @@ const M3eChipSet = createComponent({
|
|
|
70
101
|
});
|
|
71
102
|
|
|
72
103
|
/**
|
|
73
|
-
* React binding for the `m3e-filter-chip` Web Component from `@m3e/chips`.
|
|
104
|
+
* React binding for the `m3e-filter-chip` Web Component from `@m3e/web/chips`.
|
|
74
105
|
*
|
|
75
106
|
* This component renders the underlying `<m3e-filter-chip>` element and exposes its
|
|
76
107
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -94,7 +125,7 @@ const M3eFilterChip = createComponent({
|
|
|
94
125
|
});
|
|
95
126
|
|
|
96
127
|
/**
|
|
97
|
-
* React binding for the `m3e-filter-chip-set` Web Component from `@m3e/chips`.
|
|
128
|
+
* React binding for the `m3e-filter-chip-set` Web Component from `@m3e/web/chips`.
|
|
98
129
|
*
|
|
99
130
|
* This component renders the underlying `<m3e-filter-chip-set>` element and exposes its
|
|
100
131
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -117,7 +148,7 @@ const M3eFilterChipSet = createComponent({
|
|
|
117
148
|
});
|
|
118
149
|
|
|
119
150
|
/**
|
|
120
|
-
* React binding for the `m3e-input-chip` Web Component from `@m3e/chips`.
|
|
151
|
+
* React binding for the `m3e-input-chip` Web Component from `@m3e/web/chips`.
|
|
121
152
|
*
|
|
122
153
|
* This component renders the underlying `<m3e-input-chip>` element and exposes its
|
|
123
154
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -140,7 +171,7 @@ const M3eInputChip = createComponent({
|
|
|
140
171
|
});
|
|
141
172
|
|
|
142
173
|
/**
|
|
143
|
-
* React binding for the `m3e-input-chip-set` Web Component from `@m3e/chips`.
|
|
174
|
+
* React binding for the `m3e-input-chip-set` Web Component from `@m3e/web/chips`.
|
|
144
175
|
*
|
|
145
176
|
* This component renders the underlying `<m3e-input-chip-set>` element and exposes its
|
|
146
177
|
* properties, attributes, and events through an idiomatic React interface.
|
|
@@ -162,7 +193,7 @@ const M3eInputChipSet = createComponent({
|
|
|
162
193
|
});
|
|
163
194
|
|
|
164
195
|
/**
|
|
165
|
-
* React binding for the `m3e-suggestion-chip` Web Component from `@m3e/chips`.
|
|
196
|
+
* React binding for the `m3e-suggestion-chip` Web Component from `@m3e/web/chips`.
|
|
166
197
|
*
|
|
167
198
|
* This component renders the underlying `<m3e-suggestion-chip>` element and exposes its
|
|
168
199
|
* properties, attributes, and events through an idiomatic React interface.
|
package/dist/chips.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chips.js","sources":["../../src/chips/AssistChip.ts","../../src/chips/Chip.ts","../../src/chips/ChipSet.ts","../../src/chips/FilterChip.ts","../../src/chips/FilterChipSet.ts","../../src/chips/InputChip.ts","../../src/chips/InputChipSet.ts","../../src/chips/SuggestionChip.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAssistChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eAssistChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-assist-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-assist-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-assist-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-assist-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAssistChip = createComponent({\r\n tagName: \"m3e-assist-chip\",\r\n elementClass: M3eAssistChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eChipElement } from \"@m3e/web/chips\";\r\nexport type { ChipVariant, M3eChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChip = createComponent({\r\n tagName: \"m3e-chip\",\r\n elementClass: M3eChipElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip-set` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChipSet = createComponent({\r\n tagName: \"m3e-chip-set\",\r\n elementClass: M3eChipSetElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFilterChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChip = createComponent({\r\n tagName: \"m3e-filter-chip\",\r\n elementClass: M3eFilterChipElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip-set` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChipSet = createComponent({\r\n tagName: \"m3e-filter-chip-set\",\r\n elementClass: M3eFilterChipSetElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eInputChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChip = createComponent({\r\n tagName: \"m3e-input-chip\",\r\n elementClass: M3eInputChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n onRemove: \"remove\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip-set` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChipSet = createComponent({\r\n tagName: \"m3e-input-chip-set\",\r\n elementClass: M3eInputChipSetElement,\r\n react: React,\r\n events: {\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-suggestion-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-suggestion-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-suggestion-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-suggestion-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSuggestionChip = createComponent({\r\n tagName: \"m3e-suggestion-chip\",\r\n elementClass: M3eSuggestionChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,eAAe,CAAC;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAE,oBAAoB;AAClC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAG,eAAe,CAAC;AACrC,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,YAAY,EAAE,cAAc;AAC5B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACjBD;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,eAAe,CAAC;AACxC,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAE,iBAAiB;AAC/B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACjBD;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,eAAe,CAAC;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAE,oBAAoB;AAClC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACtBD;;;;;;;;;;;;AAYG;AACI,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAC9C,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAE,uBAAuB;AACrC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAG,eAAe,CAAC;AAC7C,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC/C,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"chips.js","sources":["../../src/utils/createComponent.ts","../../src/chips/AssistChip.ts","../../src/chips/Chip.ts","../../src/chips/ChipSet.ts","../../src/chips/FilterChip.ts","../../src/chips/FilterChipSet.ts","../../src/chips/InputChip.ts","../../src/chips/InputChipSet.ts","../../src/chips/SuggestionChip.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAssistChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eAssistChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-assist-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-assist-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-assist-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-assist-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAssistChip = createComponent({\r\n tagName: \"m3e-assist-chip\",\r\n elementClass: M3eAssistChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eChipElement } from \"@m3e/web/chips\";\r\nexport type { ChipVariant, M3eChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChip = createComponent({\r\n tagName: \"m3e-chip\",\r\n elementClass: M3eChipElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip-set` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChipSet = createComponent({\r\n tagName: \"m3e-chip-set\",\r\n elementClass: M3eChipSetElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFilterChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChip = createComponent({\r\n tagName: \"m3e-filter-chip\",\r\n elementClass: M3eFilterChipElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip-set` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChipSet = createComponent({\r\n tagName: \"m3e-filter-chip-set\",\r\n elementClass: M3eFilterChipSetElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eInputChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChip = createComponent({\r\n tagName: \"m3e-input-chip\",\r\n elementClass: M3eInputChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n onRemove: \"remove\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip-set` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChipSet = createComponent({\r\n tagName: \"m3e-input-chip-set\",\r\n elementClass: M3eInputChipSetElement,\r\n react: React,\r\n events: {\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-suggestion-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-suggestion-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-suggestion-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-suggestion-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSuggestionChip = createComponent({\r\n tagName: \"m3e-suggestion-chip\",\r\n elementClass: M3eSuggestionChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,eAAe,CAAC;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAE,oBAAoB;AAClC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAG,eAAe,CAAC;AACrC,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,YAAY,EAAE,cAAc;AAC5B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACjBD;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,eAAe,CAAC;AACxC,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAE,iBAAiB;AAC/B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACjBD;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,eAAe,CAAC;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAE,oBAAoB;AAClC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACtBD;;;;;;;;;;;;AAYG;AACI,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAC9C,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAE,uBAAuB;AACrC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAG,eAAe,CAAC;AAC7C,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC/C,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
|
package/dist/chips.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* @license MIT
|
|
4
4
|
* Copyright (c) 2025 matraic
|
|
5
5
|
* See LICENSE file in the project root for full license text.
|
|
6
|
-
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eAssistChipElement as a,M3eChipElement as n,M3eChipSetElement as
|
|
6
|
+
*/import e from"react";import{createComponent as t}from"@lit/react";import{M3eAssistChipElement as a,M3eChipElement as n,M3eChipSetElement as s,M3eFilterChipElement as c,M3eFilterChipSetElement as m,M3eInputChipElement as l,M3eInputChipSetElement as i,M3eSuggestionChipElement as o}from"@m3e/web/chips";function r({react:e,tagName:a,elementClass:n,events:s,displayName:c}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:n,events:s,displayName:c}):null}const p=r({tagName:"m3e-assist-chip",elementClass:a,react:e,events:{onClick:"click"}}),g=r({tagName:"m3e-chip",elementClass:n,react:e}),C=r({tagName:"m3e-chip-set",elementClass:s,react:e}),h=r({tagName:"m3e-filter-chip",elementClass:c,react:e,events:{onInput:"input",onChange:"change",onClick:"click"}}),u=r({tagName:"m3e-filter-chip-set",elementClass:m,react:e,events:{onInput:"input",onChange:"change"}}),N=r({tagName:"m3e-input-chip",elementClass:l,react:e,events:{onClick:"click",onRemove:"remove"}}),v=r({tagName:"m3e-input-chip-set",elementClass:i,react:e,events:{onChange:"change"}}),f=r({tagName:"m3e-suggestion-chip",elementClass:o,react:e,events:{onClick:"click"}});export{p as M3eAssistChip,g as M3eChip,C as M3eChipSet,h as M3eFilterChip,u as M3eFilterChipSet,N as M3eInputChip,v as M3eInputChipSet,f as M3eSuggestionChip};
|
|
7
7
|
//# sourceMappingURL=chips.min.js.map
|
package/dist/chips.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chips.min.js","sources":["../../src/chips/AssistChip.ts","../../src/chips/Chip.ts","../../src/chips/ChipSet.ts","../../src/chips/FilterChip.ts","../../src/chips/FilterChipSet.ts","../../src/chips/InputChip.ts","../../src/chips/InputChipSet.ts","../../src/chips/SuggestionChip.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAssistChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eAssistChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-assist-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-assist-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-assist-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-assist-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAssistChip = createComponent({\r\n tagName: \"m3e-assist-chip\",\r\n elementClass: M3eAssistChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eChipElement } from \"@m3e/web/chips\";\r\nexport type { ChipVariant, M3eChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChip = createComponent({\r\n tagName: \"m3e-chip\",\r\n elementClass: M3eChipElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip-set` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChipSet = createComponent({\r\n tagName: \"m3e-chip-set\",\r\n elementClass: M3eChipSetElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFilterChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChip = createComponent({\r\n tagName: \"m3e-filter-chip\",\r\n elementClass: M3eFilterChipElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip-set` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChipSet = createComponent({\r\n tagName: \"m3e-filter-chip-set\",\r\n elementClass: M3eFilterChipSetElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eInputChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChip = createComponent({\r\n tagName: \"m3e-input-chip\",\r\n elementClass: M3eInputChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n onRemove: \"remove\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip-set` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChipSet = createComponent({\r\n tagName: \"m3e-input-chip-set\",\r\n elementClass: M3eInputChipSetElement,\r\n react: React,\r\n events: {\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-suggestion-chip` Web Component from `@m3e/chips`.\r\n *\r\n * This component renders the underlying `<m3e-suggestion-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-suggestion-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-suggestion-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSuggestionChip = createComponent({\r\n tagName: \"m3e-suggestion-chip\",\r\n elementClass: M3eSuggestionChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":["M3eAssistChip","createComponent","tagName","elementClass","M3eAssistChipElement","react","React","events","onClick","M3eChip","M3eChipElement","M3eChipSet","M3eChipSetElement","M3eFilterChip","M3eFilterChipElement","onInput","onChange","M3eFilterChipSet","M3eFilterChipSetElement","M3eInputChip","M3eInputChipElement","onRemove","M3eInputChipSet","M3eInputChipSetElement","M3eSuggestionChip","M3eSuggestionChipElement"],"mappings":";;;;;gTAmBO,MAAMA,EAAgBC,EAAgB,CAC3CC,QAAS,kBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,QAAS,WCLAC,EAAUR,EAAgB,CACrCC,QAAS,WACTC,aAAcO,EACdL,MAAOC,ICHIK,EAAaV,EAAgB,CACxCC,QAAS,eACTC,aAAcS,EACdP,MAAOC,ICHIO,EAAgBZ,EAAgB,CAC3CC,QAAS,kBACTC,aAAcW,EACdT,MAAOC,EACPC,OAAQ,CACNQ,QAAS,QACTC,SAAU,SACVR,QAAS,WCPAS,EAAmBhB,EAAgB,CAC9CC,QAAS,sBACTC,aAAce,EACdb,MAAOC,EACPC,OAAQ,CACNQ,QAAS,QACTC,SAAU,YCNDG,EAAelB,EAAgB,CAC1CC,QAAS,iBACTC,aAAciB,EACdf,MAAOC,EACPC,OAAQ,CACNC,QAAS,QACTa,SAAU,YCNDC,EAAkBrB,EAAgB,CAC7CC,QAAS,qBACTC,aAAcoB,EACdlB,MAAOC,EACPC,OAAQ,CACNS,SAAU,YCLDQ,EAAoBvB,EAAgB,CAC/CC,QAAS,sBACTC,aAAcsB,EACdpB,MAAOC,EACPC,OAAQ,CACNC,QAAS"}
|
|
1
|
+
{"version":3,"file":"chips.min.js","sources":["../../src/utils/createComponent.ts","../../src/chips/AssistChip.ts","../../src/chips/Chip.ts","../../src/chips/ChipSet.ts","../../src/chips/FilterChip.ts","../../src/chips/FilterChipSet.ts","../../src/chips/InputChip.ts","../../src/chips/InputChipSet.ts","../../src/chips/SuggestionChip.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n react,\r\n tagName,\r\n elementClass,\r\n events,\r\n displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n return typeof window !== \"undefined\"\r\n ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAssistChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eAssistChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-assist-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-assist-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-assist-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-assist-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAssistChip = createComponent({\r\n tagName: \"m3e-assist-chip\",\r\n elementClass: M3eAssistChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eChipElement } from \"@m3e/web/chips\";\r\nexport type { ChipVariant, M3eChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChip = createComponent({\r\n tagName: \"m3e-chip\",\r\n elementClass: M3eChipElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-chip-set` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eChipSet = createComponent({\r\n tagName: \"m3e-chip-set\",\r\n elementClass: M3eChipSetElement,\r\n react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFilterChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChip = createComponent({\r\n tagName: \"m3e-filter-chip\",\r\n elementClass: M3eFilterChipElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n onClick: \"click\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eFilterChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-filter-chip-set` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-filter-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-filter-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-filter-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFilterChipSet = createComponent({\r\n tagName: \"m3e-filter-chip-set\",\r\n elementClass: M3eFilterChipSetElement,\r\n react: React,\r\n events: {\r\n onInput: \"input\",\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eInputChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChip = createComponent({\r\n tagName: \"m3e-input-chip\",\r\n elementClass: M3eInputChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n onRemove: \"remove\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\nexport type { M3eInputChipSetElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-input-chip-set` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-input-chip-set>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-input-chip-set>` instance for imperative access.\r\n *\r\n * See the `m3e-input-chip-set` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eInputChipSet = createComponent({\r\n tagName: \"m3e-input-chip-set\",\r\n elementClass: M3eInputChipSetElement,\r\n react: React,\r\n events: {\r\n onChange: \"change\",\r\n },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\nexport type { M3eSuggestionChipElement } from \"@m3e/web/chips\";\r\n\r\n/**\r\n * React binding for the `m3e-suggestion-chip` Web Component from `@m3e/web/chips`.\r\n *\r\n * This component renders the underlying `<m3e-suggestion-chip>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-suggestion-chip>` instance for imperative access.\r\n *\r\n * See the `m3e-suggestion-chip` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSuggestionChip = createComponent({\r\n tagName: \"m3e-suggestion-chip\",\r\n elementClass: M3eSuggestionChipElement,\r\n react: React,\r\n events: {\r\n onClick: \"click\",\r\n },\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eAssistChip","M3eAssistChipElement","React","onClick","M3eChip","M3eChipElement","M3eChipSet","M3eChipSetElement","M3eFilterChip","M3eFilterChipElement","onInput","onChange","M3eFilterChipSet","M3eFilterChipSetElement","M3eInputChip","M3eInputChipElement","onRemove","M3eInputChipSet","M3eInputChipSetElement","M3eSuggestionChip","M3eSuggestionChipElement"],"mappings":";;;;;gTA6BM,SAAUA,GAAkEC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CCpBO,MAAMG,EAAgBR,EAAgB,CAC3CE,QAAS,kBACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS,WCLAC,EAAUZ,EAAgB,CACrCE,QAAS,WACTC,aAAcU,EACdZ,MAAOS,ICHII,EAAad,EAAgB,CACxCE,QAAS,eACTC,aAAcY,EACdd,MAAOS,ICHIM,EAAgBhB,EAAgB,CAC3CE,QAAS,kBACTC,aAAcc,EACdhB,MAAOS,EACPN,OAAQ,CACNc,QAAS,QACTC,SAAU,SACVR,QAAS,WCPAS,EAAmBpB,EAAgB,CAC9CE,QAAS,sBACTC,aAAckB,EACdpB,MAAOS,EACPN,OAAQ,CACNc,QAAS,QACTC,SAAU,YCNDG,EAAetB,EAAgB,CAC1CE,QAAS,iBACTC,aAAcoB,EACdtB,MAAOS,EACPN,OAAQ,CACNO,QAAS,QACTa,SAAU,YCNDC,EAAkBzB,EAAgB,CAC7CE,QAAS,qBACTC,aAAcuB,EACdzB,MAAOS,EACPN,OAAQ,CACNe,SAAU,YCLDQ,EAAoB3B,EAAgB,CAC/CE,QAAS,sBACTC,aAAcyB,EACd3B,MAAOS,EACPN,OAAQ,CACNO,QAAS"}
|