genesys-spark-components 3.31.0 → 3.32.0

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

@@ -9,212 +9,194 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { fromIsoTime } from '../../../utils/date/from-iso-time-string';
-import { trackComponent } from '../../../usage-tracking';
 import { buildI18nForComponent } from '../../../i18n';
 import translationResources from './i18n/en.json';
-const MAX_TIME = '23:59:59';
-const MIN_TIME = '00:00:00';
-const DEFAULT_INTERVAL = 15;
-export class GuxTimePicker {
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { trackComponent } from '../../../usage-tracking';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { getHourDisplayValue, getHoursPattern, getLocaleClockType, getMinuteDisplayValue, getMinutesPattern, getTimeDisplayValues, getValidValueHourChange, getValidValueMinuteChange, getValue, incrementHour, incrementMinute, isAm } from './gux-time-picker.service';
+export class GuxTimePickerBeta {
   constructor() {
-    this.value = '';
-    this.interval = DEFAULT_INTERVAL;
-    this.max = MAX_TIME;
-    this.min = MIN_TIME;
-    this.label = '';
-    this.active = false;
-    this.openDropdown = false;
-    this.suggestion = '00';
-    this.isPressEvent = false;
-  }
-  watchValue(newValue) {
-    this.changed.emit(newValue);
+    this.moveFocusDelay = 100;
+    this.value = '00:00';
+    this.interval = 60;
+    this.disabled = false;
+    this.required = false;
+    this.hasError = false;
+    this.expanded = false;
   }
-  getShadowDomEventTarget(event) {
-    return event.composedPath()[0];
+  onFocus() {
+    this.valueLastChange = this.value;
   }
-  onKeyDown(e) {
-    this.focusedField = this.getShadowDomEventTarget(e);
-    if (this.focusedField === this.inputElement) {
-      switch (e.key) {
-        case 'Enter':
-          this.updateChosenValue();
-          this.inputElement.focus();
-          break;
-        case 'Backspace':
-          e.preventDefault();
-          this.handleBackspace();
-          break;
-        case 'Tab':
-          this.updateChosenValue();
-          break;
-        case 'ArrowDown':
-          e.preventDefault();
-          if (this.listElement) {
-            void this.listElement.guxFocusFirstItem();
-          }
-          break;
-        case 'ArrowUp':
-        case 'ArrowRight':
-        case 'ArrowLeft':
-          e.preventDefault();
-          break;
-        default:
-          e.preventDefault();
-          if ('0' <= e.key && e.key <= '9') {
-            this.openDropdown = true;
-            if (this.focusedField.value.length < 8) {
-              let newValue = this.focusedField.value + String(parseInt(e.key, 10));
-              const arr = newValue.split(':');
-              if (newValue.length > 6 && Number(arr[2].padEnd(2, '0')) > 59) {
-                return;
-              }
-              if (!this.canBeCompletedToAValidTime(newValue)) {
-                return;
-              }
-              if (arr[arr.length - 1].length === 2 && newValue.length < 8) {
-                newValue += ':';
-              }
-              this.focusedField.value = newValue;
-              this.suggestion = arr[0].padEnd(2, '0');
-            }
-          }
-      }
-    }
-    else {
-      switch (e.key) {
-        case 'Escape':
-          this.updateChosenValue();
-          this.inputElement.focus();
-          break;
-      }
+  onBlur() {
+    if (this.valueLastChange !== this.value) {
+      simulateNativeEvent(this.root, 'change');
     }
   }
-  canBeCompletedToAValidTime(str) {
-    const max = fromIsoTime(str + this.max.slice(str.length));
-    const min = fromIsoTime(str + this.min.slice(str.length));
-    if ((this.minTimeObj <= max && max <= this.maxTimeObj) ||
-      (this.minTimeObj <= min && min <= this.maxTimeObj)) {
-      return true;
-    }
-    return false;
+  onClickOutside() {
+    this.expanded = false;
   }
-  handleBackspace() {
-    this.openDropdown = true;
-    if (this.focusedField.selectionStart === this.focusedField.selectionEnd) {
-      const newEnd = this.focusedField.value.endsWith(':') ? -2 : -1;
-      this.focusedField.value = this.focusedField.value.slice(0, newEnd);
-      this.suggestion = this.focusedField.value.split(':')[0].padEnd(2, '0');
+  handleKeydown(event) {
+    switch (event.key) {
+      case 'Escape':
+      case 'Tab':
+        this.expanded = false;
+        break;
     }
-    else {
-      this.focusedField.value = '';
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.clockType = this.clockType || getLocaleClockType(this.root);
+  }
+  updateValue(value, fireChange = false) {
+    if (value !== this.value) {
+      this.value = value;
+      simulateNativeEvent(this.root, 'input');
+      if (fireChange) {
+        if (this.valueLastChange !== this.value) {
+          simulateNativeEvent(this.root, 'change');
+          this.valueLastChange = this.value;
+        }
+      }
     }
   }
-  onListItemClick(value) {
-    this.inputElement.value = value;
-    this.updateChosenValue();
-    this.inputElement.focus();
+  focusFirstItemInPopupList() {
+    setTimeout(() => {
+      void this.listElement.guxFocusFirstItem();
+    }, this.moveFocusDelay);
   }
-  onClickOutside() {
-    this.updateChosenValue();
+  toggleDropdown() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.focusFirstItemInPopupList();
+    }
   }
-  updateChosenValue() {
-    this.inputElement.value = this.validateValue(this.inputElement.value);
-    this.value = this.inputElement.value;
-    this.active = false;
-    this.openDropdown = false;
+  handleClickDropdownValue(displayValue) {
+    const value = getValue(displayValue, this.clockType, isAm(this.value));
+    this.updateValue(value, true);
+    this.clockButton.focus();
+    this.expanded = false;
   }
-  onMouseUp(e) {
-    this.focusedField = this.getShadowDomEventTarget(e);
-    if (this.focusedField === this.inputElement) {
-      if (this.focusedField.selectionEnd !== this.inputElement.value.length) {
-        this.inputElement.setSelectionRange(0, this.inputElement.value.length);
+  onHourKeyDown(event) {
+    switch (event.key) {
+      case 'Tab':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Escape':
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.updateValue(incrementHour(this.value, -1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.updateValue(incrementHour(this.value, 1));
+        break;
+      case 'Backspace':
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9': {
+        event.preventDefault();
+        this.updateValue(getValidValueHourChange(this.value, this.clockType, event.key, this.hourInputElement.selectionStart));
+        break;
       }
-      else {
-        this.inputElement.setSelectionRange(this.inputElement.value.length, this.inputElement.value.length);
+      default:
+        event.preventDefault();
+    }
+  }
+  onMinuteKeyDown(event) {
+    switch (event.key) {
+      case 'Tab':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Escape':
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.updateValue(incrementMinute(this.value, -1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.updateValue(incrementMinute(this.value, 1));
+        break;
+      case 'Backspace':
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9': {
+        event.preventDefault();
+        this.updateValue(getValidValueMinuteChange(this.value, event.key, this.minuteInputElement.selectionStart));
+        break;
       }
+      default:
+        event.preventDefault();
     }
   }
-  onFocusIn(e) {
-    this.focusedField = this.getShadowDomEventTarget(e);
-    this.active = true;
+  onAmPmButtonKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        this.toggleAmPm(event);
+        break;
+    }
   }
-  isValidTime(time) {
-    const postionArray = time.split(':');
-    const maxTimeArray = MAX_TIME.split(':');
-    for (let i = 0; i < postionArray.length; i++) {
-      if (Number(postionArray[i]) > Number(maxTimeArray[i])) {
-        return false;
-      }
+  onListKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.expanded = false;
+        this.clockButton.focus();
+        break;
     }
-    return true;
   }
-  validateUpperBound() {
-    this.max = this.isInFormat(this.max) ? this.max : MAX_TIME;
-    this.max = this.isValidTime(this.max) ? this.max : MAX_TIME;
+  toggleAmPm(event) {
+    event.preventDefault();
+    this.updateValue(incrementHour(this.value, 12), true);
   }
-  validateLowerBound() {
-    this.min = this.isInFormat(this.min) ? this.min : MIN_TIME;
-    this.min = this.isValidTime(this.min) ? this.min : MIN_TIME;
+  getAmPmString() {
+    return isAm(this.value) ? this.i18n('am') : this.i18n('pm');
   }
-  validateBounds() {
-    this.validateUpperBound();
-    this.validateLowerBound();
-    this.maxTimeObj = fromIsoTime(this.max);
-    this.minTimeObj = fromIsoTime(this.min);
-    if (this.maxTimeObj < this.minTimeObj) {
-      this.max = MAX_TIME;
-      this.min = MIN_TIME;
-      this.maxTimeObj = fromIsoTime(this.max);
-      this.minTimeObj = fromIsoTime(this.min);
-    }
+  renderNumberInput() {
+    return (h("div", null, h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
   }
-  validateValue(value) {
-    let validatedValue = this.isInFormat(value) ? value : '';
-    validatedValue =
-      validatedValue !== '' && this.isValidTime(validatedValue)
-        ? validatedValue
-        : '';
-    if (validatedValue) {
-      const valueTimeObj = fromIsoTime(validatedValue);
-      validatedValue =
-        this.minTimeObj <= valueTimeObj && valueTimeObj <= this.maxTimeObj
-          ? validatedValue
-          : '';
+  renderAmPmSelector() {
+    if (this.clockType === '12h') {
+      return (h("button", { class: "gux-input-time-am-pm-selector", type: "button", disabled: this.disabled, "aria-label": this.i18n('toggleAmPM', { amOrPm: this.getAmPmString() }), onClick: (e) => this.toggleAmPm(e), onKeyDown: (e) => this.onAmPmButtonKeyDown(e) }, this.getAmPmString()));
     }
-    return validatedValue;
   }
-  async componentWillLoad() {
-    trackComponent(this.root);
-    this.i18n = await buildI18nForComponent(this.root, translationResources);
-    this.validateBounds();
-    this.value = this.validateValue(this.value);
+  renderClockButton() {
+    return (h("button", { class: {
+        'gux-clock-button': true,
+        'gux-active': this.expanded
+      }, type: "button", disabled: this.disabled, "aria-label": this.i18n('clockButton'), "aria-expanded": this.expanded.toString(), onClick: this.toggleDropdown.bind(this), ref: el => (this.clockButton = el) }, h("gux-icon", { decorative: true, "icon-name": "clock-outline" })));
   }
-  isInFormat(value) {
-    const regex = /^\d{2}:\d{2}:\d{2}$/;
-    return regex.test(value);
+  renderTimeListItems() {
+    return getTimeDisplayValues(this.interval, this.clockType).map(displayValue => (h("gux-list-item", { onClick: () => this.handleClickDropdownValue(displayValue) }, displayValue)));
   }
-  render() {
-    return (h("div", null, h("div", { class: "gux-input" }, h("input", { type: "text", value: this.value, size: 9, "aria-label": this.label || this.i18n('defaultAriaLabel'), ref: el => (this.inputElement = el) })), this.openDropdown === true && (h("div", { class: "gux-list-container" }, h("gux-list", { ref: el => (this.listElement = el) }, this.buildDropdownOptions().map(value => {
-      return (h("gux-list-item", { onClick: () => this.onListItemClick(value) }, value));
-    }))))));
+  renderTarget() {
+    return (h("div", { class: "gux-input-time", slot: "target" }, this.renderNumberInput(), this.renderAmPmSelector(), this.renderClockButton()));
   }
-  buildDropdownOptions() {
-    const dropDownOptions = [];
-    for (let i = 0; i < 60; i += this.interval) {
-      const time = [
-        this.suggestion.toString().padStart(2, '0'),
-        i.toString().padStart(2, '0'),
-        '00'
-      ].join(':');
-      const timeObj = fromIsoTime(time);
-      if (this.minTimeObj <= timeObj && timeObj <= this.maxTimeObj) {
-        dropDownOptions.push(time);
-      }
-    }
-    return dropDownOptions;
+  renderPopup() {
+    return (h("div", { slot: "popup", class: "gux-list-container", onKeyDown: (e) => this.onListKeyDown(e) }, h("gux-list", { ref: el => (this.listElement = el) }, this.renderTimeListItems())));
+  }
+  render() {
+    return (h("gux-popup", { class: {
+        'gux-time-picker': true,
+        'gux-error': this.hasError
+      }, expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
   }
   static get is() { return "gux-time-picker-beta"; }
   static get encapsulation() { return "shadow"; }
@@ -234,9 +216,14 @@ export class GuxTimePicker {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "GuxISOHourMinute",
+          "resolved": "`${string}:${string}`",
+          "references": {
+            "GuxISOHourMinute": {
+              "location": "import",
+              "path": "./gux-time-picker.type"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -245,16 +232,21 @@ export class GuxTimePicker {
           "text": ""
         },
         "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
+        "reflect": false,
+        "defaultValue": "'00:00'"
       },
       "interval": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "GuxMinuteInterval",
+          "resolved": "15 | 30 | 60",
+          "references": {
+            "GuxMinuteInterval": {
+              "location": "import",
+              "path": "./gux-time-picker.type"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -264,14 +256,14 @@ export class GuxTimePicker {
         },
         "attribute": "interval",
         "reflect": false,
-        "defaultValue": "DEFAULT_INTERVAL"
+        "defaultValue": "60"
       },
-      "max": {
-        "type": "string",
-        "mutable": true,
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -280,16 +272,16 @@ export class GuxTimePicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "max",
+        "attribute": "disabled",
         "reflect": false,
-        "defaultValue": "MAX_TIME"
+        "defaultValue": "false"
       },
-      "min": {
-        "type": "string",
-        "mutable": true,
+      "required": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -298,16 +290,16 @@ export class GuxTimePicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "min",
+        "attribute": "required",
         "reflect": false,
-        "defaultValue": "MIN_TIME"
+        "defaultValue": "false"
       },
-      "label": {
-        "type": "string",
+      "hasError": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -316,60 +308,56 @@ export class GuxTimePicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "label",
+        "attribute": "has-error",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "false"
+      },
+      "clockType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "GuxClockType",
+          "resolved": "\"12h\" | \"24h\"",
+          "references": {
+            "GuxClockType": {
+              "location": "import",
+              "path": "./gux-time-picker.type"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clock-type",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "active": {},
-      "openDropdown": {},
-      "suggestion": {}
+      "expanded": {}
     };
   }
-  static get events() {
-    return [{
-        "method": "changed",
-        "name": "changed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
   static get elementRef() { return "root"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "watchValue"
-      }];
-  }
   static get listeners() {
     return [{
-        "name": "keydown",
-        "method": "onKeyDown",
+        "name": "focus",
+        "method": "onFocus",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "mouseup",
-        "method": "onMouseUp",
+        "name": "blur",
+        "method": "onBlur",
         "target": undefined,
         "capture": false,
-        "passive": true
+        "passive": false
       }, {
-        "name": "focusin",
-        "method": "onFocusIn",
+        "name": "keydown",
+        "method": "handleKeydown",
         "target": undefined,
         "capture": false,
         "passive": false
@@ -378,4 +366,4 @@ export class GuxTimePicker {
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxTimePicker.prototype, "onClickOutside", null);
+], GuxTimePickerBeta.prototype, "onClickOutside", null);