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

package/dist/collection/components/stable/gux-calendar/tests/gux-calendar.methods.spec.js

@@ -0,0 +1,233 @@
+import * as utils from "../../../../utils/dom/manipulate-elements-classes";
+import { GuxCalendar } from "../gux-calendar";
+describe('gux-calendar', () => {
+  let component;
+  let componentRoot;
+  let componentShadowRoot;
+  beforeEach(async () => {
+    component = new GuxCalendar();
+    component.calendarSelect = {
+      emit: jest.fn()
+    };
+    componentRoot = component.root;
+    componentShadowRoot = {};
+    componentRoot.shadowRoot = componentShadowRoot;
+    componentShadowRoot.querySelector = () => {
+      return null;
+    };
+    componentShadowRoot.querySelectorAll = () => {
+      return [];
+    };
+  });
+  it('builds', () => {
+    component.componentWillLoad();
+    component.render();
+    expect(component).toBeTruthy();
+  });
+  // Methods
+  describe('methods', () => {
+    const testDate = new Date(2020, 0, 15);
+    const testDateIso = '2020-01-15';
+    const rangeStart = new Date(1970, 0, 15);
+    const rangeEnd = new Date(1970, 0, 20);
+    const rangeIso = '1970-01-15/1970-01-20';
+    const spyEl = {
+      classList: {
+        add: jest.fn(),
+        contains: () => false
+      },
+      focus: jest.fn(),
+      setAttribute: jest.fn()
+    };
+    // Public
+    describe('public', () => {
+      it('setValue with single mode', async () => {
+        await component.setValue(testDate);
+        expect(component.previewValue).toEqual(testDate);
+        expect(component.value).toEqual(testDateIso);
+      });
+      it('setValue with range mode from-to', async () => {
+        component.mode = "range" /* CalendarModes.Range */;
+        await component.setValue([rangeStart, rangeEnd]);
+        expect(component.previewValue).toEqual(rangeStart);
+        expect(component.value).toEqual(rangeIso);
+      });
+      it('setValue with range mode to-from', async () => {
+        component.mode = "range" /* CalendarModes.Range */;
+        await component.setValue([rangeEnd, rangeStart]);
+        expect(component.previewValue).toEqual(rangeStart);
+        expect(component.value).toEqual(rangeIso);
+      });
+      it('focusPreviewDate', async () => {
+        await component.focusPreviewDate();
+        expect(spyEl.focus).not.toHaveBeenCalled();
+        componentShadowRoot.querySelector = () => {
+          return spyEl;
+        };
+        await component.focusPreviewDate();
+        expect(spyEl.focus).toHaveBeenCalled();
+      });
+    });
+    // Private
+    describe('private', () => {
+      it('incrementPreviewDateByMonth', () => {
+        jest.useFakeTimers('legacy');
+        const startingMonth = component.previewValue.getMonth();
+        component.incrementPreviewDateByMonth(3);
+        jest.runAllTimers();
+        expect(component.previewValue.getMonth()).toEqual((startingMonth + 3) % 12);
+      });
+      it('generateDatesFrom', () => {
+        component.value = rangeIso;
+        component.mode = "range" /* CalendarModes.Range */;
+        const result = component.generateDatesFrom(1, rangeEnd, 42);
+        expect(result[0].selected).toEqual(true);
+        expect(result).toEqual(expect.arrayContaining([
+          expect.objectContaining({
+            hidden: true
+          })
+        ]));
+      });
+      it('addDays', () => {
+        const inc = 2;
+        const result = component.addDays(rangeEnd, inc);
+        expect(result.getDate()).toEqual(rangeEnd.getDate() + inc);
+      });
+      it('getAllDatesElements', () => {
+        const dummy = ['one', 'two'];
+        componentShadowRoot.querySelectorAll = () => {
+          return dummy;
+        };
+        const result = component.getAllDatesElements();
+        expect(result).toEqual(dummy);
+      });
+      it('getRangeDatesElements', () => {
+        spyOn(component, 'getRangeDates').and.callThrough();
+        component.getRangeDatesElements(rangeStart, rangeEnd);
+        expect(component.getRangeDates).toHaveBeenCalledWith(rangeStart, rangeEnd);
+        componentShadowRoot.querySelector = () => {
+          return 'dummy';
+        };
+        const result = component.getRangeDatesElements(rangeEnd, rangeStart);
+        expect(component.getRangeDates).toHaveBeenCalledWith(rangeStart, rangeEnd);
+        expect(result.length).toEqual(6);
+      });
+      it('onDateClick with single mode', async () => {
+        spyOn(component, 'setValue').and.callFake(() => {
+          return;
+        });
+        spyOn(component, 'emitCalendarSelect').and.callFake(() => {
+          return;
+        });
+        await component.onDateClick(testDate);
+        expect(component.setValue).toHaveBeenCalledWith(testDate);
+        expect(component.emitCalendarSelect).toHaveBeenCalled();
+      });
+      it('onDateClick with range mode', async () => {
+        component.mode = "range" /* CalendarModes.Range */;
+        spyOn(component, 'getAllDatesElements').and.callFake(() => {
+          return;
+        });
+        spyOn(utils, 'removeClassToElements').and.callFake(() => {
+          return;
+        });
+        spyOn(component, 'emitCalendarSelect').and.callFake(() => {
+          return;
+        });
+        spyOn(component, 'updateRangeElements').and.callFake(() => {
+          return;
+        });
+        await component.onDateClick(rangeStart);
+        await component.onDateClick(rangeEnd);
+        expect(component.emitCalendarSelect).toHaveBeenCalled();
+      });
+      it('onDateMouseEnter', () => {
+        spyOn(component, 'updateRangeElements').and.callFake(() => {
+          return;
+        });
+        component.mode = "range" /* CalendarModes.Range */;
+        component.selectingDate = rangeStart;
+        component.onDateMouseEnter(rangeEnd);
+        expect(component.value.split('/')[1]).toEqual(rangeIso.split('/')[1]);
+        expect(component.updateRangeElements).toHaveBeenCalled();
+      });
+      it('onKeyDown', async () => {
+        jest.useFakeTimers('legacy');
+        spyOn(component, 'incrementPreviewDateByMonth').and.callFake(() => {
+          return;
+        });
+        spyOn(component, 'setValue').and.callFake(() => {
+          return;
+        });
+        spyOn(component, 'emitCalendarSelect').and.callFake(() => {
+          return;
+        });
+        const initialPreviewValue = rangeEnd;
+        component.previewValue = new Date(rangeEnd);
+        const days = initialPreviewValue.getDate();
+        let event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.previewValue.getDate()).toEqual(days + 7);
+        event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.previewValue.getDate()).toEqual(days);
+        event = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.previewValue.getDate()).toEqual(days - 1);
+        event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.previewValue.getDate()).toEqual(days);
+        event = new KeyboardEvent('keydown', { key: 'PageUp' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.incrementPreviewDateByMonth).toHaveBeenCalledWith(1);
+        event = new KeyboardEvent('keydown', { key: 'PageDown' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.incrementPreviewDateByMonth).toHaveBeenCalledWith(-1);
+        event = new KeyboardEvent('keydown', { key: 'Enter' });
+        await component.onKeyDown(event);
+        jest.runAllTimers();
+        expect(component.setValue).toHaveBeenCalledWith(initialPreviewValue);
+        expect(component.emitCalendarSelect).toHaveBeenCalled();
+      });
+    });
+  });
+  // Events
+  describe('events', () => {
+    it('onInput', () => {
+      const value = '2020-01-15';
+      component.value = value;
+      component.emitCalendarSelect();
+      expect(component.calendarSelect.emit).toHaveBeenCalledWith(value);
+    });
+  });
+  describe('check that when the clocks go forward at the end of march that april days are aligned correctly', () => {
+    it('checks to see if the first day of april is a friday', async () => {
+      //create date object that facilitates the extra hour for DST.
+      const apr = new Date(2022, 3, 1, 1, 0, 0, 0);
+      //set the components value to the apr date.
+      await component.setValue(apr);
+      //the expected value for the day should be equal to 5 which is Friday.
+      const expectedDay = 5;
+      //compare calendar component with expected value.
+      expect(component.previewValue.getDay()).toEqual(expectedDay);
+    });
+  });
+  describe('check that when the clocks fall back at the end of october that november days are aligned correctly', () => {
+    it('checks to see if the first day of november is a tuesday', async () => {
+      //create date object that facilitates the extra hour for DST.
+      const nov = new Date(2022, 10, 1, 1, 0, 0, 0);
+      //set the components value to the nov date.
+      await component.setValue(nov);
+      //the expected value for the day should be equal to 2 which is Tuesday.
+      const expectedDay = 2;
+      //compare calendar component with expected value.
+      expect(component.previewValue.getDay()).toEqual(expectedDay);
+    });
+  });
+});

package/dist/collection/components/stable/gux-calendar/tests/gux-calendar.service.spec.js

@@ -0,0 +1,160 @@
+import { firstDateInMonth, getWeekdays, getOffsetMonthDate, getDateMonthAndYearString } from "../gux-calendar.service";
+describe('calendar.service', () => {
+  describe('firstDateInMonth', () => {
+    [
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 0,
+        expectedOutput: new Date('2021-12-26T01:00:00.000Z')
+      },
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 1,
+        expectedOutput: new Date('2021-12-27T01:00:00.000Z')
+      },
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 6,
+        expectedOutput: new Date('2022-01-01T01:00:00.000Z')
+      },
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 7,
+        expectedOutput: new Date('2021-12-26T01:00:00.000Z')
+      }
+    ].forEach(({ year, month, startDayOfWeek, expectedOutput }) => {
+      it(`should work as expected for ${year}, ${month} and ${startDayOfWeek}`, () => {
+        expect(firstDateInMonth(month, year, startDayOfWeek)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getWeekdays', () => {
+    [
+      {
+        locale: 'en',
+        startDayOfWeek: 0,
+        expectedOutput: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 1,
+        expectedOutput: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 6,
+        expectedOutput: ['S', 'S', 'M', 'T', 'W', 'T', 'F']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 7,
+        expectedOutput: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 21,
+        expectedOutput: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      }
+    ].forEach(({ locale, startDayOfWeek, expectedOutput }) => {
+      it(`should work as expected for ${locale} and ${startDayOfWeek}`, () => {
+        expect(getWeekdays(locale, startDayOfWeek)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getOffsetMonthDate', () => {
+    [
+      {
+        baseDate: new Date(2022, 0, 1),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 0, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 1),
+        monthDelta: 1,
+        expectedOutput: new Date(2022, 1, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 1),
+        monthDelta: 2,
+        expectedOutput: new Date(2022, 2, 1)
+      },
+      {
+        baseDate: new Date(2022, 1, 1),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 1, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 30),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 0, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 30),
+        monthDelta: 1,
+        expectedOutput: new Date(2022, 1, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 30),
+        monthDelta: 2,
+        expectedOutput: new Date(2022, 2, 1)
+      },
+      {
+        baseDate: new Date(2022, 11, 1),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 11, 1)
+      },
+      {
+        baseDate: new Date(2022, 11, 1),
+        monthDelta: 1,
+        expectedOutput: new Date(2023, 0, 1)
+      },
+      {
+        baseDate: new Date(2022, 11, 1),
+        monthDelta: 2,
+        expectedOutput: new Date(2023, 1, 1)
+      }
+    ].forEach(({ baseDate, monthDelta, expectedOutput }) => {
+      it(`should work as expected for ${baseDate.toISOString()} and monthDelta ${monthDelta}`, () => {
+        expect(getOffsetMonthDate(baseDate, monthDelta)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getDateMonthAndYearString', () => {
+    [
+      { locale: 'ar', expectedOutput: 'ديسمبر ٢٠٢٢' },
+      { locale: 'cs', expectedOutput: 'Prosinec 2022' },
+      { locale: 'da', expectedOutput: 'December 2022' },
+      { locale: 'de', expectedOutput: 'Dezember 2022' },
+      { locale: 'en', expectedOutput: 'December 2022' },
+      { locale: 'es', expectedOutput: 'Diciembre de 2022' },
+      { locale: 'es-es', expectedOutput: 'Diciembre de 2022' },
+      { locale: 'fi', expectedOutput: 'Joulukuu 2022' },
+      { locale: 'fr', expectedOutput: 'Décembre 2022' },
+      { locale: 'fr-ca', expectedOutput: 'Décembre 2022' },
+      { locale: 'he', expectedOutput: 'דצמבר 2022' },
+      { locale: 'it', expectedOutput: 'Dicembre 2022' },
+      { locale: 'ja', expectedOutput: '2022年12月' },
+      { locale: 'ko', expectedOutput: '2022년 12월' },
+      { locale: 'nl', expectedOutput: 'December 2022' },
+      { locale: 'no', expectedOutput: 'Desember 2022' },
+      { locale: 'pl', expectedOutput: 'Grudzień 2022' },
+      { locale: 'pt-br', expectedOutput: 'Dezembro de 2022' },
+      { locale: 'pt-pt', expectedOutput: 'Dezembro de 2022' },
+      { locale: 'ru', expectedOutput: 'Декабрь 2022 г.' },
+      { locale: 'sv', expectedOutput: 'December 2022' },
+      { locale: 'th', expectedOutput: 'ธันวาคม 2565' },
+      { locale: 'tr', expectedOutput: 'Aralık 2022' },
+      { locale: 'uk', expectedOutput: 'Грудень 2022 р.' },
+      { locale: 'zh-cn', expectedOutput: '2022年12月' },
+      { locale: 'zh-tw', expectedOutput: '2022年12月' }
+    ].forEach(({ locale, expectedOutput }) => {
+      it(`should work as expected for ${locale}`, () => {
+        expect(getDateMonthAndYearString(new Date(2022, 11, 31), locale)).toEqual(expectedOutput);
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-calendar/tests/gux-calendar.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxCalendar } from "../gux-calendar";
+const components = [GuxCalendar];
+const language = 'en';
+describe('gux-datepicker', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-calendar></gux-calendar>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxCalendar);
+  });
+  describe('#render', () => {
+    [
+      `<gux-calendar mode="single" value="1997-08-29"></gux-calendar>`,
+      `<gux-calendar mode="range" number-of-months="2" value="2019-11-25/2019-12-02"></gux-calendar>`,
+      `<gux-calendar mode="single" value="1997-08-29" start-day-of-week="6"></gux-calendar>`,
+      `<gux-calendar mode="single" value="1997-08-29" lang="ar"></gux-calendar>`
+    ].forEach((input, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({
+          components,
+          html: input,
+          language
+        });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-card/gux-card.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - Content of card.
  */
@@ -39,7 +39,8 @@ export class GuxCard {
           "references": {
             "GuxCardAccent": {
               "location": "import",
-              "path": "./gux-card.types"
+              "path": "./gux-card.types",
+              "id": "src/components/stable/gux-card/gux-card.types.ts::GuxCardAccent"
             }
           }
         },

package/dist/collection/components/stable/gux-card/tests/gux-card.e2e.js

@@ -0,0 +1,16 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('#render different card accents', () => {
+  [
+    '<gux-card><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="bordered"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="raised"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="borderless"><span>This is a content slot</span></gux-card>'
+  ].forEach((html, index) => {
+    it(`should render component as expected (${index + 1})`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-card');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-card/tests/gux-card.spec.js

@@ -0,0 +1,17 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxCard } from "../gux-card";
+const components = [GuxCard];
+const language = 'en';
+describe('#render different card accents', () => {
+  [
+    '<gux-card><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="bordered"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="raised"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="borderless"><span>This is a content slot</span></gux-card>'
+  ].forEach((html, index) => {
+    it(`should render component as expected (${index + 1})`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.css

@@ -1,54 +1,3 @@
-.gux-focus-ring-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-default-border-width);
-  outline-style: var(--gse-semantic-focusRing-default-border-style);
-  outline-color: var(--gse-semantic-focusRing-default-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-
-.gux-focus-ring-small-focused:focus {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-within:focus-within {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
-}
-
-/*
- * Typography styles and mixins.
- */
-/* Helpers */
-/* Base typography */
-/* Headings */
-/* Anchor */
-.gux-icon-anchor gux-icon {
-  padding-right: var(--gse-ui-links-inLine-padding);
-}
-
-/* Custom Styles */
 :host([gs-reorder-indicator=above]) .gux-container {
   border-top-color: #aac9ff;
 }
@@ -97,9 +46,7 @@
   cursor: grabbing !important;
 }
 .gux-container .gux-reorder:hover, .gux-container .gux-reorder:focus-visible {
-  outline-width: var(--gse-semantic-focusRing-small-border-width);
-  outline-style: var(--gse-semantic-focusRing-small-border-style);
-  outline-color: var(--gse-semantic-focusRing-small-border-color);
+  outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
 }
 .gux-container .gux-reorder:hover gux-icon, .gux-container .gux-reorder:focus-visible gux-icon {
   color: #2a60c8;

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { buildI18nForComponent } from '../../../../i18n';
-import { getIndexInParent } from '../gux-column-manager.service';
-import { getNewIndex } from './gux-column-manager-item.service';
-import translationResources from './i18n/en.json';
+import { h, Host } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n";
+import { getIndexInParent } from "../gux-column-manager.service";
+import { getNewIndex } from "./gux-column-manager-item.service";
+import translationResources from "./i18n/en.json";
 /**
  * @slot - slot for gux-form-field-checkbox
  */
@@ -198,7 +198,8 @@ export class GuxColumnManagerItem {
           "references": {
             "InternalOrderChange": {
               "location": "import",
-              "path": "../gux-column-manager.types"
+              "path": "../gux-column-manager.types",
+              "id": "src/components/stable/gux-column-manager/gux-column-manager.types.ts::InternalOrderChange"
             }
           }
         }
@@ -233,7 +234,8 @@ export class GuxColumnManagerItem {
           "references": {
             "InternalKeyboardReorderMove": {
               "location": "import",
-              "path": "../gux-column-manager.types"
+              "path": "../gux-column-manager.types",
+              "id": "src/components/stable/gux-column-manager/gux-column-manager.types.ts::InternalKeyboardReorderMove"
             }
           }
         }
@@ -283,7 +285,8 @@ export class GuxColumnManagerItem {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -299,7 +302,8 @@ export class GuxColumnManagerItem {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/tests/gux-column-manager-item.service.spec.js

@@ -0,0 +1,35 @@
+import { getNewIndex } from "../gux-column-manager-item.service";
+describe('gux-column-manager-item.service', () => {
+  describe('#getOrderChange', () => {
+    [
+      {
+        oldIndex: 0,
+        dropIndex: 5,
+        mouseOnTopHalfOfDropElement: true,
+        expectedOutput: 4
+      },
+      {
+        oldIndex: 0,
+        dropIndex: 5,
+        mouseOnTopHalfOfDropElement: false,
+        expectedOutput: 5
+      },
+      {
+        oldIndex: 5,
+        dropIndex: 0,
+        mouseOnTopHalfOfDropElement: true,
+        expectedOutput: 0
+      },
+      {
+        oldIndex: 5,
+        dropIndex: 0,
+        mouseOnTopHalfOfDropElement: false,
+        expectedOutput: 1
+      }
+    ].forEach(({ oldIndex, dropIndex, mouseOnTopHalfOfDropElement, expectedOutput }, index) => {
+      it(`should work as expected ${index + 1}`, async () => {
+        expect(getNewIndex(oldIndex, dropIndex, mouseOnTopHalfOfDropElement)).toBe(expectedOutput);
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.js

@@ -1,8 +1,8 @@
-import { h, forceUpdate } from '@stencil/core';
-import { buildI18nForComponent } from '../../../i18n';
-import { trackComponent } from '@utils/tracking/usage';
-import { getEmptyKeyboardOrderChange, getIndexInParent, getNewKeyboardOrderChange, getNewOrder, getSelectedColumnCount, setAllCheckboxInputs, setHighlights, setKeyboardReorderPositionIndicator, setMainCheckboxElementCheckedState } from './gux-column-manager.service';
-import translationResources from './i18n/en.json';
+import { h, forceUpdate } from "@stencil/core";
+import { buildI18nForComponent } from "../../../i18n";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getEmptyKeyboardOrderChange, getIndexInParent, getNewKeyboardOrderChange, getNewOrder, getSelectedColumnCount, setAllCheckboxInputs, setHighlights, setKeyboardReorderPositionIndicator, setMainCheckboxElementCheckedState } from "./gux-column-manager.service";
+import translationResources from "./i18n/en.json";
 /**
  * @slot - slot for gux-column-manager-item's
  */
@@ -126,7 +126,8 @@ export class GuxColumnManager {
           "references": {
             "GuxOrder": {
               "location": "import",
-              "path": "./gux-column-manager.types"
+              "path": "./gux-column-manager.types",
+              "id": "src/components/stable/gux-column-manager/gux-column-manager.types.ts::GuxOrder"
             }
           }
         }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.service.js

@@ -1,5 +1,5 @@
-import clamp from '@utils/number/clamp';
-import simulateNativeEvent from '@utils/dom/simulate-native-event';
+import clamp from "../../../utils/number/clamp";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
 export function getNewOrder(root, { oldIndex, newIndex }) {
   const order = Array.from(root.children).map(x => x.orderId);
   const [element] = order.splice(oldIndex, 1);