genesys-spark-components 3.29.0 → 3.31.0

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { trackComponent } from '../../../usage-tracking';
 import { asIsoDateRange, asIsoDate, fromIsoDateRange, fromIsoDate } from '../../../utils/date/iso-dates';
 import { addClassToElements, removeClassToElements } from '../../../utils/dom/manipulate-elements-classes';
@@ -20,7 +20,7 @@ export class GuxCalendar {
     /**
      * The calendar mode (can be single or range)
      */
-    this.mode = "single" /* Single */;
+    this.mode = "single" /* CalendarModes.Single */;
     /**
      * The calendar number of months displayed
      */
@@ -37,7 +37,7 @@ export class GuxCalendar {
    */
   // eslint-disable-next-line @typescript-eslint/require-await
   async setValue(value) {
-    if (this.mode === "range" /* Range */ && value instanceof Array) {
+    if (this.mode === "range" /* CalendarModes.Range */ && value instanceof Array) {
       const [date1, date2] = value;
       this.value = asIsoDateRange(date1, date2); // sorts
       this.previewValue = fromIsoDateRange(this.value)[0];
@@ -109,7 +109,7 @@ export class GuxCalendar {
       let hidden = false;
       if (date.getMonth() !== month) {
         classes.push('gux-not-in-month');
-        if (this.mode === "range" /* Range */) {
+        if (this.mode === "range" /* CalendarModes.Range */) {
           classes.push('gux-hidden');
           hidden = true;
         }
@@ -120,7 +120,7 @@ export class GuxCalendar {
         disabled = true;
       }
       let isSelected = false;
-      if (this.mode === "range" /* Range */) {
+      if (this.mode === "range" /* CalendarModes.Range */) {
         const [start, end] = fromIsoDateRange(this.value);
         const fromTimeStamp = start.getTime();
         const toTimeStamp = end.getTime();
@@ -220,7 +220,7 @@ export class GuxCalendar {
   }
   async onDateClick(date) {
     if (!this.outOfBounds(date)) {
-      if (this.mode !== "range" /* Range */) {
+      if (this.mode !== "range" /* CalendarModes.Range */) {
         await this.setValueAndEmit(date);
       }
       else {
@@ -245,13 +245,13 @@ export class GuxCalendar {
     }
   }
   onDateMouseEnter(date) {
-    if (this.mode === "range" /* Range */ && this.selectingDate !== null) {
+    if (this.mode === "range" /* CalendarModes.Range */ && this.selectingDate !== null) {
       this.value = asIsoDateRange(date, this.selectingDate);
       this.updateRangeElements();
     }
   }
   updateRangeElements() {
-    if (this.mode === "range" /* Range */) {
+    if (this.mode === "range" /* CalendarModes.Range */) {
       removeClassToElements(this.getAllDatesElements(), 'gux-hovered');
       const [start, end] = fromIsoDateRange(this.value);
       const rangeElements = this.getRangeDatesElements(start, end);
@@ -329,7 +329,7 @@ export class GuxCalendar {
     if (!this.value) {
       const now = new Date();
       now.setHours(0, 0, 0, 0);
-      if (this.mode === "range" /* Range */) {
+      if (this.mode === "range" /* CalendarModes.Range */) {
         this.value = asIsoDateRange(now, now);
       }
       else {
@@ -342,221 +342,216 @@ export class GuxCalendar {
     this.updateRangeElements();
   }
   renderMonthHeader() {
-    return (h("div", { class: "gux-month-list" }, Array.from(Array(this.numberOfMonths).keys()).map(index => (h("label", null,
-      this.getMonthLabel(index),
-      " ",
-      this.getYearLabel(index))))));
+    return (h("div", { class: "gux-month-list" }, Array.from(Array(this.numberOfMonths).keys()).map(index => (h("label", null, this.getMonthLabel(index), " ", this.getYearLabel(index))))));
   }
   renderCalendarTable(index) {
-    return (h("table", null,
-      h("tr", null, this.getWeekdays().map(day => (h("th", null, day)))),
-      this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: day.selected ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) },
-        day.date.getDate(),
-        h("span", { class: "gux-sr-only" },
-          this.getMonthLabel(index),
-          " ",
-          day.date.getFullYear())))))))));
+    return (h("table", null, h("tr", null, this.getWeekdays().map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: day.selected ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, day.date.getDate(), h("span", { class: "gux-sr-only" }, this.getMonthLabel(index), " ", day.date.getFullYear())))))))));
   }
   render() {
-    return (h("div", { class: "gux-calendar" },
-      h("div", { class: "gux-header" },
-        h("button", { type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" },
-          h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })),
-        this.renderMonthHeader(),
-        h("button", { type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" },
-          h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))),
-      h("div", { class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+    return (h("div", { class: "gux-calendar" }, h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), this.renderMonthHeader(), h("button", { type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("div", { 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"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-calendar.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-calendar.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The calendar current selected date"
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "minDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The min date selectable"
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-calendar.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-calendar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The calendar current selected date"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "min-date",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "maxDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "minDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The min date selectable"
+        },
+        "attribute": "min-date",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The max date selectable"
+      "maxDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The max date selectable"
+        },
+        "attribute": "max-date",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "max-date",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "GuxCalendarMode",
-        "resolved": "CalendarModes.Range | CalendarModes.Single",
-        "references": {
-          "GuxCalendarMode": {
-            "location": "import",
-            "path": "./gux-calendar.types"
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxCalendarMode",
+          "resolved": "CalendarModes.Range | CalendarModes.Single",
+          "references": {
+            "GuxCalendarMode": {
+              "location": "import",
+              "path": "./gux-calendar.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The calendar mode (can be single or range)"
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "CalendarModes.Single"
-    },
-    "numberOfMonths": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The calendar number of months displayed"
-      },
-      "attribute": "number-of-months",
-      "reflect": false,
-      "defaultValue": "1"
-    }
-  }; }
-  static get states() { return {
-    "startDayOfWeek": {},
-    "previewValue": {},
-    "selectingDate": {}
-  }; }
-  static get events() { return [{
-      "method": "input",
-      "name": "input",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Triggered when user selects a date"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The calendar mode (can be single or range)"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "CalendarModes.Single"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "numberOfMonths": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The calendar number of months displayed"
+        },
+        "attribute": "number-of-months",
+        "reflect": false,
+        "defaultValue": "1"
       }
-    }]; }
-  static get methods() { return {
-    "setValue": {
-      "complexType": {
-        "signature": "(value: Date | [Date, Date]) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "startDayOfWeek": {},
+      "previewValue": {},
+      "selectingDate": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "input",
+        "name": "input",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when user selects a date"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setValue": {
+        "complexType": {
+          "signature": "(value: Date | [Date, Date]) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
           },
-          "Date": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets new value and rerender the calendar",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets new value and rerender the calendar",
-        "tags": []
-      }
-    },
-    "focusPreviewDate": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "focusPreviewDate": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLTableCellElement": {
+              "location": "global"
+            }
           },
-          "HTMLTableCellElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Focus the preview date",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Focus the preview date",
-        "tags": []
-      }
-    },
-    "resetCalendarView": {
-      "complexType": {
-        "signature": "(value: Date) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "resetCalendarView": {
+        "complexType": {
+          "signature": "(value: Date) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
           },
-          "Date": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Reset calendar view to show first selected date",
-        "tags": []
+        "docs": {
+          "text": "Reset calendar view to show first selected date",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "root"; }
 }