@heartlandone/vega 2.79.0 → 2.81.0

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/slimmers/renderers/vega-calendar-event-preview-detail-renderer.js

@@ -14,11 +14,22 @@ import clockIcon from '../../assets/clock';
 import { vegaNonceManager } from '../../../../../helpers/csp/vega-nonce-manager';
 import { findParent } from '../../../../../utils/ui';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalCalendarEventPreviewHide } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalCalendarEventPreviewHide, VegaInternalDialogContentReady, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
 export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
   componentWillLoad() {
     this.calendarRef = findParent(this.host, 'vega-calendar');
   }
+  /**
+   * Notifies the calendar host via ChangeManager that the event preview content has been rendered
+   * and is ready for focus management (e.g., focusing the close button for VoiceOver).
+   */
+  componentDidRender() {
+    const contentBox = findParent(this.host, 'vega-popover-content-box');
+    if (this.currentEvent && contentBox && !contentBox.classList.contains('vega-force-hidden')) {
+      ChangeManager.notify(DomNodeSubjectFactory.getSubject(contentBox, VegaInternalDialogContentReady), {});
+    }
+  }
   render() {
     return (this.currentEvent && (h("vega-box", { class: "event-preview" },
       this.injectBackgroundColorStyle(),
@@ -31,7 +42,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
   }
   renderActions() {
     return (h("vega-flex", { justifyContent: "end", class: "preview-actions" },
-      h("vega-button-circle", { icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", "data-aria-label": this.translationSlimmer.t('Close event preview detail'), 
+      h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Close event preview detail'), icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
         /* eslint-disable-next-line react/jsx-no-bind */
         onVegaClick: this.onHidePopover.bind(this) })));
   }
@@ -40,7 +51,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
     return (h(Fragment, null,
       h("vega-flex", { alignItems: "start", gap: "size-16" }, this.renderEventTitle()),
       h("vega-flex", { alignItems: "start", gap: "size-12" },
-        h("vega-icon", { icon: VegaInternalIconManager.getIconKey('clock'), color: "text-secondary" }),
+        h("vega-icon", { "aria-hidden": "true", icon: VegaInternalIconManager.getIconKey('clock'), color: "text-secondary" }),
         h("vega-flex", { direction: "col", gap: "size-4" },
           h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateDateTimeString(this.previewPayload.targetCalendarViewDate, this.previewPayload.timeFormat)),
           currentEvent.isRepeatEvent && (h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateRepeatString()))))));
@@ -93,3 +104,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventPreviewDetailRenderer.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaCalendarEventPreviewDetailRenderer.prototype, "componentDidRender", null);

package/dist/collection/components/vega-calendar/vega-calendar.css

@@ -656,7 +656,7 @@
   padding-bottom: 2px;
   padding-top: 3px;
 }
-.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus) {
+.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow:not(:focus)::part(event-container) {
   outline: 2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1));
 }
 .calendar-view-container .day-event-col .time-event-block:focus-within {

package/dist/collection/components/vega-card/vega-card.css

@@ -3112,6 +3112,43 @@
   margin-left: 2px;
 }
 
+:host(.v-m-auto),
+.v-m-auto {
+  margin: auto;
+}
+
+:host(.v-mx-auto),
+.v-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:host(.v-my-auto),
+.v-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+:host(.v-mt-auto),
+.v-mt-auto {
+  margin-top: auto;
+}
+
+:host(.v-mb-auto),
+.v-mb-auto {
+  margin-bottom: auto;
+}
+
+:host(.v-mr-auto),
+.v-mr-auto {
+  margin-right: auto;
+}
+
+:host(.v-ml-auto),
+.v-ml-auto {
+  margin-left: auto;
+}
+
 @media (min-width: 320px) {
   :host(.S\:v-m-0),
   .S\:v-m-0 {
@@ -3593,6 +3630,36 @@
   .S\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.S\:v-m-auto),
+  .S\:v-m-auto {
+    margin: auto;
+  }
+  :host(.S\:v-mx-auto),
+  .S\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.S\:v-my-auto),
+  .S\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mt-auto),
+  .S\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.S\:v-mb-auto),
+  .S\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mr-auto),
+  .S\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.S\:v-ml-auto),
+  .S\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 768px) {
   :host(.M\:v-m-0),
@@ -4075,6 +4142,36 @@
   .M\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.M\:v-m-auto),
+  .M\:v-m-auto {
+    margin: auto;
+  }
+  :host(.M\:v-mx-auto),
+  .M\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.M\:v-my-auto),
+  .M\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mt-auto),
+  .M\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.M\:v-mb-auto),
+  .M\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mr-auto),
+  .M\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.M\:v-ml-auto),
+  .M\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1024px) {
   :host(.L\:v-m-0),
@@ -4557,6 +4654,36 @@
   .L\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.L\:v-m-auto),
+  .L\:v-m-auto {
+    margin: auto;
+  }
+  :host(.L\:v-mx-auto),
+  .L\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.L\:v-my-auto),
+  .L\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mt-auto),
+  .L\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.L\:v-mb-auto),
+  .L\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mr-auto),
+  .L\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.L\:v-ml-auto),
+  .L\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1440px) {
   :host(.XL\:v-m-0),
@@ -5039,6 +5166,36 @@
   .XL\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.XL\:v-m-auto),
+  .XL\:v-m-auto {
+    margin: auto;
+  }
+  :host(.XL\:v-mx-auto),
+  .XL\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.XL\:v-my-auto),
+  .XL\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mt-auto),
+  .XL\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.XL\:v-mb-auto),
+  .XL\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mr-auto),
+  .XL\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.XL\:v-ml-auto),
+  .XL\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 :host(.v-bg-brand),

package/dist/collection/components/vega-card/vega-card.js

@@ -112,7 +112,7 @@ export class VegaCard {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<MarginType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

package/dist/collection/components/vega-chip/vega-chip.js

@@ -168,7 +168,7 @@ export class VegaChip {
   renderIcon(icon) {
     return (h("vega-icon", { icon: icon, size: icon === 'close'
         ? VegaChip.closeIconSizeMap[this.currentSize]
-        : VegaChip.iconSizeMap[this.currentSize] }));
+        : VegaChip.iconSizeMap[this.currentSize], color: icon !== 'close' ? this.iconColor : undefined }));
   }
   renderDot() {
     const size = VegaChip.iconSizeMap[this.currentSize];
@@ -494,6 +494,31 @@ export class VegaChip {
       "attribute": "icon-align",
       "reflect": false,
       "defaultValue": "'left'"
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TextColorsTokenType",
+        "resolved": "\"text-primary\" | \"text-secondary\" | \"text-inverted-primary\" | \"text-inverted-secondary\" | \"text-black\" | \"text-white\" | \"text-brand\" | \"text-danger-link\" | \"text-danger-link-hover\" | \"text-danger-link-active\" | \"text-danger-link-focus\" | \"text-danger-link-visited\" | \"text-disabled\" | \"text-error\" | \"text-input-disabled\" | \"text-input-placeholder\" | \"text-link\" | \"text-link-hover\" | \"text-link-active\" | \"text-link-focus\" | \"text-link-visited\" | \"text-on-action\" | \"text-on-danger\" | \"text-on-disabled\" | \"text-sidebar-link\" | \"text-sidebar-link-hover\" | \"text-sidebar-link-selected\" | \"text-site-footer-link\" | \"text-site-footer-link-hover\" | \"text-site-footer-link-active\" | \"text-success\" | \"text-inverted-success\" | \"text-accent1-primary\" | \"text-accent2-primary\" | \"text-accent3-primary\" | \"text-accent4-primary\" | \"text-accent5-primary\" | \"text-accent6-primary\" | \"text-accent7-primary\" | \"text-accent8-primary\" | \"text-accent9-primary\" | \"text-accent10-primary\"",
+        "references": {
+          "TextColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Specifies the color of the icon displayed within the chip.\n\nThis property is applicable only when the chip's type is set to `label`\n   and an `icon` is provided."
+      },
+      "attribute": "icon-color",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-current-period-controller.js

@@ -52,7 +52,7 @@ export class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePicke
    * Goto next two month period while range mode.
    */
   gotoNextPeriod() {
-    const period = this.isRangeView()
+    const period = this.isDualMonths
       ? this.currentPeriod.next().next()
       : this.currentPeriod.next();
     this.updateCalendarPeriod(period);
@@ -62,7 +62,7 @@ export class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePicke
    * Goto previous two month period while range mode.
    */
   gotoPreviousPeriod() {
-    const period = this.isRangeView()
+    const period = this.isDualMonths
       ? this.currentPeriod.previous().previous()
       : this.currentPeriod.previous();
     this.updateCalendarPeriod(period);
@@ -104,14 +104,6 @@ export class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePicke
     }
     this.updateCalendarPeriod(new MonthPeriod(currentDate, true, this.timezone));
   }
-  /**
-   * Check is range view
-   *
-   * @returns {boolean} -
-   */
-  isRangeView() {
-    return this.mode === 'range' && !this.isMobileDevice;
-  }
   /**
    * Get current year month by period
    *
@@ -181,6 +173,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "isDualMonths", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-is-dual-months-controller.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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 { VegaSlimmer, MapToComponentMethod, MapToComponentField } from 'vega-slimmer/core';
+/**
+ * Controller to determine if the calendar should render dual months or not.
+ *    It will set isDualMonths to false if it's a mobile device, otherwise it will check the dualMonths prop or if the mode is range.
+ */
+export class VegaDatePickerCalendarIsDualMonthsController extends VegaSlimmer {
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setIsDualMonths();
+  }
+  /**
+   * Watch for changes in the mode prop to determine if we need to update the isDualMonths field.
+   *  If the mode changes, we will re-evaluate whether we should render dual months or not.
+   */
+  watchMode() {
+    this.setIsDualMonths();
+  }
+  /**
+   * Watch for changes in the dualMonths prop to determine if we need to update the isDualMonths field.
+   */
+  watchDualMonths() {
+    this.setIsDualMonths();
+  }
+  /**
+   * Sets the isDualMonths field based on the device type, dualMonths prop, and mode.
+   *  If it's a mobile device, it will always set isDualMonths to false. Otherwise, it will set it to the value of the dualMonths prop if it's defined, or true if the mode is 'range'.
+   */
+  setIsDualMonths() {
+    if (this.isMobileDevice) {
+      this.isDualMonths = false;
+    }
+    else {
+      this.isDualMonths =
+        typeof this.dualMonths === 'boolean' ? this.dualMonths : this.mode === 'range';
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "dualMonths", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "isDualMonths", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchMode')
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "watchMode", null);
+__decorate([
+  MapToComponentMethod('watchDualMonths')
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "watchDualMonths", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-header-render.js

@@ -37,7 +37,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
       }, iconColor: isDisabled ? 'text-disabled' : 'text-link', size: this.getNavigationIconSize(), disabled: isDisabled }));
   }
   renderNextIcon() {
-    const period = this.mode === 'range' ? this.currentPeriod.next() : this.currentPeriod;
+    const period = this.isDualMonths ? this.currentPeriod.next() : this.currentPeriod;
     const endDate = period.current.lastDateOfMonth();
     const isDisabled = this.maxCalendarDate &&
       (endDate.isAfter(this.maxCalendarDate) || endDate.equal(this.maxCalendarDate));
@@ -51,7 +51,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
       }, size: this.getNavigationIconSize(), iconColor: isDisabled ? 'text-disabled' : 'text-link', disabled: isDisabled }));
   }
   renderToday() {
-    const hasLabel = this.mode === 'range' && !this.isMobileDevice && this.size !== 'small';
+    const hasLabel = this.isDualMonths && this.size !== 'small';
     return (h("vega-button-link", { class: {
         'button-today': true,
         'with-label': hasLabel,
@@ -86,9 +86,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "yearMonthSwitcherRender", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarHeaderRenderer.prototype, "mode", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriodController", void 0);
@@ -106,4 +103,4 @@ __decorate([
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "timezone", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarHeaderRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerCalendarHeaderRenderer.prototype, "isDualMonths", void 0);

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

@@ -25,12 +25,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       h("div", { class: "aria-announcement", "aria-live": "polite", "aria-atomic": "true" }, this.buildAnnouncement())));
   }
   renderContainer() {
-    const shouldRenderRangeMonth = this.shouldRenderRangeMonth();
-    return (h("div", { class: {
-        /* eslint-disable @typescript-eslint/naming-convention */
-        'container__months': true,
-        'columns-2': shouldRenderRangeMonth,
-      } }, shouldRenderRangeMonth ? this.renderRangeMonth() : this.monthItemRenderer.render('start')));
+    return (h("div", { class: "container__months" }, this.isDualMonths ? this.renderRangeMonth() : this.monthItemRenderer.render('start')));
   }
   renderRangeMonth() {
     return (h(Fragment, null,
@@ -45,9 +40,6 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
           });
         }, label: this.translationSlimmer.t('Clear') }))));
   }
-  shouldRenderRangeMonth() {
-    return this.mode === 'range' && !this.isMobileDevice;
-  }
   clearCalendar() {
     this.clearEventEmitter.emit();
     changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), {});
@@ -92,7 +84,7 @@ __decorate([
 ], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "isDualMonths", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-year-month-switcher-renderer.js

@@ -15,7 +15,7 @@ import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../..
 import { MonthNames } from '../../constants';
 export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
   render() {
-    const canRender = this.mode !== 'range' || this.showYearMonthDropdowns || this.isMobileDevice;
+    const canRender = !this.isDualMonths || this.showYearMonthDropdowns;
     return (canRender && (h("vega-flex", { justifyContent: 'center' },
       this.showYearMonthDropdowns
         ? this.renderMonthDropdownSwitcher()
@@ -162,4 +162,4 @@ __decorate([
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "mode", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isDualMonths", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-month-item-renderer.js

@@ -23,16 +23,14 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       this.renderDays(periodView, period)));
   }
   renderCurrentYearMonth(period) {
-    return (this.mode === 'range' &&
-      !this.isMobileDevice && (h("vega-box", { class: "current-month-year" },
+    return (this.isDualMonths && (h("vega-box", { class: "current-month-year" },
       this.translationSlimmer.t(period.current.getMonthName()),
       ' ',
       period.current.year)));
   }
   renderWeek(periodView) {
-    return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
-      const fullName = this.translationSlimmer.t(`${weekDay}-full`);
-      return (h("div", { key: weekDay, role: "columnheader", "aria-label": fullName }, this.translationSlimmer.t(`${weekDay}-short`)));
+    return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1, "aria-hidden": "true" }, periodView.weekdays.map((weekDay) => {
+      return (h("div", { key: weekDay }, this.translationSlimmer.t(`${weekDay}-short`)));
     })));
   }
   renderDays(periodView, period) {
@@ -58,6 +56,7 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
     const isDisabled = this.isDateDisabled(day.toDate());
     const isInRange = day.isAfter(currentRangeDates[0]) && day.isBefore(currentRangeDates[1]);
     const canInterActive = isCurrentMonth && !isLockedDate && !isDisabled;
+    const weekDayShortName = this.translationSlimmer.t(`${day.getWeekDayShortName()}-full`);
     return (h("div", { key: `${day.month}-${day.date}`, class: isCurrentMonth && {
         'day-item': true,
         'is-today': day.equal(this.today),
@@ -70,8 +69,8 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: () => canInterActive && this.selectionController.onDayClick(day), 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": `${day.getMonthName()} ${day.date} ${day.year}`, "aria-hidden": isCurrentMonth ? undefined : 'true', "aria-disabled": isLockedDate || isDisabled ? 'true' : undefined, tabIndex: canInterActive ? 0 : -1 },
-      h("div", { class: "day-content" }, isCurrentMonth ? day.date : '')));
+      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": `${day.getMonthName()} ${day.date} ${day.year} ${weekDayShortName}`, "aria-hidden": isCurrentMonth ? undefined : 'true', "aria-disabled": isLockedDate || isDisabled ? 'true' : undefined, tabIndex: canInterActive ? 0 : -1 },
+      h("div", { class: "day-content", "aria-hidden": "true" }, isCurrentMonth ? day.date : '')));
   }
   getCurrentRangeDates() {
     const startDate = this.calendarSelection.startDate;
@@ -130,10 +129,10 @@ __decorate([
 ], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "isDualMonths", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "dateIndicator", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "dateIndicator", void 0);

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

@@ -13,9 +13,9 @@
   height: 100%;
 }
 
-:host(.small.range) .calendar.static-height .container__main,
-:host(.regular.range) .calendar.static-height .container__main,
-:host(.large.range) .calendar.static-height .container__main {
+:host(.small.dual-months) .calendar.static-height .container__main,
+:host(.regular.dual-months) .calendar.static-height .container__main,
+:host(.large.dual-months) .calendar.static-height .container__main {
   aspect-ratio: 1/1;
 }
 
@@ -386,7 +386,7 @@
   left: calc(50% - 2px);
 }
 
-:host(.small.range) .calendar .container__main {
+:host(.small.dual-months) .calendar .container__main {
   width: 100%;
   max-width: 600px;
   max-height: 360px;
@@ -694,7 +694,7 @@
   left: calc(50% - 2px);
 }
 
-:host(.regular.range) .calendar .container__main {
+:host(.regular.dual-months) .calendar .container__main {
   width: 100%;
   max-width: 900px;
   max-height: 450px;
@@ -1078,7 +1078,7 @@
   border-color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
 }
 
-:host(.large.range) .calendar .container__main {
+:host(.large.dual-months) .calendar .container__main {
   width: 100%;
   max-width: 1200px;
   max-height: 600px;
@@ -1093,10 +1093,16 @@
   display: flex;
 }
 
-.calendar .container__months.columns-2 {
+:host(.dual-months) .calendar .container__months {
   width: 100%;
   flex-direction: row;
 }
+:host(.dual-months) .calendar .container__months .month-item:first-of-type {
+  padding-right: var(--vega-date-picker-calendar-range-space-size);
+}
+:host(.dual-months) .calendar .container__months .month-item:last-of-type {
+  padding-left: var(--vega-date-picker-calendar-range-space-size);
+}
 
 .calendar .container__months .month-item {
   box-sizing: content-box;
@@ -1108,14 +1114,6 @@
   flex-direction: column;
 }
 
-.calendar .container__months.columns-2 .month-item:first-of-type {
-  padding-right: var(--vega-date-picker-calendar-range-space-size);
-}
-
-.calendar .container__months.columns-2 .month-item:last-of-type {
-  padding-left: var(--vega-date-picker-calendar-range-space-size);
-}
-
 .calendar .container__months .month-item:nth-child(2)::before {
   background-color: rgba(var(--v-bg-divider, 171, 198, 216, 1));
   margin-bottom: 32px;