genesys-spark-components 3.28.1 → 3.30.0

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

@@ -0,0 +1,110 @@
+import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+import { getClosestElement } from '../../../../../../utils/dom/get-closest-element';
+export class GuxMonthListItem {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  onMouseup() {
+    this.focusParentList();
+  }
+  onMouseover() {
+    this.focusParentList();
+  }
+  focusParentList() {
+    const parentList = getClosestElement('gux-month-list', this.root);
+    if (parentList && parentList.shadowRoot.activeElement === null) {
+      this.root.blur();
+      parentList.focus();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem", value: this.value },
+      h("div", { class: "gux-container" },
+        h("button", { class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled },
+          h("slot", null)))));
+  }
+  static get is() { return "gux-month-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-month-list-item.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-month-list-item.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get listeners() { return [{
+      "name": "mouseup",
+      "method": "onMouseup",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseover",
+      "method": "onMouseover",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  background-color: #fdfdfd;
+  border: 1px solid #b4bccb;
+}

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

@@ -0,0 +1,80 @@
+import { Component, Element, h, Host, Listen, Method } from '@stencil/core';
+import { first, focusMove, last, next, previous } from '../../../../stable/gux-list/gux-list.service';
+const validFocusableItems = ['gux-month-list-item'];
+export class GuxMonthList {
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        focusMove(this.root, validFocusableItems, -3);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        focusMove(this.root, validFocusableItems, 3);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        previous(this.root, validFocusableItems);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        next(this.root, validFocusableItems);
+        break;
+      case 'Home':
+        event.preventDefault();
+        first(this.root, validFocusableItems);
+        break;
+      case 'End':
+        event.preventDefault();
+        last(this.root, validFocusableItems);
+        break;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocusFirstItem() {
+    first(this.root, validFocusableItems);
+  }
+  renderFocusTarget() {
+    return (h("span", { tabindex: "1" }));
+  }
+  render() {
+    return (h(Host, { role: "list" },
+      this.renderFocusTarget(),
+      h("slot", null)));
+  }
+  static get is() { return "gux-month-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-month-list.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-month-list.css"]
+  }; }
+  static get methods() { return {
+    "guxFocusFirstItem": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,58 @@
+:host {
+  display: inline-block;
+}
+.gux-target {
+  display: inline-flex;
+  padding: 4px 8px 4px 12px;
+  cursor: pointer;
+  background-color: #f6f7f9;
+  border: 1px solid #6b7585;
+  border-radius: 4px;
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+}
+.gux-target .gux-display {
+  display: inline-flex;
+  min-width: 100px;
+  padding-right: 8px;
+  color: #2e394c;
+}
+.gux-target .gux-display .gux-spinner {
+  outline: none;
+}
+.gux-target .gux-display .gux-spinner:not(:first-child) {
+  margin-left: 4px;
+}
+.gux-target .gux-display .gux-spinner:focus {
+  background: #deeaff;
+}
+.gux-target .gux-display .gux-spinner.gux-empty {
+  color: #596373;
+}
+.gux-target .gux-popup-toggle {
+  justify-content: right;
+  padding: 2px;
+  color: #596373;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+}
+.gux-target .gux-popup-toggle:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
+}
+.gux-target .gux-popup-toggle:not(:disabled):focus,
+.gux-target .gux-popup-toggle:not(:disabled):hover {
+  color: #2e394c;
+  cursor: pointer;
+}
+.gux-target .gux-popup-toggle gux-icon {
+  width: 16px;
+  height: 16px;
+}
+.gux-target .gux-popup-toggle.gux-expanded {
+  color: #2a60c8;
+}
+.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):focus,
+.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):hover {
+  color: #2a60c8;
+}

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

@@ -0,0 +1,313 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { buildI18nForComponent, getDesiredLocale } from '../../../i18n';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { afterRender } from '../../../utils/dom/after-render';
+import { getCurrentISOYearMonth, getISOYearMonth, getYearMonthObject } from '../../../utils/date/year-month-values';
+import translationResources from './i18n/en.json';
+const DateTimeFormats = { year: 'numeric', month: 'long' };
+const YearFirstLocales = ['ar', 'he', 'ja', 'ko', 'zh-cn', 'zh-tw'];
+export class GuxMonthPicker {
+  constructor() {
+    this.disabled = false;
+    this.expanded = false;
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.expanded = false;
+        this.calendarToggleButtonElement.focus();
+        break;
+    }
+  }
+  onValueUpdate(newValue) {
+    if (this.isOutOfBounds(newValue)) {
+      if (this.isBeforeMin(newValue)) {
+        this.value = this.min;
+      }
+      else {
+        this.value = this.max;
+      }
+    }
+    else {
+      this.value = newValue;
+    }
+    simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent(this.root, 'change');
+  }
+  onClickOutside() {
+    this.expanded = false;
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.locale = getDesiredLocale(this.root);
+  }
+  isOutOfBounds(value) {
+    return this.isBeforeMin(value) || this.isAfterMax(value);
+  }
+  isBeforeMin(value) {
+    return this.min && this.min > value;
+  }
+  isAfterMax(value) {
+    return this.max && this.max < value;
+  }
+  toggleCalendar() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      afterRender(() => {
+        void this.monthCalendarElement.guxFocus(this.value);
+      });
+    }
+  }
+  onMonthCalendarInput() {
+    this.value = this.monthCalendarElement.value;
+    this.expanded = false;
+    this.calendarToggleButtonElement.focus();
+  }
+  incrementMonth(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = getYearMonthObject(this.value);
+      const newMonth = (((parseInt(currentMonth) + 11 + delta) % 12) + 1)
+        .toString()
+        .padStart(2, '0');
+      this.value = getISOYearMonth(currentYear, newMonth);
+    }
+    else {
+      this.value = getCurrentISOYearMonth();
+    }
+  }
+  incrementYear(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = getYearMonthObject(this.value);
+      const newYear = Math.max(Number(currentYear) + delta, 0).toString();
+      this.value = getISOYearMonth(newYear, currentMonth);
+    }
+    else {
+      this.value = getCurrentISOYearMonth();
+    }
+  }
+  onSpinnerKeyDown(event, incrementor, nextFocusElement) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        incrementor(-1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        incrementor(1);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        event.preventDefault();
+        nextFocusElement.focus();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        this.expanded = true;
+        afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+      case ' ':
+        event.preventDefault();
+        break;
+    }
+  }
+  onSpinnerKeyUp(event) {
+    event.stopPropagation();
+    switch (event.key) {
+      case ' ':
+        event.preventDefault();
+        this.expanded = true;
+        afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+    }
+  }
+  onSpinnerClick() {
+    console.log('onSpinnerClick');
+    this.expanded = true;
+  }
+  getSpinnerLabel(period) {
+    if (this.value) {
+      const { year, month } = getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { [period]: DateTimeFormats[period] });
+    }
+    return this.i18n(period);
+  }
+  getSpinnerValueNow(period) {
+    return this.value ? getYearMonthObject(this.value)[period] : '0';
+  }
+  getSpinnerValueText() {
+    if (this.value) {
+      const { year, month } = getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+    }
+    return this.i18n('unset');
+  }
+  renderMonthSpinnerButton() {
+    return (h("div", { role: "spinbutton", class: {
+        'gux-spinner': true,
+        'gux-empty': Boolean(!this.value)
+      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementMonth(d), this.yearSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.monthSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('month'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "1", "aria-valuemax": "12", "aria-label": this.i18n('month') }, this.getSpinnerLabel('month')));
+  }
+  renderYearSpinnerButton() {
+    return (h("div", { role: "spinbutton", class: {
+        'gux-spinner': true,
+        'gux-empty': Boolean(!this.value)
+      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementYear(d), this.monthSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.yearSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('year'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "0", "aria-label": this.i18n('year') }, this.getSpinnerLabel('year')));
+  }
+  renderSpinnerButtons() {
+    if (YearFirstLocales.includes(this.locale)) {
+      return (h("span", { class: "gux-display" },
+        this.renderYearSpinnerButton(),
+        this.renderMonthSpinnerButton()));
+    }
+    return (h("span", { class: "gux-display" },
+      this.renderMonthSpinnerButton(),
+      this.renderYearSpinnerButton()));
+  }
+  renderCalendarToggleButton() {
+    return (h("button", { class: {
+        'gux-popup-toggle': true,
+        'gux-expanded': this.expanded
+      }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled },
+      h("gux-icon", { "icon-name": "calendar", "screenreader-text": this.i18n('toggleCalendar') })));
+  }
+  renderTarget() {
+    return (h("div", { class: "gux-target", slot: "target" },
+      this.renderSpinnerButtons(),
+      this.renderCalendarToggleButton()));
+  }
+  renderPopup() {
+    return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
+  }
+  render() {
+    return (h("gux-popup", { expanded: this.expanded, disabled: this.disabled },
+      this.renderTarget(),
+      this.renderPopup()));
+  }
+  static get is() { return "gux-month-picker-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-month-picker.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-month-picker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current selected year and month in ISO8601 format (yyyy-mm)"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The min year and month selectable in ISO8601 format (yyyy-mm)"
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The max year and month selectable in ISO8601 format (yyyy-mm)"
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "expanded": {},
+    "locale": {}
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "onValueUpdate"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxMonthPicker.prototype, "onClickOutside", null);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.css

@@ -72,7 +72,7 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 108px;
+  width: 100%;
   overflow: hidden;
   font-size: 12px;
   color: #2e394c;
@@ -95,8 +95,7 @@
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: center;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
 }
 .gux-input-and-error-container .gux-input .gux-input-container {
   box-sizing: border-box;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js

@@ -23,6 +23,7 @@ import componentResources from './i18n/en.json';
  * @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 class GuxFormFieldNumber {
   constructor() {
@@ -59,7 +60,7 @@ export class GuxFormFieldNumber {
         h("div", { class: {
             'gux-input': true,
             'gux-input-error': this.hasError
-          } },
+          }, part: "input-section" },
           h("div", { class: {
               'gux-input-container': true,
               'gux-disabled': this.disabled,

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

@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Listen, Method } from '@stencil/core';
 import { first, last, next, previous } from './gux-list.service';
 import { trackComponent } from '../../../usage-tracking';
+const validFocusableItems = ['gux-list-item'];
 export class GuxList {
   componentWillLoad() {
     trackComponent(this.root);
@@ -9,25 +10,25 @@ export class GuxList {
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault();
-        previous(this.root);
+        previous(this.root, validFocusableItems);
         break;
       case 'Home':
         event.preventDefault();
-        first(this.root);
+        first(this.root, validFocusableItems);
         break;
       case 'ArrowDown':
         event.preventDefault();
-        next(this.root);
+        next(this.root, validFocusableItems);
         break;
       case 'End':
         event.preventDefault();
-        last(this.root);
+        last(this.root, validFocusableItems);
         break;
     }
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxFocusFirstItem() {
-    first(this.root);
+    first(this.root, validFocusableItems);
   }
   renderFocusTarget() {
     return (h("span", { tabindex: "-1" }));