@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -2,6 +2,10 @@ import { h, Host } from "@stencil/core";
 import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays, clampDate, } from "../../../global/functions";
 import { generateId } from "../../../global/functions";
 import { showTooltip, hideTooltip } from "../../../global/functions";
+/**
+ * @internal
+ * @description Internal calendar component for date pickers. Not to be used directly.
+ */
 export class PrivCalendar {
     constructor() {
         this.today = this.dateToISO(new Date());
@@ -187,7 +191,7 @@ export class PrivCalendar {
                 }, onMouseOver: () => this.cellHovered.emit(date), "data-month": dateFind.month.asString(date), "data-year": dateFind.year.asString(date), onBlur: (ev) => ev.stopPropagation(), tabIndex: isFocused ? 0 : -1 }, dayOfDate));
         };
         this.disabled = false;
-        this.view = "day";
+        this.view = "month";
         this.focusDate = this.today;
         this.startDate = undefined;
         this.endDate = undefined;
@@ -229,7 +233,7 @@ export class PrivCalendar {
         this.setCalType();
     }
     handleFocusDate(newVal, oldVal) {
-        if (this.view === "day") {
+        if (this.view === "month") {
             const oldCell = this.getCell(oldVal);
             if (oldCell)
                 oldCell.tabIndex = -1;
@@ -272,7 +276,7 @@ export class PrivCalendar {
                 break;
             case "PageUp":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.month.decrease(1);
                     this.focusCell();
                 }
@@ -282,7 +286,7 @@ export class PrivCalendar {
                 break;
             case "PageDown":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.month.increase(1);
                     this.focusCell();
                 }
@@ -292,7 +296,7 @@ export class PrivCalendar {
                 break;
             case "Home":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.day.set(1);
                     this.focusCell();
                 }
@@ -302,7 +306,7 @@ export class PrivCalendar {
                 break;
             case "End":
                 ev.preventDefault();
-                if (this.view === "day") {
+                if (this.view === "month") {
                     this._focus.day.set(-1);
                     this.focusCell();
                 }
@@ -313,7 +317,7 @@ export class PrivCalendar {
             case "ArrowLeft":
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.decrease(1);
                         this.focusCell();
                     }
@@ -325,7 +329,7 @@ export class PrivCalendar {
             case "ArrowRight":
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.increase(1);
                         this.focusCell();
                     }
@@ -337,7 +341,7 @@ export class PrivCalendar {
             case "ArrowUp":
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.decrease(7);
                         this.focusCell();
                     }
@@ -353,11 +357,11 @@ export class PrivCalendar {
                 }
                 if (activeEl.classList.contains("date-cell") || activeEl.classList.contains("month")) {
                     ev.preventDefault();
-                    if (this.view === "day") {
+                    if (this.view === "month") {
                         this._focus.day.increase(7);
                         this.focusCell();
                     }
-                    else if (this.view === "month") {
+                    else if (this.view === "year") {
                         this.monthButtonFocus.increase(3);
                     }
                 }
@@ -464,7 +468,7 @@ export class PrivCalendar {
             if (dayToFocus > maxDays) {
                 this._focus.day.set(maxDays);
             }
-            if (this.view == "day") {
+            if (this.view == "month") {
                 const cellToFocus = this.getCell(this.focusDate);
                 if (cellToFocus) {
                     cellToFocus.tabIndex = 0;
@@ -497,26 +501,26 @@ export class PrivCalendar {
     renderMonth(month, index) {
         return (h("button", { id: `month-${index + 1}-${this.uid}`, class: `month ${this._focus.month.asInt() === index + 1 ? "selected focused" : ""}`, role: "gridcell", tabindex: index + 1 === this._focus.month.asInt() ? 0 : -1, onBlur: (ev) => ev.stopPropagation(), onClick: () => {
                 this._focus.month.set(index + 1);
-                this.view = "day";
+                this.view = "month";
                 this.focusCell();
             } }, month));
     }
     renderHeader() {
-        const previousButtonLabel = this.view == "day" ? this.previousMonthButtonLabel : this.previousYearButtonLabel;
-        const nextButtonLabel = this.view == "day" ? this.nextMonthButtonLabel : this.nextYearButtonLabel;
+        const previousButtonLabel = this.view == "month" ? this.previousMonthButtonLabel : this.previousYearButtonLabel;
+        const nextButtonLabel = this.view == "month" ? this.nextMonthButtonLabel : this.nextYearButtonLabel;
         return (h("div", { class: "calendar-header" }, h("button", { onClick: () => {
-                if (this.view == "day") {
+                if (this.view == "month") {
                     this._focus.month.decrease(1);
                 }
-                else if (this.view == "month") {
+                else if (this.view == "year") {
                     this._focus.year.decrease(1);
                 }
                 this.announceMonthYear();
             }, class: "header-btn arw-btn", ref: (el) => (this.prevBtnEl = el), "aria-label": previousButtonLabel, onMouseOver: () => showTooltip("bottom", this.prevBtnEl, previousButtonLabel), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip("bottom", this.prevBtnEl, previousButtonLabel), onBlur: () => hideTooltip() }, h("span", { class: "svg-icon svg-previous" })), h("span", { class: "header-title" }, calendar_months[this._focus.month.asInt() - 1], " ", this._focus.year.asString()), h("button", { onClick: () => {
-                if (this.view == "day") {
+                if (this.view == "month") {
                     this._focus.month.increase(1);
                 }
-                else if (this.view == "month") {
+                else if (this.view == "year") {
                     this._focus.year.increase(1);
                 }
                 this.announceMonthYear();
@@ -527,7 +531,7 @@ export class PrivCalendar {
                 id: "date.monthView",
                 defaultMessage: "Month view",
                 description: "Calendar button to change to month view",
-            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "day", onClick: () => (this.view = "day") }), h("label", { htmlFor: `month-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "month", onClick: () => (this.view = "month") }), h("label", { htmlFor: `month-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
             id: "date.month",
             defaultMessage: "Month",
             description: "Calendar button to change to month view",
@@ -535,28 +539,28 @@ export class PrivCalendar {
                 id: "date.yearView",
                 defaultMessage: "Year view",
                 description: "Calendar button to change to year view",
-            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "month", onClick: () => (this.view = "month") }), h("label", { htmlFor: `year-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
+            }), name: `rdo-${this.uid}`, class: "toggle-radio-input", checked: this.view === "year", onClick: () => (this.view = "year") }), h("label", { htmlFor: `year-radio-${this.uid}`, class: "radio" }, intl.formatMessage({
             id: "date.year",
             defaultMessage: "Year",
             description: "Calendar button to change to year view",
         })))));
     }
-    renderDayView() {
+    renderMonthView() {
         const dates = this.getCalendarDates(this.focusDate);
         // the start and end date, set in either of the calendars
         const eitherStart = this.startDate || (this.otherCalEl && this.otherCalEl.startDate);
         const eitherEnd = this.endDate || (this.otherCalEl && this.otherCalEl.endDate);
         return (h("div", { "aria-labelledby": "popup-title-month", role: "grid", class: "date-grid" }, h("div", { role: "rowgroup", class: "date-header" }, h("div", { role: "row", class: "header-row" }, h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[0] }, intl.formatMessage({ id: "date.su", defaultMessage: "Su", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[1] }, intl.formatMessage({ id: "date.mo", defaultMessage: "Mo", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[2] }, intl.formatMessage({ id: "date.tu", defaultMessage: "Tu", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[3] }, intl.formatMessage({ id: "date.we", defaultMessage: "We", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[4] }, intl.formatMessage({ id: "date.th", defaultMessage: "Th", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[5] }, intl.formatMessage({ id: "date.fr", defaultMessage: "Fr", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[6] }, intl.formatMessage({ id: "date.sa", defaultMessage: "Sa", description: "Abbreviated day of the week" })))), h("div", { role: "rowgroup" }, h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd)))) : (""))));
     }
-    renderMonthView() {
-        return (h("div", { class: "month-view" }, h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
+    renderYearView() {
+        return (h("div", { class: "year-view" }, h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { key: '0d795a3a89b285d1e9b0bef0b68685e77eac947e', onMouseOut: (ev) => {
+        return (h(Host, { key: '65ddc7ee3bf4a3b0c775911c9309b827ee6050a7', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'f60032e3d2b7b12df707a83f6963360496535e33', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '67b0bbd84a5ce5922937fcd28e554b70cc963c01', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: 'b5adb35334738a308afd0d7e8ad3afa96ed8b493', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: 'fbf1f183f6aac61a8c31050a064742524a442f02', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "month" ? this.renderMonthView() : this.renderYearView()), h("div", { key: '2a4b817c5f2be65ef6667c52300740450590bb84', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: '6737c54bae18f38eb7c1ded31783961d4f04f7ae', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {
@@ -593,8 +597,8 @@ export class PrivCalendar {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "\"month\" | \"year\"",
+                    "resolved": "\"month\" | \"year\"",
                     "references": {}
                 },
                 "required": false,
@@ -605,7 +609,7 @@ export class PrivCalendar {
                 },
                 "attribute": "view",
                 "reflect": false,
-                "defaultValue": "\"day\""
+                "defaultValue": "\"month\""
             },
             "focusDate": {
                 "type": "string",