@brightspot/ui 1.11.0 → 3.0.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/dist/components/action-bar/ActionBar.d.ts +1 -1
- package/dist/components/action-bar/ActionBar.js +7 -7
- package/dist/components/action-bar/ActionBar.js.map +1 -1
- package/dist/components/action-bar/ActionItem.d.ts +5 -5
- package/dist/components/action-bar/ActionItem.d.ts.map +1 -1
- package/dist/components/action-bar/ActionItem.js +13 -13
- package/dist/components/action-bar/ActionItem.js.map +1 -1
- package/dist/components/avatar/AvatarGroup.d.ts +3 -0
- package/dist/components/avatar/AvatarGroup.d.ts.map +1 -1
- package/dist/components/avatar/AvatarGroup.js +3 -0
- package/dist/components/avatar/AvatarGroup.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +3 -1
- package/dist/components/badge/Badge.d.ts.map +1 -1
- package/dist/components/badge/Badge.js +2 -0
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/button-group/ButtonGroup.d.ts +138 -0
- package/dist/components/button-group/ButtonGroup.d.ts.map +1 -0
- package/dist/components/button-group/ButtonGroup.js +436 -0
- package/dist/components/button-group/ButtonGroup.js.map +1 -0
- package/dist/components/checkbox/Checkbox.d.ts +107 -0
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/checkbox/Checkbox.js +224 -0
- package/dist/components/checkbox/Checkbox.js.map +1 -0
- package/dist/components/circular-progress/CircularProgress.d.ts +2 -2
- package/dist/components/circular-progress/CircularProgress.js +2 -2
- package/dist/components/copy-to-clipboard/CopyToClipboard.d.ts +7 -2
- package/dist/components/copy-to-clipboard/CopyToClipboard.d.ts.map +1 -1
- package/dist/components/copy-to-clipboard/CopyToClipboard.js +10 -5
- package/dist/components/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/dist/components/dropdown/Dropdown.d.ts +5 -5
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/dropdown/Dropdown.js +11 -16
- package/dist/components/dropdown/Dropdown.js.map +1 -1
- package/dist/components/dropdown/DropdownItem.d.ts +14 -6
- package/dist/components/dropdown/DropdownItem.d.ts.map +1 -1
- package/dist/components/dropdown/DropdownItem.js +21 -15
- package/dist/components/dropdown/DropdownItem.js.map +1 -1
- package/dist/components/dropdown/DropdownMenu.d.ts +4 -4
- package/dist/components/dropdown/DropdownMenu.d.ts.map +1 -1
- package/dist/components/dropdown/DropdownMenu.js +6 -6
- package/dist/components/dropdown/DropdownMenu.js.map +1 -1
- package/dist/components/empty-state/EmptyState.css +4 -0
- package/dist/components/empty-state/EmptyState.d.ts +103 -0
- package/dist/components/empty-state/EmptyState.d.ts.map +1 -0
- package/dist/components/empty-state/EmptyState.js +209 -0
- package/dist/components/empty-state/EmptyState.js.map +1 -0
- package/dist/components/icon/Icon.d.ts +23 -10
- package/dist/components/icon/Icon.d.ts.map +1 -1
- package/dist/components/icon/Icon.js +40 -9
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/icon-button/IconButton.d.ts +7 -21
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +12 -18
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/linear-progress/LinearProgress.d.ts +2 -2
- package/dist/components/linear-progress/LinearProgress.js +2 -2
- package/dist/components/pagination/Pagination.js +10 -10
- package/dist/components/popover/Popover.d.ts +6 -0
- package/dist/components/popover/Popover.d.ts.map +1 -1
- package/dist/components/popover/Popover.js +6 -0
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/switch/Switch.d.ts +5 -1
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +10 -6
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/tabs/Tab.d.ts +4 -4
- package/dist/components/tabs/Tab.d.ts.map +1 -1
- package/dist/components/tabs/Tab.js +5 -5
- package/dist/components/tabs/Tab.js.map +1 -1
- package/dist/components/tabs/Tabs.d.ts +3 -3
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +20 -20
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/upload/Upload.d.ts +157 -0
- package/dist/components/upload/Upload.d.ts.map +1 -0
- package/dist/components/upload/Upload.js +538 -0
- package/dist/components/upload/Upload.js.map +1 -0
- package/dist/components/upload/UploadItem.d.ts +73 -0
- package/dist/components/upload/UploadItem.d.ts.map +1 -0
- package/dist/components/upload/UploadItem.js +180 -0
- package/dist/components/upload/UploadItem.js.map +1 -0
- package/dist/components/widget/Widget.d.ts +1 -6
- package/dist/components/widget/Widget.d.ts.map +1 -1
- package/dist/components/widget/Widget.js +1 -6
- package/dist/components/widget/Widget.js.map +1 -1
- package/dist/custom-elements.json +7499 -2087
- package/dist/storybook/assets/{ActionBar.stories--nAeDC-G.js → ActionBar.stories-DRIVI-W2.js} +65 -65
- package/dist/storybook/assets/{ActionItem.stories-BHrGjk-P.js → ActionItem.stories-5qlgxYNB.js} +41 -41
- package/dist/storybook/assets/{Avatar.stories-Da-mRj6_.js → Avatar.stories-B3VkhRhP.js} +2 -2
- package/dist/storybook/assets/{AvatarGroup.stories-BQlaC_yl.js → AvatarGroup.stories-DOfim2NY.js} +5 -5
- package/dist/storybook/assets/{Badge.stories-DnVnOrnF.js → Badge.stories-B04VNAcc.js} +2 -2
- package/dist/storybook/assets/{Button-CFLAI1H9.js → Button-CILTcGRT.js} +1 -1
- package/dist/storybook/assets/{Button.stories-DxaBOjwv.js → Button.stories-CzWAltrX.js} +1 -1
- package/dist/storybook/assets/ButtonGroup.stories-1uAJf79o.js +588 -0
- package/dist/storybook/assets/{Celebrate.stories-CuMm15Nr.js → Celebrate.stories-BEqj0VnW.js} +7 -7
- package/dist/storybook/assets/Checkbox.stories-DXAGFS0M.js +141 -0
- package/dist/storybook/assets/{CircularProgress.stories-DRN8Mtvj.js → CircularProgress.stories-D4rftw22.js} +7 -7
- package/dist/storybook/assets/{ClipboardMixin.stories-DR7Ou2Av.js → ClipboardMixin.stories-z2n2HWt1.js} +31 -28
- package/dist/storybook/assets/{Color-6BZIO3FS-Die62Y0Z.js → Color-6BZIO3FS-C6KyMgZz.js} +1 -1
- package/dist/storybook/assets/{Colors.stories-bIq_ssbI.js → Colors.stories-CX-Ny3B_.js} +1 -1
- package/dist/storybook/assets/{CombinedEffects.stories-CtKzOUZn.js → CombinedEffects.stories-BkqtiVHp.js} +33 -33
- package/dist/storybook/assets/{ComponentStatesMixin-DMLCk9fE.js → ComponentStatesMixin-DLd0feFg.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin.stories-D8UI9o-d.js → ComponentStatesMixin.stories-D6Yc5Jgl.js} +3 -3
- package/dist/storybook/assets/{CopyToClipboard.stories-ti6CpJNp.js → CopyToClipboard.stories-B-omwDDJ.js} +16 -16
- package/dist/storybook/assets/{Debounce.stories-DzZUSvbk.js → Debounce.stories-B2vE5QIx.js} +9 -9
- package/dist/storybook/assets/{DocsRenderer-LL677BLK-CIRGv5IX.js → DocsRenderer-LL677BLK-DNUlRvMg.js} +3 -3
- package/dist/storybook/assets/{Dropdown.stories-Lt4cY0Re.js → Dropdown.stories-_bx4WDLr.js} +60 -60
- package/dist/storybook/assets/EmptyState.stories-CGMbmo77.js +318 -0
- package/dist/storybook/assets/{Events.stories-B1ddcgpT.js → Events.stories-CkQYKcoZ.js} +1 -1
- package/dist/storybook/assets/{Heading.stories-DI4w61cf.js → Heading.stories-BU5Do_od.js} +1 -1
- package/dist/storybook/assets/{HueRipple.stories-DjhoxxEw.js → HueRipple.stories-Di2zmxo3.js} +11 -11
- package/dist/storybook/assets/Icon.stories-Dk4ZXhhJ.js +441 -0
- package/dist/storybook/assets/{IconButton.stories-KjN28hfc.js → IconButton.stories-BSCiXPXa.js} +126 -146
- package/dist/storybook/assets/{LinearProgress.stories-DcIpdz6R.js → LinearProgress.stories-BGxPZuni.js} +7 -7
- package/dist/storybook/assets/{Pagination.stories-BBkLEwoP.js → Pagination.stories-z3Zq8b4f.js} +6 -6
- package/dist/storybook/assets/{Popover.stories-DLv48c2h.js → Popover.stories-C9GxWcax.js} +33 -62
- package/dist/storybook/assets/ReadyMixin-CQw8N6P9.js +1 -0
- package/dist/storybook/assets/{RovingTabindexMixin.stories-BWaFx9mu.js → RovingTabindexMixin.stories-ByxLBi6m.js} +6 -6
- package/dist/storybook/assets/{Rtc.stories-Ve7Bwo_l.js → Rtc.stories-DQJlCXWR.js} +3 -3
- package/dist/storybook/assets/{ScrollShadow.stories-C6XmrRLm.js → ScrollShadow.stories-gjTIAbUA.js} +2 -2
- package/dist/storybook/assets/{Switch.stories-Cf8WM1LG.js → Switch.stories-BEeqPZiP.js} +21 -21
- package/dist/storybook/assets/{Tab.stories-CEtdEtOx.js → Tab.stories-DpB3I-WZ.js} +33 -33
- package/dist/storybook/assets/{Tabs.stories-CIAO1bPO.js → Tabs.stories-C6mG6Xi7.js} +2 -2
- package/dist/storybook/assets/{Throttle.stories-BqxVIb-r.js → Throttle.stories-x9tpGeQh.js} +10 -10
- package/dist/storybook/assets/{Tooltip.stories-B6fw6875.js → Tooltip.stories-CqcLqdmc.js} +2 -2
- package/dist/storybook/assets/Upload.stories-CMaAbCSH.js +447 -0
- package/dist/storybook/assets/UploadItem.stories-GB98L3JQ.js +167 -0
- package/dist/storybook/assets/{Welcome.stories-CfJtSM19.js → Welcome.stories-6h9cUZ7v.js} +1 -1
- package/dist/storybook/assets/{Widget.stories-CiOho7lO.js → Widget.stories-DiA1PR6Y.js} +13 -13
- package/dist/storybook/assets/{WithTooltip-65CFNBJE-PGcopp73.js → WithTooltip-65CFNBJE-DTsHhBb_.js} +1 -1
- package/dist/storybook/assets/{blocks-dP2DwISI.js → blocks-IXdn9TGW.js} +5 -5
- package/dist/storybook/assets/{formatter-EIJCOSYU-CZSAC3tg.js → formatter-EIJCOSYU-Cum4J6N4.js} +1 -1
- package/dist/storybook/assets/if-defined-CgfCxQoV.js +1 -0
- package/dist/storybook/assets/iframe-BgFj0b5u.css +1 -0
- package/dist/storybook/assets/{iframe-DloIUNZz.js → iframe-Sf9RHZFu.js} +191 -191
- package/dist/storybook/assets/{index-DKF0ypu5.js → index-D605PvQH.js} +1 -1
- package/dist/storybook/assets/{onFind-C0l4Gew0.js → onFind-C41m8c_a.js} +1 -1
- package/dist/storybook/assets/{onFind.stories-DOTt9puO.js → onFind.stories-MOTfGlJd.js} +53 -77
- package/dist/storybook/assets/{onRemove.stories-CQ9ZC5dm.js → onRemove.stories-DX58Bf6f.js} +6 -10
- package/dist/storybook/assets/{onVisible.stories-Cbj5_Vz0.js → onVisible.stories-NNFeFeD8.js} +3 -3
- package/dist/storybook/assets/{style-map-DLXysq3r.js → style-map-B99QiqCo.js} +1 -1
- package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-Bjjbl9ca.js → syntaxhighlighter-ED5Y7EFY-BqQ-o9mS.js} +1 -1
- package/dist/storybook/box-illustration.svg +51 -0
- package/dist/storybook/cloud-illustration.svg +49 -0
- package/dist/storybook/docs-illustration.svg +92 -0
- package/dist/storybook/iframe.html +2 -2
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/tailwind-plugin-badge.js +1 -1
- package/dist/tailwind-plugin-badge.ts +1 -1
- package/dist/tailwind-plugin-button-group.d.ts +2 -0
- package/dist/tailwind-plugin-button-group.d.ts.map +1 -0
- package/dist/tailwind-plugin-button-group.js +215 -0
- package/dist/tailwind-plugin-button-group.js.map +1 -0
- package/dist/tailwind-plugin-button-group.ts +238 -0
- package/dist/tailwind-plugin-button.js +1 -1
- package/dist/tailwind-plugin-button.ts +1 -1
- package/dist/tailwind-plugin-checkbox.d.ts +2 -0
- package/dist/tailwind-plugin-checkbox.d.ts.map +1 -0
- package/dist/tailwind-plugin-checkbox.js +246 -0
- package/dist/tailwind-plugin-checkbox.js.map +1 -0
- package/dist/tailwind-plugin-checkbox.ts +281 -0
- package/dist/tailwind-plugin-empty-state.d.ts +2 -0
- package/dist/tailwind-plugin-empty-state.d.ts.map +1 -0
- package/dist/tailwind-plugin-empty-state.js +113 -0
- package/dist/tailwind-plugin-empty-state.js.map +1 -0
- package/dist/tailwind-plugin-empty-state.ts +124 -0
- package/dist/tailwind-plugin-icon.js +122 -18
- package/dist/tailwind-plugin-icon.js.map +1 -1
- package/dist/tailwind-plugin-icon.ts +131 -18
- package/dist/tailwind-plugin-loader.js +3 -3
- package/dist/tailwind-plugin-loader.ts +3 -3
- package/dist/tailwind-plugin-tabs.js +7 -0
- package/dist/tailwind-plugin-tabs.js.map +1 -1
- package/dist/tailwind-plugin-tabs.ts +7 -0
- package/dist/tailwind-plugin-upload.d.ts +2 -0
- package/dist/tailwind-plugin-upload.d.ts.map +1 -0
- package/dist/tailwind-plugin-upload.js +322 -0
- package/dist/tailwind-plugin-upload.js.map +1 -0
- package/dist/tailwind-plugin-upload.ts +362 -0
- package/dist/tailwind.config.d.ts.map +1 -1
- package/dist/tailwind.config.js +1 -0
- package/dist/tailwind.config.js.map +1 -1
- package/dist/tailwind.config.ts +1 -0
- package/dist/util/ClipboardMixin.d.ts +7 -2
- package/dist/util/ClipboardMixin.d.ts.map +1 -1
- package/dist/util/ClipboardMixin.js +15 -13
- package/dist/util/ClipboardMixin.js.map +1 -1
- package/dist/util/ComponentStatesMixin.d.ts +2 -1
- package/dist/util/ComponentStatesMixin.d.ts.map +1 -1
- package/dist/util/ComponentStatesMixin.js +4 -0
- package/dist/util/ComponentStatesMixin.js.map +1 -1
- package/dist/util/EventEmitterMixin.d.ts +42 -4
- package/dist/util/EventEmitterMixin.d.ts.map +1 -1
- package/dist/util/EventEmitterMixin.js +5 -2
- package/dist/util/EventEmitterMixin.js.map +1 -1
- package/dist/util/ProgressMixin.d.ts +9 -2
- package/dist/util/ProgressMixin.d.ts.map +1 -1
- package/dist/util/ProgressMixin.js +22 -18
- package/dist/util/ProgressMixin.js.map +1 -1
- package/dist/util/RovingTabindexMixin.d.ts +8 -0
- package/dist/util/RovingTabindexMixin.d.ts.map +1 -1
- package/dist/util/RovingTabindexMixin.js +8 -8
- package/dist/util/RovingTabindexMixin.js.map +1 -1
- package/dist/util/TetherLayout.d.ts.map +1 -1
- package/dist/util/TetherLayout.js +3 -0
- package/dist/util/TetherLayout.js.map +1 -1
- package/dist/util/TooltipMixin.d.ts.map +1 -1
- package/dist/util/TooltipMixin.js +5 -4
- package/dist/util/TooltipMixin.js.map +1 -1
- package/dist/util/upload.d.ts +53 -0
- package/dist/util/upload.d.ts.map +1 -0
- package/dist/util/upload.js +113 -0
- package/dist/util/upload.js.map +1 -0
- package/docs/components/ActionBar.md +6 -0
- package/docs/components/ActionItem.md +52 -27
- package/docs/components/Avatar.md +42 -12
- package/docs/components/AvatarGroup.md +4 -3
- package/docs/components/Badge.md +13 -1
- package/docs/components/ButtonGroup.md +91 -0
- package/docs/components/Checkbox.md +91 -0
- package/docs/components/CircularProgress.md +41 -12
- package/docs/components/CopyToClipboard.md +13 -11
- package/docs/components/Dropdown.md +44 -19
- package/docs/components/DropdownItem.md +39 -26
- package/docs/components/DropdownMenu.md +9 -9
- package/docs/components/EmptyState.md +75 -0
- package/docs/components/Icon.md +22 -14
- package/docs/components/IconButton.md +46 -21
- package/docs/components/LinearProgress.md +43 -4
- package/docs/components/Pagination.md +11 -10
- package/docs/components/Popover.md +16 -0
- package/docs/components/README.md +5 -0
- package/docs/components/Switch.md +21 -16
- package/docs/components/Tab.md +8 -2
- package/docs/components/Tabs.md +8 -0
- package/docs/components/Upload.md +112 -0
- package/docs/components/UploadItem.md +61 -0
- package/docs/components/Widget.md +12 -6
- package/package.json +4 -2
- package/dist/storybook/assets/Icon.stories-CpziAhae.js +0 -264
- package/dist/storybook/assets/ReadyMixin-Cw2Dfbu2.js +0 -1
- package/dist/storybook/assets/if-defined-B1RdczOE.js +0 -1
- package/dist/storybook/assets/iframe-bJgLXZKK.css +0 -1
|
@@ -23,13 +23,21 @@ import '../icon/Icon.js';
|
|
|
23
23
|
* @fires {CustomEvent<{label: string, value: string, selected: boolean}>} btu-dropdown-item-select - Fired when item is activated
|
|
24
24
|
* @fires {CustomEvent<{label: string, favorited: boolean}>} btu-dropdown-item-favorite - Fired when favorite is toggled
|
|
25
25
|
*
|
|
26
|
+
* @cssprop --dropdown-item-font-size - Item font size (default: theme fontSize.sm)
|
|
27
|
+
* @cssprop --dropdown-item-color - Item text color (default: gray-700)
|
|
28
|
+
* @cssprop --dropdown-item-background - Item background color (default: transparent)
|
|
29
|
+
* @cssprop --dropdown-item-hover-background - Background on hover (default: gray-100)
|
|
30
|
+
* @cssprop --dropdown-item-hover-color - Text color on hover (default: gray-900)
|
|
31
|
+
* @cssprop --dropdown-item-selected-background - Background when selected (default: primary-50)
|
|
32
|
+
* @cssprop --dropdown-item-selected-color - Text color when selected (default: primary-700)
|
|
33
|
+
*
|
|
26
34
|
* @example
|
|
27
35
|
* ```html
|
|
28
36
|
* <!-- Basic item -->
|
|
29
37
|
* <btu-dropdown-item label="Edit"></btu-dropdown-item>
|
|
30
38
|
*
|
|
31
39
|
* <!-- Item with icon and shortcut -->
|
|
32
|
-
* <btu-dropdown-item label="Save"
|
|
40
|
+
* <btu-dropdown-item label="Save" symbol="save" shortcut="Ctrl+S"></btu-dropdown-item>
|
|
33
41
|
* ```
|
|
34
42
|
*/
|
|
35
43
|
export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElement)) {
|
|
@@ -47,9 +55,9 @@ export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElemen
|
|
|
47
55
|
this.type = 'default';
|
|
48
56
|
/**
|
|
49
57
|
* Lucide icon symbol.
|
|
50
|
-
* @attr
|
|
58
|
+
* @attr
|
|
51
59
|
*/
|
|
52
|
-
this.
|
|
60
|
+
this.symbol = '';
|
|
53
61
|
/**
|
|
54
62
|
* Keyboard shortcut display text.
|
|
55
63
|
* @attr
|
|
@@ -91,7 +99,7 @@ export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElemen
|
|
|
91
99
|
/** @internal */
|
|
92
100
|
this._showShortcuts = false;
|
|
93
101
|
/** @internal */
|
|
94
|
-
this.
|
|
102
|
+
this._parentMenuSymbol = '';
|
|
95
103
|
}
|
|
96
104
|
createRenderRoot() {
|
|
97
105
|
return this;
|
|
@@ -99,8 +107,8 @@ export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElemen
|
|
|
99
107
|
/** @internal Called by DropdownMenu to configure inherited settings */
|
|
100
108
|
_configure(opts) {
|
|
101
109
|
this._checkboxMode = opts.checkbox;
|
|
102
|
-
this._showIcon = opts.icon || !!this.
|
|
103
|
-
this.
|
|
110
|
+
this._showIcon = opts.icon || !!this.symbol;
|
|
111
|
+
this._parentMenuSymbol = opts.symbol;
|
|
104
112
|
this._showFavorites = opts.favorites;
|
|
105
113
|
this._showShortcuts = opts.shortcuts;
|
|
106
114
|
this.requestUpdate();
|
|
@@ -149,7 +157,7 @@ export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElemen
|
|
|
149
157
|
]
|
|
150
158
|
.filter(Boolean)
|
|
151
159
|
.join(' ');
|
|
152
|
-
const
|
|
160
|
+
const resolvedSymbol = this.symbol || this._parentMenuSymbol;
|
|
153
161
|
return html `<div
|
|
154
162
|
class="${classes}"
|
|
155
163
|
role="${role}"
|
|
@@ -166,10 +174,8 @@ export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElemen
|
|
|
166
174
|
${!this._checkboxMode && this.selected
|
|
167
175
|
? html `<span class="btu-dropdown-check"><btu-icon symbol="check" size="sm"></btu-icon></span>`
|
|
168
176
|
: nothing}
|
|
169
|
-
${this._showIcon &&
|
|
170
|
-
? html `<span class="btu-dropdown-item-icon"
|
|
171
|
-
><btu-icon symbol="${resolvedIconSymbol}" size="sm"></btu-icon
|
|
172
|
-
></span>`
|
|
177
|
+
${this._showIcon && resolvedSymbol
|
|
178
|
+
? html `<span class="btu-dropdown-item-icon"><btu-icon symbol="${resolvedSymbol}" size="sm"></btu-icon></span>`
|
|
173
179
|
: nothing}
|
|
174
180
|
<span class="btu-dropdown-item-label">${this.label}</span>
|
|
175
181
|
${this.error ? html `<btu-badge size="sm" variant="error">!</btu-badge>` : nothing}
|
|
@@ -179,10 +185,10 @@ export default class DropdownItem extends EventEmitterMixin(ReadyMixin(LitElemen
|
|
|
179
185
|
${this._showFavorites
|
|
180
186
|
? html `<button
|
|
181
187
|
type="button"
|
|
182
|
-
class="btu-button
|
|
188
|
+
class="btu-button-text-hidden btu-button-container-none btu-button-gray btu-button-sm btu-dropdown-favorite ${this
|
|
183
189
|
.favorited
|
|
184
190
|
? 'btu-dropdown-favorite-active'
|
|
185
|
-
: ''}"
|
|
191
|
+
: ''} btu-button"
|
|
186
192
|
@click="${this._toggleFavorite}"
|
|
187
193
|
aria-label="${this.favorited ? 'Remove from favorites' : 'Add to favorites'}"
|
|
188
194
|
aria-pressed="${this.favorited}"
|
|
@@ -203,8 +209,8 @@ __decorate([
|
|
|
203
209
|
property({ type: String })
|
|
204
210
|
], DropdownItem.prototype, "type", void 0);
|
|
205
211
|
__decorate([
|
|
206
|
-
property({ type: String
|
|
207
|
-
], DropdownItem.prototype, "
|
|
212
|
+
property({ type: String })
|
|
213
|
+
], DropdownItem.prototype, "symbol", void 0);
|
|
208
214
|
__decorate([
|
|
209
215
|
property({ type: String })
|
|
210
216
|
], DropdownItem.prototype, "shortcut", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,mBAAmB,CAAA;AAC1B,OAAO,iBAAiB,CAAA;AAcxB
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownItem.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ export interface DropdownMenuProps {
|
|
|
5
5
|
header?: boolean;
|
|
6
6
|
checkbox?: boolean;
|
|
7
7
|
icon?: boolean;
|
|
8
|
-
|
|
8
|
+
symbol?: string;
|
|
9
9
|
favorites?: boolean;
|
|
10
10
|
shortcuts?: boolean;
|
|
11
11
|
emptyMessage?: string;
|
|
@@ -57,9 +57,9 @@ export default class DropdownMenu extends DropdownMenu_base {
|
|
|
57
57
|
icon: boolean;
|
|
58
58
|
/**
|
|
59
59
|
* Fallback Lucide icon symbol for items without their own.
|
|
60
|
-
* @attr
|
|
60
|
+
* @attr
|
|
61
61
|
*/
|
|
62
|
-
|
|
62
|
+
symbol: string;
|
|
63
63
|
/**
|
|
64
64
|
* Show favorite toggle on each item.
|
|
65
65
|
* @attr
|
|
@@ -80,7 +80,7 @@ export default class DropdownMenu extends DropdownMenu_base {
|
|
|
80
80
|
/** @internal */
|
|
81
81
|
private _typeaheadTimeout;
|
|
82
82
|
createRenderRoot(): this;
|
|
83
|
-
/** Override: return menuitem elements from focusable items */
|
|
83
|
+
/** @internal Override: return menuitem elements from focusable items */
|
|
84
84
|
_getRovingTargets(): HTMLElement[];
|
|
85
85
|
connectedCallback(): void;
|
|
86
86
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAA;AAEjD,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAA;AAEjD,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA8D;IACtG;;;OAGG;IAEH,IAAI,EAAE,MAAM,CAAK;IAEjB;;;OAGG;IAEH,MAAM,EAAE,OAAO,CAAQ;IAEvB;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAQ;IAEzB;;;OAGG;IAEH,IAAI,EAAE,OAAO,CAAQ;IAErB;;;OAGG;IAEH,MAAM,EAAE,MAAM,CAAK;IAEnB;;;OAGG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;;OAGG;IAEH,SAAS,EAAE,OAAO,CAAQ;IAE1B;;;OAGG;IAEH,YAAY,EAAE,MAAM,CAAuB;IAE3C,gBAAgB;IAChB,OAAO,CAAC,gBAAgB,CAAK;IAE7B,gBAAgB;IAChB,OAAO,CAAC,iBAAiB,CAA6C;IAEtE,gBAAgB;IAKhB,wEAAwE;IACxE,iBAAiB,IAAI,WAAW,EAAE;IAMlC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5B,YAAY,IAAI,IAAI;IAKpB,OAAO,IAAI,IAAI;IASf,yDAAyD;IACzD,OAAO,CAAC,eAAe;IAavB,yCAAyC;IACzC,OAAO,CAAC,YAAY;IAIpB,sEAAsE;IACtE,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAKnC,gGAAgG;IAChG,UAAU,IAAI,IAAI;IAalB,2DAA2D;IAC3D,SAAS,IAAI,IAAI;IAMjB,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAyDrB;IAED,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;IAgBxB,sDAAsD;IACtD,OAAO,KAAK,QAAQ,GAEnB;IAED,MAAM;CAMP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAA;KAClC;CACF"}
|
|
@@ -57,9 +57,9 @@ export default class DropdownMenu extends RovingTabindexMixin(EventEmitterMixin(
|
|
|
57
57
|
this.icon = false;
|
|
58
58
|
/**
|
|
59
59
|
* Fallback Lucide icon symbol for items without their own.
|
|
60
|
-
* @attr
|
|
60
|
+
* @attr
|
|
61
61
|
*/
|
|
62
|
-
this.
|
|
62
|
+
this.symbol = '';
|
|
63
63
|
/**
|
|
64
64
|
* Show favorite toggle on each item.
|
|
65
65
|
* @attr
|
|
@@ -143,7 +143,7 @@ export default class DropdownMenu extends RovingTabindexMixin(EventEmitterMixin(
|
|
|
143
143
|
this.renderOptions.renderBefore ??= this.firstChild;
|
|
144
144
|
return this;
|
|
145
145
|
}
|
|
146
|
-
/** Override: return menuitem elements from focusable items */
|
|
146
|
+
/** @internal Override: return menuitem elements from focusable items */
|
|
147
147
|
_getRovingTargets() {
|
|
148
148
|
return this._getFocusableItems()
|
|
149
149
|
.map(item => item.querySelector('[role="menuitem"], [role="menuitemcheckbox"]'))
|
|
@@ -184,7 +184,7 @@ export default class DropdownMenu extends RovingTabindexMixin(EventEmitterMixin(
|
|
|
184
184
|
item._configure({
|
|
185
185
|
checkbox: this.checkbox,
|
|
186
186
|
icon: this.icon,
|
|
187
|
-
|
|
187
|
+
symbol: this.symbol,
|
|
188
188
|
favorites: this.favorites,
|
|
189
189
|
shortcuts: this.shortcuts,
|
|
190
190
|
});
|
|
@@ -263,8 +263,8 @@ __decorate([
|
|
|
263
263
|
property({ type: Boolean })
|
|
264
264
|
], DropdownMenu.prototype, "icon", void 0);
|
|
265
265
|
__decorate([
|
|
266
|
-
property({ type: String
|
|
267
|
-
], DropdownMenu.prototype, "
|
|
266
|
+
property({ type: String })
|
|
267
|
+
], DropdownMenu.prototype, "symbol", void 0);
|
|
268
268
|
__decorate([
|
|
269
269
|
property({ type: Boolean })
|
|
270
270
|
], DropdownMenu.prototype, "favorites", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownMenu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AAcvE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,mBAAmB,CAAC,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;IAAxG;;QACE;;;WAGG;QAEH,SAAI,GAAW,EAAE,CAAA;QAEjB;;;WAGG;QAEH,WAAM,GAAY,KAAK,CAAA;QAEvB;;;WAGG;QAEH,aAAQ,GAAY,KAAK,CAAA;QAEzB;;;WAGG;QAEH,SAAI,GAAY,KAAK,CAAA;QAErB;;;WAGG;QAEH,
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownMenu.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import '../button-group/ButtonGroup.js';
|
|
3
|
+
import './EmptyState.css';
|
|
4
|
+
export interface EmptyStateProps {
|
|
5
|
+
heading?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
size?: 'sm' | 'md' | 'lg';
|
|
8
|
+
headingLevel?: number;
|
|
9
|
+
}
|
|
10
|
+
declare const EmptyState_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
11
|
+
/**
|
|
12
|
+
* An empty state component for displaying placeholder content when no data is available.
|
|
13
|
+
*
|
|
14
|
+
* Supports a graphic slot for icons/images/pictures/SVGs, a heading, a description,
|
|
15
|
+
* and an actions slot for buttons or links. Available in three sizes (sm, md, lg)
|
|
16
|
+
* with semantic heading levels.
|
|
17
|
+
*
|
|
18
|
+
* ## Architecture: Light DOM + Pseudo-Slots
|
|
19
|
+
*
|
|
20
|
+
* This component uses **Light DOM** (no Shadow Root) with pseudo-slots:
|
|
21
|
+
* - User-provided children are physically moved into internal containers
|
|
22
|
+
* - Movement is based on `slot` attributes
|
|
23
|
+
* - The `onFind` utility detects and redistributes newly-added children (one-time per element)
|
|
24
|
+
*
|
|
25
|
+
* ### Node Redistribution Rules
|
|
26
|
+
* - `slot="graphic"` - Moved to graphic container (icon, image, picture, or SVG)
|
|
27
|
+
* - `slot="actions"` - Moved to an internal `btu-button-group` (variant="spaced")
|
|
28
|
+
*
|
|
29
|
+
* ### Actions composition
|
|
30
|
+
*
|
|
31
|
+
* The actions container IS a `btu-button-group` with `variant="spaced"`. Its `size`
|
|
32
|
+
* is mapped from the empty-state `size` prop (sm→small, md→medium, lg→large) so all
|
|
33
|
+
* child `btu-button` / `btu-icon-button` elements get consistent sizing and group
|
|
34
|
+
* semantics (`role="group"`, roving tabindex, disabled propagation) for free.
|
|
35
|
+
*
|
|
36
|
+
* @element btu-empty-state
|
|
37
|
+
*
|
|
38
|
+
* @fires {CustomEvent} btu-empty-state-ready - Fired after first render and initialization
|
|
39
|
+
* @fires {CustomEvent} btu-button-group-ready - Bubbles from the internal actions button-group
|
|
40
|
+
*
|
|
41
|
+
* @cssprop --empty-state-max-width - Maximum width of the content block (default: min(75cqw, 360px))
|
|
42
|
+
* @cssprop --empty-state-color-heading - Heading text color (default: gray-900)
|
|
43
|
+
* @cssprop --empty-state-color-description - Description text color (default: gray-500)
|
|
44
|
+
*
|
|
45
|
+
* @slot graphic - Pseudo-slot for icon, image, picture, or SVG graphic.
|
|
46
|
+
* When the child is a `btu-icon`, the component overrides its `size` attribute
|
|
47
|
+
* based on the empty-state `size` prop (sm→md, md→lg, lg→xl). Use an `img`,
|
|
48
|
+
* `picture`, or inline `svg` for full size control.
|
|
49
|
+
* @slot actions - Pseudo-slot for action buttons. Children are moved into an internal
|
|
50
|
+
* `btu-button-group` (variant="spaced"), so size and disabled state are managed
|
|
51
|
+
* by the group.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```html
|
|
55
|
+
* <btu-empty-state heading="No results found" description="Try adjusting your search criteria.">
|
|
56
|
+
* <btu-icon slot="graphic" symbol="search" size="xl"></btu-icon>
|
|
57
|
+
* <button slot="actions">Clear filters</button>
|
|
58
|
+
* </btu-empty-state>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export default class EmptyState extends EmptyState_base {
|
|
62
|
+
protected createRenderRoot(): HTMLElement | DocumentFragment;
|
|
63
|
+
/**
|
|
64
|
+
* Heading text displayed in the empty state.
|
|
65
|
+
* @attr
|
|
66
|
+
*/
|
|
67
|
+
heading: string;
|
|
68
|
+
/**
|
|
69
|
+
* Description text displayed below the heading.
|
|
70
|
+
* @attr
|
|
71
|
+
*/
|
|
72
|
+
description?: string;
|
|
73
|
+
/**
|
|
74
|
+
* Size variant of the empty state. Affects spacing, description text, graphic size,
|
|
75
|
+
* and — when `heading-level` is unset — the default heading level (sm→5, md→4, lg→3).
|
|
76
|
+
* @attr
|
|
77
|
+
*/
|
|
78
|
+
size: 'sm' | 'md' | 'lg';
|
|
79
|
+
/**
|
|
80
|
+
* Heading level (1-6). When set to a valid integer 1-6, overrides the size-based
|
|
81
|
+
* default and drives both the semantic h1-h6 tag and the visual heading size
|
|
82
|
+
* (btu-heading-1 through btu-heading-6). Invalid values log a warning and fall
|
|
83
|
+
* back to the size-based default.
|
|
84
|
+
* @attr heading-level
|
|
85
|
+
*/
|
|
86
|
+
headingLevel?: number;
|
|
87
|
+
private initialClasses;
|
|
88
|
+
connectedCallback(): void;
|
|
89
|
+
willUpdate(changedProperties: PropertyValues): void;
|
|
90
|
+
firstUpdated(): void;
|
|
91
|
+
updated(changedProperties: PropertyValues): void;
|
|
92
|
+
private syncGraphicIconSize;
|
|
93
|
+
private resolveHeadingLevel;
|
|
94
|
+
private renderHeading;
|
|
95
|
+
render(): TemplateResult<1>;
|
|
96
|
+
}
|
|
97
|
+
declare global {
|
|
98
|
+
interface HTMLElementTagNameMap {
|
|
99
|
+
'btu-empty-state': EmptyState;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
export {};
|
|
103
|
+
//# sourceMappingURL=EmptyState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKhF,OAAO,gCAAgC,CAAA;AACvC,OAAO,kBAAkB,CAAA;AAIzB,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAyC;IAC/E,SAAS,CAAC,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D;;;OAGG;IAEH,OAAO,EAAE,MAAM,CAAK;IAEpB;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;OAIG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAE/B;;;;;;OAMG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAOzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAYnD,YAAY,IAAI,IAAI;IAyBpB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOhD,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,aAAa;IAkBrB,MAAM;CAmBP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAA;KAC9B;CACF"}
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
|
+
import onFind from '../../util/onFind.js';
|
|
11
|
+
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
12
|
+
import '../button-group/ButtonGroup.js';
|
|
13
|
+
import './EmptyState.css';
|
|
14
|
+
const HEADING_LEVEL_BY_SIZE = {
|
|
15
|
+
sm: 5,
|
|
16
|
+
md: 4,
|
|
17
|
+
lg: 3,
|
|
18
|
+
};
|
|
19
|
+
const ICON_SIZE_BY_EMPTY_STATE_SIZE = {
|
|
20
|
+
sm: 'md',
|
|
21
|
+
md: 'lg',
|
|
22
|
+
lg: 'xl',
|
|
23
|
+
};
|
|
24
|
+
const MANAGED_CLASSES = new Set([
|
|
25
|
+
'btu-empty-state',
|
|
26
|
+
'btu-empty-state-sm',
|
|
27
|
+
'btu-empty-state-md',
|
|
28
|
+
'btu-empty-state-lg',
|
|
29
|
+
]);
|
|
30
|
+
const isHeadingLevel = (n) => typeof n === 'number' && Number.isInteger(n) && n >= 1 && n <= 6;
|
|
31
|
+
/**
|
|
32
|
+
* An empty state component for displaying placeholder content when no data is available.
|
|
33
|
+
*
|
|
34
|
+
* Supports a graphic slot for icons/images/pictures/SVGs, a heading, a description,
|
|
35
|
+
* and an actions slot for buttons or links. Available in three sizes (sm, md, lg)
|
|
36
|
+
* with semantic heading levels.
|
|
37
|
+
*
|
|
38
|
+
* ## Architecture: Light DOM + Pseudo-Slots
|
|
39
|
+
*
|
|
40
|
+
* This component uses **Light DOM** (no Shadow Root) with pseudo-slots:
|
|
41
|
+
* - User-provided children are physically moved into internal containers
|
|
42
|
+
* - Movement is based on `slot` attributes
|
|
43
|
+
* - The `onFind` utility detects and redistributes newly-added children (one-time per element)
|
|
44
|
+
*
|
|
45
|
+
* ### Node Redistribution Rules
|
|
46
|
+
* - `slot="graphic"` - Moved to graphic container (icon, image, picture, or SVG)
|
|
47
|
+
* - `slot="actions"` - Moved to an internal `btu-button-group` (variant="spaced")
|
|
48
|
+
*
|
|
49
|
+
* ### Actions composition
|
|
50
|
+
*
|
|
51
|
+
* The actions container IS a `btu-button-group` with `variant="spaced"`. Its `size`
|
|
52
|
+
* is mapped from the empty-state `size` prop (sm→small, md→medium, lg→large) so all
|
|
53
|
+
* child `btu-button` / `btu-icon-button` elements get consistent sizing and group
|
|
54
|
+
* semantics (`role="group"`, roving tabindex, disabled propagation) for free.
|
|
55
|
+
*
|
|
56
|
+
* @element btu-empty-state
|
|
57
|
+
*
|
|
58
|
+
* @fires {CustomEvent} btu-empty-state-ready - Fired after first render and initialization
|
|
59
|
+
* @fires {CustomEvent} btu-button-group-ready - Bubbles from the internal actions button-group
|
|
60
|
+
*
|
|
61
|
+
* @cssprop --empty-state-max-width - Maximum width of the content block (default: min(75cqw, 360px))
|
|
62
|
+
* @cssprop --empty-state-color-heading - Heading text color (default: gray-900)
|
|
63
|
+
* @cssprop --empty-state-color-description - Description text color (default: gray-500)
|
|
64
|
+
*
|
|
65
|
+
* @slot graphic - Pseudo-slot for icon, image, picture, or SVG graphic.
|
|
66
|
+
* When the child is a `btu-icon`, the component overrides its `size` attribute
|
|
67
|
+
* based on the empty-state `size` prop (sm→md, md→lg, lg→xl). Use an `img`,
|
|
68
|
+
* `picture`, or inline `svg` for full size control.
|
|
69
|
+
* @slot actions - Pseudo-slot for action buttons. Children are moved into an internal
|
|
70
|
+
* `btu-button-group` (variant="spaced"), so size and disabled state are managed
|
|
71
|
+
* by the group.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```html
|
|
75
|
+
* <btu-empty-state heading="No results found" description="Try adjusting your search criteria.">
|
|
76
|
+
* <btu-icon slot="graphic" symbol="search" size="xl"></btu-icon>
|
|
77
|
+
* <button slot="actions">Clear filters</button>
|
|
78
|
+
* </btu-empty-state>
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
export default class EmptyState extends EventEmitterMixin(ReadyMixin(LitElement)) {
|
|
82
|
+
constructor() {
|
|
83
|
+
super(...arguments);
|
|
84
|
+
/**
|
|
85
|
+
* Heading text displayed in the empty state.
|
|
86
|
+
* @attr
|
|
87
|
+
*/
|
|
88
|
+
this.heading = '';
|
|
89
|
+
/**
|
|
90
|
+
* Size variant of the empty state. Affects spacing, description text, graphic size,
|
|
91
|
+
* and — when `heading-level` is unset — the default heading level (sm→5, md→4, lg→3).
|
|
92
|
+
* @attr
|
|
93
|
+
*/
|
|
94
|
+
this.size = 'md';
|
|
95
|
+
this.initialClasses = [];
|
|
96
|
+
}
|
|
97
|
+
createRenderRoot() {
|
|
98
|
+
return this;
|
|
99
|
+
}
|
|
100
|
+
connectedCallback() {
|
|
101
|
+
super.connectedCallback();
|
|
102
|
+
if (this.className) {
|
|
103
|
+
this.initialClasses = this.className.split(' ').filter(c => c.trim() && !MANAGED_CLASSES.has(c));
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
willUpdate(changedProperties) {
|
|
107
|
+
super.willUpdate(changedProperties);
|
|
108
|
+
const classes = [...this.initialClasses, 'btu-empty-state', `btu-empty-state-${this.size}`];
|
|
109
|
+
this.className = classes.filter(Boolean).join(' ');
|
|
110
|
+
if (changedProperties.has('headingLevel') && this.headingLevel != null && !isHeadingLevel(this.headingLevel)) {
|
|
111
|
+
console.warn(`EmptyState: Invalid heading-level="${this.headingLevel}". Valid values are 1-6. Falling back to size-based default.`);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
firstUpdated() {
|
|
115
|
+
const graphicContainer = this.querySelector('.btu-empty-state-graphic');
|
|
116
|
+
const actionsContainer = this.querySelector('.btu-empty-state-actions');
|
|
117
|
+
if (graphicContainer && actionsContainer) {
|
|
118
|
+
onFind(this, ':scope > :not([data-empty-state-internal])', el => {
|
|
119
|
+
const slot = el.getAttribute('slot');
|
|
120
|
+
if (slot === 'graphic') {
|
|
121
|
+
graphicContainer.appendChild(el);
|
|
122
|
+
if (el.tagName === 'BTU-ICON') {
|
|
123
|
+
this.syncGraphicIconSize();
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
else if (slot === 'actions') {
|
|
127
|
+
actionsContainer.appendChild(el);
|
|
128
|
+
}
|
|
129
|
+
else if (slot) {
|
|
130
|
+
console.warn(`EmptyState: Unrecognized slot="${slot}". Valid slots are "graphic" and "actions".`, el);
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
console.warn('EmptyState: Child element has no slot attribute. Use slot="graphic" or slot="actions".', el);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
this.emit('btu-empty-state-ready');
|
|
138
|
+
}
|
|
139
|
+
updated(changedProperties) {
|
|
140
|
+
super.updated(changedProperties);
|
|
141
|
+
if (changedProperties.has('size')) {
|
|
142
|
+
this.syncGraphicIconSize();
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
syncGraphicIconSize() {
|
|
146
|
+
const icon = this.querySelector('.btu-empty-state-graphic btu-icon');
|
|
147
|
+
if (icon) {
|
|
148
|
+
icon.setAttribute('size', ICON_SIZE_BY_EMPTY_STATE_SIZE[this.size]);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
resolveHeadingLevel() {
|
|
152
|
+
return isHeadingLevel(this.headingLevel) ? this.headingLevel : HEADING_LEVEL_BY_SIZE[this.size];
|
|
153
|
+
}
|
|
154
|
+
renderHeading(level, className) {
|
|
155
|
+
if (!this.heading)
|
|
156
|
+
return '';
|
|
157
|
+
switch (level) {
|
|
158
|
+
case 1:
|
|
159
|
+
return html `<h1 class="${className}" data-empty-state-internal>${this.heading}</h1>`;
|
|
160
|
+
case 2:
|
|
161
|
+
return html `<h2 class="${className}" data-empty-state-internal>${this.heading}</h2>`;
|
|
162
|
+
case 3:
|
|
163
|
+
return html `<h3 class="${className}" data-empty-state-internal>${this.heading}</h3>`;
|
|
164
|
+
case 4:
|
|
165
|
+
return html `<h4 class="${className}" data-empty-state-internal>${this.heading}</h4>`;
|
|
166
|
+
case 5:
|
|
167
|
+
return html `<h5 class="${className}" data-empty-state-internal>${this.heading}</h5>`;
|
|
168
|
+
case 6:
|
|
169
|
+
return html `<h6 class="${className}" data-empty-state-internal>${this.heading}</h6>`;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
render() {
|
|
173
|
+
const level = this.resolveHeadingLevel();
|
|
174
|
+
const headingClass = `btu-empty-state-title btu-heading-${level}`;
|
|
175
|
+
return html `
|
|
176
|
+
<div class="btu-empty-state-graphic" data-empty-state-internal></div>
|
|
177
|
+
<div class="btu-empty-state-content" data-empty-state-internal>
|
|
178
|
+
${this.renderHeading(level, headingClass)}
|
|
179
|
+
${this.description
|
|
180
|
+
? html `<p class="btu-empty-state-description" data-empty-state-internal>${this.description}</p>`
|
|
181
|
+
: ''}
|
|
182
|
+
</div>
|
|
183
|
+
<btu-button-group
|
|
184
|
+
class="btu-empty-state-actions"
|
|
185
|
+
variant="spaced"
|
|
186
|
+
size="${this.size}"
|
|
187
|
+
data-empty-state-internal
|
|
188
|
+
></btu-button-group>
|
|
189
|
+
`;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
__decorate([
|
|
193
|
+
property({ type: String })
|
|
194
|
+
], EmptyState.prototype, "heading", void 0);
|
|
195
|
+
__decorate([
|
|
196
|
+
property({ type: String })
|
|
197
|
+
], EmptyState.prototype, "description", void 0);
|
|
198
|
+
__decorate([
|
|
199
|
+
property({ type: String })
|
|
200
|
+
], EmptyState.prototype, "size", void 0);
|
|
201
|
+
__decorate([
|
|
202
|
+
property({ type: Number, attribute: 'heading-level' })
|
|
203
|
+
], EmptyState.prototype, "headingLevel", void 0);
|
|
204
|
+
// Register custom element with guard to prevent double registration
|
|
205
|
+
// (common with yarn link, HMR, or webpack bundle duplication)
|
|
206
|
+
if (!customElements.get('btu-empty-state')) {
|
|
207
|
+
customElements.define('btu-empty-state', EmptyState);
|
|
208
|
+
}
|
|
209
|
+
//# sourceMappingURL=EmptyState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
2
|
+
import type { ThemeColors } from '../../tailwind-plugin-theme.js';
|
|
3
|
+
export type IconGradientColor = Exclude<ThemeColors, 'black' | 'white'>;
|
|
2
4
|
export interface IconProps {
|
|
3
5
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
6
|
symbol?: string;
|
|
5
|
-
gradient?:
|
|
7
|
+
gradient?: IconGradientColor;
|
|
8
|
+
emphasize?: boolean | 'pulse';
|
|
6
9
|
}
|
|
7
10
|
declare const Icon_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
8
11
|
/**
|
|
@@ -16,10 +19,10 @@ declare const Icon_base: (new (...args: any[]) => import("../../util/EventEmitte
|
|
|
16
19
|
*
|
|
17
20
|
* @fires {CustomEvent} btu-icon-ready - Fired after first render and initialization
|
|
18
21
|
*
|
|
19
|
-
* @cssprop --
|
|
20
|
-
* @cssprop --
|
|
21
|
-
* @cssprop --
|
|
22
|
-
* @cssprop --
|
|
22
|
+
* @cssprop --icon-size - Icon size (overrides size default)
|
|
23
|
+
* @cssprop --icon-stroke-width - SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2)
|
|
24
|
+
* @cssprop --icon-fill - Icon fill color for filled icons (e.g., "currentColor")
|
|
25
|
+
* @cssprop --icon-svg - SVG data URI for mask-based rendering
|
|
23
26
|
*
|
|
24
27
|
* @example
|
|
25
28
|
* ```html
|
|
@@ -30,10 +33,10 @@ declare const Icon_base: (new (...args: any[]) => import("../../util/EventEmitte
|
|
|
30
33
|
* <btu-icon symbol="star" size="lg" gradient="primary"></btu-icon>
|
|
31
34
|
*
|
|
32
35
|
* <!-- Custom size via CSS -->
|
|
33
|
-
* <btu-icon symbol="check" style="--
|
|
36
|
+
* <btu-icon symbol="check" style="--icon-size: 3rem"></btu-icon>
|
|
34
37
|
*
|
|
35
38
|
* <!-- Filled icon via CSS (advanced usage) -->
|
|
36
|
-
* <btu-icon symbol="heart" style="--
|
|
39
|
+
* <btu-icon symbol="heart" style="--icon-fill: currentColor"></btu-icon>
|
|
37
40
|
* ```
|
|
38
41
|
*
|
|
39
42
|
* @example
|
|
@@ -68,12 +71,22 @@ export default class Icon extends Icon_base {
|
|
|
68
71
|
* When set, icon displays with gradient. When undefined, icon inherits parent text color.
|
|
69
72
|
* @attr
|
|
70
73
|
*/
|
|
71
|
-
gradient?:
|
|
74
|
+
gradient?: IconGradientColor;
|
|
75
|
+
/**
|
|
76
|
+
* Emphasize mode — renders a tonal circle with ring behind the icon.
|
|
77
|
+
* Colors are derived from `currentColor` via oklch relative color syntax.
|
|
78
|
+
* Defaults to primary; override with Tailwind `text-*` classes or `style="color: ..."`.
|
|
79
|
+
* Set as a boolean for the static circle, or `"pulse"` for a one-shot ring animation.
|
|
80
|
+
* Not intended for use with `gradient` — the two features target
|
|
81
|
+
* conflicting rendering modes.
|
|
82
|
+
* @attr
|
|
83
|
+
*/
|
|
84
|
+
emphasize?: boolean | 'pulse';
|
|
72
85
|
/** @internal */
|
|
73
86
|
private initialClasses;
|
|
74
87
|
connectedCallback(): void;
|
|
75
88
|
createRenderRoot(): this;
|
|
76
|
-
willUpdate(): void;
|
|
89
|
+
willUpdate(changedProperties: PropertyValues): void;
|
|
77
90
|
firstUpdated(): void;
|
|
78
91
|
/**
|
|
79
92
|
* Escape HTML special characters to prevent XSS attacks in comments.
|