genesys-spark-components 4.187.1 → 4.187.2

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

@@ -47,16 +47,4 @@ button {
 
 button:focus {
   outline: none;
-}
-
-.gux-sr-only {
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-}
-.gux-sr-only:not(:focus):not(:active) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
 }

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

@@ -29,7 +29,7 @@ export class GuxDay {
         });
     }
     render() {
-        return (h("button", { key: '4ca50771f8c43c6605db8c33818c7b85cb2a31c9', type: "button", disabled: this.disabled }, h("slot", { key: '7d2d8e8f42603287f759bf6cb14271bd8a7ef6d8' }, h("span", { key: '6c235a758c10fdb4ebc71aec3efbc40c5c703050', "aria-hidden": "true" }, this.date.day), h("span", { key: '8d3eab023b34790ef085f320ac6363e989354c37', class: "gux-sr-only" }, formatPlainDate(this.readerFormatter, this.date)))));
+        return (h("button", { key: '4ca50771f8c43c6605db8c33818c7b85cb2a31c9', type: "button", disabled: this.disabled }, h("slot", { key: '7d2d8e8f42603287f759bf6cb14271bd8a7ef6d8' }, h("span", { key: '6c235a758c10fdb4ebc71aec3efbc40c5c703050', "aria-hidden": "true" }, this.date.day), h("gux-screen-reader-beta", { key: 'cfcc006b8a9f5bf2086b521799d49351c9143a54' }, formatPlainDate(this.readerFormatter, this.date)))));
     }
     static get is() { return "gux-day-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -4,11 +4,18 @@ import { trackComponent } from "../../../utils/tracking/usage";
  * @slot - text
  */
 export class GuxScreenReader {
+    constructor() {
+        /**
+         * Whether to render the screen reader text as a block-level element.
+         */
+        this.blockLevel = false;
+    }
     componentWillLoad() {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: 'd381c188a499ff779d21109c472f677bddae6120', class: "gux-sr-only" }, h("slot", { key: '5e02f9feeb45afd4a0495fbec7702c87221ed4fd' })));
+        const ElementType = this.blockLevel ? 'div' : 'span';
+        return (h(ElementType, { key: '7969b39424921ab32e0b437ee704e0508896e5f9', class: "gux-sr-only" }, h("slot", { key: 'ac96246c2d26dd65ceae2c7b7a74e27e0377eb2f' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -22,5 +29,29 @@ export class GuxScreenReader {
             "$": ["gux-screen-reader.css"]
         };
     }
+    static get properties() {
+        return {
+            "blockLevel": {
+                "type": "boolean",
+                "attribute": "block-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render the screen reader text as a block-level element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
     static get elementRef() { return "root"; }
 }

package/dist/collection/components/beta/gux-screen-reader/tests/gux-screen-reader.common.js

@@ -1,5 +1,10 @@
 export const renderConfigs = [
     {
+        description: 'should render default span element',
         html: '<gux-screen-reader-beta>This should not be visible</gux-screen-reader-beta>'
+    },
+    {
+        description: 'should render div element',
+        html: '<gux-screen-reader-beta block-level>This should not be visible</gux-screen-reader-beta>'
     }
 ];

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.css

@@ -214,12 +214,4 @@
 .gux-selector-card:active:not(:disabled) .gux-content ::slotted(input[type=radio])::before,
 .gux-selector-card:active:not(:disabled) .gux-content ::slotted(input[type=checkbox])::before {
   background-color: var(--gse-ui-selectorCard-active-selectedIndicator-foregroundColor);
-}
-.gux-selector-card .gux-screenreader {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
 }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.js

@@ -37,7 +37,7 @@ export class GuxSelectorCard {
     }
     renderDescription() {
         if (this.variant === 'simple') {
-            return (h("span", { class: "gux-screenreader" }, h("slot", { name: "description" })));
+            return (h("gux-screen-reader-beta", null, h("slot", { name: "description" })));
         }
         else {
             return (h("div", { class: "gux-description-container" }, h("slot", { name: "description" })));
@@ -49,11 +49,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: '05014b2157e9bc9d9bd7efe5e56c82b4f70bd9fd', class: {
+        return (h("div", { key: '12390d2f77b6a1515c4c65c2fe9bb97730419127', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '72b8c789d8046733cd57f0e2a4d2eca3e1e9b849', class: "gux-content" }, h("div", { key: '96647eb946ed3a794382960d0775a031695df3c7', class: "gux-icon" }, h("slot", { key: 'f495ce9cc16319dad0607760aaec76be5d4e207c', name: "icon" })), h("div", { key: '7d8f83733bcbed2994d3cc912fedaa78b77dfd00', class: "gux-label-container" }, h("slot", { key: 'c3af7e8497c4ace5264efa09367955b7bc33f373', name: "label" })), h("slot", { key: '350556db6dff2c1694c5096cefa62b049d367fa2', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: 'eeb64faf9ae20387f17979e3479baf4d7fa54c7b', class: "gux-content" }, h("div", { key: '09db2d76b6db55a6fe52bd576eb94ef783a1c4fa', class: "gux-icon" }, h("slot", { key: 'bdd27857067156f9532439d188e1793e582a3610', name: "icon" })), h("div", { key: '409d2ae85fafffbbd777ef53a326450edc087163', class: "gux-label-container" }, h("slot", { key: 'e6ce3fcd69a234571d587f5e92556f5463e1d8e7', name: "label" })), h("slot", { key: '706c728c6389577256a354ad8c9d878003f3d2a0', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,17 +21,6 @@
 .gux-badge gux-tooltip-title {
   white-space: nowrap;
 }
-.gux-badge .gux-sr-only {
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-}
-.gux-badge .gux-sr-only:not(:focus):not(:active) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
-}
 .gux-badge.gux-info {
   color: var(--gse-ui-badge-info-regular-foregroundColor);
   background-color: var(--gse-ui-badge-info-regular-backgroundColor);

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

@@ -40,7 +40,7 @@ export class GuxBadge {
         h("gux-tooltip-title", { "aria-hidden": "true" }, h("span", null, h("slot", { "aria-hidden": "true", onSlotchange: this.onSlotChange.bind(this) }))));
     }
     renderSrText() {
-        return (h("div", { class: "gux-sr-only" }, this.i18n(this.getVariant(), {
+        return (h("gux-screen-reader-beta", { "block-level": true }, this.i18n(this.getVariant(), {
             label: this.label
         })));
     }
@@ -52,7 +52,7 @@ export class GuxBadge {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: 'feb45369a5d97e8e4b88b3a59cb9bba4a379d9f0', class: {
+        return (h("div", { key: '9b42ffccb50cdf0259c3f6db19ec508a9dd9d7e7', class: {
                 'gux-badge': true,
                 [`gux-${this.accent}`]: true,
                 'gux-bold': this.bold

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

@@ -160,13 +160,4 @@
   border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
-}
-
-.gux-sr-only {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
 }

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

@@ -341,10 +341,10 @@ export class GuxCalendar {
         })));
     }
     renderCalendarTable(index) {
-        return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
+        return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("gux-screen-reader-beta", null, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: '596295889b4cf3f8cc4d229a0b86b43f650c2042', class: "gux-calendar" }, h("div", { key: '0e8cb8411b29a81e1f06a8f31090f247727ab850', class: "gux-header" }, h("button", { key: 'f3df4445feb03735d91b936e275212a64cc6f006', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: 'f26551589ecf05e6b44ced659e91d22e58780a69', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'ab425a76cd91ef8c8387d6ef53b1018f09efd8ff', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '68b0889deca5edf029b208b66ac24999bdec8eb6', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '638d9e39a5a656ea58b0a578ed5e371789763fb8', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: '032d8f640205190a50accc0e0ec207281837b192', class: "gux-calendar" }, h("div", { key: '609ddea253dc5519d475e5f76dd19662fc9a088c', class: "gux-header" }, h("button", { key: '5417571dec9cb6807408d0d86ff850026632792c', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: 'c64d3e6fb3778e17bd9519af36a818cbf5ea8456', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'fb7339b1279e90a81f1f941ddb99f5b2edc718c4', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: 'f3a51e4365bb254f3ef4a0f58ab72115282b231d', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '64769c9c22d6e7bc60efdadc33302d820b95eaad', 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"; }

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

@@ -294,12 +294,19 @@ export class GuxDatepicker {
         if (this.mode === "range" /* CalendarModes.Range */) {
             const fromValue = this.stringToDate(this.inputElement.value);
             const toValue = this.stringToDate(this.toInputElement.value);
+            if (!this.isValidDateFormat(fromValue) ||
+                !this.isValidDateFormat(toValue)) {
+                return;
+            }
             this.value = asIsoDateRange(fromValue, toValue);
             this.updateDate();
             void this.calendarElement.setValue([fromValue, toValue]);
         }
         else {
             const date = this.stringToDate(this.inputElement.value);
+            if (!this.isValidDateFormat(date)) {
+                return;
+            }
             this.value = asIsoDate(date);
             this.updateDate();
             void this.calendarElement.setValue(date);
@@ -365,6 +372,15 @@ export class GuxDatepicker {
             regexp
         };
     }
+    isValidDateFormat(dateValue) {
+        const { map: map3 } = this.getMapAndRegexFromField(dateValue);
+        if (this.yearFormat === 'yyyy') {
+            return map3.yyyy.length === 4;
+        }
+        else {
+            return map3.yy.length === 2;
+        }
+    }
     updateDate() {
         if (this.mode === "range" /* CalendarModes.Range */) {
             const [from, to] = fromIsoDateRange(this.value);
@@ -539,7 +555,7 @@ export class GuxDatepicker {
             } }, h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (h("div", { key: '8ff0fc4c5bcc551bab506220890198d4d4b2a782', class: {
+        return (h("div", { key: '87ba4fb1f5dab50e710194e0a083729097ce5c23', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.css

@@ -68,21 +68,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.gux-field .gux-field-content .gux-filter .gux-sr-only,
-.gux-field .gux-field-content .gux-selected-option .gux-sr-only,
-.gux-field .gux-field-content .gux-placeholder .gux-sr-only {
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-}
-.gux-field .gux-field-content .gux-filter .gux-sr-only:not(:focus):not(:active),
-.gux-field .gux-field-content .gux-selected-option .gux-sr-only:not(:focus):not(:active),
-.gux-field .gux-field-content .gux-placeholder .gux-sr-only:not(:focus):not(:active) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  clip-path: inset(50%);
-}
 .gux-field .gux-field-content .gux-filter {
   position: relative;
   block-size: 100%;

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -348,7 +348,7 @@ export class GuxDropdownMulti {
         return selectedElementString
             ? [
                 selectedElementString,
-                h("span", { class: "gux-sr-only" }, this.placeholder)
+                h("gux-screen-reader-beta", null, this.placeholder)
             ]
             : false;
     }
@@ -362,7 +362,7 @@ export class GuxDropdownMulti {
     getSrSelectedText() {
         const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
         if (selectedListboxOptionElement.length) {
-            return (h("span", { class: "gux-sr-only" }, this.i18n('numberSelected', {
+            return (h("gux-screen-reader-beta", null, this.i18n('numberSelected', {
                 numberSelected: selectedListboxOptionElement.length.toString()
             })));
         }
@@ -416,7 +416,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '122a2f4a753ac77cc58d165dba12acc9fb526bc2', class: "gux-dropdown-container" }, h("gux-popup", { key: '3debe4bc143b13fa89588fb542a56e259ac1e208', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: '3d7e026e163c18fe00c3222e3a62284523f65427', class: "gux-dropdown-container" }, h("gux-popup", { key: 'd66ea9ce9cce8447d86e146067b268f06f64c090', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.css

@@ -36,12 +36,4 @@
 }
 :host .gux-option {
   display: inline-flex;
-}
-:host .gux-screenreader {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
 }

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.js

@@ -29,14 +29,14 @@ export class GuxCreateOption {
     // COMUI-3905: Without this method the dropdown multi's add option button triggers an infinite loop when it is hidden adter being displayed.
     async componentWillRender() { }
     renderCustomOptionInstructions() {
-        return (h("span", { class: "gux-screenreader" }, this.i18n('createCustomOptionInstructions')));
+        return (h("gux-screen-reader-beta", null, this.i18n('createCustomOptionInstructions')));
     }
     render() {
-        return (h(Host, { key: 'c92d141ba5fbf37a5080365119b1e6db171d6e05', role: "option", "aria-selected": false, class: {
+        return (h(Host, { key: '61a93e06bff2a61ad5609969e65894136913dc96', role: "option", "aria-selected": false, class: {
                 'gux-active': this.active,
                 'gux-hovered': this.hovered,
                 'gux-filtered': this.filtered
-            } }, h("div", { key: 'ffcf2df8c0041a5311f833cd4fa1588ebd93671b', class: "gux-option" }, h("gux-icon", { key: '6112d8631bf2482e2152955ca52667e33f89f583', decorative: true, "icon-name": "fa/plus-regular", size: "small" }), h("div", { key: '31f37ce25a3e437a3e79d693708e32b79d0ddfea', class: "gux-create-text" }, this.i18n('createOption', {
+            } }, h("div", { key: 'f09b6c50ebb109d49875b079329230c23c21f6cd', class: "gux-option" }, h("gux-icon", { key: '5073724a016f254ea5abd4f4fa87fd969eed664b', decorative: true, "icon-name": "fa/plus-regular", size: "small" }), h("div", { key: '70192141244d7ce1568821b2ca0470db2b4ee8a4', class: "gux-create-text" }, this.i18n('createOption', {
             optionValue: this.value
         })), this.renderCustomOptionInstructions())));
     }

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.css

@@ -82,12 +82,4 @@
 }
 :host:host(.gux-filtered) {
   display: none;
-}
-:host .gux-screenreader {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
 }

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.js

@@ -56,17 +56,17 @@ export class GuxOptionMulti {
     }
     renderCustomOptionInstructions() {
         if (this.custom) {
-            return (h("span", { class: "gux-screenreader" }, this.i18n('removeCustomElementInstructions')));
+            return (h("gux-screen-reader-beta", null, this.i18n('removeCustomElementInstructions')));
         }
     }
     render() {
-        return (h(Host, { key: '622290a307db0c78b1f4a54839504d16e2efe662', role: "option", class: {
+        return (h(Host, { key: '9b6df2ea3e525f96d9a72d20b8cb77015b7d9ddd', role: "option", class: {
                 'gux-active': this.active,
                 'gux-disabled': this.disabled || this.hasDisabledParent(),
                 'gux-filtered': this.filtered,
                 'gux-selected': this.selected,
                 'gux-show-subtext': this.hasSubtext
-            }, "aria-selected": this.selected.toString(), "aria-disabled": booleanString(this.disabled || this.hasDisabledParent()) }, this.renderSVGCheckbox(), h("div", { key: '4561ae4fb74309b6a2fef005e3bb687b5564a589', class: "gux-option-wrapper" }, h("gux-truncate", { key: '817c522172fc287e16f099abd474babffa4b8bb1', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, h("slot", { key: 'cd6477a0b8a8aa3db52a26f839dae52ba673ee28' })), h("slot", { key: 'c5dc194bc4fff3482eb64347083318c4e5f53eda', onSlotchange: () => this.onSubtextChange(), name: "subtext" })), this.renderCustomOptionInstructions()));
+            }, "aria-selected": this.selected.toString(), "aria-disabled": booleanString(this.disabled || this.hasDisabledParent()) }, this.renderSVGCheckbox(), h("div", { key: '7ad0aa86b44d9088be468aff91cc08ec85749c02', class: "gux-option-wrapper" }, h("gux-truncate", { key: '9127a0950a517c3de19aad2902264cbe775ee4a1', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, h("slot", { key: '14541fde0e9c648ecfe8b8c55d939afa8be68b56' })), h("slot", { key: '26f46189ff1ea58777247617075b316e08ff11a9', onSlotchange: () => this.onSubtextChange(), name: "subtext" })), this.renderCustomOptionInstructions()));
     }
     static get is() { return "gux-option-multi"; }
     static get encapsulation() { return "shadow"; }