@actabldesign/bellhop-react 0.0.11 → 0.1.0
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 +161 -47
- package/dist/components/stencil-generated/components.d.ts +1 -1
- package/dist/components/stencil-generated/components.d.ts.map +1 -1
- package/dist/components/stencil-generated/components.js +7 -0
- package/dist/components/stencil-generated/components.server.d.ts +2 -14
- package/dist/components/stencil-generated/components.server.d.ts.map +1 -1
- package/dist/components/stencil-generated/components.server.js +1671 -0
- package/dist/components/stencil-generated/index.js +6 -0
- package/dist/components/table/DataTable.js +514 -0
- package/dist/components/table/index.js +95 -0
- package/dist/helpers/cellRenderers.d.ts +236 -0
- package/dist/helpers/cellRenderers.d.ts.map +1 -0
- package/dist/hooks/useBellhopRef.d.ts +30 -0
- package/dist/hooks/useBellhopRef.d.ts.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +705 -179
- package/llms.txt +2366 -791
- package/package.json +1 -1
package/llms.txt
CHANGED
|
@@ -52,11 +52,16 @@ Directory Structure
|
|
|
52
52
|
src/
|
|
53
53
|
components/
|
|
54
54
|
stencil-generated/
|
|
55
|
+
components.server.ts
|
|
55
56
|
components.ts
|
|
56
57
|
index.ts
|
|
57
58
|
table/
|
|
58
59
|
DataTable.tsx
|
|
59
60
|
index.tsx
|
|
61
|
+
helpers/
|
|
62
|
+
cellRenderers.ts
|
|
63
|
+
hooks/
|
|
64
|
+
useBellhopRef.ts
|
|
60
65
|
index.ts
|
|
61
66
|
package.json
|
|
62
67
|
project.json
|
|
@@ -68,116 +73,136 @@ Files
|
|
|
68
73
|
================================================================
|
|
69
74
|
|
|
70
75
|
================
|
|
71
|
-
File: src/components/stencil-generated/components.ts
|
|
76
|
+
File: src/components/stencil-generated/components.server.ts
|
|
72
77
|
================
|
|
73
|
-
'use client';
|
|
74
|
-
|
|
75
78
|
/**
|
|
76
79
|
* This file was automatically generated by the Stencil React Output Target.
|
|
77
80
|
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
81
|
+
* Do __not__ import components from this file as server side rendered components
|
|
82
|
+
* may not hydrate due to missing Stencil runtime. Instead, import these components through the generated 'components.ts'
|
|
83
|
+
* file that re-exports all components with the 'use client' directive.
|
|
78
84
|
*/
|
|
79
85
|
|
|
80
86
|
/* eslint-disable */
|
|
81
87
|
|
|
82
|
-
import { type AutocompleteMenuItem, type BhAppbarCustomEvent, type BhAutocompleteMenuCustomEvent, type BhAvatarAddCustomEvent, type BhBreadcrumbsCustomEvent, type BhButtonCustomEvent, type BhButtonIconCustomEvent, type BhDataGridCustomEvent, type BhDatePickerContentCustomEvent, type BhDatePickerCustomEvent, type BhDateRangePickerContentCustomEvent, type BhDateRangePickerCustomEvent, type BhDropdownCustomEvent, type BhDropdownMenuCustomEvent, type BhInputAutocompleteCustomEvent, type BhLogoBoxCustomEvent, type BhMonthPickerContentCustomEvent, type BhMonthPickerCustomEvent, type BhPaginationCustomEvent, type BhPickerMenuCustomEvent, type
|
|
83
|
-
import { BhAccordionItem as BhAccordionItemElement, defineCustomElement as defineBhAccordionItem } from "@actabldesign/bellhop-core/
|
|
84
|
-
import { BhAccordion as BhAccordionElement, defineCustomElement as defineBhAccordion } from "@actabldesign/bellhop-core/
|
|
85
|
-
import { BhAppbar as BhAppbarElement, defineCustomElement as defineBhAppbar } from "@actabldesign/bellhop-core/
|
|
86
|
-
import { BhAutocompleteMenu as BhAutocompleteMenuElement, defineCustomElement as defineBhAutocompleteMenu } from "@actabldesign/bellhop-core/
|
|
87
|
-
import { BhAvatarAdd as BhAvatarAddElement, defineCustomElement as defineBhAvatarAdd } from "@actabldesign/bellhop-core/
|
|
88
|
-
import { BhAvatarStacked as BhAvatarStackedElement, defineCustomElement as defineBhAvatarStacked } from "@actabldesign/bellhop-core/
|
|
89
|
-
import { BhAvatar as BhAvatarElement, defineCustomElement as defineBhAvatar } from "@actabldesign/bellhop-core/
|
|
90
|
-
import { BhBadgeDot as BhBadgeDotElement, defineCustomElement as defineBhBadgeDot } from "@actabldesign/bellhop-core/
|
|
91
|
-
import { BhBadge as BhBadgeElement, defineCustomElement as defineBhBadge } from "@actabldesign/bellhop-core/
|
|
92
|
-
import { BhBarChart as BhBarChartElement, defineCustomElement as defineBhBarChart } from "@actabldesign/bellhop-core/
|
|
93
|
-
import { BhBreadcrumbs as BhBreadcrumbsElement, defineCustomElement as defineBhBreadcrumbs } from "@actabldesign/bellhop-core/
|
|
94
|
-
import { BhButtonIcon as BhButtonIconElement, defineCustomElement as defineBhButtonIcon } from "@actabldesign/bellhop-core/
|
|
95
|
-
import { BhButton as BhButtonElement, defineCustomElement as defineBhButton } from "@actabldesign/bellhop-core/
|
|
96
|
-
import { BhCardFooter as BhCardFooterElement, defineCustomElement as defineBhCardFooter } from "@actabldesign/bellhop-core/
|
|
97
|
-
import { BhCardHeader as BhCardHeaderElement, defineCustomElement as defineBhCardHeader } from "@actabldesign/bellhop-core/
|
|
98
|
-
import { BhCard as BhCardElement, defineCustomElement as defineBhCard } from "@actabldesign/bellhop-core/
|
|
99
|
-
import { BhChartTooltip as BhChartTooltipElement, defineCustomElement as defineBhChartTooltip } from "@actabldesign/bellhop-core/
|
|
100
|
-
import { BhCheckboxGroupItem as BhCheckboxGroupItemElement, defineCustomElement as defineBhCheckboxGroupItem } from "@actabldesign/bellhop-core/
|
|
101
|
-
import { BhCheckboxGroup as BhCheckboxGroupElement, defineCustomElement as defineBhCheckboxGroup } from "@actabldesign/bellhop-core/
|
|
102
|
-
import { BhCheckbox as BhCheckboxElement, defineCustomElement as defineBhCheckbox } from "@actabldesign/bellhop-core/
|
|
103
|
-
import {
|
|
104
|
-
import {
|
|
105
|
-
import {
|
|
106
|
-
import {
|
|
107
|
-
import {
|
|
108
|
-
import {
|
|
109
|
-
import {
|
|
110
|
-
import {
|
|
111
|
-
import {
|
|
112
|
-
import {
|
|
113
|
-
import {
|
|
114
|
-
import {
|
|
115
|
-
import {
|
|
116
|
-
import {
|
|
117
|
-
import {
|
|
118
|
-
import {
|
|
119
|
-
import {
|
|
120
|
-
import {
|
|
121
|
-
import {
|
|
122
|
-
import {
|
|
123
|
-
import {
|
|
124
|
-
import {
|
|
125
|
-
import {
|
|
126
|
-
import {
|
|
127
|
-
import {
|
|
128
|
-
import {
|
|
129
|
-
import {
|
|
130
|
-
import {
|
|
131
|
-
import {
|
|
132
|
-
import {
|
|
133
|
-
import {
|
|
134
|
-
import {
|
|
135
|
-
import {
|
|
136
|
-
import {
|
|
137
|
-
import {
|
|
138
|
-
import {
|
|
139
|
-
import {
|
|
140
|
-
import {
|
|
141
|
-
import {
|
|
142
|
-
import {
|
|
143
|
-
import {
|
|
144
|
-
import {
|
|
145
|
-
import {
|
|
146
|
-
import {
|
|
147
|
-
import {
|
|
148
|
-
import { BhTooltip as BhTooltipElement, defineCustomElement as defineBhTooltip } from "@actabldesign/bellhop-core/dist/components/bh-tooltip.js";
|
|
149
|
-
import { BhTrendChart as BhTrendChartElement, defineCustomElement as defineBhTrendChart } from "@actabldesign/bellhop-core/dist/components/bh-trend-chart.js";
|
|
88
|
+
import { type AutocompleteMenuItem, type BhAppbarCustomEvent, type BhAutocompleteMenuCustomEvent, type BhAvatarAddCustomEvent, type BhBreadcrumbsCustomEvent, type BhButtonCustomEvent, type BhButtonIconCustomEvent, type BhDataGridCustomEvent, type BhDatePickerContentCustomEvent, type BhDatePickerCustomEvent, type BhDateRangePickerContentCustomEvent, type BhDateRangePickerCustomEvent, type BhDropdownCustomEvent, type BhDropdownMenuCustomEvent, type BhInputAutocompleteCustomEvent, type BhLogoBoxCustomEvent, type BhMonthPickerContentCustomEvent, type BhMonthPickerCustomEvent, type BhPaginationCustomEvent, type BhPickerMenuCustomEvent, type BhProduct, type BhProductSwitcherCustomEvent, type BhPropertySwitcherCustomEvent, type BhSidebarCustomEvent, type BreadcrumbItem, type DataGridCellChangeEvent, type DataGridCellClickEvent, type DataGridEditCancelEvent, type DataGridEditSaveEvent, type DataGridEditStartEvent, type DataGridExpandChangeEvent, type DataGridFilterChangeEvent, type DataGridGroupToggleEvent, type DataGridPageChangeEvent, type DataGridRowClickEvent, type DataGridSelectionChangeEvent, type DataGridSortChangeEvent, type DataGridValidationErrorEvent, type DropdownMenuItem, type MonthYear, type PaginationChangeEvent, type PropertyOption, type SelectedDate, type SelectedDateRange } from "@actabldesign/bellhop-core";
|
|
89
|
+
import { BhAccordionItem as BhAccordionItemElement, defineCustomElement as defineBhAccordionItem } from "@actabldesign/bellhop-core/components/bh-accordion-item.js";
|
|
90
|
+
import { BhAccordion as BhAccordionElement, defineCustomElement as defineBhAccordion } from "@actabldesign/bellhop-core/components/bh-accordion.js";
|
|
91
|
+
import { BhAppbar as BhAppbarElement, defineCustomElement as defineBhAppbar } from "@actabldesign/bellhop-core/components/bh-appbar.js";
|
|
92
|
+
import { BhAutocompleteMenu as BhAutocompleteMenuElement, defineCustomElement as defineBhAutocompleteMenu } from "@actabldesign/bellhop-core/components/bh-autocomplete-menu.js";
|
|
93
|
+
import { BhAvatarAdd as BhAvatarAddElement, defineCustomElement as defineBhAvatarAdd } from "@actabldesign/bellhop-core/components/bh-avatar-add.js";
|
|
94
|
+
import { BhAvatarStacked as BhAvatarStackedElement, defineCustomElement as defineBhAvatarStacked } from "@actabldesign/bellhop-core/components/bh-avatar-stacked.js";
|
|
95
|
+
import { BhAvatar as BhAvatarElement, defineCustomElement as defineBhAvatar } from "@actabldesign/bellhop-core/components/bh-avatar.js";
|
|
96
|
+
import { BhBadgeDot as BhBadgeDotElement, defineCustomElement as defineBhBadgeDot } from "@actabldesign/bellhop-core/components/bh-badge-dot.js";
|
|
97
|
+
import { BhBadge as BhBadgeElement, defineCustomElement as defineBhBadge } from "@actabldesign/bellhop-core/components/bh-badge.js";
|
|
98
|
+
import { BhBarChart as BhBarChartElement, defineCustomElement as defineBhBarChart } from "@actabldesign/bellhop-core/components/bh-bar-chart.js";
|
|
99
|
+
import { BhBreadcrumbs as BhBreadcrumbsElement, defineCustomElement as defineBhBreadcrumbs } from "@actabldesign/bellhop-core/components/bh-breadcrumbs.js";
|
|
100
|
+
import { BhButtonIcon as BhButtonIconElement, defineCustomElement as defineBhButtonIcon } from "@actabldesign/bellhop-core/components/bh-button-icon.js";
|
|
101
|
+
import { BhButton as BhButtonElement, defineCustomElement as defineBhButton } from "@actabldesign/bellhop-core/components/bh-button.js";
|
|
102
|
+
import { BhCardFooter as BhCardFooterElement, defineCustomElement as defineBhCardFooter } from "@actabldesign/bellhop-core/components/bh-card-footer.js";
|
|
103
|
+
import { BhCardHeader as BhCardHeaderElement, defineCustomElement as defineBhCardHeader } from "@actabldesign/bellhop-core/components/bh-card-header.js";
|
|
104
|
+
import { BhCard as BhCardElement, defineCustomElement as defineBhCard } from "@actabldesign/bellhop-core/components/bh-card.js";
|
|
105
|
+
import { BhChartTooltip as BhChartTooltipElement, defineCustomElement as defineBhChartTooltip } from "@actabldesign/bellhop-core/components/bh-chart-tooltip.js";
|
|
106
|
+
import { BhCheckboxGroupItem as BhCheckboxGroupItemElement, defineCustomElement as defineBhCheckboxGroupItem } from "@actabldesign/bellhop-core/components/bh-checkbox-group-item.js";
|
|
107
|
+
import { BhCheckboxGroup as BhCheckboxGroupElement, defineCustomElement as defineBhCheckboxGroup } from "@actabldesign/bellhop-core/components/bh-checkbox-group.js";
|
|
108
|
+
import { BhCheckbox as BhCheckboxElement, defineCustomElement as defineBhCheckbox } from "@actabldesign/bellhop-core/components/bh-checkbox.js";
|
|
109
|
+
import { BhDataGrid as BhDataGridElement, defineCustomElement as defineBhDataGrid } from "@actabldesign/bellhop-core/components/bh-data-grid.js";
|
|
110
|
+
import { BhDatePickerContent as BhDatePickerContentElement, defineCustomElement as defineBhDatePickerContent } from "@actabldesign/bellhop-core/components/bh-date-picker-content.js";
|
|
111
|
+
import { BhDatePicker as BhDatePickerElement, defineCustomElement as defineBhDatePicker } from "@actabldesign/bellhop-core/components/bh-date-picker.js";
|
|
112
|
+
import { BhDateRangePickerContent as BhDateRangePickerContentElement, defineCustomElement as defineBhDateRangePickerContent } from "@actabldesign/bellhop-core/components/bh-date-range-picker-content.js";
|
|
113
|
+
import { BhDateRangePicker as BhDateRangePickerElement, defineCustomElement as defineBhDateRangePicker } from "@actabldesign/bellhop-core/components/bh-date-range-picker.js";
|
|
114
|
+
import { BhDropdownMenu as BhDropdownMenuElement, defineCustomElement as defineBhDropdownMenu } from "@actabldesign/bellhop-core/components/bh-dropdown-menu.js";
|
|
115
|
+
import { BhDropdown as BhDropdownElement, defineCustomElement as defineBhDropdown } from "@actabldesign/bellhop-core/components/bh-dropdown.js";
|
|
116
|
+
import { BhEmptyState as BhEmptyStateElement, defineCustomElement as defineBhEmptyState } from "@actabldesign/bellhop-core/components/bh-empty-state.js";
|
|
117
|
+
import { BhFeaturedIcon as BhFeaturedIconElement, defineCustomElement as defineBhFeaturedIcon } from "@actabldesign/bellhop-core/components/bh-featured-icon.js";
|
|
118
|
+
import { BhIllustrations as BhIllustrationsElement, defineCustomElement as defineBhIllustrations } from "@actabldesign/bellhop-core/components/bh-illustrations.js";
|
|
119
|
+
import { BhInputAutocomplete as BhInputAutocompleteElement, defineCustomElement as defineBhInputAutocomplete } from "@actabldesign/bellhop-core/components/bh-input-autocomplete.js";
|
|
120
|
+
import { BhInputNumber as BhInputNumberElement, defineCustomElement as defineBhInputNumber } from "@actabldesign/bellhop-core/components/bh-input-number.js";
|
|
121
|
+
import { BhInputPassword as BhInputPasswordElement, defineCustomElement as defineBhInputPassword } from "@actabldesign/bellhop-core/components/bh-input-password.js";
|
|
122
|
+
import { BhInputText as BhInputTextElement, defineCustomElement as defineBhInputText } from "@actabldesign/bellhop-core/components/bh-input-text.js";
|
|
123
|
+
import { BhInputVerification as BhInputVerificationElement, defineCustomElement as defineBhInputVerification } from "@actabldesign/bellhop-core/components/bh-input-verification.js";
|
|
124
|
+
import { BhLabel as BhLabelElement, defineCustomElement as defineBhLabel } from "@actabldesign/bellhop-core/components/bh-label.js";
|
|
125
|
+
import { BhLoaderSpinner as BhLoaderSpinnerElement, defineCustomElement as defineBhLoaderSpinner } from "@actabldesign/bellhop-core/components/bh-loader-spinner.js";
|
|
126
|
+
import { BhLogoBox as BhLogoBoxElement, defineCustomElement as defineBhLogoBox } from "@actabldesign/bellhop-core/components/bh-logo-box.js";
|
|
127
|
+
import { BhModalActions as BhModalActionsElement, defineCustomElement as defineBhModalActions } from "@actabldesign/bellhop-core/components/bh-modal-actions.js";
|
|
128
|
+
import { BhModalHeader as BhModalHeaderElement, defineCustomElement as defineBhModalHeader } from "@actabldesign/bellhop-core/components/bh-modal-header.js";
|
|
129
|
+
import { BhModal as BhModalElement, defineCustomElement as defineBhModal } from "@actabldesign/bellhop-core/components/bh-modal.js";
|
|
130
|
+
import { BhMonthPickerContent as BhMonthPickerContentElement, defineCustomElement as defineBhMonthPickerContent } from "@actabldesign/bellhop-core/components/bh-month-picker-content.js";
|
|
131
|
+
import { BhMonthPicker as BhMonthPickerElement, defineCustomElement as defineBhMonthPicker } from "@actabldesign/bellhop-core/components/bh-month-picker.js";
|
|
132
|
+
import { BhNavItem as BhNavItemElement, defineCustomElement as defineBhNavItem } from "@actabldesign/bellhop-core/components/bh-nav-item.js";
|
|
133
|
+
import { BhNotification as BhNotificationElement, defineCustomElement as defineBhNotification } from "@actabldesign/bellhop-core/components/bh-notification.js";
|
|
134
|
+
import { BhPageNavigationChild as BhPageNavigationChildElement, defineCustomElement as defineBhPageNavigationChild } from "@actabldesign/bellhop-core/components/bh-page-navigation-child.js";
|
|
135
|
+
import { BhPageNavigationMultiLevel as BhPageNavigationMultiLevelElement, defineCustomElement as defineBhPageNavigationMultiLevel } from "@actabldesign/bellhop-core/components/bh-page-navigation-multi-level.js";
|
|
136
|
+
import { BhPageNavigationSingleLevel as BhPageNavigationSingleLevelElement, defineCustomElement as defineBhPageNavigationSingleLevel } from "@actabldesign/bellhop-core/components/bh-page-navigation-single-level.js";
|
|
137
|
+
import { BhPageNavigation as BhPageNavigationElement, defineCustomElement as defineBhPageNavigation } from "@actabldesign/bellhop-core/components/bh-page-navigation.js";
|
|
138
|
+
import { BhPagination as BhPaginationElement, defineCustomElement as defineBhPagination } from "@actabldesign/bellhop-core/components/bh-pagination.js";
|
|
139
|
+
import { BhPickerMenu as BhPickerMenuElement, defineCustomElement as defineBhPickerMenu } from "@actabldesign/bellhop-core/components/bh-picker-menu.js";
|
|
140
|
+
import { BhPieChart as BhPieChartElement, defineCustomElement as defineBhPieChart } from "@actabldesign/bellhop-core/components/bh-pie-chart.js";
|
|
141
|
+
import { BhPopover as BhPopoverElement, defineCustomElement as defineBhPopover } from "@actabldesign/bellhop-core/components/bh-popover.js";
|
|
142
|
+
import { BhProductSwitcher as BhProductSwitcherElement, defineCustomElement as defineBhProductSwitcher } from "@actabldesign/bellhop-core/components/bh-product-switcher.js";
|
|
143
|
+
import { BhPropertySwitcher as BhPropertySwitcherElement, defineCustomElement as defineBhPropertySwitcher } from "@actabldesign/bellhop-core/components/bh-property-switcher.js";
|
|
144
|
+
import { BhRadioButton as BhRadioButtonElement, defineCustomElement as defineBhRadioButton } from "@actabldesign/bellhop-core/components/bh-radio-button.js";
|
|
145
|
+
import { BhSidebar as BhSidebarElement, defineCustomElement as defineBhSidebar } from "@actabldesign/bellhop-core/components/bh-sidebar.js";
|
|
146
|
+
import { BhSkeletonLoader as BhSkeletonLoaderElement, defineCustomElement as defineBhSkeletonLoader } from "@actabldesign/bellhop-core/components/bh-skeleton-loader.js";
|
|
147
|
+
import { BhTabItem as BhTabItemElement, defineCustomElement as defineBhTabItem } from "@actabldesign/bellhop-core/components/bh-tab-item.js";
|
|
148
|
+
import { BhTabs as BhTabsElement, defineCustomElement as defineBhTabs } from "@actabldesign/bellhop-core/components/bh-tabs.js";
|
|
149
|
+
import { BhTag as BhTagElement, defineCustomElement as defineBhTag } from "@actabldesign/bellhop-core/components/bh-tag.js";
|
|
150
|
+
import { BhTextarea as BhTextareaElement, defineCustomElement as defineBhTextarea } from "@actabldesign/bellhop-core/components/bh-textarea.js";
|
|
151
|
+
import { BhToggle as BhToggleElement, defineCustomElement as defineBhToggle } from "@actabldesign/bellhop-core/components/bh-toggle.js";
|
|
152
|
+
import { BhTooltip as BhTooltipElement, defineCustomElement as defineBhTooltip } from "@actabldesign/bellhop-core/components/bh-tooltip.js";
|
|
153
|
+
import { BhTrendChart as BhTrendChartElement, defineCustomElement as defineBhTrendChart } from "@actabldesign/bellhop-core/components/bh-trend-chart.js";
|
|
150
154
|
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
151
|
-
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
155
|
+
import { createComponent, createSSRComponent } from '@stencil/react-output-target/runtime';
|
|
152
156
|
import React from 'react';
|
|
153
157
|
|
|
154
158
|
type BhAccordionEvents = { onBhAccordionChange: EventName<CustomEvent<string | string[]>> };
|
|
155
159
|
|
|
156
|
-
export const BhAccordion: StencilReactComponent<BhAccordionElement, BhAccordionEvents> =
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
160
|
+
export const BhAccordion: StencilReactComponent<BhAccordionElement, BhAccordionEvents> = typeof window !== 'undefined'
|
|
161
|
+
? /*@__PURE__*/ createComponent<BhAccordionElement, BhAccordionEvents>({
|
|
162
|
+
tagName: 'bh-accordion',
|
|
163
|
+
elementClass: BhAccordionElement,
|
|
164
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
165
|
+
react: React,
|
|
166
|
+
events: { onBhAccordionChange: 'bhAccordionChange' } as BhAccordionEvents,
|
|
167
|
+
defineCustomElement: defineBhAccordion
|
|
168
|
+
})
|
|
169
|
+
: /*@__PURE__*/ createSSRComponent<BhAccordionElement, BhAccordionEvents>({
|
|
170
|
+
tagName: 'bh-accordion',
|
|
171
|
+
properties: {
|
|
172
|
+
mode: 'mode',
|
|
173
|
+
value: 'value',
|
|
174
|
+
collapsible: 'collapsible'
|
|
175
|
+
},
|
|
176
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
177
|
+
});
|
|
164
178
|
|
|
165
179
|
type BhAccordionItemEvents = {
|
|
166
180
|
onBhAccordionToggle: EventName<CustomEvent<{ value: string; expanded: boolean }>>,
|
|
167
181
|
onBhAccordionClick: EventName<CustomEvent<string>>
|
|
168
182
|
};
|
|
169
183
|
|
|
170
|
-
export const BhAccordionItem: StencilReactComponent<BhAccordionItemElement, BhAccordionItemEvents> =
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
184
|
+
export const BhAccordionItem: StencilReactComponent<BhAccordionItemElement, BhAccordionItemEvents> = typeof window !== 'undefined'
|
|
185
|
+
? /*@__PURE__*/ createComponent<BhAccordionItemElement, BhAccordionItemEvents>({
|
|
186
|
+
tagName: 'bh-accordion-item',
|
|
187
|
+
elementClass: BhAccordionItemElement,
|
|
188
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
189
|
+
react: React,
|
|
190
|
+
events: {
|
|
191
|
+
onBhAccordionToggle: 'bhAccordionToggle',
|
|
192
|
+
onBhAccordionClick: 'bhAccordionClick'
|
|
193
|
+
} as BhAccordionItemEvents,
|
|
194
|
+
defineCustomElement: defineBhAccordionItem
|
|
195
|
+
})
|
|
196
|
+
: /*@__PURE__*/ createSSRComponent<BhAccordionItemElement, BhAccordionItemEvents>({
|
|
197
|
+
tagName: 'bh-accordion-item',
|
|
198
|
+
properties: {
|
|
199
|
+
value: 'value',
|
|
200
|
+
header: 'header',
|
|
201
|
+
expanded: 'expanded',
|
|
202
|
+
disabled: 'disabled'
|
|
203
|
+
},
|
|
204
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
205
|
+
});
|
|
181
206
|
|
|
182
207
|
type BhAppbarEvents = {
|
|
183
208
|
onBhMenuToggle: EventName<CustomEvent<void>>,
|
|
@@ -187,247 +212,460 @@ type BhAppbarEvents = {
|
|
|
187
212
|
onBhSettingsClick: EventName<CustomEvent<void>>
|
|
188
213
|
};
|
|
189
214
|
|
|
190
|
-
export const BhAppbar: StencilReactComponent<BhAppbarElement, BhAppbarEvents> =
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
215
|
+
export const BhAppbar: StencilReactComponent<BhAppbarElement, BhAppbarEvents> = typeof window !== 'undefined'
|
|
216
|
+
? /*@__PURE__*/ createComponent<BhAppbarElement, BhAppbarEvents>({
|
|
217
|
+
tagName: 'bh-appbar',
|
|
218
|
+
elementClass: BhAppbarElement,
|
|
219
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
220
|
+
react: React,
|
|
221
|
+
events: {
|
|
222
|
+
onBhMenuToggle: 'bhMenuToggle',
|
|
223
|
+
onBhBreadcrumbClick: 'bhBreadcrumbClick',
|
|
224
|
+
onBhNotificationClick: 'bhNotificationClick',
|
|
225
|
+
onBhCalendarClick: 'bhCalendarClick',
|
|
226
|
+
onBhSettingsClick: 'bhSettingsClick'
|
|
227
|
+
} as BhAppbarEvents,
|
|
228
|
+
defineCustomElement: defineBhAppbar
|
|
229
|
+
})
|
|
230
|
+
: /*@__PURE__*/ createSSRComponent<BhAppbarElement, BhAppbarEvents>({
|
|
231
|
+
tagName: 'bh-appbar',
|
|
232
|
+
properties: {
|
|
233
|
+
isMenuOpen: 'is-menu-open',
|
|
234
|
+
logoSrc: 'logo-src',
|
|
235
|
+
logoAlt: 'logo-alt',
|
|
236
|
+
notificationCount: 'notification-count'
|
|
237
|
+
},
|
|
238
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
239
|
+
});
|
|
204
240
|
|
|
205
241
|
type BhAutocompleteMenuEvents = {
|
|
206
242
|
onBhItemClick: EventName<BhAutocompleteMenuCustomEvent<AutocompleteMenuItem>>,
|
|
207
243
|
onBhItemHover: EventName<CustomEvent<number>>
|
|
208
244
|
};
|
|
209
245
|
|
|
210
|
-
export const BhAutocompleteMenu: StencilReactComponent<BhAutocompleteMenuElement, BhAutocompleteMenuEvents> =
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
246
|
+
export const BhAutocompleteMenu: StencilReactComponent<BhAutocompleteMenuElement, BhAutocompleteMenuEvents> = typeof window !== 'undefined'
|
|
247
|
+
? /*@__PURE__*/ createComponent<BhAutocompleteMenuElement, BhAutocompleteMenuEvents>({
|
|
248
|
+
tagName: 'bh-autocomplete-menu',
|
|
249
|
+
elementClass: BhAutocompleteMenuElement,
|
|
250
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
251
|
+
react: React,
|
|
252
|
+
events: {
|
|
253
|
+
onBhItemClick: 'bhItemClick',
|
|
254
|
+
onBhItemHover: 'bhItemHover'
|
|
255
|
+
} as BhAutocompleteMenuEvents,
|
|
256
|
+
defineCustomElement: defineBhAutocompleteMenu
|
|
257
|
+
})
|
|
258
|
+
: /*@__PURE__*/ createSSRComponent<BhAutocompleteMenuElement, BhAutocompleteMenuEvents>({
|
|
259
|
+
tagName: 'bh-autocomplete-menu',
|
|
260
|
+
properties: {
|
|
261
|
+
visible: 'visible',
|
|
262
|
+
selectedIndex: 'selected-index',
|
|
263
|
+
maxHeight: 'max-height',
|
|
264
|
+
multiSelect: 'multi-select',
|
|
265
|
+
searchQuery: 'search-query'
|
|
266
|
+
},
|
|
267
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
268
|
+
});
|
|
221
269
|
|
|
222
270
|
type BhAvatarEvents = {
|
|
223
271
|
onBhMouseEnter: EventName<CustomEvent<void>>,
|
|
224
272
|
onBhMouseLeave: EventName<CustomEvent<void>>
|
|
225
273
|
};
|
|
226
274
|
|
|
227
|
-
export const BhAvatar: StencilReactComponent<BhAvatarElement, BhAvatarEvents> =
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
275
|
+
export const BhAvatar: StencilReactComponent<BhAvatarElement, BhAvatarEvents> = typeof window !== 'undefined'
|
|
276
|
+
? /*@__PURE__*/ createComponent<BhAvatarElement, BhAvatarEvents>({
|
|
277
|
+
tagName: 'bh-avatar',
|
|
278
|
+
elementClass: BhAvatarElement,
|
|
279
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
280
|
+
react: React,
|
|
281
|
+
events: {
|
|
282
|
+
onBhMouseEnter: 'bhMouseEnter',
|
|
283
|
+
onBhMouseLeave: 'bhMouseLeave'
|
|
284
|
+
} as BhAvatarEvents,
|
|
285
|
+
defineCustomElement: defineBhAvatar
|
|
286
|
+
})
|
|
287
|
+
: /*@__PURE__*/ createSSRComponent<BhAvatarElement, BhAvatarEvents>({
|
|
288
|
+
tagName: 'bh-avatar',
|
|
289
|
+
properties: {
|
|
290
|
+
size: 'size',
|
|
291
|
+
type: 'type',
|
|
292
|
+
status: 'status',
|
|
293
|
+
text: 'text',
|
|
294
|
+
imageSrc: 'image-src',
|
|
295
|
+
alt: 'alt'
|
|
296
|
+
},
|
|
297
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
298
|
+
});
|
|
238
299
|
|
|
239
300
|
type BhAvatarAddEvents = { onBhClick: EventName<BhAvatarAddCustomEvent<MouseEvent>> };
|
|
240
301
|
|
|
241
|
-
export const BhAvatarAdd: StencilReactComponent<BhAvatarAddElement, BhAvatarAddEvents> =
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
302
|
+
export const BhAvatarAdd: StencilReactComponent<BhAvatarAddElement, BhAvatarAddEvents> = typeof window !== 'undefined'
|
|
303
|
+
? /*@__PURE__*/ createComponent<BhAvatarAddElement, BhAvatarAddEvents>({
|
|
304
|
+
tagName: 'bh-avatar-add',
|
|
305
|
+
elementClass: BhAvatarAddElement,
|
|
306
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
307
|
+
react: React,
|
|
308
|
+
events: { onBhClick: 'bhClick' } as BhAvatarAddEvents,
|
|
309
|
+
defineCustomElement: defineBhAvatarAdd
|
|
310
|
+
})
|
|
311
|
+
: /*@__PURE__*/ createSSRComponent<BhAvatarAddElement, BhAvatarAddEvents>({
|
|
312
|
+
tagName: 'bh-avatar-add',
|
|
313
|
+
properties: {
|
|
314
|
+
size: 'size',
|
|
315
|
+
disabled: 'disabled',
|
|
316
|
+
showTooltip: 'show-tooltip',
|
|
317
|
+
tooltipText: 'tooltip-text'
|
|
318
|
+
},
|
|
319
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
320
|
+
});
|
|
249
321
|
|
|
250
322
|
type BhAvatarStackedEvents = NonNullable<unknown>;
|
|
251
323
|
|
|
252
|
-
export const BhAvatarStacked: StencilReactComponent<BhAvatarStackedElement, BhAvatarStackedEvents> =
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
324
|
+
export const BhAvatarStacked: StencilReactComponent<BhAvatarStackedElement, BhAvatarStackedEvents> = typeof window !== 'undefined'
|
|
325
|
+
? /*@__PURE__*/ createComponent<BhAvatarStackedElement, BhAvatarStackedEvents>({
|
|
326
|
+
tagName: 'bh-avatar-stacked',
|
|
327
|
+
elementClass: BhAvatarStackedElement,
|
|
328
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
329
|
+
react: React,
|
|
330
|
+
events: {} as BhAvatarStackedEvents,
|
|
331
|
+
defineCustomElement: defineBhAvatarStacked
|
|
332
|
+
})
|
|
333
|
+
: /*@__PURE__*/ createSSRComponent<BhAvatarStackedElement, BhAvatarStackedEvents>({
|
|
334
|
+
tagName: 'bh-avatar-stacked',
|
|
335
|
+
properties: {
|
|
336
|
+
size: 'size',
|
|
337
|
+
avatars: 'avatars',
|
|
338
|
+
maxVisible: 'max-visible',
|
|
339
|
+
showAddButton: 'show-add-button',
|
|
340
|
+
addTooltipText: 'add-tooltip-text'
|
|
341
|
+
},
|
|
342
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
343
|
+
});
|
|
260
344
|
|
|
261
345
|
type BhBadgeEvents = { onBhDismiss: EventName<CustomEvent<void>> };
|
|
262
346
|
|
|
263
|
-
export const BhBadge: StencilReactComponent<BhBadgeElement, BhBadgeEvents> =
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
347
|
+
export const BhBadge: StencilReactComponent<BhBadgeElement, BhBadgeEvents> = typeof window !== 'undefined'
|
|
348
|
+
? /*@__PURE__*/ createComponent<BhBadgeElement, BhBadgeEvents>({
|
|
349
|
+
tagName: 'bh-badge',
|
|
350
|
+
elementClass: BhBadgeElement,
|
|
351
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
352
|
+
react: React,
|
|
353
|
+
events: { onBhDismiss: 'bhDismiss' } as BhBadgeEvents,
|
|
354
|
+
defineCustomElement: defineBhBadge
|
|
355
|
+
})
|
|
356
|
+
: /*@__PURE__*/ createSSRComponent<BhBadgeElement, BhBadgeEvents>({
|
|
357
|
+
tagName: 'bh-badge',
|
|
358
|
+
properties: {
|
|
359
|
+
variant: 'variant',
|
|
360
|
+
size: 'size',
|
|
361
|
+
emphasis: 'emphasis',
|
|
362
|
+
label: 'label',
|
|
363
|
+
icon: 'icon',
|
|
364
|
+
dismissible: 'dismissible',
|
|
365
|
+
disabled: 'disabled'
|
|
366
|
+
},
|
|
367
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
368
|
+
});
|
|
271
369
|
|
|
272
370
|
type BhBadgeDotEvents = NonNullable<unknown>;
|
|
273
371
|
|
|
274
|
-
export const BhBadgeDot: StencilReactComponent<BhBadgeDotElement, BhBadgeDotEvents> =
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
372
|
+
export const BhBadgeDot: StencilReactComponent<BhBadgeDotElement, BhBadgeDotEvents> = typeof window !== 'undefined'
|
|
373
|
+
? /*@__PURE__*/ createComponent<BhBadgeDotElement, BhBadgeDotEvents>({
|
|
374
|
+
tagName: 'bh-badge-dot',
|
|
375
|
+
elementClass: BhBadgeDotElement,
|
|
376
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
377
|
+
react: React,
|
|
378
|
+
events: {} as BhBadgeDotEvents,
|
|
379
|
+
defineCustomElement: defineBhBadgeDot
|
|
380
|
+
})
|
|
381
|
+
: /*@__PURE__*/ createSSRComponent<BhBadgeDotElement, BhBadgeDotEvents>({
|
|
382
|
+
tagName: 'bh-badge-dot',
|
|
383
|
+
properties: {
|
|
384
|
+
size: 'size',
|
|
385
|
+
color: 'color',
|
|
386
|
+
outline: 'outline'
|
|
387
|
+
},
|
|
388
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
389
|
+
});
|
|
282
390
|
|
|
283
391
|
type BhBarChartEvents = NonNullable<unknown>;
|
|
284
392
|
|
|
285
|
-
export const BhBarChart: StencilReactComponent<BhBarChartElement, BhBarChartEvents> =
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
393
|
+
export const BhBarChart: StencilReactComponent<BhBarChartElement, BhBarChartEvents> = typeof window !== 'undefined'
|
|
394
|
+
? /*@__PURE__*/ createComponent<BhBarChartElement, BhBarChartEvents>({
|
|
395
|
+
tagName: 'bh-bar-chart',
|
|
396
|
+
elementClass: BhBarChartElement,
|
|
397
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
398
|
+
react: React,
|
|
399
|
+
events: {} as BhBarChartEvents,
|
|
400
|
+
defineCustomElement: defineBhBarChart
|
|
401
|
+
})
|
|
402
|
+
: /*@__PURE__*/ createSSRComponent<BhBarChartElement, BhBarChartEvents>({
|
|
403
|
+
tagName: 'bh-bar-chart',
|
|
404
|
+
properties: {
|
|
405
|
+
type: 'type',
|
|
406
|
+
orientation: 'orientation',
|
|
407
|
+
animated: 'animated',
|
|
408
|
+
maxHeight: 'max-height',
|
|
409
|
+
maxWidth: 'max-width'
|
|
410
|
+
},
|
|
411
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
412
|
+
});
|
|
293
413
|
|
|
294
414
|
type BhBreadcrumbsEvents = {
|
|
295
415
|
onBhItemClick: EventName<BhBreadcrumbsCustomEvent<BreadcrumbItem>>,
|
|
296
416
|
onBhNavigate: EventName<CustomEvent<string>>
|
|
297
417
|
};
|
|
298
418
|
|
|
299
|
-
export const BhBreadcrumbs: StencilReactComponent<BhBreadcrumbsElement, BhBreadcrumbsEvents> =
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
419
|
+
export const BhBreadcrumbs: StencilReactComponent<BhBreadcrumbsElement, BhBreadcrumbsEvents> = typeof window !== 'undefined'
|
|
420
|
+
? /*@__PURE__*/ createComponent<BhBreadcrumbsElement, BhBreadcrumbsEvents>({
|
|
421
|
+
tagName: 'bh-breadcrumbs',
|
|
422
|
+
elementClass: BhBreadcrumbsElement,
|
|
423
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
424
|
+
react: React,
|
|
425
|
+
events: {
|
|
426
|
+
onBhItemClick: 'bhItemClick',
|
|
427
|
+
onBhNavigate: 'bhNavigate'
|
|
428
|
+
} as BhBreadcrumbsEvents,
|
|
429
|
+
defineCustomElement: defineBhBreadcrumbs
|
|
430
|
+
})
|
|
431
|
+
: /*@__PURE__*/ createSSRComponent<BhBreadcrumbsElement, BhBreadcrumbsEvents>({
|
|
432
|
+
tagName: 'bh-breadcrumbs',
|
|
433
|
+
properties: {
|
|
434
|
+
items: 'items',
|
|
435
|
+
separator: 'separator',
|
|
436
|
+
showHome: 'show-home',
|
|
437
|
+
maxVisibleItems: 'max-visible-items'
|
|
438
|
+
},
|
|
439
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
440
|
+
});
|
|
310
441
|
|
|
311
442
|
type BhButtonEvents = { onBhClick: EventName<BhButtonCustomEvent<MouseEvent>> };
|
|
312
443
|
|
|
313
|
-
export const BhButton: StencilReactComponent<BhButtonElement, BhButtonEvents> =
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
444
|
+
export const BhButton: StencilReactComponent<BhButtonElement, BhButtonEvents> = typeof window !== 'undefined'
|
|
445
|
+
? /*@__PURE__*/ createComponent<BhButtonElement, BhButtonEvents>({
|
|
446
|
+
tagName: 'bh-button',
|
|
447
|
+
elementClass: BhButtonElement,
|
|
448
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
449
|
+
react: React,
|
|
450
|
+
events: { onBhClick: 'bhClick' } as BhButtonEvents,
|
|
451
|
+
defineCustomElement: defineBhButton
|
|
452
|
+
})
|
|
453
|
+
: /*@__PURE__*/ createSSRComponent<BhButtonElement, BhButtonEvents>({
|
|
454
|
+
tagName: 'bh-button',
|
|
455
|
+
properties: {
|
|
456
|
+
hierarchy: 'hierarchy',
|
|
457
|
+
kind: 'kind',
|
|
458
|
+
icon: 'icon',
|
|
459
|
+
size: 'size',
|
|
460
|
+
label: 'label',
|
|
461
|
+
iconName: 'icon-name',
|
|
462
|
+
disabled: 'disabled',
|
|
463
|
+
loading: 'loading',
|
|
464
|
+
type: 'type'
|
|
465
|
+
},
|
|
466
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
467
|
+
});
|
|
321
468
|
|
|
322
469
|
type BhButtonIconEvents = { onBhClick: EventName<BhButtonIconCustomEvent<MouseEvent>> };
|
|
323
470
|
|
|
324
|
-
export const BhButtonIcon: StencilReactComponent<BhButtonIconElement, BhButtonIconEvents> =
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
471
|
+
export const BhButtonIcon: StencilReactComponent<BhButtonIconElement, BhButtonIconEvents> = typeof window !== 'undefined'
|
|
472
|
+
? /*@__PURE__*/ createComponent<BhButtonIconElement, BhButtonIconEvents>({
|
|
473
|
+
tagName: 'bh-button-icon',
|
|
474
|
+
elementClass: BhButtonIconElement,
|
|
475
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
476
|
+
react: React,
|
|
477
|
+
events: { onBhClick: 'bhClick' } as BhButtonIconEvents,
|
|
478
|
+
defineCustomElement: defineBhButtonIcon
|
|
479
|
+
})
|
|
480
|
+
: /*@__PURE__*/ createSSRComponent<BhButtonIconElement, BhButtonIconEvents>({
|
|
481
|
+
tagName: 'bh-button-icon',
|
|
482
|
+
properties: {
|
|
483
|
+
hierarchy: 'hierarchy',
|
|
484
|
+
size: 'size',
|
|
485
|
+
iconName: 'icon-name',
|
|
486
|
+
disabled: 'disabled',
|
|
487
|
+
loading: 'loading',
|
|
488
|
+
type: 'type',
|
|
489
|
+
ariaLabel: 'aria-label'
|
|
490
|
+
},
|
|
491
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
492
|
+
});
|
|
332
493
|
|
|
333
494
|
type BhCardEvents = NonNullable<unknown>;
|
|
334
495
|
|
|
335
|
-
export const BhCard: StencilReactComponent<BhCardElement, BhCardEvents> =
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
496
|
+
export const BhCard: StencilReactComponent<BhCardElement, BhCardEvents> = typeof window !== 'undefined'
|
|
497
|
+
? /*@__PURE__*/ createComponent<BhCardElement, BhCardEvents>({
|
|
498
|
+
tagName: 'bh-card',
|
|
499
|
+
elementClass: BhCardElement,
|
|
500
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
501
|
+
react: React,
|
|
502
|
+
events: {} as BhCardEvents,
|
|
503
|
+
defineCustomElement: defineBhCard
|
|
504
|
+
})
|
|
505
|
+
: /*@__PURE__*/ createSSRComponent<BhCardElement, BhCardEvents>({
|
|
506
|
+
tagName: 'bh-card',
|
|
507
|
+
properties: {
|
|
508
|
+
showHeader: 'show-header',
|
|
509
|
+
showFooter: 'show-footer',
|
|
510
|
+
contentMinHeight: 'content-min-height',
|
|
511
|
+
placeholderText: 'placeholder-text'
|
|
512
|
+
},
|
|
513
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
514
|
+
});
|
|
343
515
|
|
|
344
516
|
type BhCardFooterEvents = NonNullable<unknown>;
|
|
345
517
|
|
|
346
|
-
export const BhCardFooter: StencilReactComponent<BhCardFooterElement, BhCardFooterEvents> =
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
518
|
+
export const BhCardFooter: StencilReactComponent<BhCardFooterElement, BhCardFooterEvents> = typeof window !== 'undefined'
|
|
519
|
+
? /*@__PURE__*/ createComponent<BhCardFooterElement, BhCardFooterEvents>({
|
|
520
|
+
tagName: 'bh-card-footer',
|
|
521
|
+
elementClass: BhCardFooterElement,
|
|
522
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
523
|
+
react: React,
|
|
524
|
+
events: {} as BhCardFooterEvents,
|
|
525
|
+
defineCustomElement: defineBhCardFooter
|
|
526
|
+
})
|
|
527
|
+
: /*@__PURE__*/ createSSRComponent<BhCardFooterElement, BhCardFooterEvents>({
|
|
528
|
+
tagName: 'bh-card-footer',
|
|
529
|
+
properties: {
|
|
530
|
+
showDivider: 'show-divider',
|
|
531
|
+
alignment: 'alignment'
|
|
532
|
+
},
|
|
533
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
534
|
+
});
|
|
354
535
|
|
|
355
536
|
type BhCardHeaderEvents = { onBhDropdownClick: EventName<CustomEvent<void>> };
|
|
356
537
|
|
|
357
|
-
export const BhCardHeader: StencilReactComponent<BhCardHeaderElement, BhCardHeaderEvents> =
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
538
|
+
export const BhCardHeader: StencilReactComponent<BhCardHeaderElement, BhCardHeaderEvents> = typeof window !== 'undefined'
|
|
539
|
+
? /*@__PURE__*/ createComponent<BhCardHeaderElement, BhCardHeaderEvents>({
|
|
540
|
+
tagName: 'bh-card-header',
|
|
541
|
+
elementClass: BhCardHeaderElement,
|
|
542
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
543
|
+
react: React,
|
|
544
|
+
events: { onBhDropdownClick: 'bhDropdownClick' } as BhCardHeaderEvents,
|
|
545
|
+
defineCustomElement: defineBhCardHeader
|
|
546
|
+
})
|
|
547
|
+
: /*@__PURE__*/ createSSRComponent<BhCardHeaderElement, BhCardHeaderEvents>({
|
|
548
|
+
tagName: 'bh-card-header',
|
|
549
|
+
properties: {
|
|
550
|
+
showFeaturedIcon: 'show-featured-icon',
|
|
551
|
+
featuredIcon: 'featured-icon',
|
|
552
|
+
featuredIconStyle: 'featured-icon-style',
|
|
553
|
+
featuredIconColor: 'featured-icon-color',
|
|
554
|
+
showTitle: 'show-title',
|
|
555
|
+
headerTitle: 'header-title',
|
|
556
|
+
showBadge: 'show-badge',
|
|
557
|
+
badgeText: 'badge-text',
|
|
558
|
+
showSupportingText: 'show-supporting-text',
|
|
559
|
+
supportingText: 'supporting-text',
|
|
560
|
+
showDropdown: 'show-dropdown',
|
|
561
|
+
showDivider: 'show-divider'
|
|
562
|
+
},
|
|
563
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
564
|
+
});
|
|
365
565
|
|
|
366
566
|
type BhChartTooltipEvents = NonNullable<unknown>;
|
|
367
567
|
|
|
368
|
-
export const BhChartTooltip: StencilReactComponent<BhChartTooltipElement, BhChartTooltipEvents> =
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
568
|
+
export const BhChartTooltip: StencilReactComponent<BhChartTooltipElement, BhChartTooltipEvents> = typeof window !== 'undefined'
|
|
569
|
+
? /*@__PURE__*/ createComponent<BhChartTooltipElement, BhChartTooltipEvents>({
|
|
570
|
+
tagName: 'bh-chart-tooltip',
|
|
571
|
+
elementClass: BhChartTooltipElement,
|
|
572
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
573
|
+
react: React,
|
|
574
|
+
events: {} as BhChartTooltipEvents,
|
|
575
|
+
defineCustomElement: defineBhChartTooltip
|
|
576
|
+
})
|
|
577
|
+
: /*@__PURE__*/ createSSRComponent<BhChartTooltipElement, BhChartTooltipEvents>({
|
|
578
|
+
tagName: 'bh-chart-tooltip',
|
|
579
|
+
properties: {
|
|
580
|
+
visible: 'visible',
|
|
581
|
+
x: 'x',
|
|
582
|
+
y: 'y',
|
|
583
|
+
header: 'header',
|
|
584
|
+
total: 'total',
|
|
585
|
+
showTotal: 'show-total',
|
|
586
|
+
storybookMode: 'storybook-mode'
|
|
587
|
+
},
|
|
588
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
589
|
+
});
|
|
376
590
|
|
|
377
591
|
type BhCheckboxEvents = { onBhChange: EventName<CustomEvent<boolean>> };
|
|
378
592
|
|
|
379
|
-
export const BhCheckbox: StencilReactComponent<BhCheckboxElement, BhCheckboxEvents> =
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
593
|
+
export const BhCheckbox: StencilReactComponent<BhCheckboxElement, BhCheckboxEvents> = typeof window !== 'undefined'
|
|
594
|
+
? /*@__PURE__*/ createComponent<BhCheckboxElement, BhCheckboxEvents>({
|
|
595
|
+
tagName: 'bh-checkbox',
|
|
596
|
+
elementClass: BhCheckboxElement,
|
|
597
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
598
|
+
react: React,
|
|
599
|
+
events: { onBhChange: 'bhChange' } as BhCheckboxEvents,
|
|
600
|
+
defineCustomElement: defineBhCheckbox
|
|
601
|
+
})
|
|
602
|
+
: /*@__PURE__*/ createSSRComponent<BhCheckboxElement, BhCheckboxEvents>({
|
|
603
|
+
tagName: 'bh-checkbox',
|
|
604
|
+
properties: {
|
|
605
|
+
size: 'size',
|
|
606
|
+
checked: 'checked',
|
|
607
|
+
indeterminate: 'indeterminate',
|
|
608
|
+
disabled: 'disabled',
|
|
609
|
+
name: 'name',
|
|
610
|
+
value: 'value',
|
|
611
|
+
label: 'label',
|
|
612
|
+
supportingText: 'supporting-text',
|
|
613
|
+
required: 'required',
|
|
614
|
+
defaultChecked: 'default-checked'
|
|
615
|
+
},
|
|
616
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
617
|
+
});
|
|
387
618
|
|
|
388
619
|
type BhCheckboxGroupEvents = { onBhChange: EventName<CustomEvent<string | string[]>> };
|
|
389
620
|
|
|
390
|
-
export const BhCheckboxGroup: StencilReactComponent<BhCheckboxGroupElement, BhCheckboxGroupEvents> =
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
621
|
+
export const BhCheckboxGroup: StencilReactComponent<BhCheckboxGroupElement, BhCheckboxGroupEvents> = typeof window !== 'undefined'
|
|
622
|
+
? /*@__PURE__*/ createComponent<BhCheckboxGroupElement, BhCheckboxGroupEvents>({
|
|
623
|
+
tagName: 'bh-checkbox-group',
|
|
624
|
+
elementClass: BhCheckboxGroupElement,
|
|
625
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
626
|
+
react: React,
|
|
627
|
+
events: { onBhChange: 'bhChange' } as BhCheckboxGroupEvents,
|
|
628
|
+
defineCustomElement: defineBhCheckboxGroup
|
|
629
|
+
})
|
|
630
|
+
: /*@__PURE__*/ createSSRComponent<BhCheckboxGroupElement, BhCheckboxGroupEvents>({
|
|
631
|
+
tagName: 'bh-checkbox-group',
|
|
632
|
+
properties: {
|
|
633
|
+
type: 'type',
|
|
634
|
+
name: 'name',
|
|
635
|
+
value: 'value',
|
|
636
|
+
disabled: 'disabled'
|
|
637
|
+
},
|
|
638
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
639
|
+
});
|
|
398
640
|
|
|
399
641
|
type BhCheckboxGroupItemEvents = { onBhItemChange: EventName<CustomEvent<{ value: string; checked: boolean }>> };
|
|
400
642
|
|
|
401
|
-
export const BhCheckboxGroupItem: StencilReactComponent<BhCheckboxGroupItemElement, BhCheckboxGroupItemEvents> =
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
react: React,
|
|
428
|
-
events: { onBhButtonClick: 'bhButtonClick' } as BhContainerFooterEvents,
|
|
429
|
-
defineCustomElement: defineBhContainerFooter
|
|
430
|
-
});
|
|
643
|
+
export const BhCheckboxGroupItem: StencilReactComponent<BhCheckboxGroupItemElement, BhCheckboxGroupItemEvents> = typeof window !== 'undefined'
|
|
644
|
+
? /*@__PURE__*/ createComponent<BhCheckboxGroupItemElement, BhCheckboxGroupItemEvents>({
|
|
645
|
+
tagName: 'bh-checkbox-group-item',
|
|
646
|
+
elementClass: BhCheckboxGroupItemElement,
|
|
647
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
648
|
+
react: React,
|
|
649
|
+
events: { onBhItemChange: 'bhItemChange' } as BhCheckboxGroupItemEvents,
|
|
650
|
+
defineCustomElement: defineBhCheckboxGroupItem
|
|
651
|
+
})
|
|
652
|
+
: /*@__PURE__*/ createSSRComponent<BhCheckboxGroupItemElement, BhCheckboxGroupItemEvents>({
|
|
653
|
+
tagName: 'bh-checkbox-group-item',
|
|
654
|
+
properties: {
|
|
655
|
+
type: 'type',
|
|
656
|
+
size: 'size',
|
|
657
|
+
value: 'value',
|
|
658
|
+
checked: 'checked',
|
|
659
|
+
selected: 'selected',
|
|
660
|
+
disabled: 'disabled',
|
|
661
|
+
icon: 'icon',
|
|
662
|
+
itemTitle: 'item-title',
|
|
663
|
+
subtitle: 'subtitle',
|
|
664
|
+
description: 'description',
|
|
665
|
+
name: 'name'
|
|
666
|
+
},
|
|
667
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
668
|
+
});
|
|
431
669
|
|
|
432
670
|
type BhDataGridEvents = {
|
|
433
671
|
onBhSortChange: EventName<BhDataGridCustomEvent<DataGridSortChangeEvent>>,
|
|
@@ -445,45 +683,97 @@ type BhDataGridEvents = {
|
|
|
445
683
|
onBhValidationError: EventName<BhDataGridCustomEvent<DataGridValidationErrorEvent>>
|
|
446
684
|
};
|
|
447
685
|
|
|
448
|
-
export const BhDataGrid: StencilReactComponent<BhDataGridElement, BhDataGridEvents> =
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
686
|
+
export const BhDataGrid: StencilReactComponent<BhDataGridElement, BhDataGridEvents> = typeof window !== 'undefined'
|
|
687
|
+
? /*@__PURE__*/ createComponent<BhDataGridElement, BhDataGridEvents>({
|
|
688
|
+
tagName: 'bh-data-grid',
|
|
689
|
+
elementClass: BhDataGridElement,
|
|
690
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
691
|
+
react: React,
|
|
692
|
+
events: {
|
|
693
|
+
onBhSortChange: 'bhSortChange',
|
|
694
|
+
onBhFilterChange: 'bhFilterChange',
|
|
695
|
+
onBhSelectionChange: 'bhSelectionChange',
|
|
696
|
+
onBhPageChange: 'bhPageChange',
|
|
697
|
+
onBhRowClick: 'bhRowClick',
|
|
698
|
+
onBhCellClick: 'bhCellClick',
|
|
699
|
+
onBhExpandChange: 'bhExpandChange',
|
|
700
|
+
onBhGroupToggle: 'bhGroupToggle',
|
|
701
|
+
onBhEditStart: 'bhEditStart',
|
|
702
|
+
onBhEditCancel: 'bhEditCancel',
|
|
703
|
+
onBhEditSave: 'bhEditSave',
|
|
704
|
+
onBhCellChange: 'bhCellChange',
|
|
705
|
+
onBhValidationError: 'bhValidationError'
|
|
706
|
+
} as BhDataGridEvents,
|
|
707
|
+
defineCustomElement: defineBhDataGrid
|
|
708
|
+
})
|
|
709
|
+
: /*@__PURE__*/ createSSRComponent<BhDataGridElement, BhDataGridEvents>({
|
|
710
|
+
tagName: 'bh-data-grid',
|
|
711
|
+
properties: {
|
|
712
|
+
size: 'size',
|
|
713
|
+
striped: 'striped',
|
|
714
|
+
bordered: 'bordered',
|
|
715
|
+
stickyHeader: 'sticky-header',
|
|
716
|
+
maxHeight: 'max-height',
|
|
717
|
+
caption: 'caption',
|
|
718
|
+
captionPosition: 'caption-position',
|
|
719
|
+
emptyTitle: 'empty-title',
|
|
720
|
+
emptyDescription: 'empty-description',
|
|
721
|
+
loading: 'loading',
|
|
722
|
+
loadingType: 'loading-type',
|
|
723
|
+
skeletonRowCount: 'skeleton-row-count',
|
|
724
|
+
enableSorting: 'enable-sorting',
|
|
725
|
+
enableMultiSort: 'enable-multi-sort',
|
|
726
|
+
enableFiltering: 'enable-filtering',
|
|
727
|
+
enableGlobalFilter: 'enable-global-filter',
|
|
728
|
+
showFilterRow: 'show-filter-row',
|
|
729
|
+
globalFilterPlaceholder: 'global-filter-placeholder',
|
|
730
|
+
globalFilter: 'global-filter',
|
|
731
|
+
selectionMode: 'selection-mode',
|
|
732
|
+
enablePagination: 'enable-pagination',
|
|
733
|
+
page: 'page',
|
|
734
|
+
pageSize: 'page-size',
|
|
735
|
+
enableExpansion: 'enable-expansion',
|
|
736
|
+
enableGrouping: 'enable-grouping',
|
|
737
|
+
enableEditing: 'enable-editing',
|
|
738
|
+
editMode: 'edit-mode',
|
|
739
|
+
showEditActions: 'show-edit-actions'
|
|
740
|
+
},
|
|
741
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
742
|
+
});
|
|
470
743
|
|
|
471
744
|
type BhDatePickerEvents = {
|
|
472
745
|
onBhChange: EventName<BhDatePickerCustomEvent<SelectedDate | null>>,
|
|
473
746
|
onBhDateSelect: EventName<BhDatePickerCustomEvent<SelectedDate | null>>
|
|
474
747
|
};
|
|
475
748
|
|
|
476
|
-
export const BhDatePicker: StencilReactComponent<BhDatePickerElement, BhDatePickerEvents> =
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
749
|
+
export const BhDatePicker: StencilReactComponent<BhDatePickerElement, BhDatePickerEvents> = typeof window !== 'undefined'
|
|
750
|
+
? /*@__PURE__*/ createComponent<BhDatePickerElement, BhDatePickerEvents>({
|
|
751
|
+
tagName: 'bh-date-picker',
|
|
752
|
+
elementClass: BhDatePickerElement,
|
|
753
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
754
|
+
react: React,
|
|
755
|
+
events: {
|
|
756
|
+
onBhChange: 'bhChange',
|
|
757
|
+
onBhDateSelect: 'bhDateSelect'
|
|
758
|
+
} as BhDatePickerEvents,
|
|
759
|
+
defineCustomElement: defineBhDatePicker
|
|
760
|
+
})
|
|
761
|
+
: /*@__PURE__*/ createSSRComponent<BhDatePickerElement, BhDatePickerEvents>({
|
|
762
|
+
tagName: 'bh-date-picker',
|
|
763
|
+
properties: {
|
|
764
|
+
variant: 'variant',
|
|
765
|
+
minYear: 'min-year',
|
|
766
|
+
maxYear: 'max-year',
|
|
767
|
+
disabled: 'disabled',
|
|
768
|
+
label: 'label',
|
|
769
|
+
placeholder: 'placeholder',
|
|
770
|
+
inputWidth: 'input-width',
|
|
771
|
+
showLabel: 'show-label',
|
|
772
|
+
showFooter: 'show-footer',
|
|
773
|
+
showOtherMonthDays: 'show-other-month-days'
|
|
774
|
+
},
|
|
775
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
776
|
+
});
|
|
487
777
|
|
|
488
778
|
type BhDatePickerContentEvents = {
|
|
489
779
|
onBhChange: EventName<BhDatePickerContentCustomEvent<SelectedDate | null>>,
|
|
@@ -492,114 +782,231 @@ type BhDatePickerContentEvents = {
|
|
|
492
782
|
onBhMonthYearChange: EventName<CustomEvent<{ month: number; year: number }>>
|
|
493
783
|
};
|
|
494
784
|
|
|
495
|
-
export const BhDatePickerContent: StencilReactComponent<BhDatePickerContentElement, BhDatePickerContentEvents> =
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
785
|
+
export const BhDatePickerContent: StencilReactComponent<BhDatePickerContentElement, BhDatePickerContentEvents> = typeof window !== 'undefined'
|
|
786
|
+
? /*@__PURE__*/ createComponent<BhDatePickerContentElement, BhDatePickerContentEvents>({
|
|
787
|
+
tagName: 'bh-date-picker-content',
|
|
788
|
+
elementClass: BhDatePickerContentElement,
|
|
789
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
790
|
+
react: React,
|
|
791
|
+
events: {
|
|
792
|
+
onBhChange: 'bhChange',
|
|
793
|
+
onBhDateSelect: 'bhDateSelect',
|
|
794
|
+
onBhMonthChange: 'bhMonthChange',
|
|
795
|
+
onBhMonthYearChange: 'bhMonthYearChange'
|
|
796
|
+
} as BhDatePickerContentEvents,
|
|
797
|
+
defineCustomElement: defineBhDatePickerContent
|
|
798
|
+
})
|
|
799
|
+
: /*@__PURE__*/ createSSRComponent<BhDatePickerContentElement, BhDatePickerContentEvents>({
|
|
800
|
+
tagName: 'bh-date-picker-content',
|
|
801
|
+
properties: {
|
|
802
|
+
minYear: 'min-year',
|
|
803
|
+
maxYear: 'max-year',
|
|
804
|
+
disabled: 'disabled',
|
|
805
|
+
initialMonth: 'initial-month',
|
|
806
|
+
initialYear: 'initial-year',
|
|
807
|
+
displayMonth: 'display-month',
|
|
808
|
+
displayYear: 'display-year',
|
|
809
|
+
showOtherMonthDays: 'show-other-month-days'
|
|
810
|
+
},
|
|
811
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
812
|
+
});
|
|
508
813
|
|
|
509
814
|
type BhDateRangePickerEvents = {
|
|
510
815
|
onBhChange: EventName<BhDateRangePickerCustomEvent<SelectedDateRange | null>>,
|
|
511
816
|
onBhDateRangeSelect: EventName<BhDateRangePickerCustomEvent<SelectedDateRange | null>>
|
|
512
817
|
};
|
|
513
818
|
|
|
514
|
-
export const BhDateRangePicker: StencilReactComponent<BhDateRangePickerElement, BhDateRangePickerEvents> =
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
819
|
+
export const BhDateRangePicker: StencilReactComponent<BhDateRangePickerElement, BhDateRangePickerEvents> = typeof window !== 'undefined'
|
|
820
|
+
? /*@__PURE__*/ createComponent<BhDateRangePickerElement, BhDateRangePickerEvents>({
|
|
821
|
+
tagName: 'bh-date-range-picker',
|
|
822
|
+
elementClass: BhDateRangePickerElement,
|
|
823
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
824
|
+
react: React,
|
|
825
|
+
events: {
|
|
826
|
+
onBhChange: 'bhChange',
|
|
827
|
+
onBhDateRangeSelect: 'bhDateRangeSelect'
|
|
828
|
+
} as BhDateRangePickerEvents,
|
|
829
|
+
defineCustomElement: defineBhDateRangePicker
|
|
830
|
+
})
|
|
831
|
+
: /*@__PURE__*/ createSSRComponent<BhDateRangePickerElement, BhDateRangePickerEvents>({
|
|
832
|
+
tagName: 'bh-date-range-picker',
|
|
833
|
+
properties: {
|
|
834
|
+
variant: 'variant',
|
|
835
|
+
minYear: 'min-year',
|
|
836
|
+
maxYear: 'max-year',
|
|
837
|
+
disabled: 'disabled',
|
|
838
|
+
startLabel: 'start-label',
|
|
839
|
+
endLabel: 'end-label',
|
|
840
|
+
startPlaceholder: 'start-placeholder',
|
|
841
|
+
endPlaceholder: 'end-placeholder',
|
|
842
|
+
inputWidth: 'input-width',
|
|
843
|
+
showLabel: 'show-label',
|
|
844
|
+
showFooter: 'show-footer',
|
|
845
|
+
showOtherMonthDays: 'show-other-month-days'
|
|
846
|
+
},
|
|
847
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
848
|
+
});
|
|
525
849
|
|
|
526
850
|
type BhDateRangePickerContentEvents = {
|
|
527
851
|
onBhChange: EventName<BhDateRangePickerContentCustomEvent<SelectedDateRange | null>>,
|
|
528
852
|
onBhDateRangeSelect: EventName<BhDateRangePickerContentCustomEvent<SelectedDateRange | null>>
|
|
529
853
|
};
|
|
530
854
|
|
|
531
|
-
export const BhDateRangePickerContent: StencilReactComponent<BhDateRangePickerContentElement, BhDateRangePickerContentEvents> =
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
855
|
+
export const BhDateRangePickerContent: StencilReactComponent<BhDateRangePickerContentElement, BhDateRangePickerContentEvents> = typeof window !== 'undefined'
|
|
856
|
+
? /*@__PURE__*/ createComponent<BhDateRangePickerContentElement, BhDateRangePickerContentEvents>({
|
|
857
|
+
tagName: 'bh-date-range-picker-content',
|
|
858
|
+
elementClass: BhDateRangePickerContentElement,
|
|
859
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
860
|
+
react: React,
|
|
861
|
+
events: {
|
|
862
|
+
onBhChange: 'bhChange',
|
|
863
|
+
onBhDateRangeSelect: 'bhDateRangeSelect'
|
|
864
|
+
} as BhDateRangePickerContentEvents,
|
|
865
|
+
defineCustomElement: defineBhDateRangePickerContent
|
|
866
|
+
})
|
|
867
|
+
: /*@__PURE__*/ createSSRComponent<BhDateRangePickerContentElement, BhDateRangePickerContentEvents>({
|
|
868
|
+
tagName: 'bh-date-range-picker-content',
|
|
869
|
+
properties: {
|
|
870
|
+
minYear: 'min-year',
|
|
871
|
+
maxYear: 'max-year',
|
|
872
|
+
disabled: 'disabled',
|
|
873
|
+
showOtherMonthDays: 'show-other-month-days'
|
|
874
|
+
},
|
|
875
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
876
|
+
});
|
|
542
877
|
|
|
543
878
|
type BhDropdownEvents = { onBhItemClick: EventName<BhDropdownCustomEvent<DropdownMenuItem>> };
|
|
544
879
|
|
|
545
|
-
export const BhDropdown: StencilReactComponent<BhDropdownElement, BhDropdownEvents> =
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
880
|
+
export const BhDropdown: StencilReactComponent<BhDropdownElement, BhDropdownEvents> = typeof window !== 'undefined'
|
|
881
|
+
? /*@__PURE__*/ createComponent<BhDropdownElement, BhDropdownEvents>({
|
|
882
|
+
tagName: 'bh-dropdown',
|
|
883
|
+
elementClass: BhDropdownElement,
|
|
884
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
885
|
+
react: React,
|
|
886
|
+
events: { onBhItemClick: 'bhItemClick' } as BhDropdownEvents,
|
|
887
|
+
defineCustomElement: defineBhDropdown
|
|
888
|
+
})
|
|
889
|
+
: /*@__PURE__*/ createSSRComponent<BhDropdownElement, BhDropdownEvents>({
|
|
890
|
+
tagName: 'bh-dropdown',
|
|
891
|
+
properties: {
|
|
892
|
+
size: 'size',
|
|
893
|
+
state: 'state',
|
|
894
|
+
variant: 'variant',
|
|
895
|
+
label: 'label',
|
|
896
|
+
iconName: 'icon-name',
|
|
897
|
+
disabled: 'disabled',
|
|
898
|
+
menuItems: 'menu-items',
|
|
899
|
+
header: 'header',
|
|
900
|
+
avatarSrc: 'avatar-src',
|
|
901
|
+
avatarAlt: 'avatar-alt',
|
|
902
|
+
avatarSize: 'avatar-size',
|
|
903
|
+
avatarName: 'avatar-name',
|
|
904
|
+
avatarEmail: 'avatar-email',
|
|
905
|
+
showIcons: 'show-icons'
|
|
906
|
+
},
|
|
907
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
908
|
+
});
|
|
553
909
|
|
|
554
910
|
type BhDropdownMenuEvents = { onBhItemClick: EventName<BhDropdownMenuCustomEvent<DropdownMenuItem>> };
|
|
555
911
|
|
|
556
|
-
export const BhDropdownMenu: StencilReactComponent<BhDropdownMenuElement, BhDropdownMenuEvents> =
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
912
|
+
export const BhDropdownMenu: StencilReactComponent<BhDropdownMenuElement, BhDropdownMenuEvents> = typeof window !== 'undefined'
|
|
913
|
+
? /*@__PURE__*/ createComponent<BhDropdownMenuElement, BhDropdownMenuEvents>({
|
|
914
|
+
tagName: 'bh-dropdown-menu',
|
|
915
|
+
elementClass: BhDropdownMenuElement,
|
|
916
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
917
|
+
react: React,
|
|
918
|
+
events: { onBhItemClick: 'bhItemClick' } as BhDropdownMenuEvents,
|
|
919
|
+
defineCustomElement: defineBhDropdownMenu
|
|
920
|
+
})
|
|
921
|
+
: /*@__PURE__*/ createSSRComponent<BhDropdownMenuElement, BhDropdownMenuEvents>({
|
|
922
|
+
tagName: 'bh-dropdown-menu',
|
|
923
|
+
properties: {
|
|
924
|
+
header: 'header',
|
|
925
|
+
menuItems: 'menu-items',
|
|
926
|
+
visible: 'visible',
|
|
927
|
+
showIcons: 'show-icons',
|
|
928
|
+
scrollable: 'scrollable'
|
|
929
|
+
},
|
|
930
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
931
|
+
});
|
|
564
932
|
|
|
565
933
|
type BhEmptyStateEvents = {
|
|
566
934
|
onBhPrimaryAction: EventName<CustomEvent<void>>,
|
|
567
935
|
onBhSecondaryAction: EventName<CustomEvent<void>>
|
|
568
936
|
};
|
|
569
937
|
|
|
570
|
-
export const BhEmptyState: StencilReactComponent<BhEmptyStateElement, BhEmptyStateEvents> =
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
938
|
+
export const BhEmptyState: StencilReactComponent<BhEmptyStateElement, BhEmptyStateEvents> = typeof window !== 'undefined'
|
|
939
|
+
? /*@__PURE__*/ createComponent<BhEmptyStateElement, BhEmptyStateEvents>({
|
|
940
|
+
tagName: 'bh-empty-state',
|
|
941
|
+
elementClass: BhEmptyStateElement,
|
|
942
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
943
|
+
react: React,
|
|
944
|
+
events: {
|
|
945
|
+
onBhPrimaryAction: 'bhPrimaryAction',
|
|
946
|
+
onBhSecondaryAction: 'bhSecondaryAction'
|
|
947
|
+
} as BhEmptyStateEvents,
|
|
948
|
+
defineCustomElement: defineBhEmptyState
|
|
949
|
+
})
|
|
950
|
+
: /*@__PURE__*/ createSSRComponent<BhEmptyStateElement, BhEmptyStateEvents>({
|
|
951
|
+
tagName: 'bh-empty-state',
|
|
952
|
+
properties: {
|
|
953
|
+
emptyTitle: 'empty-title',
|
|
954
|
+
description: 'description',
|
|
955
|
+
illustrationSize: 'illustration-size',
|
|
956
|
+
illustrationPath: 'illustration-path',
|
|
957
|
+
primaryActionText: 'primary-action-text',
|
|
958
|
+
primaryActionIcon: 'primary-action-icon',
|
|
959
|
+
secondaryActionText: 'secondary-action-text',
|
|
960
|
+
secondaryActionIcon: 'secondary-action-icon',
|
|
961
|
+
maxWidth: 'max-width'
|
|
962
|
+
},
|
|
963
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
964
|
+
});
|
|
581
965
|
|
|
582
966
|
type BhFeaturedIconEvents = NonNullable<unknown>;
|
|
583
967
|
|
|
584
|
-
export const BhFeaturedIcon: StencilReactComponent<BhFeaturedIconElement, BhFeaturedIconEvents> =
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
968
|
+
export const BhFeaturedIcon: StencilReactComponent<BhFeaturedIconElement, BhFeaturedIconEvents> = typeof window !== 'undefined'
|
|
969
|
+
? /*@__PURE__*/ createComponent<BhFeaturedIconElement, BhFeaturedIconEvents>({
|
|
970
|
+
tagName: 'bh-featured-icon',
|
|
971
|
+
elementClass: BhFeaturedIconElement,
|
|
972
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
973
|
+
react: React,
|
|
974
|
+
events: {} as BhFeaturedIconEvents,
|
|
975
|
+
defineCustomElement: defineBhFeaturedIcon
|
|
976
|
+
})
|
|
977
|
+
: /*@__PURE__*/ createSSRComponent<BhFeaturedIconElement, BhFeaturedIconEvents>({
|
|
978
|
+
tagName: 'bh-featured-icon',
|
|
979
|
+
properties: {
|
|
980
|
+
size: 'size',
|
|
981
|
+
color: 'color',
|
|
982
|
+
iconStyle: 'icon-style',
|
|
983
|
+
icon: 'icon'
|
|
984
|
+
},
|
|
985
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
986
|
+
});
|
|
592
987
|
|
|
593
988
|
type BhIllustrationsEvents = NonNullable<unknown>;
|
|
594
989
|
|
|
595
|
-
export const BhIllustrations: StencilReactComponent<BhIllustrationsElement, BhIllustrationsEvents> =
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
990
|
+
export const BhIllustrations: StencilReactComponent<BhIllustrationsElement, BhIllustrationsEvents> = typeof window !== 'undefined'
|
|
991
|
+
? /*@__PURE__*/ createComponent<BhIllustrationsElement, BhIllustrationsEvents>({
|
|
992
|
+
tagName: 'bh-illustrations',
|
|
993
|
+
elementClass: BhIllustrationsElement,
|
|
994
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
995
|
+
react: React,
|
|
996
|
+
events: {} as BhIllustrationsEvents,
|
|
997
|
+
defineCustomElement: defineBhIllustrations
|
|
998
|
+
})
|
|
999
|
+
: /*@__PURE__*/ createSSRComponent<BhIllustrationsElement, BhIllustrationsEvents>({
|
|
1000
|
+
tagName: 'bh-illustrations',
|
|
1001
|
+
properties: {
|
|
1002
|
+
size: 'size',
|
|
1003
|
+
illustrationTitle: 'illustration-title',
|
|
1004
|
+
description: 'description',
|
|
1005
|
+
svgPath: 'svg-path',
|
|
1006
|
+
alt: 'alt'
|
|
1007
|
+
},
|
|
1008
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1009
|
+
});
|
|
603
1010
|
|
|
604
1011
|
type BhInputAutocompleteEvents = {
|
|
605
1012
|
onBhChange: EventName<CustomEvent<string>>,
|
|
@@ -610,21 +1017,46 @@ type BhInputAutocompleteEvents = {
|
|
|
610
1017
|
onBhOptionSelect: EventName<BhInputAutocompleteCustomEvent<AutocompleteMenuItem>>
|
|
611
1018
|
};
|
|
612
1019
|
|
|
613
|
-
export const BhInputAutocomplete: StencilReactComponent<BhInputAutocompleteElement, BhInputAutocompleteEvents> =
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
1020
|
+
export const BhInputAutocomplete: StencilReactComponent<BhInputAutocompleteElement, BhInputAutocompleteEvents> = typeof window !== 'undefined'
|
|
1021
|
+
? /*@__PURE__*/ createComponent<BhInputAutocompleteElement, BhInputAutocompleteEvents>({
|
|
1022
|
+
tagName: 'bh-input-autocomplete',
|
|
1023
|
+
elementClass: BhInputAutocompleteElement,
|
|
1024
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1025
|
+
react: React,
|
|
1026
|
+
events: {
|
|
1027
|
+
onBhChange: 'bhChange',
|
|
1028
|
+
onBhSelectedItemsChange: 'bhSelectedItemsChange',
|
|
1029
|
+
onBhFocus: 'bhFocus',
|
|
1030
|
+
onBhBlur: 'bhBlur',
|
|
1031
|
+
onBhHelpClick: 'bhHelpClick',
|
|
1032
|
+
onBhOptionSelect: 'bhOptionSelect'
|
|
1033
|
+
} as BhInputAutocompleteEvents,
|
|
1034
|
+
defineCustomElement: defineBhInputAutocomplete
|
|
1035
|
+
})
|
|
1036
|
+
: /*@__PURE__*/ createSSRComponent<BhInputAutocompleteElement, BhInputAutocompleteEvents>({
|
|
1037
|
+
tagName: 'bh-input-autocomplete',
|
|
1038
|
+
properties: {
|
|
1039
|
+
state: 'state',
|
|
1040
|
+
error: 'error',
|
|
1041
|
+
required: 'required',
|
|
1042
|
+
disabled: 'disabled',
|
|
1043
|
+
showHelpIcon: 'show-help-icon',
|
|
1044
|
+
showLeadingIcon: 'show-leading-icon',
|
|
1045
|
+
showLabel: 'show-label',
|
|
1046
|
+
showHintText: 'show-hint-text',
|
|
1047
|
+
label: 'label',
|
|
1048
|
+
placeholder: 'placeholder',
|
|
1049
|
+
hintText: 'hint-text',
|
|
1050
|
+
leadingIcon: 'leading-icon',
|
|
1051
|
+
helpIconTooltip: 'help-icon-tooltip',
|
|
1052
|
+
value: 'value',
|
|
1053
|
+
width: 'width',
|
|
1054
|
+
maxOptions: 'max-options',
|
|
1055
|
+
multiSelect: 'multi-select',
|
|
1056
|
+
minSearchLength: 'min-search-length'
|
|
1057
|
+
},
|
|
1058
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1059
|
+
});
|
|
628
1060
|
|
|
629
1061
|
type BhInputNumberEvents = {
|
|
630
1062
|
onBhChange: EventName<CustomEvent<number | null>>,
|
|
@@ -633,19 +1065,48 @@ type BhInputNumberEvents = {
|
|
|
633
1065
|
onBhHelpClick: EventName<CustomEvent<void>>
|
|
634
1066
|
};
|
|
635
1067
|
|
|
636
|
-
export const BhInputNumber: StencilReactComponent<BhInputNumberElement, BhInputNumberEvents> =
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
1068
|
+
export const BhInputNumber: StencilReactComponent<BhInputNumberElement, BhInputNumberEvents> = typeof window !== 'undefined'
|
|
1069
|
+
? /*@__PURE__*/ createComponent<BhInputNumberElement, BhInputNumberEvents>({
|
|
1070
|
+
tagName: 'bh-input-number',
|
|
1071
|
+
elementClass: BhInputNumberElement,
|
|
1072
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1073
|
+
react: React,
|
|
1074
|
+
events: {
|
|
1075
|
+
onBhChange: 'bhChange',
|
|
1076
|
+
onBhFocus: 'bhFocus',
|
|
1077
|
+
onBhBlur: 'bhBlur',
|
|
1078
|
+
onBhHelpClick: 'bhHelpClick'
|
|
1079
|
+
} as BhInputNumberEvents,
|
|
1080
|
+
defineCustomElement: defineBhInputNumber
|
|
1081
|
+
})
|
|
1082
|
+
: /*@__PURE__*/ createSSRComponent<BhInputNumberElement, BhInputNumberEvents>({
|
|
1083
|
+
tagName: 'bh-input-number',
|
|
1084
|
+
properties: {
|
|
1085
|
+
error: 'error',
|
|
1086
|
+
required: 'required',
|
|
1087
|
+
disabled: 'disabled',
|
|
1088
|
+
showHelpIcon: 'show-help-icon',
|
|
1089
|
+
showLeadingIcon: 'show-leading-icon',
|
|
1090
|
+
showLabel: 'show-label',
|
|
1091
|
+
showHintText: 'show-hint-text',
|
|
1092
|
+
label: 'label',
|
|
1093
|
+
placeholder: 'placeholder',
|
|
1094
|
+
hintText: 'hint-text',
|
|
1095
|
+
leadingIcon: 'leading-icon',
|
|
1096
|
+
helpIconTooltip: 'help-icon-tooltip',
|
|
1097
|
+
value: 'value',
|
|
1098
|
+
min: 'min',
|
|
1099
|
+
max: 'max',
|
|
1100
|
+
step: 'step',
|
|
1101
|
+
prefixText: 'prefix-text',
|
|
1102
|
+
suffixText: 'suffix-text',
|
|
1103
|
+
width: 'width',
|
|
1104
|
+
name: 'name',
|
|
1105
|
+
defaultValue: 'default-value',
|
|
1106
|
+
validationMessage: 'validation-message'
|
|
1107
|
+
},
|
|
1108
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1109
|
+
});
|
|
649
1110
|
|
|
650
1111
|
type BhInputPasswordEvents = {
|
|
651
1112
|
onBhInput: EventName<CustomEvent<string>>,
|
|
@@ -655,20 +1116,43 @@ type BhInputPasswordEvents = {
|
|
|
655
1116
|
onBhVisibilityToggle: EventName<CustomEvent<boolean>>
|
|
656
1117
|
};
|
|
657
1118
|
|
|
658
|
-
export const BhInputPassword: StencilReactComponent<BhInputPasswordElement, BhInputPasswordEvents> =
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
1119
|
+
export const BhInputPassword: StencilReactComponent<BhInputPasswordElement, BhInputPasswordEvents> = typeof window !== 'undefined'
|
|
1120
|
+
? /*@__PURE__*/ createComponent<BhInputPasswordElement, BhInputPasswordEvents>({
|
|
1121
|
+
tagName: 'bh-input-password',
|
|
1122
|
+
elementClass: BhInputPasswordElement,
|
|
1123
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1124
|
+
react: React,
|
|
1125
|
+
events: {
|
|
1126
|
+
onBhInput: 'bhInput',
|
|
1127
|
+
onBhFocus: 'bhFocus',
|
|
1128
|
+
onBhBlur: 'bhBlur',
|
|
1129
|
+
onBhHelpClick: 'bhHelpClick',
|
|
1130
|
+
onBhVisibilityToggle: 'bhVisibilityToggle'
|
|
1131
|
+
} as BhInputPasswordEvents,
|
|
1132
|
+
defineCustomElement: defineBhInputPassword
|
|
1133
|
+
})
|
|
1134
|
+
: /*@__PURE__*/ createSSRComponent<BhInputPasswordElement, BhInputPasswordEvents>({
|
|
1135
|
+
tagName: 'bh-input-password',
|
|
1136
|
+
properties: {
|
|
1137
|
+
label: 'label',
|
|
1138
|
+
placeholder: 'placeholder',
|
|
1139
|
+
hintText: 'hint-text',
|
|
1140
|
+
showLabel: 'show-label',
|
|
1141
|
+
showHintText: 'show-hint-text',
|
|
1142
|
+
showHelpIcon: 'show-help-icon',
|
|
1143
|
+
showLeadingIcon: 'show-leading-icon',
|
|
1144
|
+
error: 'error',
|
|
1145
|
+
disabled: 'disabled',
|
|
1146
|
+
required: 'required',
|
|
1147
|
+
helpIconTooltip: 'help-icon-tooltip',
|
|
1148
|
+
leadingIcon: 'leading-icon',
|
|
1149
|
+
value: 'value',
|
|
1150
|
+
name: 'name',
|
|
1151
|
+
defaultValue: 'default-value',
|
|
1152
|
+
validationMessage: 'validation-message'
|
|
1153
|
+
},
|
|
1154
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1155
|
+
});
|
|
672
1156
|
|
|
673
1157
|
type BhInputTextEvents = {
|
|
674
1158
|
onBhInput: EventName<CustomEvent<string>>,
|
|
@@ -677,153 +1161,320 @@ type BhInputTextEvents = {
|
|
|
677
1161
|
onBhHelpClick: EventName<CustomEvent<void>>
|
|
678
1162
|
};
|
|
679
1163
|
|
|
680
|
-
export const BhInputText: StencilReactComponent<BhInputTextElement, BhInputTextEvents> =
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
1164
|
+
export const BhInputText: StencilReactComponent<BhInputTextElement, BhInputTextEvents> = typeof window !== 'undefined'
|
|
1165
|
+
? /*@__PURE__*/ createComponent<BhInputTextElement, BhInputTextEvents>({
|
|
1166
|
+
tagName: 'bh-input-text',
|
|
1167
|
+
elementClass: BhInputTextElement,
|
|
1168
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1169
|
+
react: React,
|
|
1170
|
+
events: {
|
|
1171
|
+
onBhInput: 'bhInput',
|
|
1172
|
+
onBhFocus: 'bhFocus',
|
|
1173
|
+
onBhBlur: 'bhBlur',
|
|
1174
|
+
onBhHelpClick: 'bhHelpClick'
|
|
1175
|
+
} as BhInputTextEvents,
|
|
1176
|
+
defineCustomElement: defineBhInputText
|
|
1177
|
+
})
|
|
1178
|
+
: /*@__PURE__*/ createSSRComponent<BhInputTextElement, BhInputTextEvents>({
|
|
1179
|
+
tagName: 'bh-input-text',
|
|
1180
|
+
properties: {
|
|
1181
|
+
label: 'label',
|
|
1182
|
+
placeholder: 'placeholder',
|
|
1183
|
+
hintText: 'hint-text',
|
|
1184
|
+
showLabel: 'show-label',
|
|
1185
|
+
showHintText: 'show-hint-text',
|
|
1186
|
+
showHelpIcon: 'show-help-icon',
|
|
1187
|
+
showLeadingIcon: 'show-leading-icon',
|
|
1188
|
+
showTrailingIcon: 'show-trailing-icon',
|
|
1189
|
+
error: 'error',
|
|
1190
|
+
disabled: 'disabled',
|
|
1191
|
+
required: 'required',
|
|
1192
|
+
helpIconTooltip: 'help-icon-tooltip',
|
|
1193
|
+
leadingIcon: 'leading-icon',
|
|
1194
|
+
trailingIcon: 'trailing-icon',
|
|
1195
|
+
value: 'value',
|
|
1196
|
+
name: 'name',
|
|
1197
|
+
defaultValue: 'default-value',
|
|
1198
|
+
validationMessage: 'validation-message',
|
|
1199
|
+
type: 'type',
|
|
1200
|
+
width: 'width',
|
|
1201
|
+
readOnly: 'read-only',
|
|
1202
|
+
state: 'state'
|
|
1203
|
+
},
|
|
1204
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1205
|
+
});
|
|
693
1206
|
|
|
694
1207
|
type BhInputVerificationEvents = {
|
|
695
1208
|
onBhChange: EventName<CustomEvent<string>>,
|
|
696
1209
|
onBhComplete: EventName<CustomEvent<string>>
|
|
697
1210
|
};
|
|
698
1211
|
|
|
699
|
-
export const BhInputVerification: StencilReactComponent<BhInputVerificationElement, BhInputVerificationEvents> =
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
1212
|
+
export const BhInputVerification: StencilReactComponent<BhInputVerificationElement, BhInputVerificationEvents> = typeof window !== 'undefined'
|
|
1213
|
+
? /*@__PURE__*/ createComponent<BhInputVerificationElement, BhInputVerificationEvents>({
|
|
1214
|
+
tagName: 'bh-input-verification',
|
|
1215
|
+
elementClass: BhInputVerificationElement,
|
|
1216
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1217
|
+
react: React,
|
|
1218
|
+
events: {
|
|
1219
|
+
onBhChange: 'bhChange',
|
|
1220
|
+
onBhComplete: 'bhComplete'
|
|
1221
|
+
} as BhInputVerificationEvents,
|
|
1222
|
+
defineCustomElement: defineBhInputVerification
|
|
1223
|
+
})
|
|
1224
|
+
: /*@__PURE__*/ createSSRComponent<BhInputVerificationElement, BhInputVerificationEvents>({
|
|
1225
|
+
tagName: 'bh-input-verification',
|
|
1226
|
+
properties: {
|
|
1227
|
+
size: 'size',
|
|
1228
|
+
digits: 'digits',
|
|
1229
|
+
label: 'label',
|
|
1230
|
+
showLabel: 'show-label',
|
|
1231
|
+
hintText: 'hint-text',
|
|
1232
|
+
showHintText: 'show-hint-text',
|
|
1233
|
+
error: 'error',
|
|
1234
|
+
disabled: 'disabled',
|
|
1235
|
+
required: 'required',
|
|
1236
|
+
showSeparator: 'show-separator',
|
|
1237
|
+
placeholder: 'placeholder',
|
|
1238
|
+
width: 'width',
|
|
1239
|
+
value: 'value'
|
|
1240
|
+
},
|
|
1241
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1242
|
+
});
|
|
710
1243
|
|
|
711
1244
|
type BhLabelEvents = { onBhHelpClick: EventName<CustomEvent<void>> };
|
|
712
1245
|
|
|
713
|
-
export const BhLabel: StencilReactComponent<BhLabelElement, BhLabelEvents> =
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
1246
|
+
export const BhLabel: StencilReactComponent<BhLabelElement, BhLabelEvents> = typeof window !== 'undefined'
|
|
1247
|
+
? /*@__PURE__*/ createComponent<BhLabelElement, BhLabelEvents>({
|
|
1248
|
+
tagName: 'bh-label',
|
|
1249
|
+
elementClass: BhLabelElement,
|
|
1250
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1251
|
+
react: React,
|
|
1252
|
+
events: { onBhHelpClick: 'bhHelpClick' } as BhLabelEvents,
|
|
1253
|
+
defineCustomElement: defineBhLabel
|
|
1254
|
+
})
|
|
1255
|
+
: /*@__PURE__*/ createSSRComponent<BhLabelElement, BhLabelEvents>({
|
|
1256
|
+
tagName: 'bh-label',
|
|
1257
|
+
properties: {
|
|
1258
|
+
label: 'label',
|
|
1259
|
+
layout: 'layout',
|
|
1260
|
+
for: 'for',
|
|
1261
|
+
supportingText: 'supporting-text',
|
|
1262
|
+
required: 'required',
|
|
1263
|
+
showHelpIcon: 'show-help-icon',
|
|
1264
|
+
helpIconTooltip: 'help-icon-tooltip',
|
|
1265
|
+
disabled: 'disabled'
|
|
1266
|
+
},
|
|
1267
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1268
|
+
});
|
|
721
1269
|
|
|
722
1270
|
type BhLoaderSpinnerEvents = NonNullable<unknown>;
|
|
723
1271
|
|
|
724
|
-
export const BhLoaderSpinner: StencilReactComponent<BhLoaderSpinnerElement, BhLoaderSpinnerEvents> =
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
1272
|
+
export const BhLoaderSpinner: StencilReactComponent<BhLoaderSpinnerElement, BhLoaderSpinnerEvents> = typeof window !== 'undefined'
|
|
1273
|
+
? /*@__PURE__*/ createComponent<BhLoaderSpinnerElement, BhLoaderSpinnerEvents>({
|
|
1274
|
+
tagName: 'bh-loader-spinner',
|
|
1275
|
+
elementClass: BhLoaderSpinnerElement,
|
|
1276
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1277
|
+
react: React,
|
|
1278
|
+
events: {} as BhLoaderSpinnerEvents,
|
|
1279
|
+
defineCustomElement: defineBhLoaderSpinner
|
|
1280
|
+
})
|
|
1281
|
+
: /*@__PURE__*/ createSSRComponent<BhLoaderSpinnerElement, BhLoaderSpinnerEvents>({
|
|
1282
|
+
tagName: 'bh-loader-spinner',
|
|
1283
|
+
properties: {
|
|
1284
|
+
size: 'size',
|
|
1285
|
+
variant: 'variant',
|
|
1286
|
+
overlay: 'overlay',
|
|
1287
|
+
overlayMessage: 'overlay-message',
|
|
1288
|
+
showMessage: 'show-message',
|
|
1289
|
+
message: 'message'
|
|
1290
|
+
},
|
|
1291
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1292
|
+
});
|
|
732
1293
|
|
|
733
1294
|
type BhLogoBoxEvents = { onBhProductSelect: EventName<BhLogoBoxCustomEvent<BhProduct>> };
|
|
734
1295
|
|
|
735
|
-
export const BhLogoBox: StencilReactComponent<BhLogoBoxElement, BhLogoBoxEvents> =
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
1296
|
+
export const BhLogoBox: StencilReactComponent<BhLogoBoxElement, BhLogoBoxEvents> = typeof window !== 'undefined'
|
|
1297
|
+
? /*@__PURE__*/ createComponent<BhLogoBoxElement, BhLogoBoxEvents>({
|
|
1298
|
+
tagName: 'bh-logo-box',
|
|
1299
|
+
elementClass: BhLogoBoxElement,
|
|
1300
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1301
|
+
react: React,
|
|
1302
|
+
events: { onBhProductSelect: 'bhProductSelect' } as BhLogoBoxEvents,
|
|
1303
|
+
defineCustomElement: defineBhLogoBox
|
|
1304
|
+
})
|
|
1305
|
+
: /*@__PURE__*/ createSSRComponent<BhLogoBoxElement, BhLogoBoxEvents>({
|
|
1306
|
+
tagName: 'bh-logo-box',
|
|
1307
|
+
properties: {
|
|
1308
|
+
logoType: 'logo-type',
|
|
1309
|
+
logoSrc: 'logo-src',
|
|
1310
|
+
assetBasePath: 'asset-base-path',
|
|
1311
|
+
logoColor: 'logo-color'
|
|
1312
|
+
},
|
|
1313
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1314
|
+
});
|
|
743
1315
|
|
|
744
1316
|
type BhModalEvents = { onBhClose: EventName<CustomEvent<void>> };
|
|
745
1317
|
|
|
746
|
-
export const BhModal: StencilReactComponent<BhModalElement, BhModalEvents> =
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
1318
|
+
export const BhModal: StencilReactComponent<BhModalElement, BhModalEvents> = typeof window !== 'undefined'
|
|
1319
|
+
? /*@__PURE__*/ createComponent<BhModalElement, BhModalEvents>({
|
|
1320
|
+
tagName: 'bh-modal',
|
|
1321
|
+
elementClass: BhModalElement,
|
|
1322
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1323
|
+
react: React,
|
|
1324
|
+
events: { onBhClose: 'bhClose' } as BhModalEvents,
|
|
1325
|
+
defineCustomElement: defineBhModal
|
|
1326
|
+
})
|
|
1327
|
+
: /*@__PURE__*/ createSSRComponent<BhModalElement, BhModalEvents>({
|
|
1328
|
+
tagName: 'bh-modal',
|
|
1329
|
+
properties: {
|
|
1330
|
+
visible: 'visible',
|
|
1331
|
+
overlay: 'overlay',
|
|
1332
|
+
width: 'width'
|
|
1333
|
+
},
|
|
1334
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1335
|
+
});
|
|
754
1336
|
|
|
755
1337
|
type BhModalActionsEvents = {
|
|
756
1338
|
onBhPrimaryAction: EventName<CustomEvent<void>>,
|
|
757
1339
|
onBhSecondaryAction: EventName<CustomEvent<void>>
|
|
758
1340
|
};
|
|
759
1341
|
|
|
760
|
-
export const BhModalActions: StencilReactComponent<BhModalActionsElement, BhModalActionsEvents> =
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
1342
|
+
export const BhModalActions: StencilReactComponent<BhModalActionsElement, BhModalActionsEvents> = typeof window !== 'undefined'
|
|
1343
|
+
? /*@__PURE__*/ createComponent<BhModalActionsElement, BhModalActionsEvents>({
|
|
1344
|
+
tagName: 'bh-modal-actions',
|
|
1345
|
+
elementClass: BhModalActionsElement,
|
|
1346
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1347
|
+
react: React,
|
|
1348
|
+
events: {
|
|
1349
|
+
onBhPrimaryAction: 'bhPrimaryAction',
|
|
1350
|
+
onBhSecondaryAction: 'bhSecondaryAction'
|
|
1351
|
+
} as BhModalActionsEvents,
|
|
1352
|
+
defineCustomElement: defineBhModalActions
|
|
1353
|
+
})
|
|
1354
|
+
: /*@__PURE__*/ createSSRComponent<BhModalActionsElement, BhModalActionsEvents>({
|
|
1355
|
+
tagName: 'bh-modal-actions',
|
|
1356
|
+
properties: {
|
|
1357
|
+
type: 'type',
|
|
1358
|
+
destructive: 'destructive',
|
|
1359
|
+
primaryLabel: 'primary-label',
|
|
1360
|
+
secondaryLabel: 'secondary-label',
|
|
1361
|
+
divider: 'divider'
|
|
1362
|
+
},
|
|
1363
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1364
|
+
});
|
|
771
1365
|
|
|
772
1366
|
type BhModalHeaderEvents = { onBhClose: EventName<CustomEvent<void>> };
|
|
773
1367
|
|
|
774
|
-
export const BhModalHeader: StencilReactComponent<BhModalHeaderElement, BhModalHeaderEvents> =
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
1368
|
+
export const BhModalHeader: StencilReactComponent<BhModalHeaderElement, BhModalHeaderEvents> = typeof window !== 'undefined'
|
|
1369
|
+
? /*@__PURE__*/ createComponent<BhModalHeaderElement, BhModalHeaderEvents>({
|
|
1370
|
+
tagName: 'bh-modal-header',
|
|
1371
|
+
elementClass: BhModalHeaderElement,
|
|
1372
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1373
|
+
react: React,
|
|
1374
|
+
events: { onBhClose: 'bhClose' } as BhModalHeaderEvents,
|
|
1375
|
+
defineCustomElement: defineBhModalHeader
|
|
1376
|
+
})
|
|
1377
|
+
: /*@__PURE__*/ createSSRComponent<BhModalHeaderElement, BhModalHeaderEvents>({
|
|
1378
|
+
tagName: 'bh-modal-header',
|
|
1379
|
+
properties: {
|
|
1380
|
+
modalTitle: 'modal-title',
|
|
1381
|
+
description: 'description',
|
|
1382
|
+
icon: 'icon',
|
|
1383
|
+
iconColor: 'icon-color',
|
|
1384
|
+
showIcon: 'show-icon',
|
|
1385
|
+
showCloseButton: 'show-close-button',
|
|
1386
|
+
type: 'type',
|
|
1387
|
+
paddingBottom: 'padding-bottom',
|
|
1388
|
+
divider: 'divider'
|
|
1389
|
+
},
|
|
1390
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1391
|
+
});
|
|
782
1392
|
|
|
783
1393
|
type BhMonthPickerEvents = {
|
|
784
1394
|
onBhChange: EventName<BhMonthPickerCustomEvent<MonthYear | null>>,
|
|
785
1395
|
onBhMonthYearSelect: EventName<BhMonthPickerCustomEvent<MonthYear>>
|
|
786
1396
|
};
|
|
787
1397
|
|
|
788
|
-
export const BhMonthPicker: StencilReactComponent<BhMonthPickerElement, BhMonthPickerEvents> =
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
1398
|
+
export const BhMonthPicker: StencilReactComponent<BhMonthPickerElement, BhMonthPickerEvents> = typeof window !== 'undefined'
|
|
1399
|
+
? /*@__PURE__*/ createComponent<BhMonthPickerElement, BhMonthPickerEvents>({
|
|
1400
|
+
tagName: 'bh-month-picker',
|
|
1401
|
+
elementClass: BhMonthPickerElement,
|
|
1402
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1403
|
+
react: React,
|
|
1404
|
+
events: {
|
|
1405
|
+
onBhChange: 'bhChange',
|
|
1406
|
+
onBhMonthYearSelect: 'bhMonthYearSelect'
|
|
1407
|
+
} as BhMonthPickerEvents,
|
|
1408
|
+
defineCustomElement: defineBhMonthPicker
|
|
1409
|
+
})
|
|
1410
|
+
: /*@__PURE__*/ createSSRComponent<BhMonthPickerElement, BhMonthPickerEvents>({
|
|
1411
|
+
tagName: 'bh-month-picker',
|
|
1412
|
+
properties: {
|
|
1413
|
+
variant: 'variant',
|
|
1414
|
+
minYear: 'min-year',
|
|
1415
|
+
maxYear: 'max-year',
|
|
1416
|
+
disabled: 'disabled',
|
|
1417
|
+
label: 'label',
|
|
1418
|
+
placeholder: 'placeholder',
|
|
1419
|
+
inputWidth: 'input-width',
|
|
1420
|
+
showLabel: 'show-label',
|
|
1421
|
+
showFooter: 'show-footer'
|
|
1422
|
+
},
|
|
1423
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1424
|
+
});
|
|
799
1425
|
|
|
800
1426
|
type BhMonthPickerContentEvents = {
|
|
801
1427
|
onBhChange: EventName<BhMonthPickerContentCustomEvent<MonthYear>>,
|
|
802
1428
|
onBhMonthYearSelect: EventName<BhMonthPickerContentCustomEvent<MonthYear>>
|
|
803
1429
|
};
|
|
804
1430
|
|
|
805
|
-
export const BhMonthPickerContent: StencilReactComponent<BhMonthPickerContentElement, BhMonthPickerContentEvents> =
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
1431
|
+
export const BhMonthPickerContent: StencilReactComponent<BhMonthPickerContentElement, BhMonthPickerContentEvents> = typeof window !== 'undefined'
|
|
1432
|
+
? /*@__PURE__*/ createComponent<BhMonthPickerContentElement, BhMonthPickerContentEvents>({
|
|
1433
|
+
tagName: 'bh-month-picker-content',
|
|
1434
|
+
elementClass: BhMonthPickerContentElement,
|
|
1435
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1436
|
+
react: React,
|
|
1437
|
+
events: {
|
|
1438
|
+
onBhChange: 'bhChange',
|
|
1439
|
+
onBhMonthYearSelect: 'bhMonthYearSelect'
|
|
1440
|
+
} as BhMonthPickerContentEvents,
|
|
1441
|
+
defineCustomElement: defineBhMonthPickerContent
|
|
1442
|
+
})
|
|
1443
|
+
: /*@__PURE__*/ createSSRComponent<BhMonthPickerContentElement, BhMonthPickerContentEvents>({
|
|
1444
|
+
tagName: 'bh-month-picker-content',
|
|
1445
|
+
properties: {
|
|
1446
|
+
minYear: 'min-year',
|
|
1447
|
+
maxYear: 'max-year',
|
|
1448
|
+
disabled: 'disabled',
|
|
1449
|
+
scrollable: 'scrollable',
|
|
1450
|
+
selectedMonth: 'selected-month',
|
|
1451
|
+
selectedYear: 'selected-year',
|
|
1452
|
+
height: 'height'
|
|
1453
|
+
},
|
|
1454
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1455
|
+
});
|
|
816
1456
|
|
|
817
1457
|
type BhNavItemEvents = { onBhClick: EventName<CustomEvent<void>> };
|
|
818
1458
|
|
|
819
|
-
export const BhNavItem: StencilReactComponent<BhNavItemElement, BhNavItemEvents> =
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
1459
|
+
export const BhNavItem: StencilReactComponent<BhNavItemElement, BhNavItemEvents> = typeof window !== 'undefined'
|
|
1460
|
+
? /*@__PURE__*/ createComponent<BhNavItemElement, BhNavItemEvents>({
|
|
1461
|
+
tagName: 'bh-nav-item',
|
|
1462
|
+
elementClass: BhNavItemElement,
|
|
1463
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1464
|
+
react: React,
|
|
1465
|
+
events: { onBhClick: 'bhClick' } as BhNavItemEvents,
|
|
1466
|
+
defineCustomElement: defineBhNavItem
|
|
1467
|
+
})
|
|
1468
|
+
: /*@__PURE__*/ createSSRComponent<BhNavItemElement, BhNavItemEvents>({
|
|
1469
|
+
tagName: 'bh-nav-item',
|
|
1470
|
+
properties: {
|
|
1471
|
+
icon: 'icon',
|
|
1472
|
+
label: 'label',
|
|
1473
|
+
isActive: 'is-active',
|
|
1474
|
+
disabled: 'disabled'
|
|
1475
|
+
},
|
|
1476
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1477
|
+
});
|
|
827
1478
|
|
|
828
1479
|
type BhNotificationEvents = {
|
|
829
1480
|
onBhAction: EventName<CustomEvent<void>>,
|
|
@@ -831,40 +1482,71 @@ type BhNotificationEvents = {
|
|
|
831
1482
|
onBhClose: EventName<CustomEvent<void>>
|
|
832
1483
|
};
|
|
833
1484
|
|
|
834
|
-
export const BhNotification: StencilReactComponent<BhNotificationElement, BhNotificationEvents> =
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
1485
|
+
export const BhNotification: StencilReactComponent<BhNotificationElement, BhNotificationEvents> = typeof window !== 'undefined'
|
|
1486
|
+
? /*@__PURE__*/ createComponent<BhNotificationElement, BhNotificationEvents>({
|
|
1487
|
+
tagName: 'bh-notification',
|
|
1488
|
+
elementClass: BhNotificationElement,
|
|
1489
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1490
|
+
react: React,
|
|
1491
|
+
events: {
|
|
1492
|
+
onBhAction: 'bhAction',
|
|
1493
|
+
onBhDismiss: 'bhDismiss',
|
|
1494
|
+
onBhClose: 'bhClose'
|
|
1495
|
+
} as BhNotificationEvents,
|
|
1496
|
+
defineCustomElement: defineBhNotification
|
|
1497
|
+
})
|
|
1498
|
+
: /*@__PURE__*/ createSSRComponent<BhNotificationElement, BhNotificationEvents>({
|
|
1499
|
+
tagName: 'bh-notification',
|
|
1500
|
+
properties: {
|
|
1501
|
+
type: 'type',
|
|
1502
|
+
notificationTitle: 'notification-title',
|
|
1503
|
+
description: 'description',
|
|
1504
|
+
actionText: 'action-text',
|
|
1505
|
+
dismissText: 'dismiss-text',
|
|
1506
|
+
dismissible: 'dismissible',
|
|
1507
|
+
icon: 'icon'
|
|
1508
|
+
},
|
|
1509
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1510
|
+
});
|
|
846
1511
|
|
|
847
1512
|
type BhPageNavigationEvents = { onBhItemClick: EventName<CustomEvent<{ itemId: string; childIndex?: number }>> };
|
|
848
1513
|
|
|
849
|
-
export const BhPageNavigation: StencilReactComponent<BhPageNavigationElement, BhPageNavigationEvents> =
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
1514
|
+
export const BhPageNavigation: StencilReactComponent<BhPageNavigationElement, BhPageNavigationEvents> = typeof window !== 'undefined'
|
|
1515
|
+
? /*@__PURE__*/ createComponent<BhPageNavigationElement, BhPageNavigationEvents>({
|
|
1516
|
+
tagName: 'bh-page-navigation',
|
|
1517
|
+
elementClass: BhPageNavigationElement,
|
|
1518
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1519
|
+
react: React,
|
|
1520
|
+
events: { onBhItemClick: 'bhItemClick' } as BhPageNavigationEvents,
|
|
1521
|
+
defineCustomElement: defineBhPageNavigation
|
|
1522
|
+
})
|
|
1523
|
+
: /*@__PURE__*/ createSSRComponent<BhPageNavigationElement, BhPageNavigationEvents>({
|
|
1524
|
+
tagName: 'bh-page-navigation',
|
|
1525
|
+
properties: { navTitle: 'nav-title' },
|
|
1526
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1527
|
+
});
|
|
857
1528
|
|
|
858
1529
|
type BhPageNavigationChildEvents = { onBhItemClick: EventName<CustomEvent<void>> };
|
|
859
1530
|
|
|
860
|
-
export const BhPageNavigationChild: StencilReactComponent<BhPageNavigationChildElement, BhPageNavigationChildEvents> =
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
1531
|
+
export const BhPageNavigationChild: StencilReactComponent<BhPageNavigationChildElement, BhPageNavigationChildEvents> = typeof window !== 'undefined'
|
|
1532
|
+
? /*@__PURE__*/ createComponent<BhPageNavigationChildElement, BhPageNavigationChildEvents>({
|
|
1533
|
+
tagName: 'bh-page-navigation-child',
|
|
1534
|
+
elementClass: BhPageNavigationChildElement,
|
|
1535
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1536
|
+
react: React,
|
|
1537
|
+
events: { onBhItemClick: 'bhItemClick' } as BhPageNavigationChildEvents,
|
|
1538
|
+
defineCustomElement: defineBhPageNavigationChild
|
|
1539
|
+
})
|
|
1540
|
+
: /*@__PURE__*/ createSSRComponent<BhPageNavigationChildElement, BhPageNavigationChildEvents>({
|
|
1541
|
+
tagName: 'bh-page-navigation-child',
|
|
1542
|
+
properties: {
|
|
1543
|
+
label: 'label',
|
|
1544
|
+
badge: 'badge',
|
|
1545
|
+
showBadge: 'show-badge',
|
|
1546
|
+
isActive: 'is-active'
|
|
1547
|
+
},
|
|
1548
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1549
|
+
});
|
|
868
1550
|
|
|
869
1551
|
type BhPageNavigationMultiLevelEvents = {
|
|
870
1552
|
onBhToggle: EventName<CustomEvent<void>>,
|
|
@@ -872,46 +1554,85 @@ type BhPageNavigationMultiLevelEvents = {
|
|
|
872
1554
|
onBhAddClick: EventName<CustomEvent<void>>
|
|
873
1555
|
};
|
|
874
1556
|
|
|
875
|
-
export const BhPageNavigationMultiLevel: StencilReactComponent<BhPageNavigationMultiLevelElement, BhPageNavigationMultiLevelEvents> =
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
1557
|
+
export const BhPageNavigationMultiLevel: StencilReactComponent<BhPageNavigationMultiLevelElement, BhPageNavigationMultiLevelEvents> = typeof window !== 'undefined'
|
|
1558
|
+
? /*@__PURE__*/ createComponent<BhPageNavigationMultiLevelElement, BhPageNavigationMultiLevelEvents>({
|
|
1559
|
+
tagName: 'bh-page-navigation-multi-level',
|
|
1560
|
+
elementClass: BhPageNavigationMultiLevelElement,
|
|
1561
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1562
|
+
react: React,
|
|
1563
|
+
events: {
|
|
1564
|
+
onBhToggle: 'bhToggle',
|
|
1565
|
+
onBhChildClick: 'bhChildClick',
|
|
1566
|
+
onBhAddClick: 'bhAddClick'
|
|
1567
|
+
} as BhPageNavigationMultiLevelEvents,
|
|
1568
|
+
defineCustomElement: defineBhPageNavigationMultiLevel
|
|
1569
|
+
})
|
|
1570
|
+
: /*@__PURE__*/ createSSRComponent<BhPageNavigationMultiLevelElement, BhPageNavigationMultiLevelEvents>({
|
|
1571
|
+
tagName: 'bh-page-navigation-multi-level',
|
|
1572
|
+
properties: {
|
|
1573
|
+
label: 'label',
|
|
1574
|
+
icon: 'icon',
|
|
1575
|
+
badge: 'badge',
|
|
1576
|
+
isExpanded: 'is-expanded'
|
|
1577
|
+
},
|
|
1578
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1579
|
+
});
|
|
887
1580
|
|
|
888
1581
|
type BhPageNavigationSingleLevelEvents = { onBhItemClick: EventName<CustomEvent<void>> };
|
|
889
1582
|
|
|
890
|
-
export const BhPageNavigationSingleLevel: StencilReactComponent<BhPageNavigationSingleLevelElement, BhPageNavigationSingleLevelEvents> =
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
1583
|
+
export const BhPageNavigationSingleLevel: StencilReactComponent<BhPageNavigationSingleLevelElement, BhPageNavigationSingleLevelEvents> = typeof window !== 'undefined'
|
|
1584
|
+
? /*@__PURE__*/ createComponent<BhPageNavigationSingleLevelElement, BhPageNavigationSingleLevelEvents>({
|
|
1585
|
+
tagName: 'bh-page-navigation-single-level',
|
|
1586
|
+
elementClass: BhPageNavigationSingleLevelElement,
|
|
1587
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1588
|
+
react: React,
|
|
1589
|
+
events: { onBhItemClick: 'bhItemClick' } as BhPageNavigationSingleLevelEvents,
|
|
1590
|
+
defineCustomElement: defineBhPageNavigationSingleLevel
|
|
1591
|
+
})
|
|
1592
|
+
: /*@__PURE__*/ createSSRComponent<BhPageNavigationSingleLevelElement, BhPageNavigationSingleLevelEvents>({
|
|
1593
|
+
tagName: 'bh-page-navigation-single-level',
|
|
1594
|
+
properties: {
|
|
1595
|
+
label: 'label',
|
|
1596
|
+
icon: 'icon',
|
|
1597
|
+
isActive: 'is-active'
|
|
1598
|
+
},
|
|
1599
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1600
|
+
});
|
|
898
1601
|
|
|
899
1602
|
type BhPaginationEvents = {
|
|
900
1603
|
onBhPageChange: EventName<BhPaginationCustomEvent<PaginationChangeEvent>>,
|
|
901
1604
|
onBhPageSizeChange: EventName<BhPaginationCustomEvent<PaginationChangeEvent>>
|
|
902
1605
|
};
|
|
903
1606
|
|
|
904
|
-
export const BhPagination: StencilReactComponent<BhPaginationElement, BhPaginationEvents> =
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
1607
|
+
export const BhPagination: StencilReactComponent<BhPaginationElement, BhPaginationEvents> = typeof window !== 'undefined'
|
|
1608
|
+
? /*@__PURE__*/ createComponent<BhPaginationElement, BhPaginationEvents>({
|
|
1609
|
+
tagName: 'bh-pagination',
|
|
1610
|
+
elementClass: BhPaginationElement,
|
|
1611
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1612
|
+
react: React,
|
|
1613
|
+
events: {
|
|
1614
|
+
onBhPageChange: 'bhPageChange',
|
|
1615
|
+
onBhPageSizeChange: 'bhPageSizeChange'
|
|
1616
|
+
} as BhPaginationEvents,
|
|
1617
|
+
defineCustomElement: defineBhPagination
|
|
1618
|
+
})
|
|
1619
|
+
: /*@__PURE__*/ createSSRComponent<BhPaginationElement, BhPaginationEvents>({
|
|
1620
|
+
tagName: 'bh-pagination',
|
|
1621
|
+
properties: {
|
|
1622
|
+
page: 'page',
|
|
1623
|
+
totalItems: 'total-items',
|
|
1624
|
+
pageSize: 'page-size',
|
|
1625
|
+
showPageSizeSelector: 'show-page-size-selector',
|
|
1626
|
+
showItemCount: 'show-item-count',
|
|
1627
|
+
compact: 'compact',
|
|
1628
|
+
maxPageNumbers: 'max-page-numbers',
|
|
1629
|
+
disabled: 'disabled',
|
|
1630
|
+
rowsPerPageLabel: 'rows-per-page-label',
|
|
1631
|
+
showingResultsLabel: 'showing-results-label',
|
|
1632
|
+
pageInfoLabel: 'page-info-label'
|
|
1633
|
+
},
|
|
1634
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1635
|
+
});
|
|
915
1636
|
|
|
916
1637
|
type BhPickerMenuEvents = {
|
|
917
1638
|
onBhChange: EventName<BhPickerMenuCustomEvent<MonthYear | null>>,
|
|
@@ -921,89 +1642,148 @@ type BhPickerMenuEvents = {
|
|
|
921
1642
|
onBhToday: EventName<CustomEvent<void>>
|
|
922
1643
|
};
|
|
923
1644
|
|
|
924
|
-
export const BhPickerMenu: StencilReactComponent<BhPickerMenuElement, BhPickerMenuEvents> =
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
1645
|
+
export const BhPickerMenu: StencilReactComponent<BhPickerMenuElement, BhPickerMenuEvents> = typeof window !== 'undefined'
|
|
1646
|
+
? /*@__PURE__*/ createComponent<BhPickerMenuElement, BhPickerMenuEvents>({
|
|
1647
|
+
tagName: 'bh-picker-menu',
|
|
1648
|
+
elementClass: BhPickerMenuElement,
|
|
1649
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1650
|
+
react: React,
|
|
1651
|
+
events: {
|
|
1652
|
+
onBhChange: 'bhChange',
|
|
1653
|
+
onBhMonthYearSelect: 'bhMonthYearSelect',
|
|
1654
|
+
onBhCancel: 'bhCancel',
|
|
1655
|
+
onBhApply: 'bhApply',
|
|
1656
|
+
onBhToday: 'bhToday'
|
|
1657
|
+
} as BhPickerMenuEvents,
|
|
1658
|
+
defineCustomElement: defineBhPickerMenu
|
|
1659
|
+
})
|
|
1660
|
+
: /*@__PURE__*/ createSSRComponent<BhPickerMenuElement, BhPickerMenuEvents>({
|
|
1661
|
+
tagName: 'bh-picker-menu',
|
|
1662
|
+
properties: {
|
|
1663
|
+
minYear: 'min-year',
|
|
1664
|
+
maxYear: 'max-year',
|
|
1665
|
+
disabled: 'disabled',
|
|
1666
|
+
animationClass: 'animation-class',
|
|
1667
|
+
visible: 'visible',
|
|
1668
|
+
showFooter: 'show-footer',
|
|
1669
|
+
showTodayButton: 'show-today-button',
|
|
1670
|
+
disableApply: 'disable-apply'
|
|
1671
|
+
},
|
|
1672
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1673
|
+
});
|
|
938
1674
|
|
|
939
1675
|
type BhPieChartEvents = NonNullable<unknown>;
|
|
940
1676
|
|
|
941
|
-
export const BhPieChart: StencilReactComponent<BhPieChartElement, BhPieChartEvents> =
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
1677
|
+
export const BhPieChart: StencilReactComponent<BhPieChartElement, BhPieChartEvents> = typeof window !== 'undefined'
|
|
1678
|
+
? /*@__PURE__*/ createComponent<BhPieChartElement, BhPieChartEvents>({
|
|
1679
|
+
tagName: 'bh-pie-chart',
|
|
1680
|
+
elementClass: BhPieChartElement,
|
|
1681
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1682
|
+
react: React,
|
|
1683
|
+
events: {} as BhPieChartEvents,
|
|
1684
|
+
defineCustomElement: defineBhPieChart
|
|
1685
|
+
})
|
|
1686
|
+
: /*@__PURE__*/ createSSRComponent<BhPieChartElement, BhPieChartEvents>({
|
|
1687
|
+
tagName: 'bh-pie-chart',
|
|
1688
|
+
properties: {
|
|
1689
|
+
hole: 'hole',
|
|
1690
|
+
size: 'size',
|
|
1691
|
+
animated: 'animated',
|
|
1692
|
+
gap: 'gap'
|
|
1693
|
+
},
|
|
1694
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1695
|
+
});
|
|
955
1696
|
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
1697
|
+
type BhPopoverEvents = NonNullable<unknown>;
|
|
1698
|
+
|
|
1699
|
+
export const BhPopover: StencilReactComponent<BhPopoverElement, BhPopoverEvents> = typeof window !== 'undefined'
|
|
1700
|
+
? /*@__PURE__*/ createComponent<BhPopoverElement, BhPopoverEvents>({
|
|
1701
|
+
tagName: 'bh-popover',
|
|
1702
|
+
elementClass: BhPopoverElement,
|
|
1703
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1704
|
+
react: React,
|
|
1705
|
+
events: {} as BhPopoverEvents,
|
|
1706
|
+
defineCustomElement: defineBhPopover
|
|
1707
|
+
})
|
|
1708
|
+
: /*@__PURE__*/ createSSRComponent<BhPopoverElement, BhPopoverEvents>({
|
|
1709
|
+
tagName: 'bh-popover',
|
|
1710
|
+
properties: {
|
|
1711
|
+
popoverTitle: 'popover-title',
|
|
1712
|
+
content: 'content',
|
|
1713
|
+
maxWidth: 'max-width',
|
|
1714
|
+
position: 'position'
|
|
1715
|
+
},
|
|
1716
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1717
|
+
});
|
|
968
1718
|
|
|
969
1719
|
type BhProductSwitcherEvents = {
|
|
970
1720
|
onBhClose: EventName<CustomEvent<void>>,
|
|
971
1721
|
onBhProductSelect: EventName<BhProductSwitcherCustomEvent<BhProduct>>
|
|
972
1722
|
};
|
|
973
1723
|
|
|
974
|
-
export const BhProductSwitcher: StencilReactComponent<BhProductSwitcherElement, BhProductSwitcherEvents> =
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
1724
|
+
export const BhProductSwitcher: StencilReactComponent<BhProductSwitcherElement, BhProductSwitcherEvents> = typeof window !== 'undefined'
|
|
1725
|
+
? /*@__PURE__*/ createComponent<BhProductSwitcherElement, BhProductSwitcherEvents>({
|
|
1726
|
+
tagName: 'bh-product-switcher',
|
|
1727
|
+
elementClass: BhProductSwitcherElement,
|
|
1728
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1729
|
+
react: React,
|
|
1730
|
+
events: {
|
|
1731
|
+
onBhClose: 'bhClose',
|
|
1732
|
+
onBhProductSelect: 'bhProductSelect'
|
|
1733
|
+
} as BhProductSwitcherEvents,
|
|
1734
|
+
defineCustomElement: defineBhProductSwitcher
|
|
1735
|
+
})
|
|
1736
|
+
: /*@__PURE__*/ createSSRComponent<BhProductSwitcherElement, BhProductSwitcherEvents>({
|
|
1737
|
+
tagName: 'bh-product-switcher',
|
|
1738
|
+
properties: { isOpen: 'is-open' },
|
|
1739
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1740
|
+
});
|
|
985
1741
|
|
|
986
1742
|
type BhPropertySwitcherEvents = { onBhPropertyChange: EventName<BhPropertySwitcherCustomEvent<PropertyOption>> };
|
|
987
1743
|
|
|
988
|
-
export const BhPropertySwitcher: StencilReactComponent<BhPropertySwitcherElement, BhPropertySwitcherEvents> =
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
1744
|
+
export const BhPropertySwitcher: StencilReactComponent<BhPropertySwitcherElement, BhPropertySwitcherEvents> = typeof window !== 'undefined'
|
|
1745
|
+
? /*@__PURE__*/ createComponent<BhPropertySwitcherElement, BhPropertySwitcherEvents>({
|
|
1746
|
+
tagName: 'bh-property-switcher',
|
|
1747
|
+
elementClass: BhPropertySwitcherElement,
|
|
1748
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1749
|
+
react: React,
|
|
1750
|
+
events: { onBhPropertyChange: 'bhPropertyChange' } as BhPropertySwitcherEvents,
|
|
1751
|
+
defineCustomElement: defineBhPropertySwitcher
|
|
1752
|
+
})
|
|
1753
|
+
: /*@__PURE__*/ createSSRComponent<BhPropertySwitcherElement, BhPropertySwitcherEvents>({
|
|
1754
|
+
tagName: 'bh-property-switcher',
|
|
1755
|
+
properties: {
|
|
1756
|
+
selectedProperty: 'selected-property',
|
|
1757
|
+
grouped: 'grouped',
|
|
1758
|
+
searchPlaceholder: 'search-placeholder'
|
|
1759
|
+
},
|
|
1760
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1761
|
+
});
|
|
996
1762
|
|
|
997
1763
|
type BhRadioButtonEvents = { onBhChange: EventName<CustomEvent<string>> };
|
|
998
1764
|
|
|
999
|
-
export const BhRadioButton: StencilReactComponent<BhRadioButtonElement, BhRadioButtonEvents> =
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1765
|
+
export const BhRadioButton: StencilReactComponent<BhRadioButtonElement, BhRadioButtonEvents> = typeof window !== 'undefined'
|
|
1766
|
+
? /*@__PURE__*/ createComponent<BhRadioButtonElement, BhRadioButtonEvents>({
|
|
1767
|
+
tagName: 'bh-radio-button',
|
|
1768
|
+
elementClass: BhRadioButtonElement,
|
|
1769
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1770
|
+
react: React,
|
|
1771
|
+
events: { onBhChange: 'bhChange' } as BhRadioButtonEvents,
|
|
1772
|
+
defineCustomElement: defineBhRadioButton
|
|
1773
|
+
})
|
|
1774
|
+
: /*@__PURE__*/ createSSRComponent<BhRadioButtonElement, BhRadioButtonEvents>({
|
|
1775
|
+
tagName: 'bh-radio-button',
|
|
1776
|
+
properties: {
|
|
1777
|
+
size: 'size',
|
|
1778
|
+
selected: 'selected',
|
|
1779
|
+
disabled: 'disabled',
|
|
1780
|
+
value: 'value',
|
|
1781
|
+
name: 'name',
|
|
1782
|
+
label: 'label',
|
|
1783
|
+
supportingText: 'supporting-text'
|
|
1784
|
+
},
|
|
1785
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1786
|
+
});
|
|
1007
1787
|
|
|
1008
1788
|
type BhSidebarEvents = {
|
|
1009
1789
|
onBhMenuItemClick: EventName<CustomEvent<string>>,
|
|
@@ -1011,62 +1791,125 @@ type BhSidebarEvents = {
|
|
|
1011
1791
|
onBhAvatarMenuClick: EventName<BhSidebarCustomEvent<DropdownMenuItem>>
|
|
1012
1792
|
};
|
|
1013
1793
|
|
|
1014
|
-
export const BhSidebar: StencilReactComponent<BhSidebarElement, BhSidebarEvents> =
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1794
|
+
export const BhSidebar: StencilReactComponent<BhSidebarElement, BhSidebarEvents> = typeof window !== 'undefined'
|
|
1795
|
+
? /*@__PURE__*/ createComponent<BhSidebarElement, BhSidebarEvents>({
|
|
1796
|
+
tagName: 'bh-sidebar',
|
|
1797
|
+
elementClass: BhSidebarElement,
|
|
1798
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1799
|
+
react: React,
|
|
1800
|
+
events: {
|
|
1801
|
+
onBhMenuItemClick: 'bhMenuItemClick',
|
|
1802
|
+
onBhSearchClick: 'bhSearchClick',
|
|
1803
|
+
onBhAvatarMenuClick: 'bhAvatarMenuClick'
|
|
1804
|
+
} as BhSidebarEvents,
|
|
1805
|
+
defineCustomElement: defineBhSidebar
|
|
1806
|
+
})
|
|
1807
|
+
: /*@__PURE__*/ createSSRComponent<BhSidebarElement, BhSidebarEvents>({
|
|
1808
|
+
tagName: 'bh-sidebar',
|
|
1809
|
+
properties: {
|
|
1810
|
+
logoType: 'logo-type',
|
|
1811
|
+
logoSrc: 'logo-src',
|
|
1812
|
+
assetBasePath: 'asset-base-path',
|
|
1813
|
+
avatarImageSrc: 'avatar-image-src',
|
|
1814
|
+
avatarUrl: 'avatar-url',
|
|
1815
|
+
avatarInitials: 'avatar-initials',
|
|
1816
|
+
avatarName: 'avatar-name',
|
|
1817
|
+
avatarEmail: 'avatar-email',
|
|
1818
|
+
collapsed: 'collapsed'
|
|
1819
|
+
},
|
|
1820
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1821
|
+
});
|
|
1026
1822
|
|
|
1027
1823
|
type BhSkeletonLoaderEvents = NonNullable<unknown>;
|
|
1028
1824
|
|
|
1029
|
-
export const BhSkeletonLoader: StencilReactComponent<BhSkeletonLoaderElement, BhSkeletonLoaderEvents> =
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1825
|
+
export const BhSkeletonLoader: StencilReactComponent<BhSkeletonLoaderElement, BhSkeletonLoaderEvents> = typeof window !== 'undefined'
|
|
1826
|
+
? /*@__PURE__*/ createComponent<BhSkeletonLoaderElement, BhSkeletonLoaderEvents>({
|
|
1827
|
+
tagName: 'bh-skeleton-loader',
|
|
1828
|
+
elementClass: BhSkeletonLoaderElement,
|
|
1829
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1830
|
+
react: React,
|
|
1831
|
+
events: {} as BhSkeletonLoaderEvents,
|
|
1832
|
+
defineCustomElement: defineBhSkeletonLoader
|
|
1833
|
+
})
|
|
1834
|
+
: /*@__PURE__*/ createSSRComponent<BhSkeletonLoaderElement, BhSkeletonLoaderEvents>({
|
|
1835
|
+
tagName: 'bh-skeleton-loader',
|
|
1836
|
+
properties: {
|
|
1837
|
+
width: 'width',
|
|
1838
|
+
height: 'height',
|
|
1839
|
+
circle: 'circle'
|
|
1840
|
+
},
|
|
1841
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1842
|
+
});
|
|
1037
1843
|
|
|
1038
1844
|
type BhTabItemEvents = { onBhTabItemClick: EventName<CustomEvent<string>> };
|
|
1039
1845
|
|
|
1040
|
-
export const BhTabItem: StencilReactComponent<BhTabItemElement, BhTabItemEvents> =
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1846
|
+
export const BhTabItem: StencilReactComponent<BhTabItemElement, BhTabItemEvents> = typeof window !== 'undefined'
|
|
1847
|
+
? /*@__PURE__*/ createComponent<BhTabItemElement, BhTabItemEvents>({
|
|
1848
|
+
tagName: 'bh-tab-item',
|
|
1849
|
+
elementClass: BhTabItemElement,
|
|
1850
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1851
|
+
react: React,
|
|
1852
|
+
events: { onBhTabItemClick: 'bhTabItemClick' } as BhTabItemEvents,
|
|
1853
|
+
defineCustomElement: defineBhTabItem
|
|
1854
|
+
})
|
|
1855
|
+
: /*@__PURE__*/ createSSRComponent<BhTabItemElement, BhTabItemEvents>({
|
|
1856
|
+
tagName: 'bh-tab-item',
|
|
1857
|
+
properties: {
|
|
1858
|
+
value: 'value',
|
|
1859
|
+
label: 'label',
|
|
1860
|
+
isActive: 'is-active',
|
|
1861
|
+
active: 'active',
|
|
1862
|
+
disabled: 'disabled'
|
|
1863
|
+
},
|
|
1864
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1865
|
+
});
|
|
1048
1866
|
|
|
1049
1867
|
type BhTabsEvents = { onBhTabChange: EventName<CustomEvent<string>> };
|
|
1050
1868
|
|
|
1051
|
-
export const BhTabs: StencilReactComponent<BhTabsElement, BhTabsEvents> =
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1869
|
+
export const BhTabs: StencilReactComponent<BhTabsElement, BhTabsEvents> = typeof window !== 'undefined'
|
|
1870
|
+
? /*@__PURE__*/ createComponent<BhTabsElement, BhTabsEvents>({
|
|
1871
|
+
tagName: 'bh-tabs',
|
|
1872
|
+
elementClass: BhTabsElement,
|
|
1873
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1874
|
+
react: React,
|
|
1875
|
+
events: { onBhTabChange: 'bhTabChange' } as BhTabsEvents,
|
|
1876
|
+
defineCustomElement: defineBhTabs
|
|
1877
|
+
})
|
|
1878
|
+
: /*@__PURE__*/ createSSRComponent<BhTabsElement, BhTabsEvents>({
|
|
1879
|
+
tagName: 'bh-tabs',
|
|
1880
|
+
properties: {
|
|
1881
|
+
type: 'type',
|
|
1882
|
+
orientation: 'orientation',
|
|
1883
|
+
fullWidth: 'full-width',
|
|
1884
|
+
value: 'value'
|
|
1885
|
+
},
|
|
1886
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1887
|
+
});
|
|
1059
1888
|
|
|
1060
1889
|
type BhTagEvents = { onBhDismiss: EventName<CustomEvent<void>> };
|
|
1061
1890
|
|
|
1062
|
-
export const BhTag: StencilReactComponent<BhTagElement, BhTagEvents> =
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1891
|
+
export const BhTag: StencilReactComponent<BhTagElement, BhTagEvents> = typeof window !== 'undefined'
|
|
1892
|
+
? /*@__PURE__*/ createComponent<BhTagElement, BhTagEvents>({
|
|
1893
|
+
tagName: 'bh-tag',
|
|
1894
|
+
elementClass: BhTagElement,
|
|
1895
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1896
|
+
react: React,
|
|
1897
|
+
events: { onBhDismiss: 'bhDismiss' } as BhTagEvents,
|
|
1898
|
+
defineCustomElement: defineBhTag
|
|
1899
|
+
})
|
|
1900
|
+
: /*@__PURE__*/ createSSRComponent<BhTagElement, BhTagEvents>({
|
|
1901
|
+
tagName: 'bh-tag',
|
|
1902
|
+
properties: {
|
|
1903
|
+
variant: 'variant',
|
|
1904
|
+
size: 'size',
|
|
1905
|
+
label: 'label',
|
|
1906
|
+
dismissible: 'dismissible',
|
|
1907
|
+
disabled: 'disabled',
|
|
1908
|
+
maxWidth: 'max-width',
|
|
1909
|
+
avatarSrc: 'avatar-src'
|
|
1910
|
+
},
|
|
1911
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1912
|
+
});
|
|
1070
1913
|
|
|
1071
1914
|
type BhTextareaEvents = {
|
|
1072
1915
|
onBhInput: EventName<CustomEvent<string>>,
|
|
@@ -1075,52 +1918,130 @@ type BhTextareaEvents = {
|
|
|
1075
1918
|
onBhHelpClick: EventName<CustomEvent<void>>
|
|
1076
1919
|
};
|
|
1077
1920
|
|
|
1078
|
-
export const BhTextarea: StencilReactComponent<BhTextareaElement, BhTextareaEvents> =
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1921
|
+
export const BhTextarea: StencilReactComponent<BhTextareaElement, BhTextareaEvents> = typeof window !== 'undefined'
|
|
1922
|
+
? /*@__PURE__*/ createComponent<BhTextareaElement, BhTextareaEvents>({
|
|
1923
|
+
tagName: 'bh-textarea',
|
|
1924
|
+
elementClass: BhTextareaElement,
|
|
1925
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1926
|
+
react: React,
|
|
1927
|
+
events: {
|
|
1928
|
+
onBhInput: 'bhInput',
|
|
1929
|
+
onBhFocus: 'bhFocus',
|
|
1930
|
+
onBhBlur: 'bhBlur',
|
|
1931
|
+
onBhHelpClick: 'bhHelpClick'
|
|
1932
|
+
} as BhTextareaEvents,
|
|
1933
|
+
defineCustomElement: defineBhTextarea
|
|
1934
|
+
})
|
|
1935
|
+
: /*@__PURE__*/ createSSRComponent<BhTextareaElement, BhTextareaEvents>({
|
|
1936
|
+
tagName: 'bh-textarea',
|
|
1937
|
+
properties: {
|
|
1938
|
+
label: 'label',
|
|
1939
|
+
placeholder: 'placeholder',
|
|
1940
|
+
hintText: 'hint-text',
|
|
1941
|
+
showLabel: 'show-label',
|
|
1942
|
+
showHintText: 'show-hint-text',
|
|
1943
|
+
showHelpIcon: 'show-help-icon',
|
|
1944
|
+
error: 'error',
|
|
1945
|
+
disabled: 'disabled',
|
|
1946
|
+
required: 'required',
|
|
1947
|
+
helpIconTooltip: 'help-icon-tooltip',
|
|
1948
|
+
value: 'value',
|
|
1949
|
+
name: 'name',
|
|
1950
|
+
defaultValue: 'default-value',
|
|
1951
|
+
validationMessage: 'validation-message',
|
|
1952
|
+
rows: 'rows',
|
|
1953
|
+
resize: 'resize',
|
|
1954
|
+
maxLength: 'max-length'
|
|
1955
|
+
},
|
|
1956
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1957
|
+
});
|
|
1091
1958
|
|
|
1092
1959
|
type BhToggleEvents = { onBhChange: EventName<CustomEvent<boolean>> };
|
|
1093
1960
|
|
|
1094
|
-
export const BhToggle: StencilReactComponent<BhToggleElement, BhToggleEvents> =
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1961
|
+
export const BhToggle: StencilReactComponent<BhToggleElement, BhToggleEvents> = typeof window !== 'undefined'
|
|
1962
|
+
? /*@__PURE__*/ createComponent<BhToggleElement, BhToggleEvents>({
|
|
1963
|
+
tagName: 'bh-toggle',
|
|
1964
|
+
elementClass: BhToggleElement,
|
|
1965
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1966
|
+
react: React,
|
|
1967
|
+
events: { onBhChange: 'bhChange' } as BhToggleEvents,
|
|
1968
|
+
defineCustomElement: defineBhToggle
|
|
1969
|
+
})
|
|
1970
|
+
: /*@__PURE__*/ createSSRComponent<BhToggleElement, BhToggleEvents>({
|
|
1971
|
+
tagName: 'bh-toggle',
|
|
1972
|
+
properties: {
|
|
1973
|
+
size: 'size',
|
|
1974
|
+
showText: 'show-text',
|
|
1975
|
+
label: 'label',
|
|
1976
|
+
supportingText: 'supporting-text',
|
|
1977
|
+
disabled: 'disabled',
|
|
1978
|
+
checked: 'checked',
|
|
1979
|
+
name: 'name',
|
|
1980
|
+
value: 'value',
|
|
1981
|
+
required: 'required',
|
|
1982
|
+
defaultChecked: 'default-checked'
|
|
1983
|
+
},
|
|
1984
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
1985
|
+
});
|
|
1102
1986
|
|
|
1103
1987
|
type BhTooltipEvents = NonNullable<unknown>;
|
|
1104
1988
|
|
|
1105
|
-
export const BhTooltip: StencilReactComponent<BhTooltipElement, BhTooltipEvents> =
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1989
|
+
export const BhTooltip: StencilReactComponent<BhTooltipElement, BhTooltipEvents> = typeof window !== 'undefined'
|
|
1990
|
+
? /*@__PURE__*/ createComponent<BhTooltipElement, BhTooltipEvents>({
|
|
1991
|
+
tagName: 'bh-tooltip',
|
|
1992
|
+
elementClass: BhTooltipElement,
|
|
1993
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
1994
|
+
react: React,
|
|
1995
|
+
events: {} as BhTooltipEvents,
|
|
1996
|
+
defineCustomElement: defineBhTooltip
|
|
1997
|
+
})
|
|
1998
|
+
: /*@__PURE__*/ createSSRComponent<BhTooltipElement, BhTooltipEvents>({
|
|
1999
|
+
tagName: 'bh-tooltip',
|
|
2000
|
+
properties: {
|
|
2001
|
+
text: 'text',
|
|
2002
|
+
position: 'position',
|
|
2003
|
+
variant: 'variant',
|
|
2004
|
+
visible: 'visible',
|
|
2005
|
+
maxWidth: 'max-width'
|
|
2006
|
+
},
|
|
2007
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
2008
|
+
});
|
|
1113
2009
|
|
|
1114
2010
|
type BhTrendChartEvents = NonNullable<unknown>;
|
|
1115
2011
|
|
|
1116
|
-
export const BhTrendChart: StencilReactComponent<BhTrendChartElement, BhTrendChartEvents> =
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
2012
|
+
export const BhTrendChart: StencilReactComponent<BhTrendChartElement, BhTrendChartEvents> = typeof window !== 'undefined'
|
|
2013
|
+
? /*@__PURE__*/ createComponent<BhTrendChartElement, BhTrendChartEvents>({
|
|
2014
|
+
tagName: 'bh-trend-chart',
|
|
2015
|
+
elementClass: BhTrendChartElement,
|
|
2016
|
+
// @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
|
|
2017
|
+
react: React,
|
|
2018
|
+
events: {} as BhTrendChartEvents,
|
|
2019
|
+
defineCustomElement: defineBhTrendChart
|
|
2020
|
+
})
|
|
2021
|
+
: /*@__PURE__*/ createSSRComponent<BhTrendChartElement, BhTrendChartEvents>({
|
|
2022
|
+
tagName: 'bh-trend-chart',
|
|
2023
|
+
properties: {
|
|
2024
|
+
trend: 'trend',
|
|
2025
|
+
animated: 'animated',
|
|
2026
|
+
variant: 'variant',
|
|
2027
|
+
width: 'width',
|
|
2028
|
+
height: 'height'
|
|
2029
|
+
},
|
|
2030
|
+
hydrateModule: import('@actabldesign/bellhop-core/hydrate')
|
|
2031
|
+
});
|
|
2032
|
+
|
|
2033
|
+
================
|
|
2034
|
+
File: src/components/stencil-generated/components.ts
|
|
2035
|
+
================
|
|
2036
|
+
'use client';
|
|
2037
|
+
|
|
2038
|
+
/**
|
|
2039
|
+
* This file was automatically generated by the Stencil React Output Target.
|
|
2040
|
+
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
2041
|
+
*/
|
|
2042
|
+
|
|
2043
|
+
/* eslint-disable */
|
|
2044
|
+
export { BhAccordion, BhAccordionItem, BhAppbar, BhAutocompleteMenu, BhAvatar, BhAvatarAdd, BhAvatarStacked, BhBadge, BhBadgeDot, BhBarChart, BhBreadcrumbs, BhButton, BhButtonIcon, BhCard, BhCardFooter, BhCardHeader, BhChartTooltip, BhCheckbox, BhCheckboxGroup, BhCheckboxGroupItem, BhDataGrid, BhDatePicker, BhDatePickerContent, BhDateRangePicker, BhDateRangePickerContent, BhDropdown, BhDropdownMenu, BhEmptyState, BhFeaturedIcon, BhIllustrations, BhInputAutocomplete, BhInputNumber, BhInputPassword, BhInputText, BhInputVerification, BhLabel, BhLoaderSpinner, BhLogoBox, BhModal, BhModalActions, BhModalHeader, BhMonthPicker, BhMonthPickerContent, BhNavItem, BhNotification, BhPageNavigation, BhPageNavigationChild, BhPageNavigationMultiLevel, BhPageNavigationSingleLevel, BhPagination, BhPickerMenu, BhPieChart, BhPopover, BhProductSwitcher, BhPropertySwitcher, BhRadioButton, BhSidebar, BhSkeletonLoader, BhTabItem, BhTabs, BhTag, BhTextarea, BhToggle, BhTooltip, BhTrendChart } from "./components.server";
|
|
1124
2045
|
|
|
1125
2046
|
================
|
|
1126
2047
|
File: src/components/stencil-generated/index.ts
|
|
@@ -3076,6 +3997,509 @@ export {
|
|
|
3076
3997
|
ExpandIcon as BhExpandIcon,
|
|
3077
3998
|
};
|
|
3078
3999
|
|
|
4000
|
+
================
|
|
4001
|
+
File: src/helpers/cellRenderers.ts
|
|
4002
|
+
================
|
|
4003
|
+
import { h, type VNode } from '@stencil/core';
|
|
4004
|
+
import type { CellContext } from '@tanstack/react-table';
|
|
4005
|
+
|
|
4006
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4007
|
+
type HFn = typeof h;
|
|
4008
|
+
|
|
4009
|
+
// Wrapper for h() that accepts string class names
|
|
4010
|
+
// Stencil's h() expects class as an object, but string class names are more ergonomic
|
|
4011
|
+
function createElement(
|
|
4012
|
+
tag: string,
|
|
4013
|
+
props: Record<string, unknown> | null,
|
|
4014
|
+
...children: unknown[]
|
|
4015
|
+
): VNode {
|
|
4016
|
+
const processedProps = props ? { ...props } : null;
|
|
4017
|
+
|
|
4018
|
+
// Convert string class to object format
|
|
4019
|
+
if (processedProps && typeof processedProps.class === 'string') {
|
|
4020
|
+
const classObj: Record<string, boolean> = {};
|
|
4021
|
+
processedProps.class.split(' ').forEach((cls) => {
|
|
4022
|
+
if (cls) classObj[cls] = true;
|
|
4023
|
+
});
|
|
4024
|
+
processedProps.class = classObj;
|
|
4025
|
+
}
|
|
4026
|
+
|
|
4027
|
+
if (children.length === 0) {
|
|
4028
|
+
return (h as HFn)(tag, processedProps);
|
|
4029
|
+
}
|
|
4030
|
+
if (children.length === 1) {
|
|
4031
|
+
return (h as HFn)(tag, processedProps, children[0] as VNode);
|
|
4032
|
+
}
|
|
4033
|
+
return (h as HFn)(tag, processedProps, children as VNode[]);
|
|
4034
|
+
}
|
|
4035
|
+
|
|
4036
|
+
type BadgeVariant =
|
|
4037
|
+
| 'neutral'
|
|
4038
|
+
| 'success'
|
|
4039
|
+
| 'warning'
|
|
4040
|
+
| 'error'
|
|
4041
|
+
| 'info'
|
|
4042
|
+
| 'brand';
|
|
4043
|
+
|
|
4044
|
+
type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'link';
|
|
4045
|
+
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
4046
|
+
|
|
4047
|
+
interface BadgeConfig {
|
|
4048
|
+
label: string;
|
|
4049
|
+
variant?: BadgeVariant;
|
|
4050
|
+
}
|
|
4051
|
+
|
|
4052
|
+
interface ButtonConfig<TData> {
|
|
4053
|
+
label: string;
|
|
4054
|
+
hierarchy?: ButtonHierarchy;
|
|
4055
|
+
size?: ButtonSize;
|
|
4056
|
+
iconName?: string;
|
|
4057
|
+
iconPosition?: 'left' | 'right';
|
|
4058
|
+
onClick: (row: TData) => void;
|
|
4059
|
+
}
|
|
4060
|
+
|
|
4061
|
+
interface IconButtonConfig<TData> {
|
|
4062
|
+
iconName: string;
|
|
4063
|
+
hierarchy?: ButtonHierarchy;
|
|
4064
|
+
size?: ButtonSize;
|
|
4065
|
+
onClick: (row: TData) => void;
|
|
4066
|
+
}
|
|
4067
|
+
|
|
4068
|
+
interface LinkConfig {
|
|
4069
|
+
href: string | ((row: unknown) => string);
|
|
4070
|
+
target?: '_blank' | '_self';
|
|
4071
|
+
className?: string;
|
|
4072
|
+
}
|
|
4073
|
+
|
|
4074
|
+
interface AvatarConfig<TData> {
|
|
4075
|
+
imageSrc?: string | ((row: TData) => string | undefined);
|
|
4076
|
+
initials?: string | ((row: TData) => string);
|
|
4077
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
4078
|
+
name?: string | ((row: TData) => string);
|
|
4079
|
+
}
|
|
4080
|
+
|
|
4081
|
+
/**
|
|
4082
|
+
* Creates a cell renderer that displays a badge.
|
|
4083
|
+
*
|
|
4084
|
+
* @example
|
|
4085
|
+
* ```tsx
|
|
4086
|
+
* const columns = [
|
|
4087
|
+
* {
|
|
4088
|
+
* accessorKey: 'status',
|
|
4089
|
+
* header: 'Status',
|
|
4090
|
+
* cell: cellBadge((value) => ({
|
|
4091
|
+
* label: value,
|
|
4092
|
+
* variant: value === 'Active' ? 'success' : 'neutral'
|
|
4093
|
+
* }))
|
|
4094
|
+
* }
|
|
4095
|
+
* ];
|
|
4096
|
+
* ```
|
|
4097
|
+
*/
|
|
4098
|
+
export function cellBadge<TData, TValue>(
|
|
4099
|
+
config: (value: TValue, row: TData) => BadgeConfig
|
|
4100
|
+
) {
|
|
4101
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4102
|
+
const { label, variant = 'neutral' } = config(
|
|
4103
|
+
info.getValue(),
|
|
4104
|
+
info.row.original
|
|
4105
|
+
);
|
|
4106
|
+
return h('bh-badge', { label, variant });
|
|
4107
|
+
};
|
|
4108
|
+
}
|
|
4109
|
+
|
|
4110
|
+
/**
|
|
4111
|
+
* Creates a cell renderer that displays a button.
|
|
4112
|
+
*
|
|
4113
|
+
* @example
|
|
4114
|
+
* ```tsx
|
|
4115
|
+
* const columns = [
|
|
4116
|
+
* {
|
|
4117
|
+
* id: 'actions',
|
|
4118
|
+
* header: '',
|
|
4119
|
+
* cell: cellButton({
|
|
4120
|
+
* label: 'Edit',
|
|
4121
|
+
* hierarchy: 'tertiary',
|
|
4122
|
+
* size: 'sm',
|
|
4123
|
+
* onClick: (row) => handleEdit(row)
|
|
4124
|
+
* })
|
|
4125
|
+
* }
|
|
4126
|
+
* ];
|
|
4127
|
+
* ```
|
|
4128
|
+
*/
|
|
4129
|
+
export function cellButton<TData, TValue>(config: ButtonConfig<TData>) {
|
|
4130
|
+
const {
|
|
4131
|
+
label,
|
|
4132
|
+
hierarchy = 'tertiary',
|
|
4133
|
+
size = 'sm',
|
|
4134
|
+
iconName,
|
|
4135
|
+
iconPosition,
|
|
4136
|
+
onClick,
|
|
4137
|
+
} = config;
|
|
4138
|
+
|
|
4139
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4140
|
+
return h('bh-button', {
|
|
4141
|
+
label,
|
|
4142
|
+
hierarchy,
|
|
4143
|
+
size,
|
|
4144
|
+
iconName,
|
|
4145
|
+
iconPosition,
|
|
4146
|
+
onBhClick: () => onClick(info.row.original),
|
|
4147
|
+
});
|
|
4148
|
+
};
|
|
4149
|
+
}
|
|
4150
|
+
|
|
4151
|
+
/**
|
|
4152
|
+
* Creates a cell renderer that displays an icon button.
|
|
4153
|
+
*
|
|
4154
|
+
* @example
|
|
4155
|
+
* ```tsx
|
|
4156
|
+
* const columns = [
|
|
4157
|
+
* {
|
|
4158
|
+
* id: 'edit',
|
|
4159
|
+
* header: '',
|
|
4160
|
+
* cell: cellIconButton({
|
|
4161
|
+
* iconName: 'edit',
|
|
4162
|
+
* onClick: (row) => handleEdit(row)
|
|
4163
|
+
* })
|
|
4164
|
+
* }
|
|
4165
|
+
* ];
|
|
4166
|
+
* ```
|
|
4167
|
+
*/
|
|
4168
|
+
export function cellIconButton<TData, TValue>(config: IconButtonConfig<TData>) {
|
|
4169
|
+
const { iconName, hierarchy = 'tertiary', size = 'sm', onClick } = config;
|
|
4170
|
+
|
|
4171
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4172
|
+
return h('bh-button-icon', {
|
|
4173
|
+
iconName,
|
|
4174
|
+
hierarchy,
|
|
4175
|
+
size,
|
|
4176
|
+
onBhClick: () => onClick(info.row.original),
|
|
4177
|
+
});
|
|
4178
|
+
};
|
|
4179
|
+
}
|
|
4180
|
+
|
|
4181
|
+
/**
|
|
4182
|
+
* Creates a cell renderer that displays multiple buttons.
|
|
4183
|
+
*
|
|
4184
|
+
* @example
|
|
4185
|
+
* ```tsx
|
|
4186
|
+
* const columns = [
|
|
4187
|
+
* {
|
|
4188
|
+
* id: 'actions',
|
|
4189
|
+
* header: 'Actions',
|
|
4190
|
+
* cell: cellButtonGroup([
|
|
4191
|
+
* { iconName: 'edit', onClick: (row) => handleEdit(row) },
|
|
4192
|
+
* { iconName: 'delete', onClick: (row) => handleDelete(row) }
|
|
4193
|
+
* ])
|
|
4194
|
+
* }
|
|
4195
|
+
* ];
|
|
4196
|
+
* ```
|
|
4197
|
+
*/
|
|
4198
|
+
export function cellButtonGroup<TData, TValue>(
|
|
4199
|
+
buttons: IconButtonConfig<TData>[]
|
|
4200
|
+
) {
|
|
4201
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4202
|
+
return createElement(
|
|
4203
|
+
'div',
|
|
4204
|
+
{ class: 'bh-flex bh-gap_xs' },
|
|
4205
|
+
...buttons.map((btn) =>
|
|
4206
|
+
h('bh-button-icon', {
|
|
4207
|
+
iconName: btn.iconName,
|
|
4208
|
+
hierarchy: btn.hierarchy || 'tertiary',
|
|
4209
|
+
size: btn.size || 'sm',
|
|
4210
|
+
onBhClick: () => btn.onClick(info.row.original),
|
|
4211
|
+
})
|
|
4212
|
+
)
|
|
4213
|
+
);
|
|
4214
|
+
};
|
|
4215
|
+
}
|
|
4216
|
+
|
|
4217
|
+
/**
|
|
4218
|
+
* Creates a cell renderer that displays a link.
|
|
4219
|
+
*
|
|
4220
|
+
* @example
|
|
4221
|
+
* ```tsx
|
|
4222
|
+
* const columns = [
|
|
4223
|
+
* {
|
|
4224
|
+
* accessorKey: 'name',
|
|
4225
|
+
* header: 'Name',
|
|
4226
|
+
* cell: cellLink({
|
|
4227
|
+
* href: (row) => `/users/${row.id}`,
|
|
4228
|
+
* className: 'bh-link'
|
|
4229
|
+
* })
|
|
4230
|
+
* }
|
|
4231
|
+
* ];
|
|
4232
|
+
* ```
|
|
4233
|
+
*/
|
|
4234
|
+
export function cellLink<TData, TValue>(config: LinkConfig) {
|
|
4235
|
+
const { href, target, className = 'bh-link' } = config;
|
|
4236
|
+
|
|
4237
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4238
|
+
const value = info.getValue();
|
|
4239
|
+
const resolvedHref =
|
|
4240
|
+
typeof href === 'function' ? href(info.row.original) : href;
|
|
4241
|
+
|
|
4242
|
+
const attrs: Record<string, unknown> = {
|
|
4243
|
+
href: resolvedHref,
|
|
4244
|
+
class: className,
|
|
4245
|
+
};
|
|
4246
|
+
|
|
4247
|
+
if (target === '_blank') {
|
|
4248
|
+
attrs.target = '_blank';
|
|
4249
|
+
attrs.rel = 'noopener noreferrer';
|
|
4250
|
+
}
|
|
4251
|
+
|
|
4252
|
+
return createElement('a', attrs, String(value ?? ''));
|
|
4253
|
+
};
|
|
4254
|
+
}
|
|
4255
|
+
|
|
4256
|
+
/**
|
|
4257
|
+
* Creates a cell renderer that displays an avatar with optional name.
|
|
4258
|
+
*
|
|
4259
|
+
* @example
|
|
4260
|
+
* ```tsx
|
|
4261
|
+
* const columns = [
|
|
4262
|
+
* {
|
|
4263
|
+
* accessorKey: 'user',
|
|
4264
|
+
* header: 'User',
|
|
4265
|
+
* cell: cellAvatar({
|
|
4266
|
+
* imageSrc: (row) => row.avatarUrl,
|
|
4267
|
+
* initials: (row) => row.initials,
|
|
4268
|
+
* name: (row) => row.name,
|
|
4269
|
+
* size: 'sm'
|
|
4270
|
+
* })
|
|
4271
|
+
* }
|
|
4272
|
+
* ];
|
|
4273
|
+
* ```
|
|
4274
|
+
*/
|
|
4275
|
+
export function cellAvatar<TData, TValue>(config: AvatarConfig<TData>) {
|
|
4276
|
+
const { imageSrc, initials, size = 'sm', name } = config;
|
|
4277
|
+
|
|
4278
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4279
|
+
const row = info.row.original;
|
|
4280
|
+
|
|
4281
|
+
const resolvedImageSrc =
|
|
4282
|
+
typeof imageSrc === 'function' ? imageSrc(row) : imageSrc;
|
|
4283
|
+
const resolvedInitials =
|
|
4284
|
+
typeof initials === 'function' ? initials(row) : initials;
|
|
4285
|
+
const resolvedName = typeof name === 'function' ? name(row) : name;
|
|
4286
|
+
|
|
4287
|
+
const avatarEl = h('bh-avatar', {
|
|
4288
|
+
imageSrc: resolvedImageSrc,
|
|
4289
|
+
initials: resolvedInitials,
|
|
4290
|
+
size,
|
|
4291
|
+
});
|
|
4292
|
+
|
|
4293
|
+
if (resolvedName) {
|
|
4294
|
+
return createElement(
|
|
4295
|
+
'div',
|
|
4296
|
+
{ class: 'bh-flex bh-align_center bh-gap_sm' },
|
|
4297
|
+
avatarEl,
|
|
4298
|
+
h('span', null, resolvedName)
|
|
4299
|
+
);
|
|
4300
|
+
}
|
|
4301
|
+
|
|
4302
|
+
return avatarEl;
|
|
4303
|
+
};
|
|
4304
|
+
}
|
|
4305
|
+
|
|
4306
|
+
/**
|
|
4307
|
+
* Creates a cell renderer that displays a tag.
|
|
4308
|
+
*
|
|
4309
|
+
* @example
|
|
4310
|
+
* ```tsx
|
|
4311
|
+
* const columns = [
|
|
4312
|
+
* {
|
|
4313
|
+
* accessorKey: 'category',
|
|
4314
|
+
* header: 'Category',
|
|
4315
|
+
* cell: cellTag()
|
|
4316
|
+
* }
|
|
4317
|
+
* ];
|
|
4318
|
+
* ```
|
|
4319
|
+
*/
|
|
4320
|
+
export function cellTag<TData, TValue>(config?: { size?: 'sm' | 'md' }) {
|
|
4321
|
+
const size = config?.size || 'sm';
|
|
4322
|
+
|
|
4323
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4324
|
+
const value = info.getValue();
|
|
4325
|
+
if (!value) return null;
|
|
4326
|
+
return h('bh-tag', { label: String(value), size });
|
|
4327
|
+
};
|
|
4328
|
+
}
|
|
4329
|
+
|
|
4330
|
+
/**
|
|
4331
|
+
* Creates a cell renderer that displays multiple tags.
|
|
4332
|
+
*
|
|
4333
|
+
* @example
|
|
4334
|
+
* ```tsx
|
|
4335
|
+
* const columns = [
|
|
4336
|
+
* {
|
|
4337
|
+
* accessorKey: 'tags',
|
|
4338
|
+
* header: 'Tags',
|
|
4339
|
+
* cell: cellTagList({ size: 'sm' })
|
|
4340
|
+
* }
|
|
4341
|
+
* ];
|
|
4342
|
+
* ```
|
|
4343
|
+
*/
|
|
4344
|
+
export function cellTagList<TData, TValue extends string[]>(config?: {
|
|
4345
|
+
size?: 'sm' | 'md';
|
|
4346
|
+
}) {
|
|
4347
|
+
const size = config?.size || 'sm';
|
|
4348
|
+
|
|
4349
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4350
|
+
const tags = info.getValue();
|
|
4351
|
+
if (!tags || !Array.isArray(tags) || tags.length === 0) return null;
|
|
4352
|
+
|
|
4353
|
+
return createElement(
|
|
4354
|
+
'div',
|
|
4355
|
+
{ class: 'bh-flex bh-gap_xs bh-flex-wrap' },
|
|
4356
|
+
...tags.map((tag) => h('bh-tag', { label: tag, size }))
|
|
4357
|
+
);
|
|
4358
|
+
};
|
|
4359
|
+
}
|
|
4360
|
+
|
|
4361
|
+
/**
|
|
4362
|
+
* Creates a cell renderer that displays a toggle.
|
|
4363
|
+
*
|
|
4364
|
+
* @example
|
|
4365
|
+
* ```tsx
|
|
4366
|
+
* const columns = [
|
|
4367
|
+
* {
|
|
4368
|
+
* accessorKey: 'enabled',
|
|
4369
|
+
* header: 'Enabled',
|
|
4370
|
+
* cell: cellToggle({
|
|
4371
|
+
* onChange: (row, checked) => handleToggle(row.id, checked)
|
|
4372
|
+
* })
|
|
4373
|
+
* }
|
|
4374
|
+
* ];
|
|
4375
|
+
* ```
|
|
4376
|
+
*/
|
|
4377
|
+
export function cellToggle<TData, TValue>(config: {
|
|
4378
|
+
onChange: (row: TData, checked: boolean) => void;
|
|
4379
|
+
}) {
|
|
4380
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4381
|
+
return h('bh-toggle', {
|
|
4382
|
+
checked: Boolean(info.getValue()),
|
|
4383
|
+
onBhChange: (e: CustomEvent<{ checked: boolean }>) =>
|
|
4384
|
+
config.onChange(info.row.original, e.detail.checked),
|
|
4385
|
+
});
|
|
4386
|
+
};
|
|
4387
|
+
}
|
|
4388
|
+
|
|
4389
|
+
/**
|
|
4390
|
+
* Creates a cell renderer that formats a number as currency.
|
|
4391
|
+
*
|
|
4392
|
+
* @example
|
|
4393
|
+
* ```tsx
|
|
4394
|
+
* const columns = [
|
|
4395
|
+
* {
|
|
4396
|
+
* accessorKey: 'price',
|
|
4397
|
+
* header: 'Price',
|
|
4398
|
+
* cell: cellCurrency({ currency: 'USD' })
|
|
4399
|
+
* }
|
|
4400
|
+
* ];
|
|
4401
|
+
* ```
|
|
4402
|
+
*/
|
|
4403
|
+
export function cellCurrency<TData, TValue>(config?: {
|
|
4404
|
+
currency?: string;
|
|
4405
|
+
locale?: string;
|
|
4406
|
+
}) {
|
|
4407
|
+
const { currency = 'USD', locale = 'en-US' } = config || {};
|
|
4408
|
+
|
|
4409
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4410
|
+
const value = info.getValue();
|
|
4411
|
+
if (value == null) return '\u2014';
|
|
4412
|
+
|
|
4413
|
+
const formatted = new Intl.NumberFormat(locale, {
|
|
4414
|
+
style: 'currency',
|
|
4415
|
+
currency,
|
|
4416
|
+
}).format(Number(value));
|
|
4417
|
+
|
|
4418
|
+
return createElement('span', { class: 'bh-num-sm' }, formatted);
|
|
4419
|
+
};
|
|
4420
|
+
}
|
|
4421
|
+
|
|
4422
|
+
/**
|
|
4423
|
+
* Creates a cell renderer that formats a number as a percentage.
|
|
4424
|
+
*
|
|
4425
|
+
* @example
|
|
4426
|
+
* ```tsx
|
|
4427
|
+
* const columns = [
|
|
4428
|
+
* {
|
|
4429
|
+
* accessorKey: 'completion',
|
|
4430
|
+
* header: 'Progress',
|
|
4431
|
+
* cell: cellPercent({ decimals: 0 })
|
|
4432
|
+
* }
|
|
4433
|
+
* ];
|
|
4434
|
+
* ```
|
|
4435
|
+
*/
|
|
4436
|
+
export function cellPercent<TData, TValue>(config?: { decimals?: number }) {
|
|
4437
|
+
const decimals = config?.decimals ?? 0;
|
|
4438
|
+
|
|
4439
|
+
return (info: CellContext<TData, TValue>) => {
|
|
4440
|
+
const value = info.getValue();
|
|
4441
|
+
if (value == null) return '\u2014';
|
|
4442
|
+
|
|
4443
|
+
return createElement(
|
|
4444
|
+
'span',
|
|
4445
|
+
{ class: 'bh-num-sm' },
|
|
4446
|
+
`${Number(value).toFixed(decimals)}%`
|
|
4447
|
+
);
|
|
4448
|
+
};
|
|
4449
|
+
}
|
|
4450
|
+
|
|
4451
|
+
================
|
|
4452
|
+
File: src/hooks/useBellhopRef.ts
|
|
4453
|
+
================
|
|
4454
|
+
import { useRef, useCallback } from 'react';
|
|
4455
|
+
|
|
4456
|
+
/**
|
|
4457
|
+
* A hook for managing refs to Bellhop web components with type-safe prop setting.
|
|
4458
|
+
*
|
|
4459
|
+
* Web components sometimes require setting properties directly on the DOM element
|
|
4460
|
+
* rather than through React props, especially for complex objects or arrays.
|
|
4461
|
+
* This hook provides a convenient way to do that.
|
|
4462
|
+
*
|
|
4463
|
+
* @example
|
|
4464
|
+
* ```tsx
|
|
4465
|
+
* import { useBellhopRef } from '@actabldesign/bellhop-react';
|
|
4466
|
+
*
|
|
4467
|
+
* function MyComponent() {
|
|
4468
|
+
* const [dataGridRef, setDataGridProps] = useBellhopRef<
|
|
4469
|
+
* HTMLBhDataGridElement,
|
|
4470
|
+
* { columns: ColumnDef[]; data: any[] }
|
|
4471
|
+
* >();
|
|
4472
|
+
*
|
|
4473
|
+
* useEffect(() => {
|
|
4474
|
+
* setDataGridProps({
|
|
4475
|
+
* columns: myColumns,
|
|
4476
|
+
* data: myData,
|
|
4477
|
+
* });
|
|
4478
|
+
* }, [myColumns, myData, setDataGridProps]);
|
|
4479
|
+
*
|
|
4480
|
+
* return <BhDataGrid ref={dataGridRef} />;
|
|
4481
|
+
* }
|
|
4482
|
+
* ```
|
|
4483
|
+
*/
|
|
4484
|
+
export function useBellhopRef<
|
|
4485
|
+
TElement extends HTMLElement,
|
|
4486
|
+
TProps extends object = Record<string, unknown>
|
|
4487
|
+
>() {
|
|
4488
|
+
const ref = useRef<TElement>(null);
|
|
4489
|
+
|
|
4490
|
+
const setProps = useCallback((props: Partial<TProps>) => {
|
|
4491
|
+
if (ref.current) {
|
|
4492
|
+
Object.entries(props).forEach(([key, value]) => {
|
|
4493
|
+
if (value !== undefined) {
|
|
4494
|
+
(ref.current as unknown as Record<string, unknown>)[key] = value;
|
|
4495
|
+
}
|
|
4496
|
+
});
|
|
4497
|
+
}
|
|
4498
|
+
}, []);
|
|
4499
|
+
|
|
4500
|
+
return [ref, setProps] as const;
|
|
4501
|
+
}
|
|
4502
|
+
|
|
3079
4503
|
================
|
|
3080
4504
|
File: src/index.ts
|
|
3081
4505
|
================
|
|
@@ -3083,8 +4507,10 @@ File: src/index.ts
|
|
|
3083
4507
|
* Bellhop React Components
|
|
3084
4508
|
*
|
|
3085
4509
|
* This package provides:
|
|
3086
|
-
* 1. React wrapper components for
|
|
4510
|
+
* 1. React wrapper components for Bellhop Stencil web components (auto-generated)
|
|
3087
4511
|
* 2. Native React table primitives with TanStack Table integration
|
|
4512
|
+
* 3. React hooks for working with Bellhop components
|
|
4513
|
+
* 4. Cell renderer helpers for data grids
|
|
3088
4514
|
*
|
|
3089
4515
|
* NOTE: For feature-rich data grids, use <BhDataGrid> from the Stencil components.
|
|
3090
4516
|
* The table primitives below are for building custom table layouts.
|
|
@@ -3100,6 +4526,30 @@ export type {
|
|
|
3100
4526
|
ButtonSize,
|
|
3101
4527
|
} from '@actabldesign/bellhop-core';
|
|
3102
4528
|
|
|
4529
|
+
// =============================================================================
|
|
4530
|
+
// Hooks
|
|
4531
|
+
// =============================================================================
|
|
4532
|
+
|
|
4533
|
+
export { useBellhopRef } from './hooks/useBellhopRef';
|
|
4534
|
+
|
|
4535
|
+
// =============================================================================
|
|
4536
|
+
// Cell Renderer Helpers (for data grids)
|
|
4537
|
+
// =============================================================================
|
|
4538
|
+
|
|
4539
|
+
export {
|
|
4540
|
+
cellBadge,
|
|
4541
|
+
cellButton,
|
|
4542
|
+
cellIconButton,
|
|
4543
|
+
cellButtonGroup,
|
|
4544
|
+
cellLink,
|
|
4545
|
+
cellAvatar,
|
|
4546
|
+
cellTag,
|
|
4547
|
+
cellTagList,
|
|
4548
|
+
cellToggle,
|
|
4549
|
+
cellCurrency,
|
|
4550
|
+
cellPercent,
|
|
4551
|
+
} from './helpers/cellRenderers';
|
|
4552
|
+
|
|
3103
4553
|
// =============================================================================
|
|
3104
4554
|
// Table Primitives (for composable tables)
|
|
3105
4555
|
// =============================================================================
|
|
@@ -3186,26 +4636,36 @@ File: package.json
|
|
|
3186
4636
|
================
|
|
3187
4637
|
{
|
|
3188
4638
|
"name": "@actabldesign/bellhop-react",
|
|
3189
|
-
"version": "0.0.
|
|
4639
|
+
"version": "0.0.12",
|
|
3190
4640
|
"description": "React components for Bellhop - Stencil wrappers and native React table primitives",
|
|
4641
|
+
"type": "module",
|
|
3191
4642
|
"main": "dist/index.js",
|
|
3192
4643
|
"module": "dist/index.js",
|
|
3193
4644
|
"types": "dist/index.d.ts",
|
|
4645
|
+
"exports": {
|
|
4646
|
+
".": {
|
|
4647
|
+
"types": "./dist/index.d.ts",
|
|
4648
|
+
"import": "./dist/index.js"
|
|
4649
|
+
}
|
|
4650
|
+
},
|
|
3194
4651
|
"repository": {
|
|
3195
4652
|
"type": "git",
|
|
3196
4653
|
"url": "git+https://github.com/actabldesign/bellhop.git",
|
|
3197
4654
|
"directory": "packages/bellhop-react"
|
|
3198
4655
|
},
|
|
3199
4656
|
"files": [
|
|
3200
|
-
"dist/"
|
|
4657
|
+
"dist/",
|
|
4658
|
+
"llms.txt"
|
|
3201
4659
|
],
|
|
3202
4660
|
"scripts": {
|
|
3203
|
-
"build": "
|
|
4661
|
+
"build": "npm run build:bundle && npm run build:types",
|
|
4662
|
+
"build:bundle": "esbuild src/index.ts --bundle --format=esm --outfile=dist/index.js --external:react --external:react-dom --external:react/jsx-runtime --external:@actabldesign/bellhop-core --external:@actabldesign/bellhop-core/*",
|
|
4663
|
+
"build:types": "tsc --emitDeclarationOnly",
|
|
3204
4664
|
"build:watch": "tsc --watch"
|
|
3205
4665
|
},
|
|
3206
4666
|
"dependencies": {
|
|
3207
|
-
"@actabldesign/bellhop-core": "
|
|
3208
|
-
"@stencil/react-output-target": "^0.
|
|
4667
|
+
"@actabldesign/bellhop-core": "^0.0.8",
|
|
4668
|
+
"@stencil/react-output-target": "^1.0.3"
|
|
3209
4669
|
},
|
|
3210
4670
|
"peerDependencies": {
|
|
3211
4671
|
"react": ">=17.0.0",
|
|
@@ -3214,6 +4674,7 @@ File: package.json
|
|
|
3214
4674
|
"devDependencies": {
|
|
3215
4675
|
"@types/react": "^18.0.0",
|
|
3216
4676
|
"@types/react-dom": "^18.0.0",
|
|
4677
|
+
"esbuild": "^0.24.0",
|
|
3217
4678
|
"typescript": "^5.0.0"
|
|
3218
4679
|
},
|
|
3219
4680
|
"license": "MIT",
|
|
@@ -3237,7 +4698,7 @@ File: project.json
|
|
|
3237
4698
|
"executor": "nx:run-commands",
|
|
3238
4699
|
"dependsOn": ["^build"],
|
|
3239
4700
|
"options": {
|
|
3240
|
-
"command": "
|
|
4701
|
+
"command": "npm run build",
|
|
3241
4702
|
"cwd": "packages/bellhop-react"
|
|
3242
4703
|
},
|
|
3243
4704
|
"outputs": ["{projectRoot}/dist"]
|
|
@@ -3275,7 +4736,7 @@ npm install @tanstack/react-table
|
|
|
3275
4736
|
|
|
3276
4737
|
### Stencil Component Wrappers
|
|
3277
4738
|
|
|
3278
|
-
All Bellhop web components
|
|
4739
|
+
All 60+ Bellhop web components have React wrappers with full TypeScript support and proper event handling. Wrappers are auto-generated by `@stencil/react-output-target` and kept in sync with the core library automatically.
|
|
3279
4740
|
|
|
3280
4741
|
```tsx
|
|
3281
4742
|
import { BhButton, BhInputText, BhCard } from '@actabldesign/bellhop-react';
|
|
@@ -3298,14 +4759,59 @@ function MyComponent() {
|
|
|
3298
4759
|
|
|
3299
4760
|
### Available Stencil Components
|
|
3300
4761
|
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
4762
|
+
Every component in `@actabldesign/bellhop-core` has a corresponding React wrapper. Import them directly:
|
|
4763
|
+
|
|
4764
|
+
```tsx
|
|
4765
|
+
import { BhSidebar, BhAppbar, BhDataGrid } from '@actabldesign/bellhop-react';
|
|
4766
|
+
```
|
|
4767
|
+
|
|
4768
|
+
**Layout**: `BhAppbar`, `BhCard`, `BhCardHeader`, `BhCardFooter`, `BhContainer`, `BhContainerFooter`, `BhModal`, `BhModalHeader`, `BhModalActions`, `BhSidebar`, `BhAccordion`, `BhAccordionItem`
|
|
4769
|
+
|
|
4770
|
+
**Forms**: `BhInputText`, `BhInputPassword`, `BhInputNumber`, `BhInputAutocomplete`, `BhInputVerification`, `BhTextarea`, `BhCheckbox`, `BhCheckboxGroup`, `BhRadioButton`, `BhToggle`, `BhDropdown`, `BhLabel`
|
|
4771
|
+
|
|
4772
|
+
**Buttons**: `BhButton`, `BhButtonIcon`
|
|
4773
|
+
|
|
4774
|
+
**Data Display**: `BhDataGrid`, `BhBadge`, `BhBadgeDot`, `BhTag`, `BhAvatar`, `BhAvatarAdd`, `BhAvatarStacked`, `BhTooltip`, `BhPopover`
|
|
4775
|
+
|
|
4776
|
+
**Navigation**: `BhTabs`, `BhTabItem`, `BhBreadcrumbs`, `BhPagination`, `BhPageNavigation`, `BhNavItem`, `BhProductSwitcher`, `BhPropertySwitcher`
|
|
4777
|
+
|
|
4778
|
+
**Feedback**: `BhNotification`, `BhLoaderSpinner`, `BhEmptyState`, `BhSkeletonLoader`
|
|
4779
|
+
|
|
4780
|
+
**Date/Time**: `BhDatePicker`, `BhDateRangePicker`, `BhMonthPicker`
|
|
4781
|
+
|
|
4782
|
+
**Charts**: `BhBarChart`, `BhPieChart`, `BhTrendChart`
|
|
4783
|
+
|
|
4784
|
+
**Branding**: `BhLogoBox`, `BhFeaturedIcon`, `BhIllustrations`
|
|
4785
|
+
|
|
4786
|
+
### Event Handling
|
|
4787
|
+
|
|
4788
|
+
Bellhop React wrappers expose custom events as `onBh*` callback props. These are typed and provide `event.detail` payloads:
|
|
4789
|
+
|
|
4790
|
+
```tsx
|
|
4791
|
+
<BhButton onBhClick={(e) => console.log('clicked', e.detail)} />
|
|
4792
|
+
<BhInputText onBhInput={(e) => setValue(e.detail)} />
|
|
4793
|
+
<BhDropdown onBhChange={(e) => setSelected(e.detail)} />
|
|
4794
|
+
<BhTabs onBhTabChange={(e) => setTab(e.detail)} />
|
|
4795
|
+
```
|
|
4796
|
+
|
|
4797
|
+
### React Wrappers vs Raw Web Components
|
|
4798
|
+
|
|
4799
|
+
**Use React wrappers** (recommended for React projects):
|
|
4800
|
+
- Full TypeScript support with typed props and events
|
|
4801
|
+
- Proper React event handling (no need for `addEventListener`)
|
|
4802
|
+
- Ref forwarding works as expected
|
|
4803
|
+
- Auto-generated, always in sync with `bellhop-core`
|
|
4804
|
+
|
|
4805
|
+
```tsx
|
|
4806
|
+
import { BhDataGrid } from '@actabldesign/bellhop-react';
|
|
4807
|
+
<BhDataGrid data={rows} columns={cols} enableSorting />
|
|
4808
|
+
```
|
|
4809
|
+
|
|
4810
|
+
**Use raw web components** only when:
|
|
4811
|
+
- Working outside React (vanilla JS, Angular, Vue)
|
|
4812
|
+
- Need direct DOM API access for advanced use cases
|
|
4813
|
+
|
|
4814
|
+
If using raw `<bh-*>` tags in React, add TypeScript support via `@actabldesign/bellhop-core/react` (see bellhop-core README).
|
|
3309
4815
|
|
|
3310
4816
|
## Table Components
|
|
3311
4817
|
|
|
@@ -3351,20 +4857,20 @@ function BasicTable() {
|
|
|
3351
4857
|
|
|
3352
4858
|
#### Table Primitive Components
|
|
3353
4859
|
|
|
3354
|
-
| Component
|
|
3355
|
-
|
|
3356
|
-
| `Table`
|
|
3357
|
-
| `TableWrapper`
|
|
3358
|
-
| `TableCaption`
|
|
3359
|
-
| `TableHead`
|
|
3360
|
-
| `TableBody`
|
|
3361
|
-
| `TableFooter`
|
|
3362
|
-
| `TableRow`
|
|
3363
|
-
| `TableHeaderCell` | Header cell with sorting support
|
|
3364
|
-
| `TableCell`
|
|
3365
|
-
| `TableEmpty`
|
|
3366
|
-
| `TableActionBar`
|
|
3367
|
-
| `TablePagination` | Pagination controls
|
|
4860
|
+
| Component | Description |
|
|
4861
|
+
| ----------------- | ---------------------------------------------------------- |
|
|
4862
|
+
| `Table` | Main table element with size, variant, and styling options |
|
|
4863
|
+
| `TableWrapper` | Scrollable container for tables |
|
|
4864
|
+
| `TableCaption` | Accessible table caption |
|
|
4865
|
+
| `TableHead` | Table header section (`<thead>`) |
|
|
4866
|
+
| `TableBody` | Table body section (`<tbody>`) |
|
|
4867
|
+
| `TableFooter` | Table footer section (`<tfoot>`) |
|
|
4868
|
+
| `TableRow` | Table row with selection and expansion states |
|
|
4869
|
+
| `TableHeaderCell` | Header cell with sorting support |
|
|
4870
|
+
| `TableCell` | Data cell with alignment and truncation options |
|
|
4871
|
+
| `TableEmpty` | Empty state display for tables |
|
|
4872
|
+
| `TableActionBar` | Toolbar for bulk actions and filters |
|
|
4873
|
+
| `TablePagination` | Pagination controls |
|
|
3368
4874
|
|
|
3369
4875
|
### DataTable (TanStack Table Integration)
|
|
3370
4876
|
|
|
@@ -3403,29 +4909,29 @@ function UsersTable({ users }: { users: User[] }) {
|
|
|
3403
4909
|
|
|
3404
4910
|
#### DataTable Props
|
|
3405
4911
|
|
|
3406
|
-
| Prop
|
|
3407
|
-
|
|
3408
|
-
| `data`
|
|
3409
|
-
| `columns`
|
|
3410
|
-
| `size`
|
|
3411
|
-
| `variant`
|
|
3412
|
-
| `enableSorting`
|
|
3413
|
-
| `enableFiltering`
|
|
3414
|
-
| `enablePagination`
|
|
3415
|
-
| `enableRowSelection` | `boolean`
|
|
3416
|
-
| `enableExpanding`
|
|
3417
|
-
| `enableGrouping`
|
|
3418
|
-
| `enableEditing`
|
|
3419
|
-
| `editMode`
|
|
3420
|
-
| `pageSize`
|
|
3421
|
-
| `stickyHeader`
|
|
3422
|
-
| `hoverable`
|
|
3423
|
-
| `loading`
|
|
3424
|
-
| `getRowId`
|
|
3425
|
-
| `onSelectionChange`
|
|
3426
|
-
| `onSortingChange`
|
|
3427
|
-
| `onRowClick`
|
|
3428
|
-
| `onEditSave`
|
|
4912
|
+
| Prop | Type | Default | Description |
|
|
4913
|
+
| -------------------- | -------------------------------------- | ----------- | ------------------------- |
|
|
4914
|
+
| `data` | `TData[]` | required | Table data array |
|
|
4915
|
+
| `columns` | `ColumnDef<TData>[]` | required | Column definitions |
|
|
4916
|
+
| `size` | `'compact' \| 'default' \| 'relaxed'` | `'default'` | Row height |
|
|
4917
|
+
| `variant` | `'default' \| 'bordered' \| 'striped'` | `'default'` | Visual style |
|
|
4918
|
+
| `enableSorting` | `boolean` | `true` | Enable column sorting |
|
|
4919
|
+
| `enableFiltering` | `boolean` | `false` | Enable column filters |
|
|
4920
|
+
| `enablePagination` | `boolean` | `true` | Enable pagination |
|
|
4921
|
+
| `enableRowSelection` | `boolean` | `false` | Enable row selection |
|
|
4922
|
+
| `enableExpanding` | `boolean` | `false` | Enable row expansion |
|
|
4923
|
+
| `enableGrouping` | `boolean` | `false` | Enable row grouping |
|
|
4924
|
+
| `enableEditing` | `boolean` | `false` | Enable inline editing |
|
|
4925
|
+
| `editMode` | `'cell' \| 'row'` | `'cell'` | Editing mode |
|
|
4926
|
+
| `pageSize` | `number` | `10` | Initial page size |
|
|
4927
|
+
| `stickyHeader` | `boolean` | `false` | Sticky table header |
|
|
4928
|
+
| `hoverable` | `boolean` | `true` | Row hover effect |
|
|
4929
|
+
| `loading` | `boolean` | `false` | Loading state |
|
|
4930
|
+
| `getRowId` | `(row, index) => string` | - | Custom row ID accessor |
|
|
4931
|
+
| `onSelectionChange` | `(rows) => void` | - | Selection change callback |
|
|
4932
|
+
| `onSortingChange` | `(sorting) => void` | - | Sort change callback |
|
|
4933
|
+
| `onRowClick` | `(row) => void` | - | Row click callback |
|
|
4934
|
+
| `onEditSave` | `(changes) => void` | - | Edit save callback |
|
|
3429
4935
|
|
|
3430
4936
|
#### Column Helpers
|
|
3431
4937
|
|
|
@@ -3466,6 +4972,75 @@ function CustomTable({ data, columns }) {
|
|
|
3466
4972
|
}
|
|
3467
4973
|
```
|
|
3468
4974
|
|
|
4975
|
+
## Hooks
|
|
4976
|
+
|
|
4977
|
+
### useBellhopRef
|
|
4978
|
+
|
|
4979
|
+
A hook for managing refs to Bellhop web components with type-safe prop setting:
|
|
4980
|
+
|
|
4981
|
+
```tsx
|
|
4982
|
+
import { useBellhopRef } from '@actabldesign/bellhop-react';
|
|
4983
|
+
|
|
4984
|
+
function MyComponent() {
|
|
4985
|
+
const [dataGridRef, setDataGridProps] = useBellhopRef<
|
|
4986
|
+
HTMLBhDataGridElement,
|
|
4987
|
+
{ columns: ColumnDef[]; data: any[] }
|
|
4988
|
+
>();
|
|
4989
|
+
|
|
4990
|
+
useEffect(() => {
|
|
4991
|
+
setDataGridProps({ columns: myColumns, data: myData });
|
|
4992
|
+
}, [myColumns, myData, setDataGridProps]);
|
|
4993
|
+
|
|
4994
|
+
return <BhDataGrid ref={dataGridRef} />;
|
|
4995
|
+
}
|
|
4996
|
+
```
|
|
4997
|
+
|
|
4998
|
+
## Cell Renderer Helpers
|
|
4999
|
+
|
|
5000
|
+
Helper functions for common data grid cell rendering patterns:
|
|
5001
|
+
|
|
5002
|
+
```tsx
|
|
5003
|
+
import {
|
|
5004
|
+
cellBadge,
|
|
5005
|
+
cellButton,
|
|
5006
|
+
cellIconButton,
|
|
5007
|
+
cellButtonGroup,
|
|
5008
|
+
cellLink,
|
|
5009
|
+
cellAvatar,
|
|
5010
|
+
cellTag,
|
|
5011
|
+
cellTagList,
|
|
5012
|
+
cellToggle,
|
|
5013
|
+
cellCurrency,
|
|
5014
|
+
cellPercent,
|
|
5015
|
+
} from '@actabldesign/bellhop-react';
|
|
5016
|
+
|
|
5017
|
+
const columns = [
|
|
5018
|
+
{
|
|
5019
|
+
accessorKey: 'status',
|
|
5020
|
+
header: 'Status',
|
|
5021
|
+
cell: cellBadge((value) => ({
|
|
5022
|
+
label: value,
|
|
5023
|
+
variant: value === 'Active' ? 'success' : 'neutral'
|
|
5024
|
+
}))
|
|
5025
|
+
},
|
|
5026
|
+
{
|
|
5027
|
+
accessorKey: 'price',
|
|
5028
|
+
header: 'Price',
|
|
5029
|
+
cell: cellCurrency({ currency: 'USD' })
|
|
5030
|
+
},
|
|
5031
|
+
{
|
|
5032
|
+
id: 'actions',
|
|
5033
|
+
header: '',
|
|
5034
|
+
cell: cellButtonGroup([
|
|
5035
|
+
{ iconName: 'edit', onClick: (row) => handleEdit(row) },
|
|
5036
|
+
{ iconName: 'delete', onClick: (row) => handleDelete(row) }
|
|
5037
|
+
])
|
|
5038
|
+
}
|
|
5039
|
+
];
|
|
5040
|
+
```
|
|
5041
|
+
|
|
5042
|
+
See the Storybook documentation for more cell renderer patterns.
|
|
5043
|
+
|
|
3469
5044
|
## Type Exports
|
|
3470
5045
|
|
|
3471
5046
|
```tsx
|
|
@@ -3496,7 +5071,7 @@ import type {
|
|
|
3496
5071
|
Components use CSS classes from `@actabldesign/bellhop-styles`. Import the styles in your application:
|
|
3497
5072
|
|
|
3498
5073
|
```tsx
|
|
3499
|
-
import '@actabldesign/bellhop-styles
|
|
5074
|
+
import '@actabldesign/bellhop-styles';
|
|
3500
5075
|
```
|
|
3501
5076
|
|
|
3502
5077
|
## Related Packages
|