@lukso/web-components 1.76.0 → 1.78.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/index.cjs +8 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -3
- package/dist/components/lukso-button/index.cjs +25 -5
- package/dist/components/lukso-button/index.d.ts +1 -0
- package/dist/components/lukso-button/index.d.ts.map +1 -1
- package/dist/components/lukso-button/index.js +25 -5
- package/dist/components/lukso-button/lukso-button.stories.d.ts.map +1 -1
- package/dist/components/lukso-card/index.cjs +3 -3
- package/dist/components/lukso-card/index.js +3 -3
- package/dist/components/lukso-checkbox/index.cjs +1 -1
- package/dist/components/lukso-checkbox/index.js +1 -1
- package/dist/components/lukso-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/icons/profile-remove.d.ts +3 -0
- package/dist/components/lukso-icon/icons/profile-remove.d.ts.map +1 -0
- package/dist/components/lukso-icon/index.cjs +36 -3
- package/dist/components/lukso-icon/index.d.ts.map +1 -1
- package/dist/components/lukso-icon/index.js +36 -3
- package/dist/components/lukso-image/index.cjs +2 -2
- package/dist/components/lukso-image/index.js +2 -2
- package/dist/components/lukso-input/index.cjs +2 -2
- package/dist/components/lukso-input/index.js +2 -2
- package/dist/components/lukso-modal/index.cjs +1 -1
- package/dist/components/lukso-modal/index.js +1 -1
- package/dist/components/lukso-navbar/index.cjs +3 -3
- package/dist/components/lukso-navbar/index.js +3 -3
- package/dist/components/lukso-pagination/index.cjs +202 -0
- package/dist/components/lukso-pagination/index.d.ts +32 -0
- package/dist/components/lukso-pagination/index.d.ts.map +1 -0
- package/dist/components/lukso-pagination/index.js +200 -0
- package/dist/components/lukso-pagination/lukso-pagination.stories.d.ts +25 -0
- package/dist/components/lukso-pagination/lukso-pagination.stories.d.ts.map +1 -0
- package/dist/components/lukso-profile/index.cjs +2 -2
- package/dist/components/lukso-profile/index.js +2 -2
- package/dist/components/lukso-progress/index.cjs +2 -2
- package/dist/components/lukso-progress/index.js +2 -2
- package/dist/components/lukso-sanitize/index.cjs +1 -1
- package/dist/components/lukso-sanitize/index.js +1 -1
- package/dist/components/lukso-search/index.cjs +3 -3
- package/dist/components/lukso-search/index.js +3 -3
- package/dist/components/lukso-select/index.cjs +3 -3
- package/dist/components/lukso-select/index.js +3 -3
- package/dist/components/lukso-share/index.cjs +1 -1
- package/dist/components/lukso-share/index.js +1 -1
- package/dist/components/lukso-switch/index.cjs +2 -2
- package/dist/components/lukso-switch/index.js +2 -2
- package/dist/components/lukso-tag/index.cjs +2 -2
- package/dist/components/lukso-tag/index.js +2 -2
- package/dist/components/lukso-terms/index.cjs +2 -2
- package/dist/components/lukso-terms/index.js +2 -2
- package/dist/components/lukso-test/index.cjs +1 -1
- package/dist/components/lukso-test/index.js +1 -1
- package/dist/components/lukso-tooltip/index.cjs +2 -2
- package/dist/components/lukso-tooltip/index.js +2 -2
- package/dist/components/lukso-username/index.cjs +2 -2
- package/dist/components/lukso-username/index.js +2 -2
- package/dist/components/lukso-wizard/index.cjs +1 -1
- package/dist/components/lukso-wizard/index.js +1 -1
- package/dist/{index-8c5bb33e.js → index-b2b55120.js} +1 -1
- package/dist/index-b500cc08.js +39 -0
- package/dist/{index-c87cbae4.cjs → index-b9a3ecb2.cjs} +1 -1
- package/dist/index-d2227f06.cjs +46 -0
- package/dist/index.cjs +8 -3
- package/dist/index.js +4 -3
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-8748e444.cjs → style-map-333da36f.cjs} +1 -1
- package/dist/{style-map-c427baa7.js → style-map-babc0be8.js} +1 -1
- package/package.json +6 -1
- package/dist/index-1663e4e9.cjs +0 -46
- package/dist/index-cc6befe7.js +0 -39
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
|
+
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
+
const state = require('../../state-d9fb972b.cjs');
|
|
8
|
+
const index = require('../../index-1d3f4a5a.cjs');
|
|
9
|
+
require('../lukso-icon/index.cjs');
|
|
10
|
+
require('../lukso-button/index.cjs');
|
|
11
|
+
require('../../bundle-mjs-d58a83c6.cjs');
|
|
12
|
+
require('../../style-map-333da36f.cjs');
|
|
13
|
+
require('../../directive-8278ab14.cjs');
|
|
14
|
+
require('../../tailwind-config.cjs');
|
|
15
|
+
require('../../cn-5ceac001.cjs');
|
|
16
|
+
|
|
17
|
+
const style = ":host {\n display: inline-flex\n}";
|
|
18
|
+
|
|
19
|
+
var __defProp = Object.defineProperty;
|
|
20
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
21
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
22
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
23
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
24
|
+
if (decorator = decorators[i])
|
|
25
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
26
|
+
if (kind && result)
|
|
27
|
+
__defProp(target, key, result);
|
|
28
|
+
return result;
|
|
29
|
+
};
|
|
30
|
+
exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_index.TailwindStyledElement(style) {
|
|
31
|
+
constructor() {
|
|
32
|
+
super(...arguments);
|
|
33
|
+
this.variant = "primary";
|
|
34
|
+
this.size = "small";
|
|
35
|
+
this.currentPage = 1;
|
|
36
|
+
this.totalPages = 0;
|
|
37
|
+
this.styles = index.ce({
|
|
38
|
+
slots: {
|
|
39
|
+
wrapper: "flex gap-2",
|
|
40
|
+
ellipsis: "items-center flex justify-center",
|
|
41
|
+
numbers: ""
|
|
42
|
+
},
|
|
43
|
+
variants: {
|
|
44
|
+
size: {
|
|
45
|
+
small: {
|
|
46
|
+
ellipsis: "min-w-6",
|
|
47
|
+
numbers: "min-w-6"
|
|
48
|
+
},
|
|
49
|
+
medium: {
|
|
50
|
+
wrapper: "paragraph-inter-16-semi-bold",
|
|
51
|
+
ellipsis: "min-w-8",
|
|
52
|
+
numbers: "min-w-8"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
willUpdate(changedProperties) {
|
|
59
|
+
if (changedProperties.has("currentPage") || changedProperties.has("totalPages")) {
|
|
60
|
+
this.pagination = this.paginate({
|
|
61
|
+
current: this.currentPage,
|
|
62
|
+
max: this.totalPages
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
paginate({ current, max }) {
|
|
67
|
+
if (!current || !max)
|
|
68
|
+
return null;
|
|
69
|
+
const prev = current === 1 ? null : current - 1;
|
|
70
|
+
const next = current === max ? null : current + 1;
|
|
71
|
+
const items = [1];
|
|
72
|
+
if (current === 1 && max === 1)
|
|
73
|
+
return { current, prev, next, items };
|
|
74
|
+
if (current > 4)
|
|
75
|
+
items.push("...");
|
|
76
|
+
const r = 2;
|
|
77
|
+
const r1 = current - r;
|
|
78
|
+
const r2 = current + r;
|
|
79
|
+
for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++)
|
|
80
|
+
items.push(i);
|
|
81
|
+
if (r2 + 1 < max)
|
|
82
|
+
items.push("...");
|
|
83
|
+
if (r2 < max)
|
|
84
|
+
items.push(max);
|
|
85
|
+
return { current, prev, next, items };
|
|
86
|
+
}
|
|
87
|
+
async pageChangeEvent() {
|
|
88
|
+
await this.updateComplete;
|
|
89
|
+
const pageChangeEvent = new CustomEvent("on-page-change", {
|
|
90
|
+
detail: {
|
|
91
|
+
value: this.pagination.current,
|
|
92
|
+
event
|
|
93
|
+
},
|
|
94
|
+
bubbles: false,
|
|
95
|
+
composed: true
|
|
96
|
+
});
|
|
97
|
+
this.dispatchEvent(pageChangeEvent);
|
|
98
|
+
}
|
|
99
|
+
async handleNextPage() {
|
|
100
|
+
this.currentPage = this.pagination.next;
|
|
101
|
+
await this.pageChangeEvent();
|
|
102
|
+
}
|
|
103
|
+
async handlePrevPage() {
|
|
104
|
+
this.currentPage = this.pagination.prev;
|
|
105
|
+
await this.pageChangeEvent();
|
|
106
|
+
}
|
|
107
|
+
async handlePageChange(page) {
|
|
108
|
+
this.currentPage = page;
|
|
109
|
+
await this.pageChangeEvent();
|
|
110
|
+
}
|
|
111
|
+
iconColor() {
|
|
112
|
+
const whiteVariants = ["primary", "landing"];
|
|
113
|
+
return whiteVariants.includes(this.variant) ? "neutral-100" : "neutral-20";
|
|
114
|
+
}
|
|
115
|
+
iconSize() {
|
|
116
|
+
return this.size === "small" ? "medium" : "large";
|
|
117
|
+
}
|
|
118
|
+
prevPageTemplate() {
|
|
119
|
+
return shared_tailwindElement_index.x`<lukso-button
|
|
120
|
+
size=${this.size}
|
|
121
|
+
variant=${this.variant}
|
|
122
|
+
is-icon
|
|
123
|
+
?disabled=${this.pagination.prev === null}
|
|
124
|
+
@click=${this.handlePrevPage}
|
|
125
|
+
>
|
|
126
|
+
<lukso-icon
|
|
127
|
+
name="arrow-left-sm"
|
|
128
|
+
size=${this.iconSize()}
|
|
129
|
+
color=${this.iconColor()}
|
|
130
|
+
></lukso-icon>
|
|
131
|
+
</lukso-button>`;
|
|
132
|
+
}
|
|
133
|
+
nextPageTemplate() {
|
|
134
|
+
return shared_tailwindElement_index.x`<lukso-button
|
|
135
|
+
size=${this.size}
|
|
136
|
+
variant=${this.variant}
|
|
137
|
+
is-icon
|
|
138
|
+
?disabled=${this.pagination.next === null}
|
|
139
|
+
@click=${this.handleNextPage}
|
|
140
|
+
>
|
|
141
|
+
<lukso-icon
|
|
142
|
+
name="arrow-right-sm"
|
|
143
|
+
size=${this.iconSize()}
|
|
144
|
+
color=${this.iconColor()}
|
|
145
|
+
></lukso-icon>
|
|
146
|
+
</lukso-button>`;
|
|
147
|
+
}
|
|
148
|
+
numbersTemplate(ellipsisStyles, numbersStyles) {
|
|
149
|
+
const numberTemplates = [];
|
|
150
|
+
for (const item of this.pagination.items) {
|
|
151
|
+
if (item === "...") {
|
|
152
|
+
numberTemplates.push(shared_tailwindElement_index.x` <div class=${ellipsisStyles}>...</div> `);
|
|
153
|
+
continue;
|
|
154
|
+
}
|
|
155
|
+
if (typeof item === "number") {
|
|
156
|
+
numberTemplates.push(
|
|
157
|
+
shared_tailwindElement_index.x`<lukso-button
|
|
158
|
+
size=${this.size}
|
|
159
|
+
variant=${this.variant}
|
|
160
|
+
?disabled=${this.currentPage === item}
|
|
161
|
+
is-full-width
|
|
162
|
+
is-icon
|
|
163
|
+
@click=${() => this.handlePageChange(item)}
|
|
164
|
+
>
|
|
165
|
+
<div class=${numbersStyles}>${item}</div>
|
|
166
|
+
</lukso-button>`
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
return numberTemplates;
|
|
171
|
+
}
|
|
172
|
+
render() {
|
|
173
|
+
const { wrapper, ellipsis, numbers } = this.styles({
|
|
174
|
+
size: this.size
|
|
175
|
+
});
|
|
176
|
+
return shared_tailwindElement_index.x`
|
|
177
|
+
<div class=${wrapper()}>
|
|
178
|
+
${this.prevPageTemplate()}
|
|
179
|
+
${this.numbersTemplate(ellipsis(), numbers())}
|
|
180
|
+
${this.nextPageTemplate()}
|
|
181
|
+
</div>
|
|
182
|
+
`;
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
__decorateClass([
|
|
186
|
+
queryAssignedElements.n({ type: String })
|
|
187
|
+
], exports.LuksoPagination.prototype, "variant", 2);
|
|
188
|
+
__decorateClass([
|
|
189
|
+
queryAssignedElements.n({ type: String })
|
|
190
|
+
], exports.LuksoPagination.prototype, "size", 2);
|
|
191
|
+
__decorateClass([
|
|
192
|
+
queryAssignedElements.n({ type: Number, attribute: "current-page" })
|
|
193
|
+
], exports.LuksoPagination.prototype, "currentPage", 2);
|
|
194
|
+
__decorateClass([
|
|
195
|
+
queryAssignedElements.n({ type: Number, attribute: "total-pages" })
|
|
196
|
+
], exports.LuksoPagination.prototype, "totalPages", 2);
|
|
197
|
+
__decorateClass([
|
|
198
|
+
state.t()
|
|
199
|
+
], exports.LuksoPagination.prototype, "pagination", 2);
|
|
200
|
+
exports.LuksoPagination = __decorateClass([
|
|
201
|
+
queryAssignedElements.e("lukso-pagination")
|
|
202
|
+
], exports.LuksoPagination);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import type { ButtonVariant } from '../../components/lukso-button';
|
|
3
|
+
import type { InputSize } from '../../shared/types';
|
|
4
|
+
export type PaginationVariant = ButtonVariant;
|
|
5
|
+
declare const LuksoPagination_base: typeof import("lit").LitElement;
|
|
6
|
+
export declare class LuksoPagination extends LuksoPagination_base {
|
|
7
|
+
variant: ButtonVariant;
|
|
8
|
+
size: InputSize;
|
|
9
|
+
currentPage: number;
|
|
10
|
+
totalPages: number;
|
|
11
|
+
private pagination;
|
|
12
|
+
private styles;
|
|
13
|
+
willUpdate(changedProperties: PropertyValues<this>): void;
|
|
14
|
+
private paginate;
|
|
15
|
+
private pageChangeEvent;
|
|
16
|
+
private handleNextPage;
|
|
17
|
+
private handlePrevPage;
|
|
18
|
+
private handlePageChange;
|
|
19
|
+
private iconColor;
|
|
20
|
+
private iconSize;
|
|
21
|
+
prevPageTemplate(): TemplateResult<1>;
|
|
22
|
+
nextPageTemplate(): TemplateResult<1>;
|
|
23
|
+
numbersTemplate(ellipsisStyles: string, numbersStyles: string): TemplateResult<1>[];
|
|
24
|
+
render(): TemplateResult<1>;
|
|
25
|
+
}
|
|
26
|
+
declare global {
|
|
27
|
+
interface HTMLElementTagNameMap {
|
|
28
|
+
'lukso-pagination': LuksoPagination;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAOpE,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAElC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAA;;AAS7C,qBACa,eAAgB,SAAQ,oBAA4B;IAE/D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,SAAS,CAAU;IAGzB,WAAW,SAAI;IAGf,UAAU,SAAI;IAGd,OAAO,CAAC,UAAU,CAAY;IAE9B,OAAO,CAAC,MAAM,CAmBZ;IAEF,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAYlD,OAAO,CAAC,QAAQ;YAsBF,eAAe;YAaf,cAAc;YAKd,cAAc;YAKd,gBAAgB;IAK9B,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,QAAQ;IAIhB,gBAAgB;IAgBhB,gBAAgB;IAgBhB,eAAe,CAAC,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM;IA4B7D,MAAM;CAaP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAA;KACpC;CACF"}
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-b500cc08.js';
|
|
2
|
+
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
|
+
import { t } from '../../state-b9ca4e74.js';
|
|
4
|
+
import { c as ce } from '../../index-ca8e900d.js';
|
|
5
|
+
import '../lukso-icon/index.js';
|
|
6
|
+
import '../lukso-button/index.js';
|
|
7
|
+
import '../../bundle-mjs-fbc6e2a8.js';
|
|
8
|
+
import '../../style-map-babc0be8.js';
|
|
9
|
+
import '../../directive-2bb7789e.js';
|
|
10
|
+
import '../../tailwind-config.js';
|
|
11
|
+
import '../../cn-b54dcc61.js';
|
|
12
|
+
|
|
13
|
+
const style = ":host {\n display: inline-flex\n}";
|
|
14
|
+
|
|
15
|
+
var __defProp = Object.defineProperty;
|
|
16
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
17
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
18
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
19
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
20
|
+
if (decorator = decorators[i])
|
|
21
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
22
|
+
if (kind && result)
|
|
23
|
+
__defProp(target, key, result);
|
|
24
|
+
return result;
|
|
25
|
+
};
|
|
26
|
+
let LuksoPagination = class extends TailwindStyledElement(style) {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
this.variant = "primary";
|
|
30
|
+
this.size = "small";
|
|
31
|
+
this.currentPage = 1;
|
|
32
|
+
this.totalPages = 0;
|
|
33
|
+
this.styles = ce({
|
|
34
|
+
slots: {
|
|
35
|
+
wrapper: "flex gap-2",
|
|
36
|
+
ellipsis: "items-center flex justify-center",
|
|
37
|
+
numbers: ""
|
|
38
|
+
},
|
|
39
|
+
variants: {
|
|
40
|
+
size: {
|
|
41
|
+
small: {
|
|
42
|
+
ellipsis: "min-w-6",
|
|
43
|
+
numbers: "min-w-6"
|
|
44
|
+
},
|
|
45
|
+
medium: {
|
|
46
|
+
wrapper: "paragraph-inter-16-semi-bold",
|
|
47
|
+
ellipsis: "min-w-8",
|
|
48
|
+
numbers: "min-w-8"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
willUpdate(changedProperties) {
|
|
55
|
+
if (changedProperties.has("currentPage") || changedProperties.has("totalPages")) {
|
|
56
|
+
this.pagination = this.paginate({
|
|
57
|
+
current: this.currentPage,
|
|
58
|
+
max: this.totalPages
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
paginate({ current, max }) {
|
|
63
|
+
if (!current || !max)
|
|
64
|
+
return null;
|
|
65
|
+
const prev = current === 1 ? null : current - 1;
|
|
66
|
+
const next = current === max ? null : current + 1;
|
|
67
|
+
const items = [1];
|
|
68
|
+
if (current === 1 && max === 1)
|
|
69
|
+
return { current, prev, next, items };
|
|
70
|
+
if (current > 4)
|
|
71
|
+
items.push("...");
|
|
72
|
+
const r = 2;
|
|
73
|
+
const r1 = current - r;
|
|
74
|
+
const r2 = current + r;
|
|
75
|
+
for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++)
|
|
76
|
+
items.push(i);
|
|
77
|
+
if (r2 + 1 < max)
|
|
78
|
+
items.push("...");
|
|
79
|
+
if (r2 < max)
|
|
80
|
+
items.push(max);
|
|
81
|
+
return { current, prev, next, items };
|
|
82
|
+
}
|
|
83
|
+
async pageChangeEvent() {
|
|
84
|
+
await this.updateComplete;
|
|
85
|
+
const pageChangeEvent = new CustomEvent("on-page-change", {
|
|
86
|
+
detail: {
|
|
87
|
+
value: this.pagination.current,
|
|
88
|
+
event
|
|
89
|
+
},
|
|
90
|
+
bubbles: false,
|
|
91
|
+
composed: true
|
|
92
|
+
});
|
|
93
|
+
this.dispatchEvent(pageChangeEvent);
|
|
94
|
+
}
|
|
95
|
+
async handleNextPage() {
|
|
96
|
+
this.currentPage = this.pagination.next;
|
|
97
|
+
await this.pageChangeEvent();
|
|
98
|
+
}
|
|
99
|
+
async handlePrevPage() {
|
|
100
|
+
this.currentPage = this.pagination.prev;
|
|
101
|
+
await this.pageChangeEvent();
|
|
102
|
+
}
|
|
103
|
+
async handlePageChange(page) {
|
|
104
|
+
this.currentPage = page;
|
|
105
|
+
await this.pageChangeEvent();
|
|
106
|
+
}
|
|
107
|
+
iconColor() {
|
|
108
|
+
const whiteVariants = ["primary", "landing"];
|
|
109
|
+
return whiteVariants.includes(this.variant) ? "neutral-100" : "neutral-20";
|
|
110
|
+
}
|
|
111
|
+
iconSize() {
|
|
112
|
+
return this.size === "small" ? "medium" : "large";
|
|
113
|
+
}
|
|
114
|
+
prevPageTemplate() {
|
|
115
|
+
return x`<lukso-button
|
|
116
|
+
size=${this.size}
|
|
117
|
+
variant=${this.variant}
|
|
118
|
+
is-icon
|
|
119
|
+
?disabled=${this.pagination.prev === null}
|
|
120
|
+
@click=${this.handlePrevPage}
|
|
121
|
+
>
|
|
122
|
+
<lukso-icon
|
|
123
|
+
name="arrow-left-sm"
|
|
124
|
+
size=${this.iconSize()}
|
|
125
|
+
color=${this.iconColor()}
|
|
126
|
+
></lukso-icon>
|
|
127
|
+
</lukso-button>`;
|
|
128
|
+
}
|
|
129
|
+
nextPageTemplate() {
|
|
130
|
+
return x`<lukso-button
|
|
131
|
+
size=${this.size}
|
|
132
|
+
variant=${this.variant}
|
|
133
|
+
is-icon
|
|
134
|
+
?disabled=${this.pagination.next === null}
|
|
135
|
+
@click=${this.handleNextPage}
|
|
136
|
+
>
|
|
137
|
+
<lukso-icon
|
|
138
|
+
name="arrow-right-sm"
|
|
139
|
+
size=${this.iconSize()}
|
|
140
|
+
color=${this.iconColor()}
|
|
141
|
+
></lukso-icon>
|
|
142
|
+
</lukso-button>`;
|
|
143
|
+
}
|
|
144
|
+
numbersTemplate(ellipsisStyles, numbersStyles) {
|
|
145
|
+
const numberTemplates = [];
|
|
146
|
+
for (const item of this.pagination.items) {
|
|
147
|
+
if (item === "...") {
|
|
148
|
+
numberTemplates.push(x` <div class=${ellipsisStyles}>...</div> `);
|
|
149
|
+
continue;
|
|
150
|
+
}
|
|
151
|
+
if (typeof item === "number") {
|
|
152
|
+
numberTemplates.push(
|
|
153
|
+
x`<lukso-button
|
|
154
|
+
size=${this.size}
|
|
155
|
+
variant=${this.variant}
|
|
156
|
+
?disabled=${this.currentPage === item}
|
|
157
|
+
is-full-width
|
|
158
|
+
is-icon
|
|
159
|
+
@click=${() => this.handlePageChange(item)}
|
|
160
|
+
>
|
|
161
|
+
<div class=${numbersStyles}>${item}</div>
|
|
162
|
+
</lukso-button>`
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
return numberTemplates;
|
|
167
|
+
}
|
|
168
|
+
render() {
|
|
169
|
+
const { wrapper, ellipsis, numbers } = this.styles({
|
|
170
|
+
size: this.size
|
|
171
|
+
});
|
|
172
|
+
return x`
|
|
173
|
+
<div class=${wrapper()}>
|
|
174
|
+
${this.prevPageTemplate()}
|
|
175
|
+
${this.numbersTemplate(ellipsis(), numbers())}
|
|
176
|
+
${this.nextPageTemplate()}
|
|
177
|
+
</div>
|
|
178
|
+
`;
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
__decorateClass([
|
|
182
|
+
n({ type: String })
|
|
183
|
+
], LuksoPagination.prototype, "variant", 2);
|
|
184
|
+
__decorateClass([
|
|
185
|
+
n({ type: String })
|
|
186
|
+
], LuksoPagination.prototype, "size", 2);
|
|
187
|
+
__decorateClass([
|
|
188
|
+
n({ type: Number, attribute: "current-page" })
|
|
189
|
+
], LuksoPagination.prototype, "currentPage", 2);
|
|
190
|
+
__decorateClass([
|
|
191
|
+
n({ type: Number, attribute: "total-pages" })
|
|
192
|
+
], LuksoPagination.prototype, "totalPages", 2);
|
|
193
|
+
__decorateClass([
|
|
194
|
+
t()
|
|
195
|
+
], LuksoPagination.prototype, "pagination", 2);
|
|
196
|
+
LuksoPagination = __decorateClass([
|
|
197
|
+
e("lukso-pagination")
|
|
198
|
+
], LuksoPagination);
|
|
199
|
+
|
|
200
|
+
export { LuksoPagination };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { Meta } from '@storybook/web-components';
|
|
2
|
+
/** Documentation and examples of `lukso-pagination` component. */
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
/** Example of default pagination. */
|
|
6
|
+
export declare const Default: any;
|
|
7
|
+
/** Example of active page in the middle. */
|
|
8
|
+
export declare const MiddlePage: any;
|
|
9
|
+
/** Example of active page in the end. */
|
|
10
|
+
export declare const EndPage: any;
|
|
11
|
+
/** Example of medium size. */
|
|
12
|
+
export declare const MediumSize: any;
|
|
13
|
+
/** Example of primary variant. */
|
|
14
|
+
export declare const PrimaryVariant: any;
|
|
15
|
+
/** Example of landing variant. */
|
|
16
|
+
export declare const LandingVariant: any;
|
|
17
|
+
/** Example of text variant. */
|
|
18
|
+
export declare const TextVariant: any;
|
|
19
|
+
/** Example of nav-button variant. */
|
|
20
|
+
export declare const NavButtonVariant: any;
|
|
21
|
+
/** Example of nav-text variant. */
|
|
22
|
+
export declare const NavTextVariant: any;
|
|
23
|
+
/** Example of link variant. */
|
|
24
|
+
export declare const LinkVariant: any;
|
|
25
|
+
//# sourceMappingURL=lukso-pagination.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lukso-pagination.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-pagination/lukso-pagination.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,mEAAmE;AACnE,QAAA,MAAM,IAAI,EAAE,IAuEX,CAAA;AAED,eAAe,IAAI,CAAA;AAWnB,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAQxC,4CAA4C;AAC5C,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,yCAAyC;AACzC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,8BAA8B;AAC9B,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,kCAAkC;AAClC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,kCAAkC;AAClC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,+BAA+B;AAC/B,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,qCAAqC;AACrC,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAKjD,mCAAmC;AACnC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,+BAA+B;AAC/B,eAAO,MAAM,WAAW,KAAoB,CAAA"}
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
8
8
|
require('../lukso-image/index.cjs');
|
|
9
9
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
10
10
|
require('../../state-d9fb972b.cjs');
|
|
11
|
-
require('../../style-map-
|
|
11
|
+
require('../../style-map-333da36f.cjs');
|
|
12
12
|
require('../../directive-8278ab14.cjs');
|
|
13
13
|
|
|
14
14
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-b500cc08.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
4
4
|
import '../lukso-image/index.js';
|
|
5
5
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
6
6
|
import '../../state-b9ca4e74.js';
|
|
7
|
-
import '../../style-map-
|
|
7
|
+
import '../../style-map-babc0be8.js';
|
|
8
8
|
import '../../directive-2bb7789e.js';
|
|
9
9
|
|
|
10
10
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-333da36f.cjs');
|
|
8
8
|
require('../../tailwind-config.cjs');
|
|
9
9
|
const cn = require('../../cn-5ceac001.cjs');
|
|
10
10
|
require('../../directive-8278ab14.cjs');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-b500cc08.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-babc0be8.js';
|
|
4
4
|
import '../../tailwind-config.js';
|
|
5
5
|
import { c as cn } from '../../cn-b54dcc61.js';
|
|
6
6
|
import '../../directive-2bb7789e.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const directive = require('../../directive-8278ab14.cjs');
|
|
8
8
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A, b as T, a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { A, b as T, a as TailwindElement, x } from '../../index-b500cc08.js';
|
|
2
2
|
import { n, e as e$2 } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
|
|
4
4
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
8
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
@@ -11,10 +11,10 @@ require('../lukso-profile/index.cjs');
|
|
|
11
11
|
require('../lukso-username/index.cjs');
|
|
12
12
|
require('../lukso-input/index.cjs');
|
|
13
13
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
14
|
-
require('../../style-map-
|
|
14
|
+
require('../../style-map-333da36f.cjs');
|
|
15
15
|
require('../../directive-8278ab14.cjs');
|
|
16
16
|
require('../lukso-image/index.cjs');
|
|
17
|
-
require('../../index-
|
|
17
|
+
require('../../index-b9a3ecb2.cjs');
|
|
18
18
|
require('../../tailwind-config.cjs');
|
|
19
19
|
require('../../cn-5ceac001.cjs');
|
|
20
20
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-b500cc08.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
4
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
@@ -7,10 +7,10 @@ import '../lukso-profile/index.js';
|
|
|
7
7
|
import '../lukso-username/index.js';
|
|
8
8
|
import '../lukso-input/index.js';
|
|
9
9
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
10
|
-
import '../../style-map-
|
|
10
|
+
import '../../style-map-babc0be8.js';
|
|
11
11
|
import '../../directive-2bb7789e.js';
|
|
12
12
|
import '../lukso-image/index.js';
|
|
13
|
-
import '../../index-
|
|
13
|
+
import '../../index-b2b55120.js';
|
|
14
14
|
import '../../tailwind-config.js';
|
|
15
15
|
import '../../cn-b54dcc61.js';
|
|
16
16
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
8
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
@@ -10,10 +10,10 @@ require('../lukso-icon/index.cjs');
|
|
|
10
10
|
require('../lukso-profile/index.cjs');
|
|
11
11
|
require('../lukso-username/index.cjs');
|
|
12
12
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
13
|
-
require('../../style-map-
|
|
13
|
+
require('../../style-map-333da36f.cjs');
|
|
14
14
|
require('../../directive-8278ab14.cjs');
|
|
15
15
|
require('../lukso-image/index.cjs');
|
|
16
|
-
require('../../index-
|
|
16
|
+
require('../../index-b9a3ecb2.cjs');
|
|
17
17
|
require('../../tailwind-config.cjs');
|
|
18
18
|
require('../../cn-5ceac001.cjs');
|
|
19
19
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-b500cc08.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
4
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
@@ -6,10 +6,10 @@ import '../lukso-icon/index.js';
|
|
|
6
6
|
import '../lukso-profile/index.js';
|
|
7
7
|
import '../lukso-username/index.js';
|
|
8
8
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
9
|
-
import '../../style-map-
|
|
9
|
+
import '../../style-map-babc0be8.js';
|
|
10
10
|
import '../../directive-2bb7789e.js';
|
|
11
11
|
import '../lukso-image/index.js';
|
|
12
|
-
import '../../index-
|
|
12
|
+
import '../../index-b2b55120.js';
|
|
13
13
|
import '../../tailwind-config.js';
|
|
14
14
|
import '../../cn-b54dcc61.js';
|
|
15
15
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
|
|
8
8
|
const style = ":host {\n display: inline-flex\n}";
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-d2227f06.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-333da36f.cjs');
|
|
8
8
|
const index = require('../../index-e9668573.cjs');
|
|
9
9
|
require('../../directive-8278ab14.cjs');
|
|
10
10
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-b500cc08.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-babc0be8.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-5e194caf.js';
|
|
5
5
|
import '../../directive-2bb7789e.js';
|
|
6
6
|
|