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

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

@@ -0,0 +1,202 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import MutationObserver from "mutation-observer";
+import { GuxContentSearch } from "../gux-content-search";
+const components = [GuxContentSearch];
+const language = 'en';
+describe('gux-content-search', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  describe('#render', () => {
+    [
+      {
+        description: 'should render default control no props',
+        html: '<gux-content-search><input type="text"/></gux-content-search>'
+      },
+      {
+        description: 'should render default control no props With placeholder',
+        html: '<gux-content-search><input type="text" placeholder="Search"/></gux-content-search>'
+      },
+      {
+        description: 'should render default control with all props',
+        html: `<gux-content-search current-match="1"match-count="10">
+          <input type="text" placeholder="Search" value="Default Search Text"/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with no match',
+        html: `<gux-content-search current-match="0" match-count="0">
+          <input type="text" placeholder="Search" value="Default Search Text"/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with long text no match',
+        html: `<gux-content-search current-match="0" match-count="0">
+          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+         </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with long text 1 match',
+        html: `<gux-content-search current-match="1" match-count="1">
+          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with short text 100000 match',
+        html: `<gux-content-search current-match="1000" match-count="100000">
+          <input type="text" placeholder="Search" value="Lorem ipsum dolor "/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with long text 100000 match',
+        html: `<gux-content-search current-match="1000" match-count="100000">
+          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with invalid  match count',
+        html: `<gux-content-search current-match="1000" match-count="abc">
+          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props with invalid current match',
+        html: `<gux-content-search current-match="100000" match-count="100">
+          <input type="text" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props in disable mode',
+        html: `<gux-content-search current-match="10" match-count="10">
+          <input type="text" disabled="true" placeholder="Search" value="Search Disabled"/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props in disable mode with no match',
+        html: `<gux-content-search current-match="0" match-count="0">
+          <input type="text" disabled="true" placeholder="Search" value="Search Disabled with no Match"/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props in disable mode with 1 match',
+        html: `<gux-content-search current-match="1" match-count="1">
+          <input type="text" disabled="true" placeholder="Search" value="Search Disabled with 1 match"/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props in disable mode with 100000000 match',
+        html: `<gux-content-search current-match="10000" match-count="100000000">
+          <input type="text" disabled="true" placeholder="Search" value="Search Disabled with big match"/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props in disable mode with long value',
+        html: `<gux-content-search current-match="1" match-count="1">
+          <input type="text" disabled="true" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+        </gux-content-search>`
+      },
+      {
+        description: 'should render default control with all props in disable mode with long value with 100000000 match',
+        html: `<gux-content-search current-match="1100" match-count="100000001">
+          <input type="text" disabled="true" placeholder="Search" value="Lorem ipsum dolor sit amet, lacinia blandit ultricies lorem aliquam, dui quam a viverra vivamus pellentesque, rhoncus aliquet proin eleifend."/>
+        </gux-content-search>`
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        const component = page.rootInstance;
+        expect(component).toBeInstanceOf(GuxContentSearch);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('Class Logic', () => {
+    let component;
+    beforeEach(async () => {
+      const page = await newSpecPage({
+        components: [GuxContentSearch],
+        html: `<gux-content-search current-match="1" match-count="10"><input type="text" placeholder="Search" value="Default Search Text"/></gux-content-search>`,
+        language: 'en'
+      });
+      component = page.rootInstance;
+    });
+    it('builds', async () => {
+      await component.componentWillLoad();
+      component.render();
+      expect(component).toBeTruthy();
+    });
+    it('componentWillLoad with invalid match value', async () => {
+      component.matchCount = -1;
+      await component.componentWillLoad();
+      component.render();
+      expect(component.matchCount).toBe(-1);
+    });
+    it('componentWillLoad with invalid currentMatch', async () => {
+      component.currentMatch = -1;
+      component.matchCount = 1;
+      await component.componentWillLoad();
+      component.render();
+      expect(component.matchCount).toBe(1);
+      expect(component.currentMatch).toBe(-1);
+    });
+    it('componentWillLoad with invalid currentMatch & matchCount', async () => {
+      component.currentMatch = -1;
+      component.matchCount = -1;
+      await component.componentWillLoad();
+      component.render();
+      expect(component.matchCount).toBe(-1);
+      expect(component.currentMatch).toBe(-1);
+    });
+    it('componentWillLoad with currentMatch greater than matchCount', async () => {
+      component.currentMatch = 11;
+      component.matchCount = 10;
+      await component.componentWillLoad();
+      component.render();
+      expect(component.matchCount).toBe(10);
+      expect(component.currentMatch).toBe(11);
+    });
+    it('componentDidLoad with currentMatch when matchCount is 0', async () => {
+      component.currentMatch = 11;
+      component.matchCount = 0;
+      await component.componentWillLoad();
+      component.render();
+      expect(component.matchCount).toBe(0);
+      expect(component.currentMatch).toBe(11);
+    });
+    describe('methods', () => {
+      it('clear', async () => {
+        const InputEventSpy = jest.fn();
+        global.InputEvent = InputEventSpy;
+        const guxCurrentMatchChangedSpy = jest.fn();
+        component.guxcurrentmatchchanged = {
+          emit: guxCurrentMatchChangedSpy
+        };
+        component.matchCount = 100;
+        component.currentMatch = 3;
+        await component.clear();
+        expect(component.matchCount).toEqual(0);
+        expect(component.currentMatch).toEqual(0);
+        expect(component.guxcurrentmatchchanged.emit).toHaveBeenCalledWith(0);
+        expect(InputEventSpy).toHaveBeenCalledTimes(2);
+      });
+      it('clear when disable is true', async () => {
+        const page = await newSpecPage({
+          components: [GuxContentSearch],
+          html: `<gux-content-search current-match="1" match-count="10"><input disabled="true" type="text" placeholder="Search" value="Default Search Text"/></gux-content-search>`,
+          language: 'en'
+        });
+        component = page.rootInstance;
+        const guxCurrentMatchChangedSpy = jest.fn();
+        component.guxcurrentmatchchanged = {
+          emit: guxCurrentMatchChangedSpy
+        };
+        component.matchCount = 100;
+        component.currentMatch = 3;
+        await component.clear();
+        expect(component.matchCount).not.toEqual(0);
+        expect(component.currentMatch).not.toEqual(0);
+        expect(component.guxcurrentmatchchanged.emit).not.toHaveBeenCalledWith(0);
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.css

@@ -10,9 +10,9 @@ gux-icon {
 }
 
 button {
-  border-radius: var(--gse-ui-contextMenu-borderRadius);
   height: var(--gse-ui-contextMenu-button-default);
   padding: 0 8px;
+  border-radius: var(--gse-ui-contextMenu-borderRadius);
 }
 
 button.gux-compact {
@@ -41,9 +41,9 @@ button[disabled] {
 .gux-list-container {
   width: 220px;
   max-height: 330px;
-  overflow-y: auto;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
+  overflow-y: auto;
   text-align: left;
   list-style: none;
   background-color: var(--gse-ui-menu-backgroundColor);

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.js

@@ -8,14 +8,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../utils/dom/random-html-id';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from 'i18n';
-import translationResources from './i18n/en.json';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { afterNextRender } from '../../../utils/dom/after-next-render';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
+import { h, Host } from "@stencil/core";
+import { randomHTMLId } from "../../../utils/dom/random-html-id";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n/index";
+import translationResources from "./i18n/en.json";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { afterNextRender } from "../../../utils/dom/after-next-render";
+import { whenEventIsFrom } from "../../../utils/dom/when-event-is-from";
 export class GuxContextMenu {
   constructor() {
     this.buttonId = randomHTMLId();

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

@@ -0,0 +1,78 @@
+import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+const html = `
+<gux-context-menu>
+  <gux-list-item id="list-item-1" onclick="notify(event)">Test 1</gux-list-item>
+  <gux-list-item id="list-item-2" onclick="notify(event)">Test 2</gux-list-item>
+  <gux-list-item id="list-item-3" onclick="notify(event)">Test 3</gux-list-item>
+</gux-context-menu>
+`;
+const guxListSelector = 'pierce/gux-list';
+const buttonSelector = 'pierce/gux-button-slot button';
+describe('gux-context-menu', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newSparkE2EPage({ html });
+  });
+  it('renders', async () => {
+    const element = await page.find('gux-context-menu');
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('should be a11y compliant', async () => {
+    const element = await page.find('gux-context-menu');
+    await a11yCheck(page, [], 'before opening context menu');
+    await element.click();
+    await page.waitForChanges();
+    await a11yCheck(page, [], 'after opening context menu');
+  });
+  it('should focus first item in list on click', async () => {
+    const element = await page.find('gux-context-menu');
+    const expectedElementWithFocus = await page.find('gux-list-item:first-of-type');
+    await element.click();
+    await page.waitForChanges();
+    const actualElementWithFocus = await element.find(':focus');
+    const isMenuVisible = await (await page.find(guxListSelector)).isVisible();
+    expect(isMenuVisible).toBe(true);
+    expect(actualElementWithFocus.id).toEqual(expectedElementWithFocus.id);
+  });
+  it('should focus last item in list on ArrowUp keypress', async () => {
+    const button = await page.find(buttonSelector);
+    const expectedElementWithFocus = await page.find('gux-list-item:last-of-type');
+    await button.press('ArrowUp');
+    await page.waitForChanges();
+    const actualElementWithFocus = await page.find(':focus');
+    const isMenuVisible = await (await page.find(guxListSelector)).isVisible();
+    expect(isMenuVisible).toBe(true);
+    expect(actualElementWithFocus.id).toEqual(expectedElementWithFocus.id);
+  });
+  ['Enter', 'ArrowDown', ' '].forEach(key => {
+    it(`should open menu and focus first item in list on keypress: ${key}`, async () => {
+      const button = await page.find(buttonSelector);
+      const expectedElementWithFocus = await page.find('gux-list-item:first-of-type');
+      await button.press(key);
+      await page.waitForChanges();
+      const actualElementWithFocus = await page.find(':focus');
+      const isMenuVisible = await (await page.find(guxListSelector)).isVisible();
+      expect(isMenuVisible).toBe(true);
+      expect(actualElementWithFocus.id).toEqual(expectedElementWithFocus.id);
+    });
+  });
+  it('should close menu and move focus to button on Escape', async () => {
+    await (await page.find('gux-context-menu')).click();
+    const list = await page.find(guxListSelector);
+    expect(await list.isVisible()).toBe(true);
+    await list.press('Escape');
+    await page.waitForChanges();
+    const actualElementWithFocus = await page.find(':focus');
+    expect(await list.isVisible()).toBe(false);
+    expect(actualElementWithFocus.nodeName).toEqual('GUX-CONTEXT-MENU');
+  });
+  it('should close menu on Tab keypress', async () => {
+    const element = await page.find('gux-context-menu');
+    const list = await element.find(guxListSelector);
+    await element.click();
+    expect(await list.isVisible()).toBe(true);
+    await element.press('Tab');
+    await page.waitForChanges();
+    expect(await list.isVisible()).toBe(false);
+  });
+});

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

@@ -0,0 +1,44 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { GuxList } from "../../gux-list/gux-list";
+import { GuxListItem } from "../../gux-list/gux-list-item/gux-list-item";
+import { GuxButton } from "../../../stable/gux-button/gux-button";
+import { GuxContextMenu } from "../gux-context-menu";
+const components = [GuxContextMenu, GuxButton, GuxList, GuxListItem];
+const html = `
+<gux-context-menu>
+  <gux-list-item onclick="notify(event)">Test 1</gux-list-item>
+  <gux-list-item onclick="notify(event)">Test 2</gux-list-item>
+  <gux-list-item onclick="notify(event)">Test 3</gux-list-item>
+</gux-context-menu>
+`;
+describe('gux-context-menu', () => {
+  let page;
+  let component;
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components,
+      html,
+      language: 'en'
+    });
+    component = page.rootInstance;
+  });
+  it('should build', async () => {
+    expect(component).toBeInstanceOf(GuxContextMenu);
+  });
+  it('renders', async () => {
+    expect(page.root).toMatchSnapshot();
+  });
+  // Mouse events
+  it('should display the menu and focus on first list item on click', () => {
+    const focusFirstListItemSpy = jest.spyOn(component, 'focusFirstListItem');
+    expect(component.isOpen).toBe(false);
+    component.button.click();
+    expect(focusFirstListItemSpy).toHaveBeenCalledTimes(1);
+    expect(component.isOpen).toBe(true);
+  });
+  it('should hide on click outside the component', () => {
+    component.button.click();
+    page.body.click();
+    expect(component.isOpen).toBe(false);
+  });
+});

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.css

@@ -30,13 +30,13 @@ button {
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content ::slotted(*) {
   padding: var(--gse-ui-copyToClipboard-label-padding);
-  border-radius: var(--gse-ui-copyToClipboard-label-borderRadius);
   font-family: var(--gse-ui-copyToClipboard-label-text-fontFamily);
+  font-size: var(--gse-ui-copyToClipboard-label-text-fontSize);
   font-weight: var(--gse-ui-copyToClipboard-label-text-fontWeight);
   line-height: var(--gse-ui-copyToClipboard-label-text-lineHeight);
-  font-size: var(--gse-ui-copyToClipboard-label-text-fontSize);
-  text-decoration: var(--gse-ui-copyToClipboard-label-text-textDecoration);
   color: var(--gse-ui-copyToClipboard-label-foregroundColor);
+  text-decoration: var(--gse-ui-copyToClipboard-label-text-textDecoration);
+  border-radius: var(--gse-ui-copyToClipboard-label-borderRadius);
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content:hover ::slotted(*) {
   background-color: var(--gse-ui-copyToClipboard-label-active-backgroundColor);

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
 /**
  * @slot content - Slot for content
  */
@@ -24,9 +24,9 @@ export class GuxCopyToClipboard {
   resetTooltip() {
     this.tooltipContent = 'clickToCopy';
   }
-  onCopyToClipboard() {
+  async onCopyToClipboard() {
     const copyText = this.root.innerText;
-    navigator.clipboard
+    return navigator.clipboard
       .writeText(copyText)
       .then(() => {
       this.tooltipContent = 'copySuccess';

package/dist/collection/components/stable/gux-copy-to-clipboard/tests/gux-copy-to-clipboard.e2e.js

@@ -0,0 +1,23 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const html = `
+  <gux-copy-to-clipboard lang="en">
+    <div slot="content>Test</div>
+  </gux-copy-to-clipboard>
+`;
+describe('gux-copy-to-clipboard', () => {
+  it('renders', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-copy-to-clipboard');
+    await a11yCheck(page);
+    expect(element).toHaveAttribute('hydrated');
+  });
+  it('renders tooltip on hover', async () => {
+    const page = await newSparkE2EPage({ html });
+    const element = await page.find('gux-copy-to-clipboard');
+    await element.hover();
+    await page.waitForChanges();
+    const tooltip = await element.find('pierce/gux-tooltip');
+    await a11yCheck(page);
+    expect(tooltip.textContent).toEqual('Click to Copy');
+  });
+});

package/dist/collection/components/stable/gux-copy-to-clipboard/tests/gux-copy-to-clipboard.spec.js

@@ -0,0 +1,46 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import MutationObserver from "mutation-observer";
+import { GuxCopyToClipboard } from "../gux-copy-to-clipboard";
+const components = [GuxCopyToClipboard];
+const language = 'en';
+const html = `
+  <gux-copy-to-clipboard>
+    <div slot="content">Test</div>
+  </gux-copy-to-clipboard>
+`;
+describe('gux-copy-to-clipboard', () => {
+  beforeEach(async () => {
+    global.MutationObserver = MutationObserver;
+  });
+  describe('#render', () => {
+    it('should render copy to clipboard', async () => {
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxCopyToClipboard);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('private', () => {
+    it('should copy to clipboard successfully', async () => {
+      const component = new GuxCopyToClipboard();
+      Object.assign(window.navigator, {
+        clipboard: {
+          writeText: jest.fn().mockImplementation(() => Promise.resolve())
+        }
+      });
+      await component.onCopyToClipboard();
+      expect(component.tooltipContent).toEqual('copySuccess');
+      expect(window.navigator.clipboard.writeText).toHaveBeenCalled();
+    });
+    it('should copy to clipboard with error', async () => {
+      const component = new GuxCopyToClipboard();
+      Object.assign(window.navigator, {
+        clipboard: {
+          writeText: jest.fn().mockImplementation(() => Promise.reject())
+        }
+      });
+      await component.onCopyToClipboard();
+      expect(component.tooltipContent).toEqual('copyFailure');
+      expect(window.navigator.clipboard.writeText).toHaveBeenCalled();
+    });
+  });
+});

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.css

@@ -24,45 +24,6 @@
 @prop gse-ui-actionButton-borderRadius
 @prop gse-ui-icon-size-sm
 */
-.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);
-}
-
 :host {
   display: block;
 }
@@ -115,7 +76,6 @@
   align-content: stretch;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-input-padding);
@@ -123,15 +83,16 @@
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  white-space: nowrap;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input:focus-within {
-  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input {
   box-sizing: border-box;
@@ -171,9 +132,9 @@
   outline: none;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-within {
-  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);

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

@@ -8,16 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '@utils/date/iso-dates';
-import { OnClickOutside } from '@utils/decorator/on-click-outside';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
-import { getCalendarLabels, isOutOfBoundsDate, incrementDay, incrementMonth, incrementYear, getFormattedDate, getIntervalLetter, getFormatSeparator, getPreviousIntervalRange, getNextIntervalRange, getIntervalOrder, getIntervalRange } from './gux-datepicker.service';
+import { h } from "@stencil/core";
+import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from "../../../utils/date/iso-dates";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
+import { getCalendarLabels, isOutOfBoundsDate, incrementDay, incrementMonth, incrementYear, getFormattedDate, getIntervalLetter, getFormatSeparator, getPreviousIntervalRange, getNextIntervalRange, getIntervalOrder, getIntervalRange } from "./gux-datepicker.service";
 export class GuxDatepicker {
   constructor() {
     this.yearFormat = 'yyyy';
@@ -574,7 +574,8 @@ export class GuxDatepicker {
           "references": {
             "GuxCalendarDayOfWeek": {
               "location": "import",
-              "path": "../gux-calendar/gux-calendar.types"
+              "path": "../gux-calendar/gux-calendar.types",
+              "id": "src/components/stable/gux-calendar/gux-calendar.types.ts::GuxCalendarDayOfWeek"
             }
           }
         },
@@ -632,7 +633,8 @@ export class GuxDatepicker {
           "references": {
             "GuxDatepickerMode": {
               "location": "import",
-              "path": "./gux-datepicker.types"
+              "path": "./gux-datepicker.types",
+              "id": "src/components/stable/gux-datepicker/gux-datepicker.types.ts::GuxDatepickerMode"
             }
           }
         },