@brightspot/ui 1.4.1 → 1.6.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 +12 -0
- package/dist/components/avatar/Avatar.d.ts +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +3 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +109 -0
- package/dist/components/pagination/Pagination.d.ts.map +1 -0
- package/dist/components/pagination/Pagination.js +351 -0
- package/dist/components/pagination/Pagination.js.map +1 -0
- package/dist/components/popover/Popover.d.ts +161 -0
- package/dist/components/popover/Popover.d.ts.map +1 -0
- package/dist/components/popover/Popover.js +436 -0
- package/dist/components/popover/Popover.js.map +1 -0
- package/dist/components/widget/Widget.css +104 -0
- package/dist/components/widget/Widget.d.ts +170 -0
- package/dist/components/widget/Widget.d.ts.map +1 -0
- package/dist/components/widget/Widget.js +434 -0
- package/dist/components/widget/Widget.js.map +1 -0
- package/dist/custom-elements.json +1151 -184
- package/dist/global.d.ts +5 -0
- package/dist/storybook/assets/{Avatar.stories-QxWs-YfX.js → Avatar.stories-CafEcy4T.js} +37 -32
- package/dist/storybook/assets/AvatarGroup.stories-BBkQuFKk.js +225 -0
- package/dist/storybook/assets/{Badge.stories-BpaApWbR.js → Badge.stories-mFZsls7i.js} +1 -1
- package/dist/storybook/assets/{Button.stories-C5h2usmd.js → Button.stories-CAWX17L1.js} +1 -1
- package/dist/storybook/assets/{CircularProgress.stories-DlPOiGja.js → CircularProgress.stories-DBVt4Cg2.js} +1 -1
- package/dist/storybook/assets/{ClipboardMixin.stories-Bb45-UOM.js → ClipboardMixin.stories-BH9E-OI6.js} +7 -7
- package/dist/storybook/assets/Color-6BZIO3FS-CVnTzq2p.js +1 -0
- package/dist/storybook/assets/{Colors.stories-DP2JKWUJ.js → Colors.stories-BFYmP0LL.js} +1 -1
- package/dist/storybook/assets/ComponentStatesMixin-Cu7YXkU8.js +1 -0
- package/dist/storybook/assets/{ComponentStatesMixin.stories-CyQ2aSTu.js → ComponentStatesMixin.stories-CAvyYt0H.js} +3 -3
- package/dist/storybook/assets/{CopyToClipboard.stories-DR7pckeV.js → CopyToClipboard.stories-DbJZsp_L.js} +1 -1
- package/dist/storybook/assets/{Debounce.stories-hkqyvqmg.js → Debounce.stories-BiFiH1K9.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-LL677BLK-Dtw9GMer.js → DocsRenderer-LL677BLK-Bq6G4eeC.js} +6 -6
- package/dist/storybook/assets/{Events.stories-BAgDzdyl.js → Events.stories-BsDBxh8_.js} +1 -1
- package/dist/storybook/assets/{Heading.stories-CN_fPsRf.js → Heading.stories-zGzWgHVO.js} +1 -1
- package/dist/storybook/assets/{Icon.stories-CSx_2K8V.js → Icon.stories-B4T6sSwf.js} +1 -1
- package/dist/storybook/assets/{LinearProgress.stories-In48DY2g.js → LinearProgress.stories-qzqmUUwY.js} +1 -1
- package/dist/storybook/assets/Pagination.stories-B6Q-7taJ.js +272 -0
- package/dist/storybook/assets/Popover.stories-CGkU0SGv.js +431 -0
- package/dist/storybook/assets/ReadyMixin-3YCzoG6W.js +1 -0
- package/dist/storybook/assets/{Rtc.stories-19d7WXe4.js → Rtc.stories-Y1MYTWAt.js} +1 -1
- package/dist/storybook/assets/{ScrollShadow.stories-BFjracVd.js → ScrollShadow.stories-B9kSpLT1.js} +1 -1
- package/dist/storybook/assets/{Throttle.stories-DD6ydiVq.js → Throttle.stories-BgvLDrS3.js} +1 -1
- package/dist/storybook/assets/Tooltip.stories-POo1M-ew.js +143 -0
- package/dist/storybook/assets/Widget.stories--JpqVyJe.js +233 -0
- package/dist/storybook/assets/{WithTooltip-65CFNBJE-Be1dKqOF.js → WithTooltip-65CFNBJE-DNbD9hAX.js} +2 -2
- package/dist/storybook/assets/custom-element-UsVr97OX.js +1 -0
- package/dist/storybook/assets/{formatter-EIJCOSYU-anC2P5HS.js → formatter-EIJCOSYU-Cy8KIxab.js} +1 -1
- package/dist/storybook/assets/if-defined-CngSGyRu.js +1 -0
- package/dist/storybook/assets/iframe-DiT9Iz2T.css +1 -0
- package/dist/storybook/assets/{iframe-Bl9oHz5c.js → iframe-Dz6CxatW.js} +95 -95
- package/dist/storybook/assets/{index-Cn5E5A3G.js → index-CebChkmF.js} +1 -1
- package/dist/storybook/assets/{onFind.stories-BMDLUk0l.js → onFind.stories-nHDImx0x.js} +1 -1
- package/dist/storybook/assets/{onRemove.stories-C3FcxtYh.js → onRemove.stories-CBxYVPwd.js} +1 -1
- package/dist/storybook/assets/{onVisible.stories-B8Zyu0Th.js → onVisible.stories-D4Qewc9Y.js} +1 -1
- package/dist/storybook/assets/style-map-BgW9piaW.js +1 -0
- package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-BfTKsIVL.js → syntaxhighlighter-ED5Y7EFY-CROW1475.js} +1 -1
- 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-pagination.d.ts +2 -0
- package/dist/tailwind-plugin-pagination.d.ts.map +1 -0
- package/dist/tailwind-plugin-pagination.js +164 -0
- package/dist/tailwind-plugin-pagination.js.map +1 -0
- package/dist/tailwind-plugin-pagination.ts +179 -0
- package/dist/tailwind-plugin-popover.d.ts +2 -0
- package/dist/tailwind-plugin-popover.d.ts.map +1 -0
- package/dist/tailwind-plugin-popover.js +177 -0
- package/dist/tailwind-plugin-popover.js.map +1 -0
- package/dist/tailwind-plugin-popover.ts +202 -0
- package/dist/tailwind-plugin-tooltip.d.ts +2 -0
- package/dist/tailwind-plugin-tooltip.d.ts.map +1 -0
- package/dist/tailwind-plugin-tooltip.js +184 -0
- package/dist/tailwind-plugin-tooltip.js.map +1 -0
- package/dist/tailwind-plugin-tooltip.ts +209 -0
- package/dist/tailwind.config.d.ts +1 -4
- 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/EventEmitterMixin.d.ts +20 -0
- package/dist/util/EventEmitterMixin.d.ts.map +1 -1
- package/dist/util/EventEmitterMixin.js +1 -1
- package/dist/util/EventEmitterMixin.js.map +1 -1
- package/dist/util/TooltipController.d.ts +37 -0
- package/dist/util/TooltipController.d.ts.map +1 -0
- package/dist/util/TooltipController.js +133 -0
- package/dist/util/TooltipController.js.map +1 -0
- package/dist/util/TooltipMixin.d.ts +42 -0
- package/dist/util/TooltipMixin.d.ts.map +1 -0
- package/dist/util/TooltipMixin.js +401 -0
- package/dist/util/TooltipMixin.js.map +1 -0
- package/dist/util/aria.d.ts.map +1 -1
- package/dist/util/aria.js +2 -1
- package/dist/util/aria.js.map +1 -1
- package/dist/util/i18n.d.ts +13 -0
- package/dist/util/i18n.d.ts.map +1 -0
- package/dist/util/i18n.js +21 -0
- package/dist/util/i18n.js.map +1 -0
- package/package.json +2 -2
- package/dist/storybook/assets/AvatarGroup.stories-Cy_Bvn7E.js +0 -211
- package/dist/storybook/assets/Color-6BZIO3FS-CcgGYVAo.js +0 -1
- package/dist/storybook/assets/ComponentStatesMixin-B7ci0thi.js +0 -1
- package/dist/storybook/assets/iframe-B4njXYq6.css +0 -1
package/README.md
CHANGED
|
@@ -99,6 +99,18 @@ An example of including a plugin:
|
|
|
99
99
|
...
|
|
100
100
|
```
|
|
101
101
|
|
|
102
|
+
## Web Components
|
|
103
|
+
|
|
104
|
+
Brightspot UI includes custom web components built with LitElement. FOUC (Flash of Unstyled Content) prevention is handled automatically when you import the components.
|
|
105
|
+
|
|
106
|
+
Import components in your JavaScript/TypeScript:
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
import '@brightspot/ui/dist/components/widget/Widget'
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
See the Storybook documentation for detailed usage examples and API references.
|
|
113
|
+
|
|
102
114
|
## Examples
|
|
103
115
|
|
|
104
116
|
We use [Storybook](https://storybook.js.org/) for interactive previewing of our ui components. Launch that in the browser by running:
|
|
@@ -5,7 +5,7 @@ export interface AvatarProps {
|
|
|
5
5
|
fallback?: string;
|
|
6
6
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
7
7
|
}
|
|
8
|
-
declare const Avatar_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
8
|
+
declare const Avatar_base: (new (...args: any[]) => import("../../util/TooltipMixin.js").TooltipMixinInterface) & (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* An avatar component for displaying user profile images with fallback support.
|
|
11
11
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAMtC,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;CAChD;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAuD;IACzF;;;OAGG;IAEH,GAAG,SAAK;IAER;;;OAGG;IAEH,GAAG,SAAK;IAER;;;OAGG;IAEH,QAAQ,SAAK;IAEb;;;;;;;;;OASG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAO;IAErD,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,gBAAgB;IAEhB,OAAO,CAAC,WAAW,CAAQ;IAE3B,gBAAgB;IAEhB,OAAO,CAAC,UAAU,CAAQ;IAE1B,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAWlB,YAAY,IAAI,IAAI;IAqBpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IA2BlD,MAAM;CAMP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}
|
|
@@ -8,6 +8,7 @@ import { LitElement, html } from 'lit';
|
|
|
8
8
|
import { property, state } from 'lit/decorators.js';
|
|
9
9
|
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
10
|
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
11
|
+
import { TooltipMixin } from '../../util/TooltipMixin.js';
|
|
11
12
|
/**
|
|
12
13
|
* An avatar component for displaying user profile images with fallback support.
|
|
13
14
|
*
|
|
@@ -35,7 +36,7 @@ import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
|
35
36
|
* <btu-avatar fallback="JD" size="lg"></btu-avatar>
|
|
36
37
|
* ```
|
|
37
38
|
*/
|
|
38
|
-
export default class Avatar extends EventEmitterMixin(ReadyMixin(LitElement)) {
|
|
39
|
+
export default class Avatar extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
|
|
39
40
|
constructor() {
|
|
40
41
|
super(...arguments);
|
|
41
42
|
/**
|
|
@@ -109,6 +110,7 @@ export default class Avatar extends EventEmitterMixin(ReadyMixin(LitElement)) {
|
|
|
109
110
|
}
|
|
110
111
|
}
|
|
111
112
|
updated(changedProperties) {
|
|
113
|
+
super.updated(changedProperties);
|
|
112
114
|
// Reset image error state when src changes
|
|
113
115
|
if (changedProperties.has('src')) {
|
|
114
116
|
this.imageError = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '../circular-progress/CircularProgress.js';
|
|
3
|
+
import '../icon/Icon.js';
|
|
4
|
+
declare const Pagination_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
|
|
5
|
+
/**
|
|
6
|
+
* A pagination component for navigating through paged content.
|
|
7
|
+
*
|
|
8
|
+
* Supports multiple layout variants (Search, Widget, Widget Small, Calendar)
|
|
9
|
+
* through configurable props and pseudo-slots.
|
|
10
|
+
*
|
|
11
|
+
* @element btu-pagination
|
|
12
|
+
*
|
|
13
|
+
* @slot page-size - Custom page-size selector (replaces built-in select)
|
|
14
|
+
* @slot jumper - Custom jumper content (e.g., page dropdown, "Today" button)
|
|
15
|
+
*
|
|
16
|
+
* @fires {CustomEvent} btu-pagination-ready - Fired after first render
|
|
17
|
+
* @fires {CustomEvent<{page: number, pageSize: number}>} btu-pagination-change - Fired on page navigation
|
|
18
|
+
* @fires {CustomEvent<{page: number, pageSize: number}>} btu-pagination-page-size-change - Fired on page size change
|
|
19
|
+
*
|
|
20
|
+
* @cssprop --pagination-color-background - Background color for select, buttons, and jumper
|
|
21
|
+
* @cssprop --pagination-color-foreground - Text/icon color
|
|
22
|
+
*/
|
|
23
|
+
export default class Pagination extends Pagination_base {
|
|
24
|
+
/**
|
|
25
|
+
* Current page number (1-based)
|
|
26
|
+
* @attr
|
|
27
|
+
*/
|
|
28
|
+
page: number;
|
|
29
|
+
/**
|
|
30
|
+
* Number of items per page
|
|
31
|
+
* @attr page-size
|
|
32
|
+
*/
|
|
33
|
+
pageSize: number;
|
|
34
|
+
/**
|
|
35
|
+
* Disables all pagination controls
|
|
36
|
+
* @attr
|
|
37
|
+
*/
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Shows loading spinner and dims controls
|
|
41
|
+
* @attr
|
|
42
|
+
*/
|
|
43
|
+
loading: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Hide controls when there is only one page
|
|
46
|
+
* @attr hide-on-single-page
|
|
47
|
+
*/
|
|
48
|
+
hideOnSinglePage: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Show the page size dropdown
|
|
51
|
+
* @attr page-size-changer
|
|
52
|
+
*/
|
|
53
|
+
pageSizeChanger: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Comma-separated page size options
|
|
56
|
+
* @attr page-size-options
|
|
57
|
+
*/
|
|
58
|
+
pageSizeOptions: string;
|
|
59
|
+
/**
|
|
60
|
+
* Total number of items across all pages
|
|
61
|
+
* @attr total-items
|
|
62
|
+
*/
|
|
63
|
+
totalItems: number;
|
|
64
|
+
/**
|
|
65
|
+
* Show first and last page buttons
|
|
66
|
+
* @attr boundary-buttons
|
|
67
|
+
*/
|
|
68
|
+
boundaryButtons: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Hide the item count display (e.g., "1-10 of 200")
|
|
71
|
+
* @attr hide-total-count
|
|
72
|
+
*/
|
|
73
|
+
hideTotalCount: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Accessible label for the pagination nav landmark
|
|
76
|
+
* @attr
|
|
77
|
+
*/
|
|
78
|
+
label: string | undefined;
|
|
79
|
+
/** @internal */
|
|
80
|
+
private _userInitiated;
|
|
81
|
+
/** @internal */
|
|
82
|
+
private initialClasses;
|
|
83
|
+
/** @internal */
|
|
84
|
+
private _hideControls;
|
|
85
|
+
private get _parsedPageSizeOptions();
|
|
86
|
+
private get _totalPages();
|
|
87
|
+
private get _startItem();
|
|
88
|
+
private get _endItem();
|
|
89
|
+
connectedCallback(): void;
|
|
90
|
+
createRenderRoot(): this;
|
|
91
|
+
willUpdate(): void;
|
|
92
|
+
firstUpdated(): void;
|
|
93
|
+
updated(changed: Map<string, unknown>): void;
|
|
94
|
+
private _setupSlots;
|
|
95
|
+
private _goToFirstPage;
|
|
96
|
+
private _goToPreviousPage;
|
|
97
|
+
private _goToNextPage;
|
|
98
|
+
private _goToLastPage;
|
|
99
|
+
private _manageBoundaryFocus;
|
|
100
|
+
private _onPageSizeChange;
|
|
101
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
102
|
+
}
|
|
103
|
+
declare global {
|
|
104
|
+
interface HTMLElementTagNameMap {
|
|
105
|
+
'btu-pagination': Pagination;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
export {};
|
|
109
|
+
//# sourceMappingURL=Pagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,OAAO,0CAA0C,CAAA;AACjD,OAAO,iBAAiB,CAAA;;AAExB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAyC;IAC/E;;;OAGG;IAEH,IAAI,SAAI;IAER;;;OAGG;IAEH,QAAQ,SAAI;IAEZ;;;OAGG;IAEH,QAAQ,UAAQ;IAEhB;;;OAGG;IAEH,OAAO,UAAQ;IAEf;;;OAGG;IAEH,gBAAgB,UAAO;IAEvB;;;OAGG;IAEH,eAAe,UAAO;IAEtB;;;OAGG;IAEH,eAAe,SAAe;IAE9B;;;OAGG;IAEH,UAAU,SAAI;IAEd;;;OAGG;IAEH,eAAe,UAAO;IAEtB;;;OAGG;IAEH,cAAc,UAAQ;IAEtB;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAEzB,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAQ;IAE9B,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,KAAK,sBAAsB,GAMjC;IAED,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAGnB;IAED,iBAAiB,IAAI,IAAI;IAOzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAmClB,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAe5C,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,iBAAiB;IAezB,MAAM;CAkFP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}
|
|
@@ -0,0 +1,351 @@
|
|
|
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, nothing } from 'lit';
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
|
|
10
|
+
import { l10n } from '../../util/i18n.js';
|
|
11
|
+
import { ReadyMixin } from '../../util/ReadyMixin.js';
|
|
12
|
+
import '../circular-progress/CircularProgress.js';
|
|
13
|
+
import '../icon/Icon.js';
|
|
14
|
+
/**
|
|
15
|
+
* A pagination component for navigating through paged content.
|
|
16
|
+
*
|
|
17
|
+
* Supports multiple layout variants (Search, Widget, Widget Small, Calendar)
|
|
18
|
+
* through configurable props and pseudo-slots.
|
|
19
|
+
*
|
|
20
|
+
* @element btu-pagination
|
|
21
|
+
*
|
|
22
|
+
* @slot page-size - Custom page-size selector (replaces built-in select)
|
|
23
|
+
* @slot jumper - Custom jumper content (e.g., page dropdown, "Today" button)
|
|
24
|
+
*
|
|
25
|
+
* @fires {CustomEvent} btu-pagination-ready - Fired after first render
|
|
26
|
+
* @fires {CustomEvent<{page: number, pageSize: number}>} btu-pagination-change - Fired on page navigation
|
|
27
|
+
* @fires {CustomEvent<{page: number, pageSize: number}>} btu-pagination-page-size-change - Fired on page size change
|
|
28
|
+
*
|
|
29
|
+
* @cssprop --pagination-color-background - Background color for select, buttons, and jumper
|
|
30
|
+
* @cssprop --pagination-color-foreground - Text/icon color
|
|
31
|
+
*/
|
|
32
|
+
export default class Pagination extends EventEmitterMixin(ReadyMixin(LitElement)) {
|
|
33
|
+
constructor() {
|
|
34
|
+
super(...arguments);
|
|
35
|
+
/**
|
|
36
|
+
* Current page number (1-based)
|
|
37
|
+
* @attr
|
|
38
|
+
*/
|
|
39
|
+
this.page = 1;
|
|
40
|
+
/**
|
|
41
|
+
* Number of items per page
|
|
42
|
+
* @attr page-size
|
|
43
|
+
*/
|
|
44
|
+
this.pageSize = 0;
|
|
45
|
+
/**
|
|
46
|
+
* Disables all pagination controls
|
|
47
|
+
* @attr
|
|
48
|
+
*/
|
|
49
|
+
this.disabled = false;
|
|
50
|
+
/**
|
|
51
|
+
* Shows loading spinner and dims controls
|
|
52
|
+
* @attr
|
|
53
|
+
*/
|
|
54
|
+
this.loading = false;
|
|
55
|
+
/**
|
|
56
|
+
* Hide controls when there is only one page
|
|
57
|
+
* @attr hide-on-single-page
|
|
58
|
+
*/
|
|
59
|
+
this.hideOnSinglePage = true;
|
|
60
|
+
/**
|
|
61
|
+
* Show the page size dropdown
|
|
62
|
+
* @attr page-size-changer
|
|
63
|
+
*/
|
|
64
|
+
this.pageSizeChanger = true;
|
|
65
|
+
/**
|
|
66
|
+
* Comma-separated page size options
|
|
67
|
+
* @attr page-size-options
|
|
68
|
+
*/
|
|
69
|
+
this.pageSizeOptions = '10, 20, 50';
|
|
70
|
+
/**
|
|
71
|
+
* Total number of items across all pages
|
|
72
|
+
* @attr total-items
|
|
73
|
+
*/
|
|
74
|
+
this.totalItems = 0;
|
|
75
|
+
/**
|
|
76
|
+
* Show first and last page buttons
|
|
77
|
+
* @attr boundary-buttons
|
|
78
|
+
*/
|
|
79
|
+
this.boundaryButtons = true;
|
|
80
|
+
/**
|
|
81
|
+
* Hide the item count display (e.g., "1-10 of 200")
|
|
82
|
+
* @attr hide-total-count
|
|
83
|
+
*/
|
|
84
|
+
this.hideTotalCount = false;
|
|
85
|
+
/** @internal */
|
|
86
|
+
this._userInitiated = false;
|
|
87
|
+
/** @internal */
|
|
88
|
+
this.initialClasses = [];
|
|
89
|
+
/** @internal */
|
|
90
|
+
this._hideControls = false;
|
|
91
|
+
}
|
|
92
|
+
get _parsedPageSizeOptions() {
|
|
93
|
+
const parsed = this.pageSizeOptions
|
|
94
|
+
.split(',')
|
|
95
|
+
.map(s => parseInt(s.trim(), 10))
|
|
96
|
+
.filter(n => !isNaN(n) && n > 0);
|
|
97
|
+
return parsed.length > 0 ? parsed : [10];
|
|
98
|
+
}
|
|
99
|
+
get _totalPages() {
|
|
100
|
+
if (this.pageSize <= 0)
|
|
101
|
+
return 1;
|
|
102
|
+
return Math.max(1, Math.ceil(this.totalItems / this.pageSize));
|
|
103
|
+
}
|
|
104
|
+
get _startItem() {
|
|
105
|
+
if (this.totalItems === 0)
|
|
106
|
+
return 0;
|
|
107
|
+
return (this.page - 1) * this.pageSize + 1;
|
|
108
|
+
}
|
|
109
|
+
get _endItem() {
|
|
110
|
+
if (this.totalItems === 0)
|
|
111
|
+
return 0;
|
|
112
|
+
return Math.min(this.page * this.pageSize, this.totalItems);
|
|
113
|
+
}
|
|
114
|
+
connectedCallback() {
|
|
115
|
+
super.connectedCallback();
|
|
116
|
+
if (this.className) {
|
|
117
|
+
this.initialClasses = this.className.split(' ').filter(c => c.trim());
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
createRenderRoot() {
|
|
121
|
+
return this;
|
|
122
|
+
}
|
|
123
|
+
willUpdate() {
|
|
124
|
+
// Validate totalItems
|
|
125
|
+
if (isNaN(this.totalItems) || this.totalItems < 0) {
|
|
126
|
+
this.totalItems = 0;
|
|
127
|
+
}
|
|
128
|
+
// Initialize pageSize from first option if not set
|
|
129
|
+
if (this.pageSize <= 0) {
|
|
130
|
+
this.pageSize = this._parsedPageSizeOptions[0];
|
|
131
|
+
}
|
|
132
|
+
// Validate pageSize against options
|
|
133
|
+
const options = this._parsedPageSizeOptions;
|
|
134
|
+
if (!options.includes(this.pageSize)) {
|
|
135
|
+
this.pageSize = options[0];
|
|
136
|
+
}
|
|
137
|
+
// Clamp page
|
|
138
|
+
const totalPages = this._totalPages;
|
|
139
|
+
if (this.page < 1)
|
|
140
|
+
this.page = 1;
|
|
141
|
+
if (this.page > totalPages)
|
|
142
|
+
this.page = totalPages;
|
|
143
|
+
// Build class list
|
|
144
|
+
this._hideControls = this.hideOnSinglePage && this._totalPages <= 1;
|
|
145
|
+
const shouldHide = this._hideControls && this.hideTotalCount;
|
|
146
|
+
const classes = [
|
|
147
|
+
...this.initialClasses,
|
|
148
|
+
'btu-pagination',
|
|
149
|
+
shouldHide ? 'btu-pagination-hidden' : '',
|
|
150
|
+
this.disabled ? 'btu-pagination-disabled' : '',
|
|
151
|
+
this.loading ? 'btu-pagination-loading' : '',
|
|
152
|
+
];
|
|
153
|
+
this.className = classes.filter(Boolean).join(' ');
|
|
154
|
+
}
|
|
155
|
+
firstUpdated() {
|
|
156
|
+
this.emit('btu-pagination-ready');
|
|
157
|
+
}
|
|
158
|
+
updated(changed) {
|
|
159
|
+
super.updated(changed);
|
|
160
|
+
this._setupSlots();
|
|
161
|
+
if (!this._userInitiated)
|
|
162
|
+
return;
|
|
163
|
+
this._userInitiated = false;
|
|
164
|
+
if (changed.has('pageSize')) {
|
|
165
|
+
this.emit('btu-pagination-page-size-change', { page: this.page, pageSize: this.pageSize });
|
|
166
|
+
}
|
|
167
|
+
if (changed.has('page')) {
|
|
168
|
+
this.emit('btu-pagination-change', { page: this.page, pageSize: this.pageSize });
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
_setupSlots() {
|
|
172
|
+
const pageSizeSlot = this.querySelector(':scope > [slot="page-size"]');
|
|
173
|
+
if (pageSizeSlot) {
|
|
174
|
+
const container = this.querySelector('.btu-pagination-size-changer');
|
|
175
|
+
if (container && pageSizeSlot.parentElement !== container) {
|
|
176
|
+
const builtinSelect = container.querySelector('.btu-pagination-select');
|
|
177
|
+
if (builtinSelect)
|
|
178
|
+
builtinSelect.remove();
|
|
179
|
+
container.appendChild(pageSizeSlot);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
const jumperSlot = this.querySelector(':scope > [slot="jumper"]');
|
|
183
|
+
if (jumperSlot) {
|
|
184
|
+
const container = this.querySelector('.btu-pagination-jumper');
|
|
185
|
+
if (container && jumperSlot.parentElement !== container) {
|
|
186
|
+
container.appendChild(jumperSlot);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
_goToFirstPage(e) {
|
|
191
|
+
this._userInitiated = true;
|
|
192
|
+
this.page = 1;
|
|
193
|
+
this._manageBoundaryFocus(e.currentTarget);
|
|
194
|
+
}
|
|
195
|
+
_goToPreviousPage(e) {
|
|
196
|
+
this._userInitiated = true;
|
|
197
|
+
this.page = Math.max(1, this.page - 1);
|
|
198
|
+
this._manageBoundaryFocus(e.currentTarget);
|
|
199
|
+
}
|
|
200
|
+
_goToNextPage(e) {
|
|
201
|
+
this._userInitiated = true;
|
|
202
|
+
this.page = Math.min(this._totalPages, this.page + 1);
|
|
203
|
+
this._manageBoundaryFocus(e.currentTarget);
|
|
204
|
+
}
|
|
205
|
+
_goToLastPage(e) {
|
|
206
|
+
this._userInitiated = true;
|
|
207
|
+
this.page = this._totalPages;
|
|
208
|
+
this._manageBoundaryFocus(e.currentTarget);
|
|
209
|
+
}
|
|
210
|
+
_manageBoundaryFocus(clickedButton) {
|
|
211
|
+
this.updateComplete.then(() => {
|
|
212
|
+
if (clickedButton.disabled) {
|
|
213
|
+
const enabled = this.querySelectorAll('.btu-pagination-controls > .btu-button:not([disabled])');
|
|
214
|
+
if (enabled.length > 0)
|
|
215
|
+
enabled[0].focus();
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
_onPageSizeChange(e) {
|
|
220
|
+
const select = e.target;
|
|
221
|
+
const newSize = parseInt(select.value, 10);
|
|
222
|
+
if (isNaN(newSize) || newSize <= 0)
|
|
223
|
+
return;
|
|
224
|
+
this._userInitiated = true;
|
|
225
|
+
this.pageSize = newSize;
|
|
226
|
+
// Clamp page to stay valid with new page size
|
|
227
|
+
const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newSize));
|
|
228
|
+
if (this.page > newTotalPages) {
|
|
229
|
+
this.page = newTotalPages;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
render() {
|
|
233
|
+
const isFirst = this.page <= 1;
|
|
234
|
+
const isLast = this.page >= this._totalPages;
|
|
235
|
+
const options = this._parsedPageSizeOptions;
|
|
236
|
+
return html `
|
|
237
|
+
<nav class="btu-pagination-nav" aria-label="${this.label ?? l10n('pagination', 'navLabel', 'Pagination')}">
|
|
238
|
+
${!this._hideControls
|
|
239
|
+
? html `<div class="btu-pagination-size-changer">
|
|
240
|
+
${this.pageSizeChanger && !this.querySelector('[slot="page-size"]')
|
|
241
|
+
? html `
|
|
242
|
+
<select
|
|
243
|
+
class="btu-pagination-select"
|
|
244
|
+
aria-label="${l10n('pagination', 'itemsPerPage', 'Items per page')}"
|
|
245
|
+
@change=${this._onPageSizeChange}
|
|
246
|
+
?disabled=${this.disabled || this.loading}
|
|
247
|
+
>
|
|
248
|
+
${options.map(o => html `<option value="${o}" ?selected=${o === this.pageSize}>${o}</option>`)}
|
|
249
|
+
</select>
|
|
250
|
+
`
|
|
251
|
+
: nothing}
|
|
252
|
+
</div>`
|
|
253
|
+
: nothing}
|
|
254
|
+
${!this.hideTotalCount
|
|
255
|
+
? html `<div class="btu-pagination-total" aria-live="polite" aria-atomic="true" aria-busy="${this.loading}">
|
|
256
|
+
${this.totalItems > 0
|
|
257
|
+
? l10n('pagination', 'status', '___-___ of ___', [this._startItem, this._endItem, this.totalItems])
|
|
258
|
+
: nothing}
|
|
259
|
+
</div>`
|
|
260
|
+
: nothing}
|
|
261
|
+
${!this._hideControls
|
|
262
|
+
? html `<div
|
|
263
|
+
class="btu-pagination-controls"
|
|
264
|
+
role="group"
|
|
265
|
+
aria-label="${l10n('pagination', 'pageNavigation', 'Page navigation')}"
|
|
266
|
+
>
|
|
267
|
+
${this.boundaryButtons
|
|
268
|
+
? html `<button
|
|
269
|
+
class="btu-button btu-button-text-hidden btu-button-sm"
|
|
270
|
+
aria-label="${l10n('pagination', 'goToFirstPage', 'Go to first page')}"
|
|
271
|
+
?disabled=${isFirst || this.disabled || this.loading}
|
|
272
|
+
@click=${this._goToFirstPage}
|
|
273
|
+
>
|
|
274
|
+
<btu-icon symbol="chevrons-left" size="md" aria-hidden="true"></btu-icon>
|
|
275
|
+
</button>`
|
|
276
|
+
: nothing}
|
|
277
|
+
|
|
278
|
+
<button
|
|
279
|
+
class="btu-button btu-button-text-hidden btu-button-sm"
|
|
280
|
+
aria-label="${l10n('pagination', 'goToPreviousPage', 'Go to previous page')}"
|
|
281
|
+
?disabled=${isFirst || this.disabled || this.loading}
|
|
282
|
+
@click=${this._goToPreviousPage}
|
|
283
|
+
>
|
|
284
|
+
<btu-icon symbol="chevron-left" size="md" aria-hidden="true"></btu-icon>
|
|
285
|
+
</button>
|
|
286
|
+
|
|
287
|
+
<div class="btu-pagination-jumper"></div>
|
|
288
|
+
|
|
289
|
+
<button
|
|
290
|
+
class="btu-button btu-button-text-hidden btu-button-sm"
|
|
291
|
+
aria-label="${l10n('pagination', 'goToNextPage', 'Go to next page')}"
|
|
292
|
+
?disabled=${isLast || this.disabled || this.loading}
|
|
293
|
+
@click=${this._goToNextPage}
|
|
294
|
+
>
|
|
295
|
+
<btu-icon symbol="chevron-right" size="md" aria-hidden="true"></btu-icon>
|
|
296
|
+
</button>
|
|
297
|
+
|
|
298
|
+
${this.boundaryButtons
|
|
299
|
+
? html `<button
|
|
300
|
+
class="btu-button btu-button-text-hidden btu-button-sm"
|
|
301
|
+
aria-label="${l10n('pagination', 'goToLastPage', 'Go to last page')}"
|
|
302
|
+
?disabled=${isLast || this.disabled || this.loading}
|
|
303
|
+
@click=${this._goToLastPage}
|
|
304
|
+
>
|
|
305
|
+
<btu-icon symbol="chevrons-right" size="md" aria-hidden="true"></btu-icon>
|
|
306
|
+
</button>`
|
|
307
|
+
: nothing}
|
|
308
|
+
${this.loading ? html `<btu-circular-progress size="sm"></btu-circular-progress>` : nothing}
|
|
309
|
+
</div>`
|
|
310
|
+
: nothing}
|
|
311
|
+
</nav>
|
|
312
|
+
`;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
__decorate([
|
|
316
|
+
property({ type: Number })
|
|
317
|
+
], Pagination.prototype, "page", void 0);
|
|
318
|
+
__decorate([
|
|
319
|
+
property({ type: Number, attribute: 'page-size' })
|
|
320
|
+
], Pagination.prototype, "pageSize", void 0);
|
|
321
|
+
__decorate([
|
|
322
|
+
property({ type: Boolean })
|
|
323
|
+
], Pagination.prototype, "disabled", void 0);
|
|
324
|
+
__decorate([
|
|
325
|
+
property({ type: Boolean })
|
|
326
|
+
], Pagination.prototype, "loading", void 0);
|
|
327
|
+
__decorate([
|
|
328
|
+
property({ type: Boolean, attribute: 'hide-on-single-page' })
|
|
329
|
+
], Pagination.prototype, "hideOnSinglePage", void 0);
|
|
330
|
+
__decorate([
|
|
331
|
+
property({ type: Boolean, attribute: 'page-size-changer' })
|
|
332
|
+
], Pagination.prototype, "pageSizeChanger", void 0);
|
|
333
|
+
__decorate([
|
|
334
|
+
property({ type: String, attribute: 'page-size-options' })
|
|
335
|
+
], Pagination.prototype, "pageSizeOptions", void 0);
|
|
336
|
+
__decorate([
|
|
337
|
+
property({ type: Number, attribute: 'total-items' })
|
|
338
|
+
], Pagination.prototype, "totalItems", void 0);
|
|
339
|
+
__decorate([
|
|
340
|
+
property({ type: Boolean, attribute: 'boundary-buttons' })
|
|
341
|
+
], Pagination.prototype, "boundaryButtons", void 0);
|
|
342
|
+
__decorate([
|
|
343
|
+
property({ type: Boolean, attribute: 'hide-total-count' })
|
|
344
|
+
], Pagination.prototype, "hideTotalCount", void 0);
|
|
345
|
+
__decorate([
|
|
346
|
+
property({ type: String })
|
|
347
|
+
], Pagination.prototype, "label", void 0);
|
|
348
|
+
if (!customElements.get('btu-pagination')) {
|
|
349
|
+
customElements.define('btu-pagination', Pagination);
|
|
350
|
+
}
|
|
351
|
+
//# sourceMappingURL=Pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.ts"],"names":[],"mappings":"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"}
|