genesys-spark-components 3.28.1 → 3.30.0

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-form-field/components/gux-form-field-number/gux-form-field-number.d.ts

@@ -4,6 +4,7 @@ import { GuxFormFieldLabelPosition } from '../../gux-form-field.types';
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
+ * @part input-section - Style input container
  */
 export declare class GuxFormFieldNumber {
   private getI18nValue;

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";
@@ -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;
@@ -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.1",
+  "version": "3.30.0",
   "description": "Common webcomponents",
   "license": "MIT",
   "main": "dist/stencil-wrapper.js",

package/dist/genesys-webcomponents/p-79929010.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-3d929811.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}

package/dist/genesys-webcomponents/p-82084612.entry.js

@@ -1 +0,0 @@
-import{r as t,f as e,h as i,g as o}from"./p-74b510cb.js";import{b as n}from"./p-1c9dfc78.js";import{c as r,o as s}from"./p-3f5341ea.js";import{O as a}from"./p-e3c80187.js";import{a as l}from"./p-e2bea786.js";import{p as u}from"./p-c10e41a9.js";import{t as p}from"./p-3d929811.js";import{s as c}from"./p-8fe7daff.js";import{s as x}from"./p-d176c2ae.js";import{G as h,a as d}from"./p-625f19b6.js";import{h as g,a as f,c as b,G as m,v as w,g as v}from"./p-8caf2514.js";import"./p-8a133b9b.js";import"./p-cbcbd1bb.js";import"./p-3184268e.js";const j={increment:"Increment",decrement:"Decrement"};const y=class{constructor(e){t(this,e),this.computedLabelPosition="above",this.hasContent=!1,this.hasError=!1}onMutation(){this.hasError=g(this.root)}async guxForceUpdate(){this.hasContent=f(this.input),this.hasError=g(this.root),e(this.root)}async componentWillLoad(){this.getI18nValue=await n(this.root,j),this.setInput(),this.setLabel(),this.hasError=g(this.root),p(this.root,{variant:this.variant})}disconnectedCallback(){this.disabledObserver.disconnect(),this.requiredObserver.disconnect()}render(){const t=this.clearable&&this.hasContent&&!this.disabled;return i(d,{labelPosition:this.computedLabelPosition},i(h,{position:this.computedLabelPosition,required:this.required},i("slot",{name:"label",onSlotchange:()=>this.setLabel()})),i("div",{class:"gux-input-and-error-container"},i("div",{class:{"gux-input":!0,"gux-input-error":this.hasError}},i("div",{class:{"gux-input-container":!0,"gux-disabled":this.disabled,"gux-clear":t}},i("slot",{name:"input",onSlotchange:()=>this.setInput()}),t&&i("gux-form-field-input-clear-button",{onClick:()=>b(this.input)})),this.renderStepButtons(this.input,this.getI18nValue,this.disabled)),i(m,{hasError:this.hasError},i("slot",{name:"error"}))))}get variant(){const t=this.labelPosition?this.labelPosition.toLowerCase():"none";return`${this.clearable?"clearable":"unclearable"}-${t}`}setInput(){this.input=this.root.querySelector('input[type="number"][slot="input"]'),this.hasContent=f(this.input),u(this.input),this.input.addEventListener("input",(()=>{this.hasContent=f(this.input)})),this.disabled=r(this.input),this.required=this.input.required,this.disabledObserver=s(this.input,(t=>{this.disabled=t})),this.requiredObserver=l(this.input,(t=>{this.required=t})),w(this.root,this.input)}setLabel(){this.label=this.root.querySelector('label[slot="label"]'),this.computedLabelPosition=v(this.label,this.labelPosition)}renderStepButtons(t,e,o){return i("div",{class:"gux-step-buttons-container"},i("button",{class:"gux-step-button",tabIndex:-1,type:"button",title:e("increment"),disabled:o,onClick:()=>this.stepUp(t)},i("gux-icon",{"icon-name":"chevron-small-up",decorative:!0})),i("button",{class:"gux-step-button",tabIndex:-1,type:"button",title:e("decrement"),disabled:o,onClick:()=>this.stepDown(t)},i("gux-icon",{"icon-name":"chevron-small-down",decorative:!0})))}stepDown(t){""===t.value?c(t,t.min||"0",!1):(t.stepDown(),this.simulateNativeInputAndChangeEvents(t))}stepUp(t){""===t.value?c(t,t.min||"0",!1):(t.stepUp(),this.simulateNativeInputAndChangeEvents(t))}simulateNativeInputAndChangeEvents(t){x(t,"input"),x(t,"change")}get root(){return o(this)}};(function(t,e,i,o){var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);r>3&&s&&Object.defineProperty(e,i,s)})([a({childList:!0,subtree:!0})],y.prototype,"onMutation",null),y.style=".gux-form-field-container{margin:var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0}.gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:11px;line-height:16px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin-right:4px;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-label.gux-above{margin-bottom:8px}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host{display:block;color:#2e394c}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:108px;overflow:hidden;font-size:12px;color:#2e394c;text-align:right;text-overflow:ellipsis;background-color:#f6f7f9;border:none;outline:none}::slotted(input)::placeholder{color:#596373;opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;width:-moz-fit-content;width:fit-content}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:center;order:0;width:100%;height:32px;padding:4px 12px;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-input-and-error-container .gux-input .gux-input-container.gux-disabled{opacity:0.5}.gux-input-and-error-container .gux-input .gux-input-container.gux-clear{padding-right:0}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border-color:#2a60c8;outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:#ea0b0b}.gux-step-buttons-container{flex:0 1 16px;align-self:auto;order:0;margin:0 4px}.gux-step-buttons-container .gux-step-button{flex:0 1 auto;align-self:auto;order:0;padding:2px;color:#596373;background:transparent;border:none}.gux-step-buttons-container .gux-step-button:not(:disabled):focus,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-step-buttons-container .gux-step-button gux-icon{width:10px;height:10px}";export{y as gux_form_field_number}