@otto-de/b2b-core-components 1.4.0 → 1.6.0

package/dist/collection/components/label/label.spec.js

@@ -0,0 +1,58 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { LabelComponent } from './label';
+it('should render the label component with default values', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", null, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+        <span class="b2b-label b2b-label--neutral">
+            <slot></slot>
+        </span>
+    `);
+});
+it('should render the label component with info styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "info" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--info">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with success styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "success" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--success">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with warning styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "warning" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--warning">
+              <slot></slot>
+          </span>
+      `);
+});
+it('should render the label component with error styles', async () => {
+  const page = await newSpecPage({
+    components: [LabelComponent],
+    template: () => h("b2b-label", { type: "error" }, "Neutral"),
+  });
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--error">
+              <slot></slot>
+          </span>
+      `);
+});

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -236,7 +235,7 @@
 :host .b2b-modal--open {
   display: flex;
 }
-:host .b2b-modal--backdrop {
+:host .b2b-modal__backdrop {
   top: 0;
   left: 0;
   z-index: 0;
@@ -244,7 +243,7 @@
   height: 100%;
   position: absolute;
 }
-:host .b2b-modal-dialog {
+:host .b2b-modal__dialog {
   z-index: 1;
   position: relative;
   min-width: var(--b2b-component-modal-default-min-width);
@@ -254,53 +253,48 @@
   box-shadow: 0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);
   margin: auto;
 }
-:host .b2b-modal-dialog--header {
+:host .b2b-modal__dialog__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--b2b-size-space-75);
 }
-:host .b2b-modal-dialog--close {
+:host .b2b-modal__dialog__close {
   cursor: pointer;
   background: transparent;
   padding: 0;
   border: none;
-  /* this is a workaround to force purgecss to include the overwrites of the variable --b2b-icon-cursor */
 }
-:host .b2b-modal-dialog--close b2b-icon {
+:host .b2b-modal__dialog__close b2b-icon {
   transition: all 0.3s ease;
-  --b2b-icon-cursor: pointer;
 }
-:host .b2b-modal-dialog--close .purge-css-include-variables {
-  cursor: var(--b2b-icon-cursor);
-}
-:host .b2b-modal-dialog--footer {
+:host .b2b-modal__dialog__footer {
   display: flex;
   justify-content: space-between;
   padding-top: calc(var(--b2b-size-space-75) * 2);
   margin-top: calc(var(--b2b-size-space-75) * 2);
   border-top: var(--b2b-size-1) solid var(--b2b-color-border-100);
 }
-:host .b2b-modal-dialog--footer-left {
+:host .b2b-modal__dialog__footer-left {
   display: flex;
   justify-content: flex-start;
 }
-:host .b2b-modal-dialog--footer-right {
+:host .b2b-modal__dialog__footer-right {
   display: flex;
   justify-content: flex-end;
 }
-:host .b2b-modal-dialog--large {
+:host .b2b-modal__dialog--large {
   max-width: var(--b2b-component-modal-large-max-width);
 }
 @media only screen and (max-width: var(--b2b-component-modal-large-max-width)) {
-  :host .b2b-modal-dialog--large {
+  :host .b2b-modal__dialog--large {
     left: 0;
     width: auto;
     max-width: var(--b2b-component-modal-large-max-width);
   }
 }
 @media only screen and (max-width: var(--b2b-component-modal-default-max-width)) {
-  :host .b2b-modal-dialog {
+  :host .b2b-modal__dialog {
     left: 0;
     width: auto;
     max-width: var(--b2b-component-modal-default-max-width);

package/dist/collection/components/modal/modal.e2e.js

@@ -0,0 +1,115 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-modal', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="false">Test</b2b-modal>');
+    const element = await page.find('b2b-modal');
+    expect(element).toHaveClass('hydrated');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(false);
+  });
+  it('open modal & heading', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    const headingElm = await modalDiv.find('b2b-headline');
+    expect(headingElm.textContent).toBe('Test Modal');
+  });
+  it('verify initial focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    await page.keyboard.press('Tab');
+    const closeContent = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.className;
+    });
+    expect(closeContent).toBe('b2b-modal__dialog__close');
+  });
+  it('verify focus trap', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    await page.keyboard.press('Tab');
+    let closeContent = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.className;
+    });
+    expect(closeContent).toBe('b2b-modal__dialog__close');
+    await page.keyboard.press('Tab');
+    closeContent = await page.evaluate(() => {
+      return document.activeElement.shadowRoot.activeElement.className;
+    });
+    expect(closeContent).toBe('b2b-modal__dialog__close');
+  });
+  it('verify close hover', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const modalDiv = await page.find('b2b-modal >>> div');
+    expect(await modalDiv.isVisible()).toBe(true);
+    const closeIcon = await page.find('b2b-modal >>> b2b-icon');
+    const closeIconColorBefore = await closeIcon.getProperty('color');
+    expect(closeIconColorBefore).toBe('secondary');
+    await closeIcon.hover();
+    await page.waitForChanges();
+    const closeIconColorAfter = await closeIcon.getProperty('color');
+    expect(closeIconColorAfter).toBe('primary');
+  });
+  it('verify close emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    const closeIcon = await page.find('b2b-modal >>> b2b-icon');
+    await closeIcon.click();
+    expect(b2bBeforeClose).toHaveReceivedEvent();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+  it('verify esc emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Escape');
+    expect(b2bBeforeClose).toHaveReceivedEvent();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+  it('verify esc no-emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true" esc-dismiss="false">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Escape');
+    expect(b2bBeforeClose).not.toHaveReceivedEvent();
+    expect(b2bClose).not.toHaveReceivedEvent();
+  });
+  it('verify backdrop dismiss emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true" backdrop-dismiss="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.evaluate(() => {
+      document
+        .querySelector('b2b-modal')
+        .shadowRoot.querySelector('div > div.b2b-modal__backdrop').click();
+    });
+    expect(b2bBeforeClose).toHaveReceivedEvent();
+    expect(b2bClose).toHaveReceivedEvent();
+  });
+  it('verify backdrop dismiss not emit', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
+    const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
+    const b2bClose = await page.spyOnEvent('b2b-close');
+    await page.evaluate(() => {
+      document
+        .querySelector('b2b-modal')
+        .shadowRoot.querySelector('div > div.b2b-modal__backdrop').click();
+    });
+    expect(b2bBeforeClose).not.toHaveReceivedEvent();
+    expect(b2bClose).not.toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/modal/modal.js

@@ -83,9 +83,9 @@ export class ModalComponent {
   }
   render() {
     return (h(Host, null, h("div", { class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { class: {
-        'b2b-modal-dialog': true,
-        [`b2b-modal-dialog--${this.variant}`]: true,
-      } }, h("div", { class: "b2b-modal-dialog--header" }, h("b2b-headline", { align: "center", size: "200", noMargin: true }, this.heading), h("button", { type: "button", class: "b2b-modal-dialog--close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { class: "b2b-modal-dialog--body" }, h("slot", null)), h("div", { class: "b2b-modal-dialog--footer" }, h("div", { class: "b2b-modal-dialog--footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "b2b-modal-dialog--footer-right" }, h("slot", { name: "footer-right" })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { class: "b2b-modal--backdrop", onClick: this.handleBackdropDismiss }))));
+        'b2b-modal__dialog': true,
+        [`b2b-modal__dialog--${this.variant}`]: true,
+      } }, h("div", { class: "b2b-modal__dialog__header" }, h("b2b-headline", { align: "center", size: "200", noMargin: true }, this.heading), h("button", { type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { class: "b2b-modal__dialog__body" }, h("slot", null)), h("div", { class: "b2b-modal__dialog__footer" }, h("div", { class: "b2b-modal__dialog__footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "b2b-modal__dialog__footer-right" }, h("slot", { name: "footer-right" })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
   }
   static get is() { return "b2b-modal"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -226,20 +225,20 @@
 .b2b-pagination li {
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-.b2b-pagination li:first-child:not(.b2b-pagination--first-item) {
+.b2b-pagination li:first-child:not(.b2b-pagination__first-item) {
   margin-right: var(--b2b-size-15);
 }
-.b2b-pagination li:last-child:not(.b2b-pagination--last-item) {
+.b2b-pagination li:last-child:not(.b2b-pagination__last-item) {
   margin-left: var(--b2b-size-15);
 }
-.b2b-pagination li.b2b-pagination--item b2b-button {
+.b2b-pagination li.b2b-pagination__item b2b-button {
   --b2b-border-radius: 0;
   --b2b-border-right: 0;
 }
-.b2b-pagination li.b2b-pagination--first-item b2b-button {
+.b2b-pagination li.b2b-pagination__first-item b2b-button {
   --b2b-border-radius: var(--b2b-size-border-no-radius-right);
 }
-.b2b-pagination li.b2b-pagination--last-item b2b-button {
+.b2b-pagination li.b2b-pagination__last-item b2b-button {
   --b2b-border-right: 1px solid var(--b2b-button-secondary-border-color);
   --b2b-border-radius: var(--b2b-size-border-no-radius-left);
 }

package/dist/collection/components/pagination/pagination.e2e.js

@@ -0,0 +1,256 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { PaginationConstants } from './pagination.constants';
+describe('B2B-Pagination', () => {
+  let page;
+  const getPaginationElement = async (page) => await page.find('b2b-pagination >>> nav');
+  const clickBack = async (pagination) => {
+    const backButton = await pagination.find({
+      text: PaginationConstants.BACK,
+    });
+    await backButton.click();
+  };
+  const clickNext = async (pagination) => {
+    const nextButton = await pagination.find({
+      text: PaginationConstants.NEXT,
+    });
+    await nextButton.click();
+  };
+  const navigationItemsSelector = 'b2b-pagination >>> li.b2b-pagination--item';
+  it('should set next page to active when click on next button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let firstItem = await pagination.find({ text: '1' });
+    expect(firstItem).toHaveAttribute('active');
+    await clickNext(pagination);
+    await page.waitForChanges();
+    firstItem = await pagination.find({ text: '1' });
+    expect(firstItem).not.toHaveAttribute('active');
+    const secondItem = await pagination.find({ text: '2' });
+    expect(secondItem).toHaveAttribute('active');
+  });
+  it('should set previous page to active when click on previous button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='5'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let lastItem = await pagination.find({ text: '5' });
+    expect(lastItem).toHaveAttribute('active');
+    await clickBack(pagination);
+    await page.waitForChanges();
+    lastItem = await pagination.find({ text: '5' });
+    expect(lastItem).not.toHaveAttribute('active');
+    const secondItem = await pagination.find({ text: '4' });
+    expect(secondItem).toHaveAttribute('active');
+  });
+  it('should update the items collection when navigating forward', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='7' active-page='3'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let items = await page.findAll(navigationItemsSelector);
+    const startingItemsCollection = ['1', '2', '3', '...', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(startingItemsCollection[index]);
+    });
+    await clickNext(pagination);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedNextItemCollection = ['1', '...', '3', '4', '5', '...', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedNextItemCollection[index]);
+    });
+    const nextActiveItem = await pagination.find({ text: '4' });
+    expect(nextActiveItem).toHaveAttribute('active');
+  });
+  it('should update the items collection when navigating back', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='7' active-page='5'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let items = await page.findAll(navigationItemsSelector);
+    const startingItemsCollection = ['1', '...', '5', '6', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(startingItemsCollection[index]);
+    });
+    await clickBack(pagination);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedBackItemCollection = ['1', '...', '3', '4', '5', '...', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedBackItemCollection[index]);
+    });
+    const nextActiveItem = await pagination.find({ text: '4' });
+    expect(nextActiveItem).toHaveAttribute('active');
+  });
+  it('should navigate to the selected item', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='7' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let nextSelectedItem = await pagination.find({ text: '2' });
+    expect(nextSelectedItem).not.toHaveAttribute('active');
+    await nextSelectedItem.click();
+    await page.waitForChanges();
+    nextSelectedItem = await pagination.find({ text: '2' });
+    expect(nextSelectedItem).toHaveAttribute('active');
+  });
+  it('should jump 2 steps forward when clicking right DOTS', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='10' active-page='3'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    // only one DOTS element in this example - right DOTS
+    let dotsItem = await pagination.find({ text: PaginationConstants.DOTS });
+    await dotsItem.click();
+    await page.waitForChanges();
+    const nextItem = await pagination.find({ text: '5' });
+    expect(nextItem).toHaveAttribute('active');
+    const items = await page.findAll(navigationItemsSelector);
+    const expectedBackItemCollection = ['1', '...', '4', '5', '6', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedBackItemCollection[index]);
+    });
+  });
+  it('should jump 2 steps back when clicking left DOTS', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='10' active-page='8'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    // only one DOTS element in this example - left DOTS
+    let dotsItem = await pagination.find({ text: PaginationConstants.DOTS });
+    await dotsItem.click();
+    await page.waitForChanges();
+    const nextItem = await pagination.find({ text: '6' });
+    expect(nextItem).toHaveAttribute('active');
+    const items = await page.findAll(navigationItemsSelector);
+    const expectedBackItemCollection = ['1', '...', '5', '6', '7', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedBackItemCollection[index]);
+    });
+  });
+  it('back button should disappear when first page is selected ', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='2'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let backButton = await pagination.find({ text: PaginationConstants.BACK });
+    expect(backButton).not.toBeNull();
+    let firstPage = await pagination.find({ text: '1' });
+    await firstPage.click();
+    backButton = await pagination.find({ text: PaginationConstants.BACK });
+    expect(backButton).toBeNull();
+  });
+  it('next button should disappear when last page is selected ', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='4'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let nextButton = await pagination.find({ text: PaginationConstants.NEXT });
+    expect(nextButton).not.toBeNull();
+    let lastPage = await pagination.find({ text: '5' });
+    await lastPage.click();
+    nextButton = await pagination.find({ text: PaginationConstants.NEXT });
+    expect(nextButton).toBeNull();
+  });
+  it('should emit event with details when click on next button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const paginationEvent = await page.spyOnEvent('b2b-page-change');
+    const pagination = await getPaginationElement(page);
+    await clickNext(pagination);
+    expect(paginationEvent).toHaveReceivedEvent();
+    expect(paginationEvent).toHaveFirstReceivedEventDetail({
+      lastSelectedPage: 1,
+      currentPage: 2,
+      direction: 'NEXT',
+    });
+  });
+  it('should emit event with details when click on back button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='5'></b2b-pagination>`);
+    await page.waitForChanges();
+    const paginationEvent = await page.spyOnEvent('b2b-page-change');
+    const pagination = await getPaginationElement(page);
+    await clickBack(pagination);
+    expect(paginationEvent).toHaveReceivedEvent();
+    expect(paginationEvent).toHaveFirstReceivedEventDetail({
+      lastSelectedPage: 5,
+      currentPage: 4,
+      direction: 'PREVIOUS',
+    });
+  });
+  it('should emit event with details when click on an item', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const paginationEvent = await page.spyOnEvent('b2b-page-change');
+    const pagination = await getPaginationElement(page);
+    let nextItem = await pagination.find({ text: '4' });
+    await nextItem.click();
+    await page.waitForChanges();
+    expect(paginationEvent).toHaveReceivedEvent();
+    expect(paginationEvent).toHaveFirstReceivedEventDetail({
+      lastSelectedPage: 1,
+      currentPage: 4,
+    });
+  });
+  it('should refresh items when total items changes dynamically', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    let items = await page.findAll(navigationItemsSelector);
+    const expectedInitialCollection = ['1', '2', '3', '4', '5'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedInitialCollection[index]);
+    });
+    const element = await page.find('b2b-pagination');
+    await element.setAttribute('total-pages', 20);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedUpdatedCollection = ['1', '2', '3', '...', '20'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedUpdatedCollection[index]);
+    });
+  });
+  it('should set selected page to total pages when total items changes dynamically and is lower than selected page', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='20' active-page='10'></b2b-pagination>`);
+    await page.waitForChanges();
+    const element = await page.find('b2b-pagination');
+    expect(element.getAttribute('active-page')).toBe('10');
+    await element.setAttribute('total-pages', 5);
+    await page.waitForChanges();
+    expect(element.getAttribute('active-page')).toBe('5');
+  });
+  it('should refresh items when active page changes dynamically', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='10' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    let items = await page.findAll(navigationItemsSelector);
+    const expectedInitialCollection = ['1', '2', '3', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedInitialCollection[index]);
+    });
+    const element = await page.find('b2b-pagination');
+    await element.setAttribute('active-page', 5);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedUpdatedCollection = ['1', '...', '4', '5', '6', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedUpdatedCollection[index]);
+    });
+  });
+  it('should set selected page to total pages when selected page changes dynamically and is higher than total pages', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='2'></b2b-pagination>`);
+    await page.waitForChanges();
+    const element = await page.find('b2b-pagination');
+    expect(element.getAttribute('active-page')).toBe('2');
+    await element.setAttribute('active-page', 20);
+    await page.waitForChanges();
+    expect(element.getAttribute('active-page')).toBe('5');
+  });
+});

package/dist/collection/components/pagination/pagination.js

@@ -86,9 +86,9 @@ export class PaginationComponent {
   }
   getItemClass(navItem) {
     return {
-      'b2b-pagination--first-item': navItem === this.firstPageIndex,
-      'b2b-pagination--last-item': navItem === this.totalPages,
-      'b2b-pagination--item': true,
+      'b2b-pagination__first-item': navItem === this.firstPageIndex,
+      'b2b-pagination__last-item': navItem === this.totalPages,
+      'b2b-pagination__item': true,
     };
   }
   render() {