genesys-spark-components 4.0.0-beta.5 → 4.0.0-beta.51

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

@@ -0,0 +1,258 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+  __esModule: true,
+  logError: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxButtonSlot } from "../gux-button-slot";
+import { logError } from "../../../../utils/error/log-error";
+const components = [GuxButtonSlot];
+const language = 'en';
+describe('gux-button-slot', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('#render', () => {
+    [
+      {
+        description: 'should render default button',
+        html: '<gux-button-slot><button type="button"accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render primary button',
+        html: '<gux-button-slot accent="primary"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render secondary button',
+        html: '<gux-button-slot accent="secondary"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render tertiary button',
+        html: '<gux-button-slot accent="tertiary"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render ghost button',
+        html: '<gux-button-slot accent="ghost"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render danger button',
+        html: '<gux-button-slot accent="danger"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render inline button',
+        html: '<gux-button-slot accent="inline"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render invalid button',
+        html: '<gux-button-slot accent="invalid"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled default button',
+        html: '<gux-button-slot><button type="button"accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled primary button',
+        html: '<gux-button-slot accent="primary"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled secondary button',
+        html: '<gux-button-slot accent="secondary"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled tertiary button',
+        html: '<gux-button-slot accent="tertiary"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled ghost button',
+        html: '<gux-button-slot accent="ghost"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled danger button',
+        html: '<gux-button-slot accent="danger"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled inline button',
+        html: '<gux-button-slot accent="inline"><button type="button" accent="primary" disabled>Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render button with invalid accent',
+        html: '<gux-button-slot accent="invalid"><button type="button" accent="primary">Button</button></gux-button-slot>'
+      },
+      {
+        description: 'should render default input[type=button]',
+        html: '<gux-button-slot><input type="button"accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render primary input[type=button]',
+        html: '<gux-button-slot accent="primary"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render secondary input[type=button]',
+        html: '<gux-button-slot accent="secondary"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render tertiary input[type=button]',
+        html: '<gux-button-slot accent="tertiary"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render ghost input[type=button]',
+        html: '<gux-button-slot accent="ghost"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render danger input[type=button]',
+        html: '<gux-button-slot accent="danger"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render inline input[type=button]',
+        html: '<gux-button-slot accent="inline"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render invalid input[type=button]',
+        html: '<gux-button-slot accent="invalid"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled default input[type=button]',
+        html: '<gux-button-slot><input type="button"accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled primary input[type=button]',
+        html: '<gux-button-slot accent="primary"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled secondary input[type=button]',
+        html: '<gux-button-slot accent="secondary"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled tertiary input[type=button]',
+        html: '<gux-button-slot accent="tertiary"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled ghost input[type=button]',
+        html: '<gux-button-slot accent="ghost"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled danger input[type=button]',
+        html: '<gux-button-slot accent="danger"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled inline input[type=button]',
+        html: '<gux-button-slot accent="inline"><input type="button" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render input[type=button] with invalid accent',
+        html: '<gux-button-slot accent="invalid"><input type="button" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render default input[type=submit]',
+        html: '<gux-button-slot><input type="submit"accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render primary input[type=submit]',
+        html: '<gux-button-slot accent="primary"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render secondary input[type=submit]',
+        html: '<gux-button-slot accent="secondary"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render tertiary input[type=submit]',
+        html: '<gux-button-slot accent="tertiary"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render ghost input[type=submit]',
+        html: '<gux-button-slot accent="ghost"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render danger input[type=submit]',
+        html: '<gux-button-slot accent="danger"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render inline input[type=submit]',
+        html: '<gux-button-slot accent="inline"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render invalid input[type=submit]',
+        html: '<gux-button-slot accent="invalid"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled default input[type=submit]',
+        html: '<gux-button-slot><input type="submit"accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled primary input[type=submit]',
+        html: '<gux-button-slot accent="primary"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled secondary input[type=submit]',
+        html: '<gux-button-slot accent="secondary"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled tertiary input[type=submit]',
+        html: '<gux-button-slot accent="tertiary"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled ghost input[type=submit]',
+        html: '<gux-button-slot accent="ghost"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled danger input[type=submit]',
+        html: '<gux-button-slot accent="danger"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render disabled inline input[type=submit]',
+        html: '<gux-button-slot accent="inline"><input type="submit" accent="primary" disabled value="Button"/></gux-button-slot>'
+      },
+      {
+        description: 'should render input[type=submit] with invalid accent',
+        html: '<gux-button-slot accent="invalid"><input type="submit" accent="primary" value="Button"/></gux-button-slot>'
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxButtonSlot);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+  describe('slot content', () => {
+    it('should not log an error if a button element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot><button type="button" accent="primary">Button</button></gux-button-slot>',
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should not log an error if an input[type=button] element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot><input type="button" accent="primary" value="Button"/></gux-button-slot>',
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should not log an error if an input[type=submit] element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot><input type="submit" accent="primary" value="Button"/></gux-button-slot>',
+        language
+      });
+      expect(logError).not.toHaveBeenCalled();
+    });
+    it('should not log an error if an input[type=text] element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot id="test"><input type="text" accent="primary" value="Button"/></gux-button-slot>',
+        language
+      });
+      expect(logError).toHaveBeenCalledWith(document.getElementById('test'), 'You must slot a button, input[type="button"] or input[type="submit"] element.');
+    });
+    it('should not log an error if a button element is slotted', async () => {
+      await newSpecPage({
+        components,
+        html: '<gux-button-slot id="test"><div>Not a button</div></gux-button-slot>',
+        language
+      });
+      expect(logError).toHaveBeenCalledWith(document.getElementById('test'), 'You must slot a button, input[type="button"] or input[type="submit"] element.');
+    });
+  });
+});

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

@@ -1,34 +1,78 @@
+/**
+@prop gse-ui-calendarMenu-day-headerText-fontFamily
+@prop gse-ui-calendarMenu-day-headerText-lineHeight
+@prop gse-ui-calendarMenu-day-headerText-fontSize
+@prop gse-ui-calendarMenu-day-headerText-fontWeight
+@prop gse-ui-calendarMenu-day-date-size
+@prop gse-ui-calendarMenu-month-headerText-fontFamily
+@prop gse-ui-calendarMenu-month-headerText-lineHeight
+@prop gse-ui-calendarMenu-month-headerText-fontSize
+@prop gse-ui-calendarMenu-month-single-header-height
+@prop gse-ui-calendarMenu-month-focusBorderRadius
+@prop gse-ui-calendarMenu-dateBody-padding
+@prop gse-ui-calendarMenu-header-backgroundColor
+@prop gse-ui-calendarMenu-header-foregroundColor
+@prop gse-ui-calendarMenu-header-gap
+@prop gse-ui-calendarMenu-header-padding
+@prop gse-ui-calendarMenu-backgroundColor
+@prop gse-ui-calendarMenu-date-defaultText-fontFamily
+@prop gse-ui-calendarMenu-date-defaultText-lineHeight
+@prop gse-ui-calendarMenu-date-defaultText-fontSize
+@prop gse-ui-calendarMenu-date-defaultText-fontWeight
+@prop gse-ui-calendarMenu-date-currentText-fontFamily
+@prop gse-ui-calendarMenu-date-currentText-lineHeight
+@prop gse-ui-calendarMenu-date-currentText-fontSize
+@prop gse-ui-calendarMenu-date-currentText-fontWeight
+@prop gse-ui-calendarMenu-date-selected-foregroundColor
+@prop gse-ui-calendarMenu-date-selected-backgroundColor
+@prop gse-ui-calendarMenu-date-selected-hoverBackgroundColor
+@prop gse-ui-calendarMenu-date-hover-backgroundColor
+@prop gse-ui-calendarMenu-date-range-backgroundColor
+@prop gse-ui-calendarMenu-date-default-foregroundColor
+@prop gse-ui-calendarMenu-single-header-borderRadius
+@prop gse-ui-calendarMenu-single-body-borderRadius
+@prop gse-ui-calendarMenu-disabled-opacity
+@prop gse-ui-calendarMenu-boxShadow-color
+@prop gse-ui-calendarMenu-boxShadow-type
+@prop gse-ui-calendarMenu-boxShadow-x
+@prop gse-ui-calendarMenu-boxShadow-y
+@prop gse-ui-calendarMenu-boxShadow-blur
+@prop gse-ui-calendarMenu-boxShadow-spread
+@prop gse-ui-calendarMenu-day-range-height - Not used since this value is already calculated from using other tokens
+@prop gse-ui-calendarMenu-day-input-height - Not used since this value is already calculated from using other tokens
+*/
 :host {
   display: inline-block;
 }
+
 .gux-calendar {
   margin-top: 2px;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }
 .gux-calendar .gux-header {
   position: relative;
   display: flex;
+  gap: var(--gse-ui-calendarMenu-header-gap);
   align-items: center;
   justify-content: space-between;
-  height: 16px;
-  padding: 16px;
-  color: #fdfdfd;
-  background-color: #2a60c8;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+  height: var(--gse-ui-calendarMenu-month-single-header-height);
+  padding: var(--gse-ui-calendarMenu-header-padding);
+  font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
+  color: var(--gse-ui-calendarMenu-header-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-header-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
 }
 .gux-calendar .gux-header button {
   position: absolute;
-  padding: 5px;
-  color: #fdfdfd;
+  color: var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);
   cursor: pointer;
   background: none;
   border: none;
   outline: none;
 }
 .gux-calendar .gux-header button:focus-visible {
-  outline: #75a8ff auto 5px;
+  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-calendar .gux-header button.gux-left {
   left: 18px;
@@ -37,35 +81,32 @@
   right: 18px;
 }
 .gux-calendar .gux-header button gux-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
   pointer-events: none;
 }
 .gux-calendar .gux-header .gux-month-list {
   display: flex;
   justify-content: space-between;
   width: 100%;
+  font-family: var(--gse-ui-calendarMenu-month-headerText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
+  line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
 }
 .gux-calendar .gux-header .gux-month-list label {
   width: 100%;
   text-align: center;
-  font-size: 12px;
-  line-height: 20px;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
 }
 .gux-calendar .gux-content {
   display: flex;
   align-items: flex-start;
-  padding: 20px 24px;
-  color: #2e394c;
-  background-color: #fdfdfd;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  padding: var(--gse-ui-calendarMenu-dateBody-padding);
+  color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
 }
 .gux-calendar .gux-content table {
-  width: 168px;
+  width: var(--gse-ui-calendarMenu-day-input-width);
   text-align: left;
   table-layout: fixed;
   border-spacing: 0;
@@ -76,64 +117,89 @@
   padding-right: 24px;
 }
 .gux-calendar .gux-content table tr {
-  height: 28px;
+  height: var(--gse-ui-calendarMenu-day-input-height);
 }
 .gux-calendar .gux-content table tr:empty {
   display: none;
 }
 .gux-calendar .gux-content table tr th,
 .gux-calendar .gux-content table tr td {
-  width: 28px;
-  height: 28px;
+  width: var(--gse-ui-calendarMenu-day-date-size);
+  height: var(--gse-ui-calendarMenu-day-date-size);
   padding: 0;
   margin: 0;
   text-align: center;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
 }
 .gux-calendar .gux-content table tr th {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
+  font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-day-headerText-lineHeight);
 }
 .gux-calendar .gux-content table tr td {
+  font-family: var(--gse-ui-calendarMenu-date-defaultText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-date-defaultText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-date-defaultText-lineHeight);
+  color: var(--gse-ui-calendarMenu-date-default-foregroundColor);
   cursor: pointer;
 }
 .gux-calendar .gux-content table tr td.gux-hovered {
-  background-color: #deeaff;
+  background-color: var(--gse-ui-calendarMenu-date-range-backgroundColor);
 }
 .gux-calendar .gux-content table tr td.gux-selected {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-  border-radius: 4px;
+  color: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
+  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
-.gux-calendar .gux-content table tr td.gux-selected.gux-start-date {
-  border-radius: 4px 0 0 4px;
+.gux-calendar .gux-content table tr td.gux-selected:hover:not(.gux-calendar .gux-content table tr td.gux-selected.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-selected.gux-end-date) {
+  background-color: var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor);
 }
-.gux-calendar .gux-content table tr td.gux-selected.gux-end-date {
-  border-radius: 0 4px 4px 0;
+.gux-calendar .gux-content table tr td.gux-start-date, .gux-calendar .gux-content table tr td.gux-end-date {
+  background-color: var(--gse-ui-calendarMenu-date-range-backgroundColor);
 }
-.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date) {
-  color: #fdfdfd;
-  background-color: #2a60c8;
-  border-radius: 4px;
+.gux-calendar .gux-content table tr td.gux-start-date .gux-date, .gux-calendar .gux-content table tr td.gux-end-date .gux-date {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--gse-ui-calendarMenu-day-date-size);
+  height: var(--gse-ui-calendarMenu-day-date-size);
+  background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
+}
+.gux-calendar .gux-content table tr td.gux-start-date .gux-date:hover, .gux-calendar .gux-content table tr td.gux-end-date .gux-date:hover {
+  background-color: var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor);
+}
+.gux-calendar .gux-content table tr td.gux-start-date {
+  border-radius: 16px 0 0 16px;
+}
+.gux-calendar .gux-content table tr td.gux-end-date {
+  border-radius: 0 16px 16px 0;
+}
+.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date):not(.gux-calendar .gux-content table tr td.gux-hovered):not(.gux-calendar .gux-content table tr td.gux-selected) {
+  background-color: var(--gse-ui-calendarMenu-date-hover-backgroundColor);
+  border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }
 .gux-calendar .gux-content table tr td.gux-disabled {
-  color: rgba(46, 57, 76, 0.5);
   pointer-events: none;
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month {
-  color: rgba(107, 117, 133, 0.5);
+  opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month:hover {
-  color: #2e394c;
-  background-color: #e2e6ee;
+  background-color: var(--gse-ui-calendarMenu-date-hover-backgroundColor);
 }
 .gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden {
   visibility: hidden;
 }
+.gux-calendar .gux-content table tr td.gux-current-date {
+  font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
+  font-size: var(--gse-ui-calendarMenu-date-currentText-fontSize);
+  font-weight: var(--gse-ui-calendarMenu-date-currentText-fontWeight);
+  line-height: var(--gse-ui-calendarMenu-date-currentText-lineHeight);
+}
+
 .gux-sr-only {
   position: absolute;
   top: auto;
@@ -141,4 +207,4 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

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

@@ -1,10 +1,10 @@
-import { h } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '@utils/date/iso-dates';
-import { addClassToElements, removeClassToElements } from '@utils/dom/manipulate-elements-classes';
-import { trackComponent } from '@utils/tracking/usage';
-import { getDesiredLocale, getStartOfWeek } from '../../../i18n';
-import { firstDateInMonth, getWeekdays, getOffsetMonthDate, getDateMonthAndYearString } from './gux-calendar.service';
+import { h } from "@stencil/core";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from "../../../utils/date/iso-dates";
+import { addClassToElements, removeClassToElements } from "../../../utils/dom/manipulate-elements-classes";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getDesiredLocale, getStartOfWeek } from "../../../i18n";
+import { firstDateInMonth, getWeekdays, getOffsetMonthDate, getDateMonthAndYearString } from "./gux-calendar.service";
 export class GuxCalendar {
   constructor() {
     this.locale = 'en';
@@ -75,6 +75,10 @@ export class GuxCalendar {
     for (let i = 0; i < length; i++) {
       const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0, 0);
       const classes = [];
+      const today = new Date();
+      const isToday = currentDate.getFullYear() === today.getFullYear() &&
+        currentDate.getMonth() === today.getMonth() &&
+        currentDate.getDate() === today.getDate();
       let disabled = false;
       let hidden = false;
       if (date.getMonth() !== month) {
@@ -90,6 +94,9 @@ export class GuxCalendar {
         disabled = true;
       }
       let isSelected = false;
+      if (isToday) {
+        classes.push('gux-current-date');
+      }
       if (this.mode === "range" /* CalendarModes.Range */) {
         const [start, end] = fromIsoDateRange(this.value);
         const fromTimeStamp = start.getTime();
@@ -117,7 +124,8 @@ export class GuxCalendar {
         date,
         hidden,
         disabled,
-        selected: isSelected
+        selected: isSelected,
+        isToday
       });
       currentDate.setDate(currentDate.getDate() + 1);
     }
@@ -306,7 +314,7 @@ export class GuxCalendar {
     })));
   }
   renderCalendarTable(index) {
-    return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale))))))))));
+    return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
   }
   render() {
     return (h("div", { class: "gux-calendar" }, h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), this.renderMonthHeader(), h("button", { type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("div", { class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
@@ -315,7 +323,7 @@ export class GuxCalendar {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-calendar.less"]
+      "$": ["gux-calendar.scss"]
     };
   }
   static get styleUrls() {
@@ -388,7 +396,8 @@ export class GuxCalendar {
           "references": {
             "GuxCalendarMode": {
               "location": "import",
-              "path": "./gux-calendar.types"
+              "path": "./gux-calendar.types",
+              "id": "src/components/stable/gux-calendar/gux-calendar.types.ts::GuxCalendarMode"
             }
           }
         },
@@ -429,7 +438,8 @@ export class GuxCalendar {
           "references": {
             "GuxCalendarDayOfWeek": {
               "location": "import",
-              "path": "./gux-calendar.types"
+              "path": "./gux-calendar.types",
+              "id": "src/components/stable/gux-calendar/gux-calendar.types.ts::GuxCalendarDayOfWeek"
             }
           }
         },
@@ -479,10 +489,12 @@ export class GuxCalendar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           },
           "return": "Promise<void>"
@@ -498,10 +510,12 @@ export class GuxCalendar {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLTableCellElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLTableCellElement"
             }
           },
           "return": "Promise<void>"
@@ -520,10 +534,12 @@ export class GuxCalendar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "Date": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Date"
             }
           },
           "return": "Promise<void>"

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

@@ -1,4 +1,4 @@
-import { capitalizeFirstLetter } from '@utils/string/capitalize-first-letter';
+import { capitalizeFirstLetter } from "../../../utils/string/capitalize-first-letter";
 export function firstDateInMonth(month, year, startDayOfWeek) {
   const startDate = new Date(year, month, 1, 1, 0, 0, 0);
   const firstDayOfMonth = startDate.getDay();