genesys-spark-components 3.28.0 → 3.29.0

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

@@ -0,0 +1,237 @@
+import { Component, Element, h, Prop, State, Method, Watch } from '@stencil/core';
+import { buildI18nForComponent, getDesiredLocale } from '../../../../i18n';
+import simulateNativeEvent from '../../../../utils/dom/simulate-native-event';
+import { afterRender } from '../../../../utils/dom/after-render';
+import { getISOYearMonth, getCurrentISOYearMonth, getYearMonthObject } from '../../../../utils/date/year-month-values';
+import translationResources from './i18n/en.json';
+export class GuxMonthCalendar {
+  onValueUpdate(newValue) {
+    const { year } = getYearMonthObject(newValue);
+    this.year = year;
+  }
+  /**
+   * Focus a month
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus(iSOYearMonth) {
+    iSOYearMonth = iSOYearMonth || getCurrentISOYearMonth();
+    const { year } = getYearMonthObject(iSOYearMonth);
+    this.year = year;
+    afterRender(() => {
+      const target = this.root.shadowRoot.querySelector(`gux-month-list-item[value="${iSOYearMonth}"]`);
+      console.log({ target });
+      if (target) {
+        target.focus();
+      }
+    });
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.locale = getDesiredLocale(this.root);
+    if (this.value) {
+      this.year = getYearMonthObject(this.value).year;
+    }
+    else {
+      this.year = getYearMonthObject(getCurrentISOYearMonth()).year;
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent(this.root, 'change');
+  }
+  isOutOfBounds(value) {
+    return (this.max && this.max < value) || (this.min && this.min > value);
+  }
+  onMonthClick(value) {
+    if (this.isOutOfBounds(value)) {
+      return;
+    }
+    this.updateValue(value);
+  }
+  getMonthAriaLabel(value) {
+    const { year, month } = getYearMonthObject(value);
+    return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+  }
+  getYearLabel(year) {
+    return new Date(Number(year), 5).toLocaleDateString(this.locale, {
+      year: 'numeric'
+    });
+  }
+  isSelectedMonth(value) {
+    return value === this.value;
+  }
+  isAriaSelectedMonth(value) {
+    if (this.isSelectedMonth(value)) {
+      return 'true';
+    }
+    return false;
+  }
+  changeYear(increment) {
+    this.year = (parseInt(this.year) + increment).toString();
+  }
+  isPreviousYearLessThanMinYear(year, minISOYearMonth) {
+    return ((parseInt(year) - 1).toString() <
+      (minISOYearMonth && getYearMonthObject(minISOYearMonth).year));
+  }
+  isNextYearGreaterThanMaxYear(year, maxISOYearMonth) {
+    return ((parseInt(year) + 1).toString() >
+      (maxISOYearMonth && getYearMonthObject(maxISOYearMonth).year));
+  }
+  getMonthShortName(year, month) {
+    return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { month: 'short' });
+  }
+  doFocusTrap() {
+    if (!this.previousYearElement.disabled) {
+      this.previousYearElement.focus();
+    }
+    if (!this.nextYearElement.disabled) {
+      this.nextYearElement.focus();
+    }
+    this.monthListElement.focus();
+  }
+  renderHeader() {
+    return (h("div", { class: "gux-year-header" },
+      h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) },
+        h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
+            currentYear: parseInt(this.year),
+            changeYear: parseInt(this.year) - 1
+          }) })),
+      h("div", { class: "gux-year" }, this.getYearLabel(this.year)),
+      h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) },
+        h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
+            currentYear: parseInt(this.year),
+            changeYear: parseInt(this.year) + 1
+          }) }))));
+  }
+  renderMonths() {
+    const monthButtons = Array.from(new Array(12), (_, i) => String(i + 1).padStart(2, '0')).map(month => {
+      const value = getISOYearMonth(this.year, month);
+      return (h("gux-month-list-item", { value: value, selected: this.isSelectedMonth(value), "aria-selected": this.isAriaSelectedMonth(value), "aria-label": this.getMonthAriaLabel(value), onClick: () => this.onMonthClick(value), disabled: this.isOutOfBounds(value) }, this.getMonthShortName(this.year, month)));
+    });
+    return (h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
+  }
+  renderTrapFocusEl() {
+    return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
+  }
+  render() {
+    return (h("div", { class: "gux-month-calendar" },
+      this.renderHeader(),
+      this.renderMonths(),
+      this.renderTrapFocusEl()));
+  }
+  static get is() { return "gux-month-calendar"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-month-calendar.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-month-calendar.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
+    }
+  }; }
+  static get states() { return {
+    "year": {},
+    "locale": {}
+  }; }
+  static get methods() { return {
+    "guxFocus": {
+      "complexType": {
+        "signature": "(iSOYearMonth: GuxISOYearMonth) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../../utils/date/year-month-values"
+          },
+          "HTMLButtonElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Focus a month",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "onValueUpdate"
+    }]; }
+}

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

@@ -0,0 +1,52 @@
+:host {
+  flex: 0 0 33.3%;
+}
+:host([disabled]) {
+  pointer-events: none;
+}
+:host([disabled='false']) {
+  pointer-events: auto;
+}
+::slotted(gux-icon) {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.gux-container {
+  padding: 4px;
+}
+.gux-container button {
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  height: 49px;
+  padding: 8px 0;
+  color: #2e394c;
+  text-align: center;
+  word-wrap: break-word;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+}
+.gux-container button.gux-selected {
+  color: #fdfdfd;
+  background: #2a60c8;
+}
+.gux-container button:focus:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
+}
+.gux-container button:hover:not(:disabled) {
+  color: #fdfdfd;
+  background: #2a60c8;
+}
+.gux-container button:active:not(:disabled) {
+  color: #fdfdfd;
+  background: #2a60c8;
+}
+.gux-container button:disabled {
+  color: rgba(46, 57, 76, 0.5);
+  cursor: default;
+}

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;
+}