genesys-spark-components 3.28.0 → 3.29.0

package/dist/genesys-webcomponents/{p-b5876605.entry.js → p-ffe85168.entry.js}

@@ -1 +1 @@
-import{r as t,h as e,g as i}from"./p-74b510cb.js";import{t as a}from"./p-2117da6e.js";import{l as s}from"./p-3184268e.js";import{V as r}from"./p-5cacdfc9.js";const n=class{constructor(e){t(this,e),this.baseChartSpec={$schema:"https://vega.github.io/schema/vega-lite/v5.json",config:{legend:{symbolType:"circle"}},encoding:{theta:{field:"value",type:"quantitative",stack:!0},color:{field:"category",type:"nominal",scale:{range:r},legend:null}},layer:[{mark:{type:"arc",outerRadius:80}},{mark:{type:"text",radius:90},encoding:{text:{field:"value",type:"quantitative"}}}],view:{stroke:null}},this.legendPosition="right",this.showTooltip=!0}parseData(){this.outerRadius||this.innerRadius||s("gux-chart-donut","[gux-chart-donut] requires at least one of outer-radius or inner-radius");let t={};this.chartData&&(t={data:this.chartData}),this.legendPosition&&(this.baseChartSpec.config.legend.orient=this.legendPosition),this.includeLegend?(this.baseChartSpec.encoding.color.legend={},(this.legendX||this.legendY)&&(this.baseChartSpec.config.legend.orient="none",this.legendX&&(this.baseChartSpec.encoding.color.legend.legendX=this.legendX),this.legendY&&(this.baseChartSpec.encoding.color.legend.legendY=this.legendY)),this.legendFontSize&&(this.baseChartSpec.encoding.color.legend.labelFontSize=this.legendFontSize),this.legendSymbolSize&&(this.baseChartSpec.encoding.color.legend.symbolSize=this.legendSymbolSize)):this.baseChartSpec.encoding.color.legend=null;const e=this.colorFieldName||"category";e&&(this.baseChartSpec.encoding.color.field=e);this.baseChartSpec.encoding.color.title=this.legendTitle||"";let i=this.outerRadius,a=this.innerRadius;i||(i=a+32),a||(a=i-32);let r=1;this.gauge?(this.baseChartSpec.layer=[{data:{values:[{progress:"default",value:100}]},mark:{type:"arc",innerRadius:a},encoding:{theta:{field:"value",type:"quantitative"},color:{value:"#E4E9F0"},tooltip:null}},{mark:{type:"arc",outerRadius:i,innerRadius:a,padAngle:.01}},{mark:{type:"arc",innerRadius:a,padAngle:.01}}],r=2):this.baseChartSpec.layer=[{mark:{type:"arc",outerRadius:i,innerRadius:a}},{mark:{type:"arc",innerRadius:a,stroke:"#fff"}}];const n=this.centerText;n&&this.baseChartSpec.layer.push({data:{values:[{centerText:n,value:0}]},mark:{align:"center",type:"text",baseline:"middle"},encoding:{color:{value:"#4C5054"},text:{field:"centerText"},size:{value:{expr:"height * 0.09"}},tooltip:null}});const h=this.centerSubText;h&&this.baseChartSpec.layer.push({data:{values:[{centerSubText:h,value:0}]},mark:{align:"center",type:"text",baseline:"middle",y:{expr:"height/2 + 20"}},encoding:{color:{value:"#6A6D70"},text:{field:"centerSubText"},size:{value:{expr:"height * 0.06"}},tooltip:null}});const o=this.labelRadius,l=this.labelField||"value";o&&this.baseChartSpec.layer.push({mark:{type:"text",radius:o},encoding:{text:{field:l,type:"quantitative"}}}),this.showTooltip&&(this.tooltipOptions?(this.baseChartSpec.layer[r].mark.tooltip={content:"data"},this.tooltipSpec={actions:!1,tooltip:this.tooltipOptions}):this.baseChartSpec.encoding.tooltip={field:l,aggregate:"count",type:"quantitative"});const u=Object.assign(this.baseChartSpec,t);this.visualizationSpec=u}componentWillLoad(){a(this.root),this.parseData()}render(){return e("gux-visualization-beta",{visualizationSpec:this.visualizationSpec,embedOptions:this.tooltipSpec})}get root(){return i(this)}static get watchers(){return{chartData:["parseData"]}}};n.style="gux-visualization-beta{height:fit-content;color:#2e394c}";export{n as gux_chart_donut_beta}
+import{r as t,h as e,g as i}from"./p-74b510cb.js";import{t as a}from"./p-967a5d2e.js";import{l as s}from"./p-3184268e.js";import{V as r}from"./p-5cacdfc9.js";const n=class{constructor(e){t(this,e),this.baseChartSpec={$schema:"https://vega.github.io/schema/vega-lite/v5.json",config:{legend:{symbolType:"circle"}},encoding:{theta:{field:"value",type:"quantitative",stack:!0},color:{field:"category",type:"nominal",scale:{range:r},legend:null}},layer:[{mark:{type:"arc",outerRadius:80}},{mark:{type:"text",radius:90},encoding:{text:{field:"value",type:"quantitative"}}}],view:{stroke:null}},this.legendPosition="right",this.showTooltip=!0}parseData(){this.outerRadius||this.innerRadius||s("gux-chart-donut","[gux-chart-donut] requires at least one of outer-radius or inner-radius");let t={};this.chartData&&(t={data:this.chartData}),this.legendPosition&&(this.baseChartSpec.config.legend.orient=this.legendPosition),this.includeLegend?(this.baseChartSpec.encoding.color.legend={},(this.legendX||this.legendY)&&(this.baseChartSpec.config.legend.orient="none",this.legendX&&(this.baseChartSpec.encoding.color.legend.legendX=this.legendX),this.legendY&&(this.baseChartSpec.encoding.color.legend.legendY=this.legendY)),this.legendFontSize&&(this.baseChartSpec.encoding.color.legend.labelFontSize=this.legendFontSize),this.legendSymbolSize&&(this.baseChartSpec.encoding.color.legend.symbolSize=this.legendSymbolSize)):this.baseChartSpec.encoding.color.legend=null;const e=this.colorFieldName||"category";e&&(this.baseChartSpec.encoding.color.field=e);this.baseChartSpec.encoding.color.title=this.legendTitle||"";let i=this.outerRadius,a=this.innerRadius;i||(i=a+32),a||(a=i-32);let r=1;this.gauge?(this.baseChartSpec.layer=[{data:{values:[{progress:"default",value:100}]},mark:{type:"arc",innerRadius:a},encoding:{theta:{field:"value",type:"quantitative"},color:{value:"#E4E9F0"},tooltip:null}},{mark:{type:"arc",outerRadius:i,innerRadius:a,padAngle:.01}},{mark:{type:"arc",innerRadius:a,padAngle:.01}}],r=2):this.baseChartSpec.layer=[{mark:{type:"arc",outerRadius:i,innerRadius:a}},{mark:{type:"arc",innerRadius:a,stroke:"#fff"}}];const n=this.centerText;n&&this.baseChartSpec.layer.push({data:{values:[{centerText:n,value:0}]},mark:{align:"center",type:"text",baseline:"middle"},encoding:{color:{value:"#4C5054"},text:{field:"centerText"},size:{value:{expr:"height * 0.09"}},tooltip:null}});const h=this.centerSubText;h&&this.baseChartSpec.layer.push({data:{values:[{centerSubText:h,value:0}]},mark:{align:"center",type:"text",baseline:"middle",y:{expr:"height/2 + 20"}},encoding:{color:{value:"#6A6D70"},text:{field:"centerSubText"},size:{value:{expr:"height * 0.06"}},tooltip:null}});const o=this.labelRadius,l=this.labelField||"value";o&&this.baseChartSpec.layer.push({mark:{type:"text",radius:o},encoding:{text:{field:l,type:"quantitative"}}}),this.showTooltip&&(this.tooltipOptions?(this.baseChartSpec.layer[r].mark.tooltip={content:"data"},this.tooltipSpec={actions:!1,tooltip:this.tooltipOptions}):this.baseChartSpec.encoding.tooltip={field:l,aggregate:"count",type:"quantitative"});const u=Object.assign(this.baseChartSpec,t);this.visualizationSpec=u}componentWillLoad(){a(this.root),this.parseData()}render(){return e("gux-visualization-beta",{visualizationSpec:this.visualizationSpec,embedOptions:this.tooltipSpec})}get root(){return i(this)}static get watchers(){return{chartData:["parseData"]}}};n.style="gux-visualization-beta{height:fit-content;color:#2e394c}";export{n as gux_chart_donut_beta}

package/dist/stencil-wrapper.js

@@ -6,7 +6,7 @@
  */
 import { defineCustomElements } from '../dist/loader';
 // Value templated out during build process (see scripts/wrap-stencil.js)
-const CDN_URL = 'https://app.mypurecloud.com/spark-components/build-assets/3.27.2-175/genesys-webcomponents/';
+const CDN_URL = 'https://app.mypurecloud.com/spark-components/build-assets/3.28.1-179/genesys-webcomponents/';
 export function registerElements() {
     if (CDN_URL) {
         defineCustomElements(window, { resourcesUrl: CDN_URL });

package/dist/types/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.d.ts

@@ -0,0 +1,45 @@
+import { JSX } from '../../../../stencil-public-runtime';
+import { GuxISOYearMonth } from '../../../../utils/date/year-month-values';
+export declare class GuxMonthCalendar {
+  private i18n;
+  private previousYearElement;
+  private nextYearElement;
+  private monthListElement;
+  root: HTMLElement;
+  /**
+   * The current selected year and month in ISO8601 format (yyyy-mm)
+   */
+  value: GuxISOYearMonth;
+  /**
+   * The min year and month selectable in ISO8601 format (yyyy-mm)
+   */
+  min: GuxISOYearMonth;
+  /**
+   * The max year and month selectable in ISO8601 format (yyyy-mm)
+   */
+  max: GuxISOYearMonth;
+  year: string;
+  locale: string;
+  onValueUpdate(newValue: GuxISOYearMonth): void;
+  /**
+   * Focus a month
+   */
+  guxFocus(iSOYearMonth: GuxISOYearMonth): Promise<void>;
+  componentWillLoad(): Promise<void>;
+  private updateValue;
+  private isOutOfBounds;
+  private onMonthClick;
+  private getMonthAriaLabel;
+  private getYearLabel;
+  private isSelectedMonth;
+  private isAriaSelectedMonth;
+  private changeYear;
+  private isPreviousYearLessThanMinYear;
+  private isNextYearGreaterThanMaxYear;
+  private getMonthShortName;
+  private doFocusTrap;
+  private renderHeader;
+  private renderMonths;
+  private renderTrapFocusEl;
+  render(): JSX.Element;
+}

package/dist/types/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from '../../../../../../stencil-public-runtime';
+import { GuxISOYearMonth } from '../../../../../../utils/date/year-month-values';
+export declare class GuxMonthListItem {
+  root: HTMLElement;
+  value: GuxISOYearMonth;
+  disabled: boolean;
+  selected: boolean;
+  onMouseup(): void;
+  onMouseover(): void;
+  private focusParentList;
+  render(): JSX.Element;
+}

package/dist/types/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from '../../../../../stencil-public-runtime';
+export declare class GuxMonthList {
+  root: HTMLElement;
+  onKeyDown(event: KeyboardEvent): void;
+  guxFocusFirstItem(): Promise<void>;
+  private renderFocusTarget;
+  render(): JSX.Element;
+}

package/dist/types/components/beta/gux-month-picker/gux-month-picker.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from '../../../stencil-public-runtime';
+import { GuxISOYearMonth } from '../../../utils/date/year-month-values';
+export declare class GuxMonthPicker {
+  private i18n;
+  private calendarToggleButtonElement;
+  private monthCalendarElement;
+  private monthSpinnerElement;
+  private yearSpinnerElement;
+  private root;
+  /**
+   * The current selected year and month in ISO8601 format (yyyy-mm)
+   */
+  value: GuxISOYearMonth;
+  /**
+   * The min year and month selectable in ISO8601 format (yyyy-mm)
+   */
+  min: GuxISOYearMonth;
+  /**
+   * The max year and month selectable in ISO8601 format (yyyy-mm)
+   */
+  max: GuxISOYearMonth;
+  disabled: boolean;
+  expanded: boolean;
+  locale: string;
+  onKeyDown(event: KeyboardEvent): void;
+  onValueUpdate(newValue: GuxISOYearMonth): void;
+  onClickOutside(): void;
+  componentWillLoad(): Promise<void>;
+  private isOutOfBounds;
+  private isBeforeMin;
+  private isAfterMax;
+  private toggleCalendar;
+  private onMonthCalendarInput;
+  private incrementMonth;
+  private incrementYear;
+  private onSpinnerKeyDown;
+  private onSpinnerKeyUp;
+  private onSpinnerClick;
+  private getSpinnerLabel;
+  private getSpinnerValueNow;
+  private getSpinnerValueText;
+  private renderMonthSpinnerButton;
+  private renderYearSpinnerButton;
+  private renderSpinnerButtons;
+  private renderCalendarToggleButton;
+  renderTarget(): JSX.Element;
+  private renderPopup;
+  render(): JSX.Element;
+}

package/dist/types/components/stable/gux-datepicker/gux-datepicker.d.ts

@@ -9,9 +9,12 @@ export declare class GuxDatepicker {
   toInputElement: HTMLInputElement;
   calendarElement: HTMLGuxCalendarElement;
   intervalRange: GuxDatepickerIntervalRange;
-  focusingRange: boolean;
   focusedField: HTMLInputElement;
-  isSelectingRange: boolean;
+  /**
+   * Indicates if the user is selecting the range with the mouse.
+   * This prevents other events from processing on the input range.
+   */
+  isSelectingRangeWithMouse: boolean;
   lastIntervalRange: GuxDatepickerIntervalRange;
   lastYear: number;
   startInputId: string;
@@ -24,7 +27,7 @@ export declare class GuxDatepicker {
    */
   value: string;
   /**
-   * The datepicker label (can be a single label, or two seperated by a comma if it's a range datepicker)
+   * The datepicker label (can be a single label, or two separated by a comma if it's a range datepicker)
    */
   label: string;
   /**
@@ -54,13 +57,16 @@ export declare class GuxDatepicker {
   /**
    * The datepicker current value
    */
-  formatedValue: string;
+  formattedValue: string;
   minDateDate: Date;
   maxDateDate: Date;
   /**
    * The datepicker current value
    */
-  toFormatedValue: string;
+  toFormattedValue: string;
+  /**
+   * Uses styling to control visibility of the calendar element
+   */
   active: boolean;
   watchValue(): void;
   watchMinDate(newDate: string): void;
@@ -72,12 +78,15 @@ export declare class GuxDatepicker {
    */
   input: EventEmitter<string>;
   onKeyDown(event: KeyboardEvent): void;
-  onFocusIn(event: FocusEvent): void;
-  onFocusOut(event: FocusEvent): void;
   onMouseDown(event: MouseEvent): void;
-  onMouseUp(event: MouseEvent): void;
   onClickOutside(): void;
-  isFocusedFieldEvent(event: Event): boolean;
+  /*********  Event Handlers  **********/
+  onInputFocusIn(event: FocusEvent): void;
+  onInputFocusOut(): void;
+  onInputMouseUp(event: MouseEvent): void;
+  /********  Other Methods  **********/
+  isInputFieldEvent(event: Event): boolean;
+  get initialIntervalRange(): GuxDatepickerIntervalRange;
   getInputFieldFromEvent(event: Event): HTMLInputElement;
   updateIntervalValue(event: KeyboardEvent): void;
   updateSelection(field: HTMLInputElement, text: string): void;
@@ -98,6 +107,7 @@ export declare class GuxDatepicker {
     regexp: RegExp;
   };
   updateDate(): void;
+  /** Selects a range of the input text based on the intervalRange property. */
   setCursorRange(): void;
   toggleCalendar(): void;
   setIntervalRange(intervalRange: GuxDatepickerIntervalRange): void;

package/dist/types/components/stable/gux-list/gux-list.service.d.ts

@@ -1,4 +1,5 @@
-export declare function first(root: HTMLElement): void;
-export declare function last(root: HTMLElement): void;
-export declare function next(root: HTMLElement): void;
-export declare function previous(root: HTMLElement): void;
+export declare function focusMove(root: HTMLElement, validFocusableItems: string[], delta: number): void;
+export declare function first(root: HTMLElement, validFocusableItems: string[]): void;
+export declare function last(root: HTMLElement, validFocusableItems: string[]): void;
+export declare function next(root: HTMLElement, validFocusableItems: string[]): void;
+export declare function previous(root: HTMLElement, validFocusableItems: string[]): void;

package/dist/types/components.d.ts

@@ -23,6 +23,7 @@ import { GuxFormFieldLabelPosition as GuxFormFieldLabelPosition1 } from "./compo
 import { GuxFormFieldTextAreaResize } from "./components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.types";
 import { GuxTextHighlightStrategy } from "./components/stable/gux-text-highlight/gux-text-highlight.types";
 import { GuxModalSize } from "./components/stable/gux-modal/gux-modal.types";
+import { GuxISOYearMonth } from "./utils/date/year-month-values";
 import { GuxNotificationToastAccent } from "./components/stable/gux-notification-toast/gux-notification-toast.types";
 import { GuxItemsPerPage, GuxPaginationLayout, GuxPaginationState } from "./components/stable/gux-pagination/gux-pagination.types";
 import { GuxItemsPerPage as GuxItemsPerPage1, GuxPaginationLayoutBeta } from "./components/beta/gux-pagination-beta/gux-pagination-beta.types";
@@ -567,7 +568,7 @@ export namespace Components {
          */
         "format": string;
         /**
-          * The datepicker label (can be a single label, or two seperated by a comma if it's a range datepicker)
+          * The datepicker label (can be a single label, or two separated by a comma if it's a range datepicker)
          */
         "label": string;
         /**
@@ -859,6 +860,47 @@ export namespace Components {
         "size": GuxModalSize;
         "trapFocus": boolean;
     }
+    interface GuxMonthCalendar {
+        /**
+          * Focus a month
+         */
+        "guxFocus": (iSOYearMonth: GuxISOYearMonth) => Promise<void>;
+        /**
+          * The max year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "max": GuxISOYearMonth;
+        /**
+          * The min year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "min": GuxISOYearMonth;
+        /**
+          * The current selected year and month in ISO8601 format (yyyy-mm)
+         */
+        "value": GuxISOYearMonth;
+    }
+    interface GuxMonthList {
+        "guxFocusFirstItem": () => Promise<void>;
+    }
+    interface GuxMonthListItem {
+        "disabled": boolean;
+        "selected": boolean;
+        "value": GuxISOYearMonth;
+    }
+    interface GuxMonthPickerBeta {
+        "disabled": boolean;
+        /**
+          * The max year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "max": GuxISOYearMonth;
+        /**
+          * The min year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "min": GuxISOYearMonth;
+        /**
+          * The current selected year and month in ISO8601 format (yyyy-mm)
+         */
+        "value": GuxISOYearMonth;
+    }
     interface GuxNotificationToast {
         /**
           * The component accent.
@@ -2028,6 +2070,30 @@ declare global {
         prototype: HTMLGuxModalElement;
         new (): HTMLGuxModalElement;
     };
+    interface HTMLGuxMonthCalendarElement extends Components.GuxMonthCalendar, HTMLStencilElement {
+    }
+    var HTMLGuxMonthCalendarElement: {
+        prototype: HTMLGuxMonthCalendarElement;
+        new (): HTMLGuxMonthCalendarElement;
+    };
+    interface HTMLGuxMonthListElement extends Components.GuxMonthList, HTMLStencilElement {
+    }
+    var HTMLGuxMonthListElement: {
+        prototype: HTMLGuxMonthListElement;
+        new (): HTMLGuxMonthListElement;
+    };
+    interface HTMLGuxMonthListItemElement extends Components.GuxMonthListItem, HTMLStencilElement {
+    }
+    var HTMLGuxMonthListItemElement: {
+        prototype: HTMLGuxMonthListItemElement;
+        new (): HTMLGuxMonthListItemElement;
+    };
+    interface HTMLGuxMonthPickerBetaElement extends Components.GuxMonthPickerBeta, HTMLStencilElement {
+    }
+    var HTMLGuxMonthPickerBetaElement: {
+        prototype: HTMLGuxMonthPickerBetaElement;
+        new (): HTMLGuxMonthPickerBetaElement;
+    };
     interface HTMLGuxNotificationToastElement extends Components.GuxNotificationToast, HTMLStencilElement {
     }
     var HTMLGuxNotificationToastElement: {
@@ -2444,6 +2510,10 @@ declare global {
         "gux-menu": HTMLGuxMenuElement;
         "gux-menu-option": HTMLGuxMenuOptionElement;
         "gux-modal": HTMLGuxModalElement;
+        "gux-month-calendar": HTMLGuxMonthCalendarElement;
+        "gux-month-list": HTMLGuxMonthListElement;
+        "gux-month-list-item": HTMLGuxMonthListItemElement;
+        "gux-month-picker-beta": HTMLGuxMonthPickerBetaElement;
         "gux-notification-toast": HTMLGuxNotificationToastElement;
         "gux-option": HTMLGuxOptionElement;
         "gux-option-legacy": HTMLGuxOptionLegacyElement;
@@ -3037,7 +3107,7 @@ declare namespace LocalJSX {
          */
         "format"?: string;
         /**
-          * The datepicker label (can be a single label, or two seperated by a comma if it's a range datepicker)
+          * The datepicker label (can be a single label, or two separated by a comma if it's a range datepicker)
          */
         "label"?: string;
         /**
@@ -3334,6 +3404,42 @@ declare namespace LocalJSX {
         "size"?: GuxModalSize;
         "trapFocus"?: boolean;
     }
+    interface GuxMonthCalendar {
+        /**
+          * The max year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "max"?: GuxISOYearMonth;
+        /**
+          * The min year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "min"?: GuxISOYearMonth;
+        /**
+          * The current selected year and month in ISO8601 format (yyyy-mm)
+         */
+        "value"?: GuxISOYearMonth;
+    }
+    interface GuxMonthList {
+    }
+    interface GuxMonthListItem {
+        "disabled"?: boolean;
+        "selected"?: boolean;
+        "value"?: GuxISOYearMonth;
+    }
+    interface GuxMonthPickerBeta {
+        "disabled"?: boolean;
+        /**
+          * The max year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "max"?: GuxISOYearMonth;
+        /**
+          * The min year and month selectable in ISO8601 format (yyyy-mm)
+         */
+        "min"?: GuxISOYearMonth;
+        /**
+          * The current selected year and month in ISO8601 format (yyyy-mm)
+         */
+        "value"?: GuxISOYearMonth;
+    }
     interface GuxNotificationToast {
         /**
           * The component accent.
@@ -3951,6 +4057,10 @@ declare namespace LocalJSX {
         "gux-menu": GuxMenu;
         "gux-menu-option": GuxMenuOption;
         "gux-modal": GuxModal;
+        "gux-month-calendar": GuxMonthCalendar;
+        "gux-month-list": GuxMonthList;
+        "gux-month-list-item": GuxMonthListItem;
+        "gux-month-picker-beta": GuxMonthPickerBeta;
         "gux-notification-toast": GuxNotificationToast;
         "gux-option": GuxOption;
         "gux-option-legacy": GuxOptionLegacy;
@@ -4092,6 +4202,10 @@ declare module "@stencil/core" {
             "gux-menu": LocalJSX.GuxMenu & JSXBase.HTMLAttributes<HTMLGuxMenuElement>;
             "gux-menu-option": LocalJSX.GuxMenuOption & JSXBase.HTMLAttributes<HTMLGuxMenuOptionElement>;
             "gux-modal": LocalJSX.GuxModal & JSXBase.HTMLAttributes<HTMLGuxModalElement>;
+            "gux-month-calendar": LocalJSX.GuxMonthCalendar & JSXBase.HTMLAttributes<HTMLGuxMonthCalendarElement>;
+            "gux-month-list": LocalJSX.GuxMonthList & JSXBase.HTMLAttributes<HTMLGuxMonthListElement>;
+            "gux-month-list-item": LocalJSX.GuxMonthListItem & JSXBase.HTMLAttributes<HTMLGuxMonthListItemElement>;
+            "gux-month-picker-beta": LocalJSX.GuxMonthPickerBeta & JSXBase.HTMLAttributes<HTMLGuxMonthPickerBetaElement>;
             "gux-notification-toast": LocalJSX.GuxNotificationToast & JSXBase.HTMLAttributes<HTMLGuxNotificationToastElement>;
             "gux-option": LocalJSX.GuxOption & JSXBase.HTMLAttributes<HTMLGuxOptionElement>;
             "gux-option-legacy": LocalJSX.GuxOptionLegacy & JSXBase.HTMLAttributes<HTMLGuxOptionLegacyElement>;

package/dist/types/utils/date/year-month-values.d.ts

@@ -0,0 +1,8 @@
+export declare type GuxISOYearMonth = `${string}-${string}`;
+export declare type GuxYearMonthObject = {
+  year: string;
+  month: string;
+};
+export declare function getISOYearMonth(year: string | number, month: string | number): GuxISOYearMonth;
+export declare function getYearMonthObject(yearMonthString: GuxISOYearMonth): GuxYearMonthObject;
+export declare function getCurrentISOYearMonth(): GuxISOYearMonth;

package/dist/types/utils/dom/after-render.d.ts

@@ -0,0 +1 @@
+export declare function afterRender(callback: FrameRequestCallback): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark-components",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "description": "Common webcomponents",
   "license": "MIT",
   "main": "dist/stencil-wrapper.js",

package/dist/genesys-webcomponents/p-559635b7.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as i,g as s}from"./p-74b510cb.js";import{t as a}from"./p-2117da6e.js";import{r as n}from"./p-cbcbd1bb.js";import{b as r}from"./p-1c9dfc78.js";import{f as c,a as d,b as h,c as u}from"./p-4f26144b.js";import{O as o}from"./p-acd2fa20.js";import{c as l}from"./p-ec26fc38.js";import"./p-8a133b9b.js";const p={start:"Start",end:"End",date:"Date",toggleCalendar:"Toggle calendar view"};function g(t,e){let i=new Date(e.getTime());return i.setDate(i.getDate()+t),t<0?i.getDate()>e.getDate()&&(i=new Date(e.getFullYear(),e.getMonth()+1,0,0,0,0)):i.getDate()<e.getDate()&&i.setMonth(i.getMonth()-1),i}function x(t,e){const i=new Date(e.valueOf()),s=function(t){let e=t;for(;e<0;)e+=12;return e%=12,e}(i.getMonth()+t);return i.setMonth(s),i.setFullYear(e.getFullYear()),i.getMonth()!==s?x(t,g(-1,e)):i}function f(t,e){const i=t[e];return i&&"/"!==i?i:t[e-1]}function k(t){return t.match(/\W/)[0]}function b(t){const e=k(t);return t.split(e).reduce(((t,e)=>t.concat(e[0])),[])}function m(t,e){return{selectionStart:t.indexOf(e),selectionEnd:t.lastIndexOf(e)+1}}const y=class{constructor(i){t(this,i),this.input=e(this,"input",7),this.yearFormat="yyyy",this.focusingRange=!1,this.isSelectingRange=!1,this.lastYear=(new Date).getFullYear(),this.startInputId=n("gux-datepicker"),this.endInputId=n("gux-datepicker"),this.label="",this.numberOfMonths=1,this.minDate="",this.maxDate="",this.mode="single",this.format="mm/dd/yyyy",this.disabled=!1,this.formatedValue="",this.toFormatedValue="",this.active=!1}watchValue(){this.updateDate()}watchMinDate(t){this.minDateDate=t?c(t):null}watchMaxDate(t){this.maxDateDate=t?c(t):null}watchFormat(t){t.includes("yyyy")||(this.yearFormat="yy"),this.intervalOrder=b(t),this.lastIntervalRange=m(this.format,f(this.format,0))}watchActiveCalendar(t){if(!0===t){const t=c(this.value.split("/")[0]);this.calendarElement.resetCalendarView(t)}}onKeyDown(t){if(this.isFocusedFieldEvent(t))switch(this.focusedField=this.getInputFieldFromEvent(t),t.key){case"Enter":case"Escape":this.focusedField.blur(),this.active=!1;break;case"Tab":this.isSelectingRange=!0,this.setRange();break;case"ArrowDown":t.preventDefault(),this.increment(-1),this.setCursorRange();break;case"ArrowUp":t.preventDefault(),this.increment(1),this.setCursorRange();break;case"ArrowLeft":{t.preventDefault();const e=function(t,e){const i=b(t),s=f(t,e.selectionStart),a=i.indexOf(s);return m(t,i[(a+i.length-1)%i.length])}(this.format,this.intervalRange);this.setIntervalRange(e),this.setCursorRange();break}case"ArrowRight":{t.preventDefault();const e=function(t,e){const i=b(t),s=f(t,e.selectionStart),a=i.indexOf(s);return m(t,i[(a+1)%i.length])}(this.format,this.intervalRange);this.setIntervalRange(e),this.setCursorRange();break}default:t.preventDefault(),this.setIntervalRange({selectionStart:this.focusedField.selectionStart,selectionEnd:this.focusedField.selectionEnd}),this.updateIntervalValue(t),this.setCursorRange()}else switch(t.key){case"Enter":case"Escape":case" ":{this.active=!1;const t=this.root.shadowRoot.querySelector(".gux-calendar-toggle-button");setTimeout((()=>{t.focus()}),100);break}case"Tab":this.active&&(this.active=!1)}}onFocusIn(t){this.isFocusedFieldEvent(t)&&(this.isSelectingRange||(this.focusedField=this.getInputFieldFromEvent(t),this.setRange()))}onFocusOut(t){t.composedPath().includes(this.root)||(this.lastIntervalRange=m(this.format,f(this.format,0)))}onMouseDown(t){this.isFocusedFieldEvent(t)&&(this.isSelectingRange=!0);const e=t.composedPath(),i=e.includes(this.datepickerElement);Array.from(this.root.shadowRoot.querySelectorAll(".gux-calendar-toggle-button")).every((t=>!e.includes(t)))&&(this.active=i)}onMouseUp(t){t.preventDefault(),this.isSelectingRange&&this.isFocusedFieldEvent(t)&&(this.focusedField=this.getInputFieldFromEvent(t),this.lastIntervalRange=m(this.format,f(this.format,this.focusedField.selectionStart)),this.setRange())}onClickOutside(){this.active=!1}isFocusedFieldEvent(t){const e=t.composedPath();return e.includes(this.inputElement)||e.includes(this.toInputElement)}getInputFieldFromEvent(t){return t.composedPath()[0]}updateIntervalValue(t){const e=parseInt(t.key,10);if(!isNaN(e)){const i=this.focusedField.value.slice(this.focusedField.selectionStart,this.focusedField.selectionEnd);"y"===f(this.format,this.focusedField.selectionStart)&&"yyyy"===this.yearFormat?this.typeYearValue(i,t.key):this.canSetDate(e)?(this.updateSelection(this.focusedField,`${i[1]}${t.key}`),this.setValue()):(this.updateSelection(this.focusedField,`0${t.key}`.replace("00","01")),this.setValue())}}updateSelection(t,e){t.value=t.value.substr(0,this.intervalRange.selectionStart)+e+t.value.substr(this.intervalRange.selectionEnd)}getCalendarLabels(){return function(t,e,i){const s=t.split(",").map((t=>t.trim()));return"range"===e?[s[0]||i[0],s[1]||i[1]]:"range"===e||s[0]?[s[0]]:[i[2]]}(this.label,this.mode,[this.i18n("start"),this.i18n("end"),this.i18n("date")])}stringToDate(t){const e=k(this.format),i=this.format.toLowerCase().split(e),s=t.split(e),a=parseInt(s[i.indexOf(this.yearFormat)],10),n=parseInt(s[i.indexOf("mm")],10)-1,r=parseInt(s[i.indexOf("dd")],10),c=new Date(a,n,r);return"yy"===this.yearFormat&&c.getFullYear()<1970&&this.lastYear>1970&&c.setFullYear(c.getFullYear()+100),c}onCalendarSelect(t){this.value=t.target.value,t.stopPropagation(),this.input.emit(this.value),this.updateDate(),this.inputElement.value=this.formatedValue,"range"===this.mode&&(this.toInputElement.value=this.toFormatedValue),document.activeElement===this.inputElement&&document.activeElement===this.toInputElement||(this.active=!1)}setValue(){if("range"===this.mode){const t=this.stringToDate(this.inputElement.value),e=this.stringToDate(this.toInputElement.value);this.value=d(t,e),this.updateDate(),this.calendarElement.setValue([t,e])}else{const t=this.stringToDate(this.inputElement.value);this.value=h(t),this.updateDate(),this.calendarElement.setValue(t)}this.input.emit(this.value)}setRange(){this.isSelectingRange=!1,this.setIntervalRange(this.lastIntervalRange),this.setCursorRange()}typeYearValue(t,e){" "!==t[0]?this.updateSelection(this.focusedField,`   ${e}`):(this.updateSelection(this.focusedField,`${t.substr(1)}${e}`),(t.substr(1)+e).includes(" ")||this.setValue())}canSetDate(t){const e=parseInt([this.focusedField.value[this.intervalRange.selectionEnd-1].toString(),t].join(""),10);if(e)switch(f(this.format,this.focusedField.selectionStart)){case"d":{const t=c(this.value);if(e<=new Date(t.getFullYear(),t.getMonth()+1,0).getDate())return!0;break}case"m":if(e<=12)return!0;break;case"y":return!0}return!1}getMapAndRegexFromField(t){const e={dd:`0${t.getDate()}`.slice(-2),mm:`0${t.getMonth()+1}`.slice(-2)};return"yyyy"===this.yearFormat?e.yyyy=t.getFullYear().toString():e.yy=t.getFullYear().toString().slice(-2),{map:e,regexp:new RegExp(Object.keys(e).join("|"),"gi")}}updateDate(){if("range"===this.mode){const[t,e]=u(this.value),{map:i,regexp:s}=this.getMapAndRegexFromField(t);this.formatedValue=this.format.replace(s,(t=>i[t]));const{map:a,regexp:n}=this.getMapAndRegexFromField(e);this.toFormatedValue=this.format.replace(n,(t=>a[t]))}else{const t=c(this.value),{map:e,regexp:i}=this.getMapAndRegexFromField(t);this.formatedValue=this.format.replace(i,(t=>e[t]))}}setCursorRange(){this.intervalRange&&this.focusedField.setSelectionRange(this.intervalRange.selectionStart,this.intervalRange.selectionEnd)}toggleCalendar(){this.active=!this.active,this.active&&setTimeout((()=>{this.calendarElement.focusPreviewDate()}),100)}setIntervalRange(t){this.intervalRange=t}getCombinedFocusedDateValue(){return"range"===this.mode?this.getRangeFocusedDateValue():this.getFocusedDateValue()}getFocusedDateValue(){return c(this.value)}getRangeFocusedDateValue(){const[t,e]=u(this.value);return this.focusedField===this.inputElement?t:e}increment(t){const e=f(this.format,this.focusedField.selectionStart),i=this.getCombinedFocusedDateValue();let s;switch(e){case"d":s=g(t,i);break;case"m":s=x(t,i);break;case"y":s=function(t,e){const i=new Date(e.valueOf());return i.setFullYear(e.getFullYear()+t),i}(t,i)}var a,n,r;a=s,n=this.minDateDate,((r=this.maxDateDate)&&r<a||n&&n>a)&&(s=i),this.lastYear=s.getFullYear(),this.setIntervalRange({selectionStart:this.focusedField.selectionStart,selectionEnd:this.focusedField.selectionEnd}),this.focusedField.value=function(t,e){const i=k(e);return e.split(i).map((e=>{switch(e[0]){case"d":return function(t){return`0${t.getDate().toString()}`.slice(-2)}(t);case"m":return function(t){return`0${(t.getMonth()+1).toString()}`.slice(-2)}(t);case"y":return function(t,e){return"yyyy"===e?t.getFullYear().toString():t.getFullYear().toString().slice(-2)}(t,e)}})).join(i)}(s,this.format),this.setValue()}async componentWillLoad(){if(a(this.root,{variant:this.mode}),this.i18n=await r(this.root,p),this.watchMinDate(this.minDate),this.watchMaxDate(this.maxDate),this.watchFormat(this.format),!this.value){const t=new Date;t.setHours(0,0,0,0),this.value="range"===this.mode?d(t,t):h(t),"range"===this.mode&&this.numberOfMonths<2&&(this.numberOfMonths=2)}}componentDidLoad(){this.updateDate(),this.popperInstance=l(this.datepickerElement,this.calendarElement,{modifiers:[{name:"offset",options:{offset:[0,-3]}}],placement:"bottom-start"})}componentDidUpdate(){this.popperInstance.forceUpdate()}disconnectedCallback(){this.popperInstance.destroy()}renderCalendarToggleButton(){return i("button",{class:"gux-calendar-toggle-button",type:"button",onClick:()=>this.toggleCalendar(),"aria-expanded":this.active.toString(),"aria-label":this.i18n("toggleCalendar"),disabled:this.disabled},i("gux-icon",{decorative:!0,"icon-name":"calendar"}))}renderCalendar(){return i("gux-calendar",{ref:t=>this.calendarElement=t,value:this.value,mode:this.mode,onInput:t=>this.onCalendarSelect(t),minDate:this.minDate,maxDate:this.maxDate,numberOfMonths:this.numberOfMonths})}renderStartDateField(){return i("div",{class:"gux-datepicker-field"},i("label",{htmlFor:this.startInputId,class:{"gux-datepicker-field-label":!0,"gux-sr-only":"single"===this.mode&&!this.label}},this.getCalendarLabels()[0]),i("div",{class:"gux-datepicker-field-input"},i("div",{class:"gux-datepicker-field-text-input"},i("input",{id:this.startInputId,type:"text",ref:t=>this.inputElement=t,value:this.formatedValue,disabled:this.disabled}),this.renderCalendarToggleButton()),this.renderCalendar()))}renderEndDateField(){return"single"===this.mode?null:i("div",{class:"gux-datepicker-field"},i("label",{htmlFor:this.endInputId,class:"gux-datepicker-field-label"},this.getCalendarLabels()[1]),i("div",{class:"gux-datepicker-field-input"},i("div",{class:"gux-datepicker-field-text-input"},i("input",{id:this.endInputId,type:"text",ref:t=>this.toInputElement=t,value:this.toFormatedValue,disabled:this.disabled}),this.renderCalendarToggleButton())))}render(){return i("div",{class:{"gux-datepicker":!0,"gux-active":this.active,"gux-disabled":this.disabled},ref:t=>this.datepickerElement=t},this.renderStartDateField(),this.renderEndDateField())}get root(){return s(this)}static get watchers(){return{value:["watchValue"],minDate:["watchMinDate"],maxDate:["watchMaxDate"],format:["watchFormat"],active:["watchActiveCalendar"]}}};(function(t,e,i,s){var a,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var c=t.length-1;c>=0;c--)(a=t[c])&&(r=(n<3?a(r):n>3?a(e,i,r):a(e,i))||r);n>3&&r&&Object.defineProperty(e,i,r)})([o({triggerEvents:"mousedown"})],y.prototype,"onClickOutside",null),y.style=":host{display:block}.gux-datepicker{display:inline-block}.gux-datepicker.gux-disabled{pointer-events:none;cursor:default}.gux-datepicker.gux-disabled .gux-datepicker-field .gux-datepicker-field-input{opacity:0.5}.gux-datepicker .gux-datepicker-field{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:center;justify-content:flex-start}.gux-datepicker .gux-datepicker-field~.gux-datepicker-field{margin-left:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-label{flex:0 1 auto;align-self:auto;order:0;margin-right:8px;font-size:12px;font-weight:bold;line-height:20px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input{position:relative;flex:0 1 auto;align-self:auto;order:0;margin:4px 0}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input{flex:1 1 auto;align-self:auto;order:0;width:100px;overflow:hidden;color:#2e394c;background-color:#f6f7f9;border:none;outline:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder{color:#596373;opacity:1}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-cancel-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-search-results-button,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{flex:0 1 auto;align-self:auto;order:0;padding:2px;color:#596373;background:transparent;border:none}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus,.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button gux-icon{width:16px;height:16px}.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar{z-index:var(--gux-zindex-popup, 1);display:none}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus,.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover{color:#2a60c8}.gux-datepicker.gux-active .gux-datepicker-field .gux-datepicker-field-input gux-calendar{display:block}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";export{y as gux_datepicker}

package/dist/genesys-webcomponents/p-99374ffa.entry.js

@@ -1 +0,0 @@
-import{r as t,h as n,H as r,g as s}from"./p-74b510cb.js";import{t as o}from"./p-2117da6e.js";const e=["gux-list-item"];function i(t){return function(t){const n=t.querySelector("slot");return n?n.assignedElements():Array.from(t.children)}(t).filter((t=>!!e.includes(t.tagName.toLowerCase())&&!t.disabled))}function c(t,n){a(t,(function(t){return i(t).findIndex((t=>t.matches(":focus-within")))}(t)+n)%i(t).length)}function a(t,n){var r;const s=i(t);for(;n<0;)n+=s.length;null===(r=s[n])||void 0===r||r.focus()}function u(t){a(t,0)}const l=class{constructor(n){t(this,n)}componentWillLoad(){o(this.root)}onKeyDown(t){switch(t.key){case"ArrowUp":t.preventDefault(),c(this.root,-1);break;case"Home":t.preventDefault(),u(this.root);break;case"ArrowDown":t.preventDefault(),c(this.root,1);break;case"End":t.preventDefault(),function(t){a(t,function(t){return i(t).length-1}(t))}(this.root)}}async guxFocusFirstItem(){u(this.root)}renderFocusTarget(){return n("span",{tabindex:"-1"})}render(){return n(r,{role:"list"},this.renderFocusTarget(),n("slot",null))}static get delegatesFocus(){return!0}get root(){return s(this)}};l.style=":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";export{l as gux_list}