) {
+ if (changedProperties.has('currentPage') || changedProperties.has('itemsPerPage')) {
+ this._paginate();
+ this.onChange({
+ selectedPage: this.currentPage,
+ prevPage: changedProperties.get('currentPage'),
+ });
+ }
+ }
+
+ private _paginate() {
+ this.pages = [];
+ const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;
+
+ if (pageListLength <= 8) {
+ this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);
+ return;
+ }
+
+ this.pages.push(1);
+
+ if (this.currentPage < 5) {
+ this.pages.push(2, 3, 4, 5, '...');
+ } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {
+ this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');
+ } else {
+ this.pages.push(
+ '...',
+ pageListLength - 4,
+ pageListLength - 3,
+ pageListLength - 2,
+ pageListLength - 1
+ );
+ }
+
+ this.pages.push(pageListLength);
+ }
+
+ private _changePage(page: number): void {
+ this.currentPage = page;
+ }
+
+ private _pageBack(): void {
+ if (this.currentPage === 1) return;
+ this.currentPage--;
+ }
+
+ private _pageForward(): void {
+ if (this.currentPage === this._getLastPage()) return;
+ this.currentPage++;
+ }
+
+ private _getLastPage(): number {
+ return +this.pages[this.pages.length - 1];
+ }
+
+ private _inputHandler(event: CustomEvent) {
+ const inputValue = +(event.target as HTMLInputElement).value;
+ const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;
+ this._changePage(newPage);
+ }
+
+ private _selectHandler(event: CustomEvent) {
+ this.itemsPerPage = event?.detail[0]?.value || 100;
+ this.currentPage = 1;
+ }
+
+ private renderSinglePage(page: number | string) {
+ if (typeof page === 'string') {
+ return html``;
+ }
+ return html`
+
+ ${page}
+
+ `;
+ }
+
+ private renderPages() {
+ return html`
+
+
+
+ ${this.pages.map(page => html`${this.renderSinglePage(page)}`)}
+
+
+
+
+
+ ${selectOptions.map(option => {
+ return html`${option.text} ${this.optionText}`;
+ })}
+
+
+ ` : null;
+
+ const jumperEl = this.hasJumper
+ ? html`
+
+
+
`
+ : null;
+
+ const getHelperElements = () => {
+ if (!this.hasSelect && !this.hasJumper) return;
+ return html`
+
+ `;
+ };
+
+ return html` `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'bl-pagination': BlPagination;
+ }
+}
diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts
index eddc9d81..d8545dbc 100644
--- a/src/components/select/bl-select.test.ts
+++ b/src/components/select/bl-select.test.ts
@@ -19,14 +19,6 @@ describe('bl-select', () => {
-
-
@@ -139,11 +131,20 @@ describe('bl-select', () => {
const event = await oneEvent(el, 'bl-select');
+ expect(removeAll).to.exist;
expect(event).to.exist;
expect(event.detail).to.eql([]);
expect(el.options.length).to.equal(2);
expect(el.selectedOptions.length).to.equal(0);
});
+ it('should hide remove icon button on single selection', async () => {
+ const el = await fixture(html`
+ Option 1
+ Option 2
+ `);
+
+ expect(el.shadowRoot?.querySelector('.remove-all')).not.to.exist;
+ });
it('should fire event when click select option when it is not selected', async () => {
const el = await fixture(html`
Option 1
diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index b319800a..1718ee0c 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -208,7 +208,7 @@ export default class BlSelect extends LitElement {
>
${placeholder} ${inputSelectedOptions} ${_selectedItemCount}
- ${removeButton}
+ ${this.multiple ? removeButton : null}
- `
+ testRunnerHtml: testFramework => `