genesys-spark-components 4.22.1 → 4.23.1

package/dist/collection/components/beta/gux-avatar/gux-avatar.css

@@ -14,12 +14,19 @@
 
 .gux-avatar {
   position: relative;
+  width: var(--gse-ui-avatar-large-size);
+  height: var(--gse-ui-avatar-large-size);
+  overflow: hidden;
+  border-radius: 50%;
+}
+.gux-avatar .gux-content {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--gse-ui-avatar-large-content-size);
-  height: var(--gse-ui-avatar-large-content-size);
+  width: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
+  height: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
+  margin: var(--gse-ui-avatar-large-presenceRing-width);
   overflow: hidden;
   font-family: var(--gse-ui-avatar-large-initials-fontFamily);
   font-size: var(--gse-ui-avatar-large-initials-fontSize);
@@ -28,75 +35,206 @@
   color: var(--gse-ui-avatar-media-initialsForeground-inverse);
   text-transform: uppercase;
   background-color: var(--gse-ui-avatar-media-initialsBackground-default);
+  border: var(--gse-ui-avatar-content-large-border-width) var(--gse-ui-avatar-content-default-border-style) var(--gse-ui-avatar-content-default-border-color);
   border-radius: 50%;
 }
-.gux-avatar.gux-accent-1 {
+.gux-avatar.gux-medium {
+  width: var(--gse-ui-avatar-medium-size);
+  height: var(--gse-ui-avatar-medium-size);
+}
+.gux-avatar.gux-medium .gux-content {
+  width: calc(100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2);
+  height: calc(100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2);
+  margin: var(--gse-ui-avatar-medium-presenceRing-width);
+  font-size: var(--gse-ui-avatar-medium-initials-fontSize);
+  font-weight: var(--gse-ui-avatar-medium-initials-fontWeight);
+}
+.gux-avatar.gux-medium .gux-content, .gux-avatar.gux-small .gux-content, .gux-avatar.gux-xsmall .gux-content {
+  border-width: var(--gse-ui-avatar-content-default-border-width);
+}
+.gux-avatar.gux-small {
+  width: var(--gse-ui-avatar-small-size);
+  height: var(--gse-ui-avatar-small-size);
+}
+.gux-avatar.gux-small .gux-content {
+  width: calc(100% - var(--gse-ui-avatar-small-presenceRing-width) * 2);
+  height: calc(100% - var(--gse-ui-avatar-small-presenceRing-width) * 2);
+  margin: var(--gse-ui-avatar-small-presenceRing-width);
+  font-size: var(--gse-ui-avatar-small-initials-fontSize);
+  font-weight: var(--gse-ui-avatar-small-initials-fontWeight);
+}
+.gux-avatar.gux-xsmall {
+  width: var(--gse-ui-avatar-xsmall-size);
+  height: var(--gse-ui-avatar-xsmall-size);
+}
+.gux-avatar.gux-xsmall .gux-content {
+  width: calc(100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2);
+  height: calc(100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2);
+  margin: var(--gse-ui-avatar-xsmall-presenceRing-width);
+  font-size: var(--gse-ui-avatar-xsmall-initials-fontSize);
+  font-weight: var(--gse-ui-avatar-xsmall-initials-fontWeight);
+}
+.gux-avatar.gux-accent-1 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-inverse);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent1);
 }
-.gux-avatar.gux-accent-2 {
+.gux-avatar.gux-accent-2 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent2);
 }
-.gux-avatar.gux-accent-3 {
+.gux-avatar.gux-accent-3 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-inverse);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent3);
 }
-.gux-avatar.gux-accent-4 {
+.gux-avatar.gux-accent-4 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-inverse);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent4);
 }
-.gux-avatar.gux-accent-5 {
+.gux-avatar.gux-accent-5 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent5);
 }
-.gux-avatar.gux-accent-6 {
+.gux-avatar.gux-accent-6 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent6);
 }
-.gux-avatar.gux-accent-7 {
+.gux-avatar.gux-accent-7 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-inverse);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent7);
 }
-.gux-avatar.gux-accent-8 {
+.gux-avatar.gux-accent-8 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent8);
 }
-.gux-avatar.gux-accent-9 {
+.gux-avatar.gux-accent-9 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent9);
 }
-.gux-avatar.gux-accent-10 {
+.gux-avatar.gux-accent-10 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent10);
 }
-.gux-avatar.gux-accent-11 {
+.gux-avatar.gux-accent-11 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-default);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent11);
 }
-.gux-avatar.gux-accent-12 {
+.gux-avatar.gux-accent-12 .gux-content {
   color: var(--gse-ui-avatar-media-initialsForeground-inverse);
   background-color: var(--gse-ui-avatar-media-initialsBackground-accent12);
 }
-.gux-avatar.gux-accent-inherit {
+.gux-avatar.gux-accent-inherit .gux-content {
   color: inherit;
   background-color: inherit;
 }
-.gux-avatar.gux-medium {
-  width: var(--gse-ui-avatar-medium-content-size);
-  height: var(--gse-ui-avatar-medium-content-size);
-  font-size: var(--gse-ui-avatar-medium-initials-fontSize);
-  font-weight: var(--gse-ui-avatar-medium-initials-fontWeight);
+.gux-avatar.gux-ring.gux-available {
+  background: var(--gse-ui-avatar-presenceRing-available);
 }
-.gux-avatar.gux-small {
-  width: var(--gse-ui-avatar-small-content-size);
-  height: var(--gse-ui-avatar-small-content-size);
-  font-size: var(--gse-ui-avatar-small-initials-fontSize);
-  font-weight: var(--gse-ui-avatar-small-initials-fontWeight);
+.gux-avatar.gux-ring.gux-away, .gux-avatar.gux-ring.gux-break, .gux-avatar.gux-ring.gux-meal, .gux-avatar.gux-ring.gux-training {
+  background: var(--gse-ui-avatar-presenceRing-away);
 }
-.gux-avatar.gux-xsmall {
-  width: var(--gse-ui-avatar-xsmall-content-size);
-  height: var(--gse-ui-avatar-xsmall-content-size);
-  font-size: var(--gse-ui-avatar-xsmall-initials-fontSize);
-  font-weight: var(--gse-ui-avatar-xsmall-initials-fontWeight);
+.gux-avatar.gux-ring.gux-busy, .gux-avatar.gux-ring.gux-meeting {
+  background: var(--gse-ui-avatar-presenceRing-busy);
+}
+.gux-avatar.gux-ring.gux-notifications {
+  background: var(--gse-ui-avatar-presenceRing-notifications);
+}
+.gux-avatar.gux-ring.gux-offline {
+  background: var(--gse-ui-avatar-presenceRing-offline);
+}
+.gux-avatar.gux-ring.gux-out-of-office {
+  background: var(--gse-ui-avatar-presenceRing-outOfOffice);
+}
+.gux-avatar.gux-ring.gux-on-queue {
+  background: var(--gse-ui-avatar-presenceRing-onQueue);
+}
+
+.gux-avatar-badge {
+  position: absolute;
+  top: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
+  right: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--gse-ui-avatar-large-badge-size);
+  height: var(--gse-ui-avatar-large-badge-size);
+  border-color: var(--gse-ui-avatar-content-default-border-color);
+  border-style: var(--gse-ui-avatar-content-default-border-style);
+  border-width: var(--gse-ui-avatar-content-large-border-width);
+  border-radius: 50%;
+}
+.gux-avatar-badge.gux-medium {
+  top: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
+  right: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
+  width: var(--gse-ui-avatar-medium-badge-size);
+  height: var(--gse-ui-avatar-medium-badge-size);
+  border-width: var(--gse-ui-avatar-content-default-border-width);
+}
+.gux-avatar-badge.gux-small, .gux-avatar-badge.gux-xsmall {
+  top: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
+  right: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
+  width: var(--gse-ui-avatar-small-badge-size);
+  height: var(--gse-ui-avatar-small-badge-size);
+  border-width: var(--gse-ui-avatar-content-default-border-width);
+}
+.gux-avatar-badge.gux-small gux-icon, .gux-avatar-badge.gux-xsmall gux-icon {
+  display: none;
+}
+.gux-avatar-badge.gux-available {
+  background-color: var(--gse-ui-avatar-badge-foregroundDefault-color);
+}
+.gux-avatar-badge.gux-available.gux-small, .gux-avatar-badge.gux-available.gux-xsmall {
+  background-color: var(--gse-ui-avatar-badge-available-color);
+}
+.gux-avatar-badge.gux-available gux-icon {
+  color: var(--gse-ui-avatar-badge-available-color);
+}
+.gux-avatar-badge.gux-away, .gux-avatar-badge.gux-break, .gux-avatar-badge.gux-meal, .gux-avatar-badge.gux-training {
+  background-color: var(--gse-ui-avatar-badge-away);
+}
+.gux-avatar-badge.gux-away gux-icon, .gux-avatar-badge.gux-break gux-icon, .gux-avatar-badge.gux-meal gux-icon, .gux-avatar-badge.gux-training gux-icon {
+  margin: var(--gse-ui-avatar-badge-away-icon-margin);
+  color: var(--gse-ui-avatar-badge-foregroundDark-color);
+}
+.gux-avatar-badge.gux-busy, .gux-avatar-badge.gux-meeting {
+  background-color: var(--gse-ui-avatar-badge-busy-color);
+}
+.gux-avatar-badge.gux-busy gux-icon, .gux-avatar-badge.gux-meeting gux-icon {
+  margin: var(--gse-ui-avatar-badge-busy-icon-margin);
+  color: var(--gse-ui-avatar-badge-foregroundDefault-color);
+}
+.gux-avatar-badge.gux-notifications {
+  background-color: var(--gse-ui-avatar-badge-notification-color);
+}
+.gux-avatar-badge.gux-notifications gux-icon {
+  margin: var(--gse-ui-avatar-badge-notifications-icon-margin);
+  color: var(--gse-ui-avatar-badge-foregroundDefault-color);
+}
+.gux-avatar-badge.gux-offline {
+  background-color: var(--gse-ui-avatar-badge-foregroundDefault-color);
+}
+.gux-avatar-badge.gux-offline.gux-small, .gux-avatar-badge.gux-offline.gux-xsmall {
+  background-color: var(--gse-ui-avatar-badge-offline-color);
+}
+.gux-avatar-badge.gux-offline gux-icon {
+  color: var(--gse-ui-avatar-badge-offline-color);
+}
+.gux-avatar-badge.gux-out-of-office {
+  background-color: var(--gse-ui-avatar-badge-foregroundDefault-color);
+}
+.gux-avatar-badge.gux-out-of-office.gux-small, .gux-avatar-badge.gux-out-of-office.gux-xsmall {
+  background-color: var(--gse-ui-avatar-badge-outOfOffice);
+}
+.gux-avatar-badge.gux-out-of-office gux-icon {
+  color: var(--gse-ui-avatar-badge-outOfOffice);
+}
+.gux-avatar-badge.gux-on-queue {
+  background-color: var(--gse-ui-avatar-badge-onQueue-color);
+}
+.gux-avatar-badge.gux-on-queue gux-icon {
+  margin: var(--gse-ui-avatar-badge-queue-icon-margin);
+  color: var(--gse-ui-avatar-badge-foregroundDefault-color);
+}
+.gux-avatar-badge gux-icon {
+  width: 100%;
+  height: 100%;
 }

package/dist/collection/components/beta/gux-avatar/gux-avatar.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { logWarn } from "../../../utils/error/log-error";
+import { buildI18nForComponent } from "../../../i18n";
+import defaultResources from "./i18n/en.json";
 /**
  * @slot image - Headshot photo.
  */
@@ -9,6 +11,11 @@ export class GuxAvatar {
     this.size = 'large';
     this.name = undefined;
     this.accent = 'default';
+    this.presence = 'none';
+    this.label = undefined;
+    this.ring = false;
+    this.badge = false;
+    this.notifications = false;
   }
   generateInitials() {
     var _a, _b, _c, _d;
@@ -36,18 +43,71 @@ export class GuxAvatar {
       logWarn(this.root, 'Alt attribute is required for slotted image.');
     }
   }
-  componentWillLoad() {
+  renderBadge() {
+    if (this.notifications) {
+      return this.renderNotificationsBadge();
+    }
+    else if (this.badge && !['idle', 'none'].includes(this.presence)) {
+      return (h("div", { class: {
+          'gux-avatar-badge': true,
+          [`gux-${this.presence}`]: true,
+          [`gux-${this.size}`]: true
+        } }, h("gux-icon", { "icon-name": this.getPresenceIcon(this.presence) })));
+    }
+  }
+  renderNotificationsBadge() {
+    return (h("div", { class: {
+        'gux-avatar-badge gux-notifications': true,
+        [`gux-${this.size}`]: true
+      } }, h("gux-icon", { "icon-name": "fa/bell-regular" })));
+  }
+  getPresenceIcon(presence) {
+    switch (presence) {
+      case 'available':
+        return 'fa/circle-check-solid';
+      case 'busy':
+      case 'meeting':
+        return 'fa/ban-outline';
+      case 'away':
+      case 'break':
+      case 'meal':
+      case 'training':
+        return 'fa/clock-outline';
+      case 'on-queue':
+        return 'fa/headset-solid';
+      case 'offline':
+        return 'fa/circle-xmark-regular';
+      case 'out-of-office':
+        return 'fa/subtract-circle';
+      default:
+        return 'fa/circle-xmark-regular';
+    }
+  }
+  getDescriptionText() {
+    if (this.notifications)
+      return `${this.name} (${this.i18n('notifications')})`;
+    if (this.label && this.presence !== 'none')
+      return `${this.name} (${this.label})`;
+    return `${this.name}`;
+  }
+  async componentWillLoad() {
     trackComponent(this.root, { variant: this.size });
+    this.i18n = await buildI18nForComponent(this.root, defaultResources);
   }
   componentDidLoad() {
     this.validatingInputs();
   }
   render() {
-    return (h("div", { class: {
-        'gux-avatar': true,
-        [`gux-${this.size}`]: true,
-        [`gux-accent-${this.getAccent()}`]: true
-      } }, h("slot", { name: "image" }, h("abbr", { title: this.name }, this.generateInitials()))));
+    return [
+      h("div", { class: {
+          'gux-avatar': true,
+          [`gux-${this.presence}`]: this.ring || this.badge,
+          [`gux-${this.size}`]: true,
+          'gux-ring': this.ring,
+          [`gux-accent-${this.getAccent()}`]: true
+        } }, h("div", { class: "gux-content" }, h("slot", { name: "image" }, h("abbr", { title: this.getDescriptionText(), "aria-label": this.getDescriptionText() }, this.generateInitials())))),
+      this.renderBadge()
+    ];
   }
   static get is() { return "gux-avatar-beta"; }
   static get encapsulation() { return "shadow"; }
@@ -127,6 +187,101 @@ export class GuxAvatar {
         "attribute": "accent",
         "reflect": false,
         "defaultValue": "'default'"
+      },
+      "presence": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxAvatarPresence",
+          "resolved": "\"available\" | \"away\" | \"break\" | \"busy\" | \"idle\" | \"meal\" | \"meeting\" | \"none\" | \"offline\" | \"on-queue\" | \"out-of-office\" | \"training\"",
+          "references": {
+            "GuxAvatarPresence": {
+              "location": "import",
+              "path": "./gux-avatar.types",
+              "id": "src/components/beta/gux-avatar/gux-avatar.types.ts::GuxAvatarPresence"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shows presence such as away or available.\nMust be combined with badge or ring props to take effect."
+        },
+        "attribute": "presence",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label to display for accessibility"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "ring": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shows a ring around the avatar indicating current presence"
+        },
+        "attribute": "ring",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "badge": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Shows a badge indicating current presence"
+        },
+        "attribute": "badge",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "notifications": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show notifications indicator"
+        },
+        "attribute": "notifications",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/beta/gux-avatar/tests/gux-avatar.spec.js

@@ -66,6 +66,27 @@ describe('gux-avatar', () => {
       });
     });
   });
+  describe('#render different presences', () => {
+    [
+      'available',
+      'away',
+      'busy',
+      'meal',
+      'training',
+      'idle',
+      'meeting',
+      'offline',
+      'on-queue',
+      'out-of-office',
+      'invalid-presence'
+    ].forEach((presence) => {
+      it(`should work as expected for "${presence}"`, async () => {
+        const html = `<gux-avatar-beta badge presence=${presence} name="John Doe"></gux-avatar-beta>`;
+        const page = await newSpecPage({ components: [GuxAvatar], html });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
   describe('#render different accents', () => {
     [
       'default',
@@ -91,5 +112,26 @@ describe('gux-avatar', () => {
         expect(page.root).toMatchSnapshot();
       });
     });
+    describe('#render notification badge', () => {
+      it('should render notification badge', async () => {
+        const html = `<gux-avatar-beta badge notifications name="John Doe"></gux-avatar-beta>`;
+        const page = await newSpecPage({ components: [GuxAvatar], html });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    describe('#render presence ring', () => {
+      it('should render presence ring', async () => {
+        const html = `<gux-avatar-beta ring name="John Doe" presen></gux-avatar-beta>`;
+        const page = await newSpecPage({ components: [GuxAvatar], html });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    describe('#render label', () => {
+      it('should render label', async () => {
+        const html = `<gux-avatar-beta label="All Hands" name="John Doe" presence="busy" ring></gux-avatar-beta>`;
+        const page = await newSpecPage({ components: [GuxAvatar], html });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
   });
 });

package/dist/collection/components/beta/gux-date/gux-date.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
 import * as sparkIntl from "../../../genesys-spark-utils/intl";
+// Remove with this ticket https://inindca.atlassian.net/browse/COMUI-2598
 import { readRegionalDatesCookie } from "../../../i18n/check-regional-dates-cookie";
 import { getDesiredLocale } from "../../../i18n/index";
 import { getValidTimezone } from "../../../utils/date/get-valid-timezone";

package/dist/collection/components/beta/gux-date-time/gux-date-time.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
 import * as sparkIntl from "../../../genesys-spark-utils/intl";
+// Remove with this ticket https://inindca.atlassian.net/browse/COMUI-2598
 import { readRegionalDatesCookie } from "../../../i18n/check-regional-dates-cookie";
 import { getDesiredLocale } from "../../../i18n/index";
 import { getValidTimezone } from "../../../utils/date/get-valid-timezone";

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -1,5 +1,8 @@
 import { h } from "@stencil/core";
 import { buildI18nForComponent, getDesiredLocale } from "../../../../i18n";
+import * as sparkIntl from "../../../../genesys-spark-utils/intl";
+// Remove with this ticket https://inindca.atlassian.net/browse/COMUI-2598
+import { readRegionalDatesCookie } from "../../../../i18n/check-regional-dates-cookie";
 import simulateNativeEvent from "../../../../utils/dom/simulate-native-event";
 import { afterNextRender } from "../../../../utils/dom/after-next-render";
 import { getISOYearMonth, getCurrentISOYearMonth, getYearMonthObject } from "../../../../utils/date/year-month-values";
@@ -33,7 +36,12 @@ export class GuxMonthCalendar {
   }
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
-    this.locale = getDesiredLocale(this.root);
+    if (readRegionalDatesCookie()) {
+      this.locale = sparkIntl.determineDisplayLocale(this.root);
+    }
+    else {
+      this.locale = getDesiredLocale(this.root);
+    }
     if (this.value) {
       this.year = getYearMonthObject(this.value).year;
     }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -13,6 +13,8 @@ import { h } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
 import { buildI18nForComponent, getDesiredLocale } from "../../../i18n";
+import * as sparkIntl from "../../../genesys-spark-utils/intl";
+import { readRegionalDatesCookie } from "../../../i18n/check-regional-dates-cookie";
 import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
 import { afterNextRender } from "../../../utils/dom/after-next-render";
 import { getCurrentISOYearMonth, getISOYearMonth, getYearMonthObject } from "../../../utils/date/year-month-values";
@@ -57,7 +59,12 @@ export class GuxMonthPicker {
   async componentWillLoad() {
     trackComponent(this.root);
     this.i18n = await buildI18nForComponent(this.root, translationResources);
-    this.locale = getDesiredLocale(this.root);
+    if (readRegionalDatesCookie()) {
+      this.locale = sparkIntl.determineDisplayLocale(this.root);
+    }
+    else {
+      this.locale = getDesiredLocale(this.root);
+    }
   }
   isOutOfBounds(value) {
     return this.isBeforeMin(value) || this.isAfterMax(value);

package/dist/collection/components/beta/gux-time/gux-time.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { DateTimeFormatter } from "../../../i18n/DateTimeFormatter";
 import * as sparkIntl from "../../../genesys-spark-utils/intl";
+// Remove with this ticket https://inindca.atlassian.net/browse/COMUI-2598
 import { readRegionalDatesCookie } from "../../../i18n/check-regional-dates-cookie";
 import { getDesiredLocale } from "../../../i18n/index";
 import { getValidTimezone } from "../../../utils/date/get-valid-timezone";

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

@@ -1,4 +1,7 @@
 import { capitalizeFirstLetter } from "../../../utils/string/capitalize-first-letter";
+import * as sparkIntl from "../../../genesys-spark-utils/intl";
+// Remove with this ticket https://inindca.atlassian.net/browse/COMUI-2598
+import { readRegionalDatesCookie } from "../../../i18n/check-regional-dates-cookie";
 export function firstDateInMonth(month, year, startDayOfWeek) {
   const startDate = new Date(year, month, 1, 1, 0, 0, 0);
   const firstDayOfMonth = startDate.getDay();
@@ -27,5 +30,15 @@ export function getOffsetMonthDate(baseDate, monthDelta) {
   return date;
 }
 export function getDateMonthAndYearString(date, locale) {
-  return capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
+  if (readRegionalDatesCookie()) {
+    return capitalizeFirstLetter(sparkIntl
+      .dateTimeFormat(locale, {
+      year: 'numeric',
+      month: 'long'
+    })
+      .format(date));
+  }
+  else {
+    return capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
+  }
 }

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

@@ -16,6 +16,9 @@ import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from "../../
 import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { buildI18nForComponent } from "../../../i18n";
+import * as sparkIntl from "../../../genesys-spark-utils/intl";
+// Remove with this ticket https://inindca.atlassian.net/browse/COMUI-2598
+import { readRegionalDatesCookie } from "../../../i18n/check-regional-dates-cookie";
 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 {
@@ -36,7 +39,7 @@ export class GuxDatepicker {
     this.minDate = '';
     this.maxDate = '';
     this.mode = "single" /* CalendarModes.Single */;
-    this.format = 'mm/dd/yyyy';
+    this.format = undefined;
     this.disabled = false;
     this.labelPosition = 'beside';
     this.formattedValue = '';
@@ -411,6 +414,14 @@ export class GuxDatepicker {
   async componentWillLoad() {
     trackComponent(this.root, { variant: this.mode });
     this.i18n = await buildI18nForComponent(this.root, translationResources);
+    if (readRegionalDatesCookie()) {
+      this.format =
+        this.format ||
+          sparkIntl.getFormat(sparkIntl.determineDisplayLocale(this.root));
+    }
+    else {
+      this.format = this.format || 'mm/dd/yyyy';
+    }
     this.watchMinDate(this.minDate);
     this.watchMaxDate(this.maxDate);
     this.watchFormat(this.format);
@@ -650,7 +661,7 @@ export class GuxDatepicker {
       },
       "format": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -663,8 +674,7 @@ export class GuxDatepicker {
           "text": "The datepicker date format (default to mm/dd/yyyy, or specified)"
         },
         "attribute": "format",
-        "reflect": false,
-        "defaultValue": "'mm/dd/yyyy'"
+        "reflect": false
       },
       "disabled": {
         "type": "boolean",