genesys-spark-components 4.144.0 → 4.145.1

package/dist/collection/components/legacy/gux-modal-legacy/tests/gux-modal-legacy.common.js

@@ -0,0 +1,125 @@
+export const renderConfigs = [
+    {
+        description: 'should render small modal',
+        html: `
+          <gux-modal-legacy size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render medium modal',
+        html: `
+          <gux-modal-legacy size="medium">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render large modal',
+        html: `
+          <gux-modal-legacy size="large">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render modal without a title',
+        html: `
+          <gux-modal-legacy size="large">
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render modal without buttons',
+        html: `
+          <gux-modal-legacy size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render modal with just left align buttons',
+        html: `
+          <gux-modal-legacy size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render modal with just right align buttons',
+        html: `
+          <gux-modal-legacy size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render modal with a specified initial focus element',
+        html: `
+          <gux-modal-legacy initial-focus="#cancelButton">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button id="cancelButton">Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    },
+    {
+        description: 'should render small modal by default',
+        html: `
+          <gux-modal-legacy>
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="left-align-buttons">
+                <gux-button>Cancel</gux-button>
+            </div>
+            <div slot="right-align-buttons">
+              <gux-button accent='primary'>Accept</gux-button>
+            </div>
+          </gux-modal-legacy>
+        `
+    }
+];
+export const renderConfig = renderConfigs[0];

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

@@ -0,0 +1,43 @@
+export const renderConfigs = [
+    {
+        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>
+        `
+    }
+];
+export const renderConfig = renderConfigs[0];

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

@@ -0,0 +1,26 @@
+export const renderConfigs = [
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 50, layout: 'full' },
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 75, layout: 'full' },
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 100, layout: 'full' },
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+    { currentPage: 10, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+    { currentPage: 10, totalItems: 1000, itemsPerPage: 50, layout: 'full' },
+    { currentPage: 10, totalItems: 1000, itemsPerPage: 75, layout: 'full' },
+    { currentPage: 10, totalItems: 1000, itemsPerPage: 100, layout: 'full' },
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'small' },
+    { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'expanded' },
+    { currentPage: -3, totalItems: 1000, itemsPerPage: 25, layout: 'full' },
+    { currentPage: -3, totalItems: 1, itemsPerPage: 25, layout: 'full' },
+    { currentPage: 1, totalItems: 0, itemsPerPage: 25, layout: 'full' }
+].map(({ currentPage, totalItems, itemsPerPage, layout }) => {
+    return {
+        html: `
+    <gux-pagination-legacy
+      current-page="${currentPage}"
+      total-items="${totalItems}"
+      items-per-page="${itemsPerPage}"
+      layout="${layout}"
+    ></gux-pagination-legacy>`
+    };
+});

package/dist/collection/components/legacy/gux-simple-toast-legacy/tests/gux-simple-toast.common.js

@@ -0,0 +1,39 @@
+export const renderConfigs = [
+    {
+        description: 'should render neutral simple toast',
+        html: `
+      <gux-simple-toast-legacy accent="neutral">
+        <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+        <div slot="message">This is the message</div>
+      </gux-simple-toast-legacy>
+    `
+    },
+    {
+        description: 'should render positive simple toast',
+        html: `
+      <gux-simple-toast-legacy accent="positive">
+        <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+        <div slot="message">This is the message</div>
+      </gux-simple-toast-legacy>
+    `
+    },
+    {
+        description: 'should render alert simple toast',
+        html: `
+      <gux-simple-toast-legacy accent="alert">
+        <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+        <div slot="message">This is the message</div>
+      </gux-simple-toast-legacy>
+    `
+    },
+    {
+        description: 'should render warning simple toast',
+        html: `
+      <gux-simple-toast-legacy accent="warning">
+        <gux-icon slot="icon" icon-name="user-add" decorative></gux-icon>
+        <div slot="message">This is the message</div>
+      </gux-simple-toast-legacy>
+    `
+    }
+];
+export const renderConfig = renderConfigs[0];

package/dist/collection/components/legacy/gux-switch-legacy/tests/gux-switch.common.js

@@ -0,0 +1,11 @@
+export const renderConfig = {
+    html: `
+  <gux-switch-legacy layout="small" value="day">
+    <gux-switch-item value="month">Month</gux-switch-item>
+    <gux-switch-item value="week">Week</gux-switch-item>
+    <gux-switch-item value="day">Day</gux-switch-item>
+    <gux-switch-item value="hour" disabled>Hour</gux-switch-item>
+    <gux-switch-item value="minute">Minute</gux-switch-item>
+  </gux-switch-legacy>
+`
+};

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

@@ -26,10 +26,10 @@ export class GuxButton {
     }
     render() {
         return [
-            h("button", { key: '0affca8740033516c6999453f8911af97b74ac6b', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+            h("button", { key: '15b89e11c02ebf2ef4b366354ec9ffdee24854ec', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
                     [`gux-${this.accent}`]: true,
                     'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: '35600b8801921ec77c9bd5e7728f0b457188ab65', onSlotchange: this.slotChanged.bind(this) })),
+                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: 'f08e752335b5148df4218894b773c67e79f2bf4e', onSlotchange: this.slotChanged.bind(this) })),
             this.renderTooltip()
         ];
     }

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

@@ -8,37 +8,38 @@
   box-shadow: var(--gse-ui-calendarMenu-boxShadow);
 }
 .gux-calendar .gux-header {
-  position: relative;
   display: flex;
-  gap: var(--gse-ui-calendarMenu-header-gap);
   align-items: center;
   justify-content: space-between;
   block-size: var(--gse-ui-calendarMenu-month-single-header-height);
   padding: var(--gse-ui-calendarMenu-header-padding);
-  font-weight: var(--gse-ui-calendarMenu-month-headerText-fontWeight);
+  font-style: normal;
+  font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
+  text-align: center;
   background-color: var(--gse-ui-calendarMenu-header-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
 }
-.gux-calendar .gux-header button {
-  position: absolute;
+.gux-calendar .gux-header .gux-header-month-and-year {
+  inline-size: var(--gse-ui-calendarMenu-month-single-header-textWidth);
+  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);
+  color: var(--gse-ui-calendarMenu-month-selected-foregroundColor);
+}
+.gux-calendar .gux-header .gux-left,
+.gux-calendar .gux-header .gux-right {
+  block-size: 100%;
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
   cursor: pointer;
   outline: none;
   background: none;
   border: none;
 }
-.gux-calendar .gux-header button:focus-visible {
-  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 {
-  inset-inline-start: 18px;
-}
-.gux-calendar .gux-header button.gux-right {
-  inset-inline-end: 18px;
-}
-.gux-calendar .gux-header button gux-icon {
-  pointer-events: none;
+.gux-calendar .gux-header .gux-left:focus-visible,
+.gux-calendar .gux-header .gux-right:focus-visible {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 .gux-calendar .gux-header .gux-month-list {
   display: flex;

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

@@ -70,10 +70,6 @@ export class GuxCalendar {
     incrementPreviewDateByMonth(increment) {
         this.previewValue = new Date(this.previewValue.getFullYear(), this.previewValue.getMonth() + increment, 15, // Don't use the day from the old value, because we'll skip a month on the 31st
         0, 0, 0);
-        // Wait for render before focusing preview date
-        afterNextRenderTimeout(() => {
-            void this.focusPreviewDate();
-        });
     }
     async setValueAndEmit(value) {
         await this.setValue(value);
@@ -298,12 +294,22 @@ export class GuxCalendar {
                 });
                 break;
             case 'PageUp':
+                event.preventDefault();
                 this.incrementPreviewDateByMonth(1);
                 this.onDateMouseEnter(this.previewValue);
+                // Wait for render before focusing preview date
+                afterNextRenderTimeout(() => {
+                    void this.focusPreviewDate();
+                });
                 break;
             case 'PageDown':
+                event.preventDefault();
                 this.incrementPreviewDateByMonth(-1);
                 this.onDateMouseEnter(this.previewValue);
+                // Wait for render before focusing preview date
+                afterNextRenderTimeout(() => {
+                    void this.focusPreviewDate();
+                });
                 break;
         }
     }
@@ -336,7 +342,7 @@ export class GuxCalendar {
         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", { key: '5668bf18520551adb04babf0c75c06d691b0be3f', class: "gux-calendar" }, h("div", { key: '535faac9b91d130b5ffda1f899886c8864278b0f', class: "gux-header" }, h("button", { key: '63fe077bae34d7ae1b925d18f633b0b4fb0698d7', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'ea25c656165d2a53154a9b504d146b4a87215f92', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '78b7fb693fdc1603b56b07d268f96e0f5b762a33', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'd0b4940865dd476c6a483de8234158f363374381', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '9da55e11bb94070d4872a121b5a4eb126670cc77', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: '4aa5b166bfd8d487ca4c854b6ffb3509453bba3c', class: "gux-calendar" }, h("div", { key: '21e3c5803c8c98ffd283ba449134e79d43b4c237', class: "gux-header" }, h("button", { key: '3370e725e923ef57d42fb643e9b2c5b403bfa1a8', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '00d468072914be22deb85da6897f0edb9c1d8e4e', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'e3535ff46117c47294d08cd0ac5cb2175cac0d59', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: 'a961e9ac1f5b95b189db5f68c3c17b03903ca58a', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: 'a39a5c0068efd41f6989a2e230c7b513cc66030d', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     static get is() { return "gux-calendar"; }
     static get encapsulation() { return "shadow"; }