genesys-spark-components 4.0.0-beta.35 → 4.0.0-beta.36

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot icon - Required slot for gux-icon
  * @slot title - Required slot for the notification toast title
@@ -45,7 +45,8 @@ export class GuxNotificationToast {
           "references": {
             "GuxNotificationToastAccent": {
               "location": "import",
-              "path": "./gux-notification-toast.types"
+              "path": "./gux-notification-toast.types",
+              "id": "src/components/legacy/gux-notification-toast-legacy/gux-notification-toast.types.ts::GuxNotificationToastAccent"
             }
           }
         },

package/dist/collection/components/legacy/gux-notification-toast-legacy/tests/gux-notification-toast.e2e.js

@@ -0,0 +1,109 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function clickDismissButton(page) {
+  await page.evaluate(async () => {
+    const element = document.querySelector('gux-notification-toast-legacy');
+    const dismissButtonElement = element.shadowRoot.querySelector('gux-dismiss-button');
+    const button = dismissButtonElement.shadowRoot.querySelector('button');
+    button.click();
+  });
+}
+describe('gux-notification-toast-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render neutral notification toast',
+        html: `
+          <gux-notification-toast-legacy lang="en" accent="neutral">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      },
+      {
+        description: 'should render positive notification toast',
+        html: `
+          <gux-notification-toast-legacy lang="en" accent="positive">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      },
+      {
+        description: 'should render alert notification toast',
+        html: `
+          <gux-notification-toast-legacy lang="en" accent="alert">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      },
+      {
+        description: 'should render warning notification toast',
+        html: `
+          <gux-notification-toast-legacy lang="en" accent="warning">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-notification-toast-legacy');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-notification-toast-legacy lang="en" accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="title">Title</div>
+          <div slot="message">This is the message</div>
+        </gux-notification-toast-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-notification-toast-legacy')).not.toBeNull();
+      await clickDismissButton(page);
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-notification-toast-legacy')).toBeNull();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-notification-toast-legacy lang="en" accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="title">Title</div>
+          <div slot="message">This is the message</div>
+        </gux-notification-toast-legacy>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      await page.evaluate(() => {
+        document.addEventListener('guxdismiss', event => {
+          event.preventDefault();
+        });
+      });
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-notification-toast-legacy')).not.toBeNull();
+      await clickDismissButton(page);
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(await page.find('gux-notification-toast-legacy')).not.toBeNull();
+    });
+  });
+});

package/dist/collection/components/legacy/gux-notification-toast-legacy/tests/gux-notification-toast.spec.js

@@ -0,0 +1,99 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxNotificationToast } from "../gux-notification-toast";
+const components = [GuxNotificationToast];
+const language = 'en';
+describe('gux-notification-toast-legacy', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render neutral notification toast',
+        html: `
+          <gux-notification-toast-legacy accent="neutral">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      },
+      {
+        description: 'should render positive notification toast',
+        html: `
+          <gux-notification-toast-legacy accent="positive">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      },
+      {
+        description: 'should render alert notification toast',
+        html: `
+          <gux-notification-toast-legacy accent="alert">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      },
+      {
+        description: 'should render warning notification toast',
+        html: `
+          <gux-notification-toast-legacy accent="warning">
+            <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+            <div slot="title">Title</div>
+            <div slot="message">This is the message</div>
+          </gux-notification-toast-legacy>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxNotificationToast);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-notification-toast-legacy accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="title">Title</div>
+          <div slot="message">This is the message</div>
+        </gux-notification-toast-legacy>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = element.shadowRoot.querySelector('gux-dismiss-button');
+      const guxdismissSpy = jest.fn();
+      const clickSpy = jest.fn();
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', guxdismissSpy);
+      page.win.addEventListener('click', clickSpy);
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveBeenCalled();
+      expect(clickSpy).not.toHaveBeenCalled();
+      expect(elementRemoveSpy).toBeCalledWith();
+    });
+    it('click dismiss button and prevent default', async () => {
+      const html = `
+        <gux-notification-toast-legacy accent="neutral">
+          <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+          <div slot="title">Title</div>
+          <div slot="message">This is the message</div>
+        </gux-notification-toast-legacy>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      const element = page.root;
+      const dismissButton = element.shadowRoot.querySelector('gux-dismiss-button');
+      const elementRemoveSpy = jest.spyOn(element, 'remove');
+      page.win.addEventListener('guxdismiss', (event) => {
+        event.preventDefault();
+      });
+      dismissButton.click();
+      await page.waitForChanges();
+      expect(elementRemoveSpy).not.toBeCalled();
+    });
+  });
+});

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons-legacy.css

@@ -2,8 +2,8 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  align-content: stretch;
   align-items: center;
   justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
@@ -23,10 +23,10 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-content: stretch;
   align-items: center;
   justify-content: center;
-  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container > div {
   flex: 0 1 auto;
@@ -45,45 +45,45 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-content: stretch;
   align-items: center;
-  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   justify-content: center;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button {
   height: 32px;
-  padding-left: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
   padding-right: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
-  margin-left: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
   margin-right: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
+  margin-left: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
   background: inherit;
   border: none;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible {
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
   outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
   outline-offset: var(--gse-semantic-focusRing-offset);
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current {
+  padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
   background-color: var(--gse-ui-button-ghost-active-backgroundColor);
   border-radius: var(--gse-ui-button-borderRadius);
-  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
-  padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  color: var(--gse-ui-button-ghost-default-foregroundColor);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-button-ghost-default-foregroundColor);
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target {
-  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
   padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
+  cursor: pointer;
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  color: var(--gse-ui-button-ghost-default-foregroundColor);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
-  cursor: pointer;
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-button-ghost-default-foregroundColor);
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target:hover {
   color: var(--gse-ui-button-ghost-hover-foregroundColor);

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../../i18n';
-import paginationResources from './i18n/en.json';
-import { GuxPaginationButtonsService } from './gux-pagination-button.service';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n";
+import paginationResources from "./i18n/en.json";
+import { GuxPaginationButtonsService } from "./gux-pagination-button.service";
 export class GuxPaginationButtonsLegacy {
   constructor() {
     this.currentPage = undefined;
@@ -129,7 +129,8 @@ export class GuxPaginationButtonsLegacy {
           "references": {
             "GuxPaginationLayout": {
               "location": "import",
-              "path": "../gux-pagination.types"
+              "path": "../gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxPaginationLayout"
             }
           }
         },

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/gux-pagination-buttons.service.spec.js

@@ -0,0 +1,138 @@
+import { GuxPaginationButtonsService } from "../gux-pagination-button.service";
+describe('GuxPaginationButtonsService', () => {
+  describe('#getPageList', () => {
+    [
+      { totalPages: 0, currentPage: 0, expectedPageList: [] },
+      {
+        totalPages: 1,
+        currentPage: 1,
+        expectedPageList: [{ pageNumber: 1, display: '1', current: true }]
+      },
+      {
+        totalPages: 2,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false }
+        ]
+      },
+      {
+        totalPages: 5,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false }
+        ]
+      },
+      {
+        totalPages: 10,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false },
+          { pageNumber: 6, display: '6', current: false },
+          { pageNumber: 7, display: '7', current: false },
+          { pageNumber: 8, display: '8', current: false },
+          { pageNumber: 9, display: '9', current: false },
+          { pageNumber: 10, display: '10', current: false }
+        ]
+      },
+      {
+        totalPages: 15,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false },
+          { pageNumber: 6, display: '6', current: false },
+          { pageNumber: 7, display: '...', current: false },
+          { pageNumber: 15, display: '15', current: false }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 1,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: true },
+          { pageNumber: 2, display: '2', current: false },
+          { pageNumber: 3, display: '3', current: false },
+          { pageNumber: 4, display: '4', current: false },
+          { pageNumber: 5, display: '5', current: false },
+          { pageNumber: 6, display: '6', current: false },
+          { pageNumber: 7, display: '...', current: false },
+          { pageNumber: 100, display: '100', current: false }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 100,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 94, display: '...', current: false },
+          { pageNumber: 95, display: '95', current: false },
+          { pageNumber: 96, display: '96', current: false },
+          { pageNumber: 97, display: '97', current: false },
+          { pageNumber: 98, display: '98', current: false },
+          { pageNumber: 99, display: '99', current: false },
+          { pageNumber: 100, display: '100', current: true }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 100,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 94, display: '...', current: false },
+          { pageNumber: 95, display: '95', current: false },
+          { pageNumber: 96, display: '96', current: false },
+          { pageNumber: 97, display: '97', current: false },
+          { pageNumber: 98, display: '98', current: false },
+          { pageNumber: 99, display: '99', current: false },
+          { pageNumber: 100, display: '100', current: true }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 98,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 94, display: '...', current: false },
+          { pageNumber: 95, display: '95', current: false },
+          { pageNumber: 96, display: '96', current: false },
+          { pageNumber: 97, display: '97', current: false },
+          { pageNumber: 98, display: '98', current: true },
+          { pageNumber: 99, display: '99', current: false },
+          { pageNumber: 100, display: '100', current: false }
+        ]
+      },
+      {
+        totalPages: 100,
+        currentPage: 50,
+        expectedPageList: [
+          { pageNumber: 1, display: '1', current: false },
+          { pageNumber: 47, display: '...', current: false },
+          { pageNumber: 48, display: '48', current: false },
+          { pageNumber: 49, display: '49', current: false },
+          { pageNumber: 50, display: '50', current: true },
+          { pageNumber: 51, display: '51', current: false },
+          { pageNumber: 52, display: '52', current: false },
+          { pageNumber: 53, display: '...', current: false },
+          { pageNumber: 100, display: '100', current: false }
+        ]
+      }
+    ].forEach(({ totalPages, currentPage, expectedPageList }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const pageList = GuxPaginationButtonsService.getPageList(currentPage, totalPages);
+        expect(pageList).toEqual(expectedPageList);
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/gux-pagination-buttons.spec.js

@@ -0,0 +1,39 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxPaginationButtonsLegacy } from "../gux-pagination-buttons";
+import { GuxButton } from "../../../../stable/gux-button/gux-button";
+import { GuxFormFieldTextLike } from "../../../../stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like";
+const components = [
+  GuxPaginationButtonsLegacy,
+  GuxButton,
+  GuxFormFieldTextLike
+];
+const language = 'en';
+describe('gux-pagination-item-counts-legacy', () => {
+  describe('#render', () => {
+    [
+      { totalPages: 0, currentPage: 0, layout: 'full' },
+      { totalPages: 10, currentPage: 1, layout: 'full' },
+      { totalPages: 10, currentPage: 5, layout: 'full' },
+      { totalPages: 0, currentPage: 0, layout: 'small' },
+      { totalPages: 10, currentPage: 1, layout: 'small' },
+      { totalPages: 10, currentPage: 5, layout: 'small' },
+      { totalPages: 0, currentPage: 0, layout: 'expanded' },
+      { totalPages: 10, currentPage: 1, layout: 'expanded' },
+      { totalPages: 10, currentPage: 5, layout: 'expanded' }
+    ].forEach(({ totalPages, currentPage, layout }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination-buttons-legacy
+            total-pages="${totalPages}"
+            current-page="${currentPage}"
+            layout="${layout}"
+          >
+          </gux-pagination-buttons-legacy>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPaginationButtonsLegacy);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts-legacy.css

@@ -1,11 +1,11 @@
 gux-pagination-item-counts-legacy .gux-pagination-item-counts-container {
   display: flex;
   flex-direction: row;
-  white-space: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  white-space: nowrap;
 }

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../../i18n';
-import paginationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n";
+import paginationResources from "./i18n/en.json";
 export class GuxPaginationItemCountsLegacy {
   constructor() {
     this.totalItems = 0;

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/tests/gux-pagination-item-counts.spec.js

@@ -0,0 +1,30 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxPaginationItemCountsLegacy } from "../gux-pagination-item-counts";
+const components = [GuxPaginationItemCountsLegacy];
+const language = 'en';
+describe('gux-pagination-item-counts-legacy', () => {
+  describe('#render', () => {
+    [
+      { totalItems: 0, currentPage: 0, itemsPerPage: 0 },
+      { totalItems: 99, currentPage: 2, itemsPerPage: 25 },
+      { totalItems: 99, currentPage: 2, itemsPerPage: 50 },
+      { totalItems: 99, currentPage: 1, itemsPerPage: 100 },
+      { totalItems: 0, currentPage: 2, itemsPerPage: 25 },
+      { totalItems: 10, currentPage: 2, itemsPerPage: 25 }
+    ].forEach(({ totalItems, currentPage, itemsPerPage }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination-item-counts-legacy
+            total-items="${totalItems}"
+            current-page="${currentPage}"
+            items-per-page="${itemsPerPage}"
+          >
+          </gux-pagination-item-counts-legacy>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPaginationItemCountsLegacy);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page-legacy.css

@@ -2,10 +2,10 @@ gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-content: stretch;
   align-items: center;
   justify-content: center;
-  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container > div {
   flex: 0 1 auto;
@@ -19,8 +19,8 @@ gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .g
 }
 gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-per-page {
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
 }

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../../i18n';
-import paginationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n";
+import paginationResources from "./i18n/en.json";
 export class GuxPaginationItemsPerPageLegacy {
   constructor() {
     this.itemsPerPage = 25;
@@ -43,7 +43,8 @@ export class GuxPaginationItemsPerPageLegacy {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../gux-pagination.types"
+              "path": "../gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxItemsPerPage"
             }
           }
         },

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/gux-pagination-items-per-page.spec.js

@@ -0,0 +1,33 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxPaginationItemsPerPageLegacy } from "../gux-pagination-items-per-page";
+import { GuxDropdown } from "../../../../stable/gux-dropdown/gux-dropdown";
+import { GuxListbox } from "../../../../stable/gux-listbox/gux-listbox";
+import { GuxOption } from "../../../../stable/gux-listbox/options/gux-option/gux-option";
+const components = [
+  GuxPaginationItemsPerPageLegacy,
+  GuxDropdown,
+  GuxListbox,
+  GuxOption
+];
+const language = 'en';
+describe('gux-pagination-items-per-page-legacy', () => {
+  describe('#render', () => {
+    [
+      { itemsPerPage: 25 },
+      { itemsPerPage: 50 },
+      { itemsPerPage: 75 },
+      { itemsPerPage: 100 }
+    ].forEach(({ itemsPerPage }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination-items-per-page-legacy
+            items-per-page="${itemsPerPage}">
+          </gux-pagination-items-per-page-legacy>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPaginationItemsPerPageLegacy);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-legacy.css

@@ -19,12 +19,12 @@
   flex: 1 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-content: stretch;
   align-items: center;
   align-self: auto;
   justify-content: flex-start;
   order: 0;
-  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 .gux-pagination-container .gux-pagination-info > * {
   flex: 0 1 auto;