@globalpayments/vega 2.70.0 → 2.73.0

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -4,19 +4,156 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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;
 };
-import { Component, Host, h, Element } from '@stencil/core';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { Component, Host, h, Element, Prop, State, Watch, Event, Method } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaDatePickerCalendarRenderer } from './slimmers/renderers/vega-date-picker-calendar-renderer';
+import { VegaDatePickerCalendarYearMonthSwitcherRenderer } from './slimmers/renderers/vega-date-picker-calendar-year-month-switcher-renderer';
+import { TranslationSlimmer } from '../../../helpers/slimmers/translation/translation-slimmer';
+import { VegaDatePickerCalendarCurrentPeriodController } from './slimmers/controllers/vega-date-picker-calendar-current-period-controller';
+import { VegaDatePickerCalendarTodayController } from './slimmers/controllers/vega-date-picker-calendar-today-controller';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { VegaDatePickerMonthItemRenderer } from './slimmers/renderers/vega-date-picker-month-item-renderer';
+import { VegaClear, VegaMonthYearChange, VegaSelectionChange, } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaDatePickerCalendarSelectionController } from './slimmers/controllers/vega-date-picker-calendar-selection-controller';
+import { VegaDatePickerCalendarMinMaxDateController } from './slimmers/controllers/vega-date-picker-calendar-min-max-date-controller';
+import { VegaDatePickerCalendarAllowRepickController } from './slimmers/controllers/vega-date-picker-calendar-allow-repick-controller';
+import { DeviceType } from '../../../types/ui.type';
+import { getDeviceType } from '../../../utils/ui';
 /**
  * @vegaVersion 2.0.0
  */
 export class VegaDatePickerCalendar {
   constructor() {
     this.globalSlimmers = {};
+    this.renderer = new VegaDatePickerCalendarRenderer();
+    this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.todayController = new VegaDatePickerCalendarTodayController();
+    this.selectionController = new VegaDatePickerCalendarSelectionController();
+    this.minMaxDateController = new VegaDatePickerCalendarMinMaxDateController();
+    this.currentPeriodController = new VegaDatePickerCalendarCurrentPeriodController();
+    this.yearMonthSwitcherRender = new VegaDatePickerCalendarYearMonthSwitcherRenderer();
+    this.allowRepickController = new VegaDatePickerCalendarAllowRepickController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.clearEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaClear);
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaMonthYearChange);
+    this.vegaSelectionChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaSelectionChange);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    /**
+     * Renders the calendar picker in different sizes. Defaults to regular size
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.size = 'regular';
+    /**
+     * Specifies the selection mode of the date picker calendar.
+     *
+     *  - Use `single` to allow selecting a single date.
+     *  - Use `range` to allow selecting a date range.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.mode = 'single';
+    /**
+     * Specifies the selected date or date range in the date picker calendar.
+     *
+     * @vegaVersion 2.72.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.selection = this.mode === 'range' ? ['', ''] : '';
+    /**
+     * Specifies the desired date format.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.format = 'MM/DD/YYYY';
+    /**
+     * Specifies whether to display the clear button when the calendar is shown.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.clearButton = false;
+    /**
+     * Specifies the calendar is static height.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.staticHeight = false;
+    /**
+     * Determines whether to show months and years dropdown in date picker calendar
+     * If set to true, date picker calendar will have months and years dropdown
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.showYearMonthDropdowns = false;
+    /**
+     * Determines whether the year or month dropdown position is calculated relative to the screen.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.yearMonthDropdownProps = {};
+    /**
+     * Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * Return `true` to disable the cell, or false to keep it selectable.
+     * Default behavior: always returns `false` (no cells are disabled).
+     *
+     * @param date - The `Date` object for the cell being evaluated.
+     * @returns `true` if the cell should be disabled; otherwise `false`.
+     * @vegaVersion 2.72.0
+     */
+    this.isDateDisabled = () => false;
+  }
+  watchCurrentPeriod() {
+    methodPlaceholder();
+  }
+  watchCalendarSelection() {
+    methodPlaceholder();
+  }
+  watchMaxCalendarDate() {
+    methodPlaceholder();
+  }
+  watchMinCalendarDate() {
+    methodPlaceholder();
+  }
+  watchSelection() {
+    methodPlaceholder();
+  }
+  watchMinDate() {
+    methodPlaceholder();
+  }
+  watchMaxDate() {
+    methodPlaceholder();
+  }
+  watchTimezone() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to reset calendar to its initial state,
+   * 	it include reset to current value and reset the current period.
+   * @vegaVersion 2.72.0
+   */
+  async reset() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to trigger repick.
+   *   The param `type` is distinguishing the start date or end date can be repick.
+   * @vegaVersion 2.72.0
+   */
+  async triggerRepick(type) {
+    methodPlaceholder(type);
   }
   render() {
-    return h(Host, null);
+    return sanitizeVegaComponent(h(Host, { class: {
+        [this.size]: true,
+        [this.mode]: true,
+        mobile: this.isMobileDevice,
+      } }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-date-picker-calendar"; }
   static get encapsulation() { return "shadow"; }
@@ -26,11 +163,538 @@ export class VegaDatePickerCalendar {
   static get styleUrls() { return {
     "$": ["vega-date-picker-calendar.css"]
   }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DatePickerCalendarSizeType",
+        "resolved": "\"large\" | \"regular\" | \"small\"",
+        "references": {
+          "DatePickerCalendarSizeType": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Renders the calendar picker in different sizes. Defaults to regular size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'regular'"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DatePickerModeType",
+        "resolved": "\"range\" | \"single\"",
+        "references": {
+          "DatePickerModeType": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the selection mode of the date picker calendar.\n\n - Use `single` to allow selecting a single date.\n - Use `range` to allow selecting a date range."
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "'single'"
+    },
+    "selection": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DatePickerValueType<DatePickerModeType>",
+        "resolved": "[string, string] | string",
+        "references": {
+          "DatePickerValueType": {
+            "location": "import",
+            "path": "../types"
+          },
+          "DatePickerModeType": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the selected date or date range in the date picker calendar."
+      },
+      "attribute": "selection",
+      "reflect": false,
+      "defaultValue": "this.mode === 'range' ? ['', ''] : ''"
+    },
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the desired date format."
+      },
+      "attribute": "format",
+      "reflect": false,
+      "defaultValue": "'MM/DD/YYYY'"
+    },
+    "minDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the minimum selectable date in the date picker calendar."
+      },
+      "attribute": "min-date",
+      "reflect": false
+    },
+    "maxDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the maximum selectable date in the date picker calendar."
+      },
+      "attribute": "max-date",
+      "reflect": false
+    },
+    "clearButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies whether to display the clear button when the calendar is shown."
+      },
+      "attribute": "clear-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "staticHeight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the calendar is static height."
+      },
+      "attribute": "static-height",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "timezone": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies the IANA time zone or Etc/GMT\u00B1n format.\n    It accepts values such as \"America/New_York\" or \"Etc/GMT+12\".\n    For a complete list of IANA time zones, refer to Time Zone DB(https://timezonedb.com/time-zones).\n\t   If not configured, the time zone will default to the system's time zone."
+      },
+      "attribute": "timezone",
+      "reflect": false
+    },
+    "showYearMonthDropdowns": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Determines whether to show months and years dropdown in date picker calendar\nIf set to true, date picker calendar will have months and years dropdown"
+      },
+      "attribute": "show-year-month-dropdowns",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "yearMonthDropdownProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDropdownPropsForDatePickerCalendar",
+        "resolved": "{ isScreenPosition?: boolean; }",
+        "references": {
+          "VegaDropdownPropsForDatePickerCalendar": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Determines whether the year or month dropdown position is calculated relative to the screen."
+      },
+      "defaultValue": "{}"
+    },
+    "isDateDisabled": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DisabledDate",
+        "resolved": "(date: Date) => boolean",
+        "references": {
+          "DisabledDate": {
+            "location": "import",
+            "path": "../../vega-calendar/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "date - The `Date` object for the cell being evaluated."
+          }, {
+            "name": "returns",
+            "text": "`true` if the cell should be disabled; otherwise `false`."
+          }, {
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).\n\nThe function is called for each date cell before rendering.\n\nReturn `true` to disable the cell, or false to keep it selectable.\nDefault behavior: always returns `false` (no cells are disabled)."
+      },
+      "defaultValue": "() => false"
+    }
+  }; }
+  static get states() { return {
+    "isMobileDevice": {},
+    "today": {},
+    "currentPeriod": {},
+    "hoverDate": {},
+    "calendarSelection": {},
+    "maxCalendarDate": {},
+    "minCalendarDate": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClear",
+      "name": "vegaClear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      }
+    }, {
+      "method": "clear",
+      "name": "clear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      }
+    }, {
+      "method": "vegaMonthYearChange",
+      "name": "vegaMonthYearChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "DatePickerMonthYearTypes",
+        "resolved": "DatePickerMonthYearType[] | { month: string; year: string; }",
+        "references": {
+          "DatePickerMonthYearTypes": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      }
+    }, {
+      "method": "monthYearChange",
+      "name": "monthYearChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,"
+      },
+      "complexType": {
+        "original": "DatePickerMonthYearTypes",
+        "resolved": "DatePickerMonthYearType[] | { month: string; year: string; }",
+        "references": {
+          "DatePickerMonthYearTypes": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      }
+    }, {
+      "method": "vegaSelectionChange",
+      "name": "vegaSelectionChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      }
+    }, {
+      "method": "selectionChange",
+      "name": "selectionChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to reset calendar to its initial state,\n\tit include reset to current value and reset the current period.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }]
+      }
+    },
+    "triggerRepick": {
+      "complexType": {
+        "signature": "(type: DatePickerCalendarRepickType) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "DatePickerCalendarRepickType": {
+            "location": "import",
+            "path": "../types"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to trigger repick.\n  The param `type` is distinguishing the start date or end date can be repick.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }]
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "currentPeriod",
+      "methodName": "watchCurrentPeriod"
+    }, {
+      "propName": "calendarSelection",
+      "methodName": "watchCalendarSelection"
+    }, {
+      "propName": "maxCalendarDate",
+      "methodName": "watchMaxCalendarDate"
+    }, {
+      "propName": "minCalendarDate",
+      "methodName": "watchMinCalendarDate"
+    }, {
+      "propName": "selection",
+      "methodName": "watchSelection"
+    }, {
+      "propName": "minDate",
+      "methodName": "watchMinDate"
+    }, {
+      "propName": "maxDate",
+      "methodName": "watchMaxDate"
+    }, {
+      "propName": "timezone",
+      "methodName": "watchTimezone"
+    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaDatePickerCalendar.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "todayController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "minMaxDateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "currentPeriodController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "yearMonthSwitcherRender", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "allowRepickController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "clearEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "vegaSelectionChangeEventEmitter", void 0);