@globalpayments/vega 2.27.0 → 2.28.1

package/dist/collection/components/vega-button-group/vega-button-group.css

@@ -5,12 +5,25 @@
  */
 :host {
   display: inline-block;
+  border-radius: 9999px;
 }
 
 .vega-button-group-primary {
   gap: 6px;
 }
 
+.vega-button-group-container:not(.vega-button-group-tertiary) {
+  border-radius: 9999px;
+}
+.vega-button-group-container:not(.vega-button-group-tertiary) > ::slotted(.vega-button-group-item:first-child) {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+.vega-button-group-container:not(.vega-button-group-tertiary) > ::slotted(.vega-button-group-item:last-child) {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
 .vega-button-group-tertiary > ::slotted(.vega-button-group-item) {
   padding-left: 12px;
   padding-right: 12px;

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { CalendarDate, DayPeriod, MonthPeriod, WeekPeriod, } from '../../../../../helpers/calendar';
+import { getClosestWorkday } from '../../../utils';
 /** This TypeScript class `VegaCalendarCurrentPeriodController` updates the current period based on the view mode in a calendar component. */
 export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   /**
@@ -25,13 +26,14 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   updateCalendarPeriod(viewMode, date) {
     switch (viewMode) {
       case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date));
+        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends));
         break;
       case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date));
+        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends));
         break;
       case 'day':
-        this.setCurrentPeriod(new DayPeriod(date));
+        date = this.showWeekends === false ? getClosestWorkday(date) : date;
+        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends));
         break;
     }
   }
@@ -73,6 +75,12 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
       this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
     }
   }
+  /**
+   * The calendar period should update when the property showWeekends change
+   */
+  updateCurrentPeriodAfterHideWeekEndsChange() {
+    this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
+  }
   /**
    * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
    *
@@ -106,6 +114,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
@@ -115,3 +126,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
+__decorate([
+  MapToComponentMethod('watchShowWeekendsChange')
+], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-event-responsive-controller.js

@@ -32,7 +32,7 @@ export class VegaCalendarEventResponsiveController extends PageResizeObserverSli
     // The debounce method will case this method called after component disconnect, then the slimmer will get issue to get viewMode from component class, this issue will catch in spec.ts
     try {
       const eventContainerRef = this.monthEventRenderer.getMonthEventContainerRef();
-      if (this.viewMode === 'month' && eventContainerRef) {
+      if (this.viewMode === 'month' && eventContainerRef && eventContainerRef.parentElement) {
         const maxContainerHeight = eventContainerRef.parentElement.getBoundingClientRect().height;
         const count = Math.floor((maxContainerHeight - VegaCalendarEventResponsiveController.monthDateTitleHeight) /
           VegaCalendarEventItemRenderer.backgroundColorModeEventHeight);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-view-controller.js

@@ -59,6 +59,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "showWeekends", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-daily-repeat-pattern.js

@@ -34,7 +34,13 @@ export class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPatt
       (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
       let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
       while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
-        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
+        if (newNextMatchDate && newNextMatchDate.toDate() <= nextMatchDate.toDate()) {
+          this.cache.pop();
+          break;
+        }
+        nextMatchDate = newNextMatchDate;
         if (typeof this.count === 'number' && this.cache.length >= this.count) {
           break;
         }

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-monthly-repeat-pattern.js

@@ -37,7 +37,13 @@ export class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPa
       (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
       let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
       while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
-        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
+        if (newNextMatchDate && newNextMatchDate.toDate() <= nextMatchDate.toDate()) {
+          this.cache.pop();
+          break;
+        }
+        nextMatchDate = newNextMatchDate;
         if (typeof this.count === 'number' && this.cache.length >= this.count) {
           break;
         }

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-weekly-repeat-pattern.js

@@ -53,7 +53,15 @@ export class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPat
       (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
       let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
       while (nextMatchDate && nextMatchDate[0].toDate() < endDate.toDate()) {
-        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
+        if (newNextMatchDate &&
+          newNextMatchDate[0] &&
+          newNextMatchDate[0].toDate() <= nextMatchDate[0].toDate()) {
+          this.cache.pop();
+          break;
+        }
+        nextMatchDate = newNextMatchDate;
         if (typeof this.count === 'number' && this.getValidCache().length >= this.count) {
           break;
         }

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-yearly-repeat-pattern.js

@@ -38,7 +38,13 @@ export class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPat
       (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
       let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
       while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
-        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
+        if (newNextMatchDate && newNextMatchDate.toDate() <= nextMatchDate.toDate()) {
+          this.cache.pop();
+          break;
+        }
+        nextMatchDate = newNextMatchDate;
         if (typeof this.count === 'number' && this.cache.length >= this.count) {
           break;
         }

package/dist/collection/components/vega-calendar/slimmers/common/helpers/test/calendar-event-repeat-pattern-factory.test.js

@@ -102,4 +102,60 @@ describe('calendarEventRepeatPatternFactory', () => {
     const dayPeriod = new DayPeriod(new CalendarDate(2024, 8, 1));
     expect(pattern['isSeriesInPeriod'](new CalendarDate(2024, 7, 31), 3, dayPeriod)).toBeTruthy();
   });
+  it('dailyPattern#generateRepeatDateCacheUntilEndDate  boundary testing', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), {
+      frequency: 'daily',
+      interval: 1,
+      until: '01/04/2024',
+    });
+    spyOn(CalendarDate, 'from').and.callFake(function (item) {
+      return item.getDate() === 3
+        ? new CalendarDate(item.getFullYear(), 1, 1)
+        : new CalendarDate(item.getFullYear(), item.getMonth() + 1, item.getDate());
+    });
+    pattern['generateRepeatDateCacheUntilEndDate'](CalendarDate.from(new Date(2024, 1, 1)));
+    expect(pattern['cache'].length).toEqual(2);
+  });
+  it('monthlyPattern#generateRepeatDateCacheUntilEndDate boundary testing', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), {
+      frequency: 'monthly',
+      interval: 1,
+      until: '04/03/2024',
+    });
+    spyOn(CalendarDate, 'from').and.callFake(function (item) {
+      return item.getMonth() === 2
+        ? new CalendarDate(item.getFullYear(), 1, 1)
+        : new CalendarDate(item.getFullYear(), item.getMonth() + 1, item.getDate());
+    });
+    pattern['generateRepeatDateCacheUntilEndDate'](CalendarDate.from(new Date(2024, 4, 1)));
+    expect(pattern['cache'].length).toEqual(2);
+  });
+  it('yearlyPattern#generateRepeatDateCacheUntilEndDate boundary testing', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), {
+      frequency: 'yearly',
+      interval: 1,
+      until: '03/03/2027',
+    });
+    spyOn(CalendarDate, 'from').and.callFake(function (item) {
+      return item.getFullYear() === 2026
+        ? new CalendarDate(1900, 1, 1)
+        : new CalendarDate(item.getFullYear(), item.getMonth() + 1, item.getDate());
+    });
+    pattern['generateRepeatDateCacheUntilEndDate'](CalendarDate.from(new Date(2028, 1, 1)));
+    expect(pattern['cache'].length).toEqual(2);
+  });
+  it('weeklyPattern#generateRepeatDateCacheUntilEndDate boundary testing', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), {
+      frequency: 'weekly',
+      interval: 1,
+      until: '02/01/2024',
+    });
+    spyOn(CalendarDate, 'from').and.callFake(function (item) {
+      return item.getDate() === 15
+        ? new CalendarDate(item.getFullYear(), 1, 1)
+        : new CalendarDate(item.getFullYear(), item.getMonth() + 1, item.getDate());
+    });
+    pattern['generateRepeatDateCacheUntilEndDate'](CalendarDate.from(new Date(2024, 3, 1)));
+    expect(pattern['cache'].length).toEqual(2);
+  });
 });

package/dist/collection/components/vega-calendar/slimmers/common/layout/full-day-event-layout-generator.js

@@ -13,7 +13,7 @@ export class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEve
    */
   generate(calendarEvents) {
     const allShouldOrderLongEvents = this.collectAllShouldOrderLongEvents(calendarEvents);
-    const layoutRows = [new VegaCalendarFullDayEventLayoutRow()];
+    const layoutRows = [this.createNewLayoutCell()];
     allShouldOrderLongEvents.forEach((eventView) => {
       this.addCurrentEventToLayout(layoutRows, eventView);
     });

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-switch-panel.js

@@ -44,7 +44,7 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
       this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
     };
     /**
-     * The more action menu ite click
+     * The more action menu item click
      *
      * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
      */
@@ -137,8 +137,9 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
         break;
       }
       case 'week': {
-        const start = this.currentPeriod.startDate;
-        const end = this.currentPeriod.endDate;
+        const weekItems = this.calendarView.dateItems[0];
+        const start = weekItems[0];
+        const end = weekItems[weekItems.length - 1];
         const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(getMonthName(item.toDate())));
         result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
         break;

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-view-renderer.js

@@ -14,7 +14,7 @@ export class VegaCalendarViewRenderer extends VegaSlimmer {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("div", { class: `calendar-view calendar-view-${this.viewMode}` }, this.viewMode === 'month'
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}` }, this.viewMode === 'month'
       ? this.monthViewRenderer.render()
       : this.viewWithTimeRenderer.render()));
   }
@@ -22,6 +22,9 @@ export class VegaCalendarViewRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-day-event-layout-renderer.js

@@ -60,7 +60,7 @@ export class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
       top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * startIndex}%`,
       width: `calc(100% - ${left * 100}%)`,
       height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * (endIndex - startIndex)}%`,
-      zIndex: columnIndex > 0 ? `${columnIndex}` : null,
+      zIndex: columnIndex > 0 ? `${columnIndex}` : undefined,
     };
   }
 }

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-line-renderer.js

@@ -95,7 +95,7 @@ export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
     }
     else {
       for (let i = 0; i < 24; i++) {
-        timeLine.push(pad(i));
+        timeLine.push(`${pad(i)}`);
       }
     }
     return timeLine;

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-view-with-time-renderer.js

@@ -98,9 +98,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.js

@@ -147,7 +147,9 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     if (removeItems.length) {
       rowEvents.forEach((items) => {
-        if (items.length && removeItems.includes(items[items.length - 1])) {
+        if (items.length &&
+          items[items.length - 1] &&
+          removeItems.includes(items[items.length - 1])) {
           result.push(items.slice(0, items.length - 1));
         }
         else {

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-view-renderer.js

@@ -108,9 +108,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);

package/dist/collection/components/vega-calendar/utils/index.js

@@ -1,3 +1,9 @@
+import { CalendarDate } from '../../../helpers/calendar';
+export var DateDirection;
+(function (DateDirection) {
+  DateDirection["PREVIOUS"] = "-1";
+  DateDirection["NEXT"] = "1";
+})(DateDirection || (DateDirection = {}));
 /**
  * get month name from the month number
  *
@@ -30,3 +36,21 @@ export function getTimeIndex(timeString, unit = 15) {
 export function getCalendarEventSlotName(eventKey) {
   return 'vega-calendar-event-slot-' + eventKey;
 }
+/**
+ * Returns the closest workday to a given calendar date based on a specified direction.
+ *
+ * @param {Date} date - The starting date from which you want to find the closest workday.
+ * @param {'-1' | '1'} [direction=1] - Determines whether to find the closest workday in the past or future. It can have two possible values:
+ * @returns {Date} The closest workday to the input date
+ */
+export function getClosestWorkday(date, direction = DateDirection.NEXT) {
+  const day = date.toDate().getDay();
+  if (day === 0 || day === 6) {
+    let nextWorkdayGap = day === 0 ? 1 : 2;
+    if (direction === DateDirection.PREVIOUS) {
+      nextWorkdayGap = day === 0 ? -2 : -1;
+    }
+    return CalendarDate.from(new Date(date.year, date.month - 1, date.date + nextWorkdayGap));
+  }
+  return date;
+}

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

@@ -71,13 +71,14 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
    * @returns {HTMLAnchorElement} event element
    */
   renderNormalEvent() {
-    const { variant = 'primary', disabled } = this.calendarEvent;
+    const { variant, disabled } = this.calendarEvent;
+    const variantText = variant || 'primary';
     const isMonthEvent = !this.host.classList.contains('day-event');
     const classMap = {
       'slot-container': this.slotMode,
       'event-container': true,
       'disabled': disabled,
-      [variant]: true,
+      [variantText]: true,
     };
     if (isMonthEvent) {
       return (h("div", { role: "button", tabIndex: 0, class: classMap, ref: (node) => (this.slotContainerRef = node) },

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

@@ -78,6 +78,10 @@
   flex-grow: 1;
   overflow-y: auto;
   overflow-x: hidden;
+  --calendar-weekday-columns: 7;
+}
+.calendar-view.calendar-hide-weekends {
+  --calendar-weekday-columns: 5;
 }
 
 .calendar-view-month .calendar-view-month-container {
@@ -130,7 +134,7 @@
   position: relative;
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: repeat(7, minmax(64px, 1fr));
+  grid-template-columns: repeat(var(--calendar-weekday-columns), minmax(64px, 1fr));
 }
 .calendar-view-month .calendar-view-row.calendar-view-title {
   position: sticky;
@@ -411,22 +415,22 @@
 .calendar-view-week .calendar-view-container .calendar-view-title {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: repeat(7, minmax(64px, 1fr));
+  grid-template-columns: repeat(var(--calendar-weekday-columns), minmax(64px, 1fr));
 }
 .calendar-view-week .calendar-view-container .calendar-view-event-all {
-  grid-template-columns: repeat(7, minmax(64px, 1fr));
+  grid-template-columns: repeat(var(--calendar-weekday-columns), minmax(64px, 1fr));
 }
 .calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content {
   display: grid;
-  grid-template-columns: repeat(7, minmax(64px, 1fr));
+  grid-template-columns: repeat(var(--calendar-weekday-columns), minmax(64px, 1fr));
 }
 .calendar-view-week .time-marker-container .time-marker {
   display: grid;
-  grid-template-columns: repeat(7, minmax(64px, 1fr));
+  grid-template-columns: repeat(var(--calendar-weekday-columns), minmax(64px, 1fr));
 }
 .calendar-view-week .day-event-container {
   display: grid;
-  grid-template-columns: repeat(7, minmax(64px, 1fr));
+  grid-template-columns: repeat(var(--calendar-weekday-columns), minmax(64px, 1fr));
 }
 
 .calendar-view-day .calendar-view-container {

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

@@ -84,6 +84,12 @@ export class VegaCalendar {
      * @vegaVersion 2.21.0
      */
     this.showEventColorBar = true;
+    /**
+     * Controls the visibility of the weekend columns in the calendar.
+     *
+     * @vegaVersion 2.28.0
+     */
+    this.showWeekends = true;
   }
   /**
    * Tracks changes to the current period state.
@@ -126,6 +132,12 @@ export class VegaCalendar {
   watchShowEventColorBar(newValue) {
     methodPlaceholder(newValue);
   }
+  /**
+   * Monitors changes in the visibility of the weekend columns in the calendar.
+   */
+  watchShowWeekendsChange() {
+    methodPlaceholder();
+  }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
@@ -256,6 +268,27 @@ export class VegaCalendar {
       "attribute": "show-event-color-bar",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "showWeekends": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.28.0"
+          }],
+        "text": "Controls the visibility of the weekend columns in the calendar."
+      },
+      "attribute": "show-weekends",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -467,6 +500,9 @@ export class VegaCalendar {
     }, {
       "propName": "showEventColorBar",
       "methodName": "watchShowEventColorBar"
+    }, {
+      "propName": "showWeekends",
+      "methodName": "watchShowWeekendsChange"
     }]; }
 }
 __decorate([

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

@@ -2031,6 +2031,10 @@
   display: inline-block;
   max-width: 100%;
   position: relative;
+  border-radius: 9999px;
+}
+:host vega-flex {
+  border-radius: 9999px;
 }
 
 :host button {

package/dist/collection/helpers/calendar/calendar-period/calendar-period.abstract.js

@@ -49,6 +49,14 @@ export class CalendarPeriod {
   get type() {
     return this._type;
   }
+  /**
+   * This function returns the showWeekends of the object.
+   *
+   * @type {boolean}
+   */
+  get showWeekends() {
+    return this._showWeekends;
+  }
   /**
    * Go to a specific date.
    *

package/dist/collection/helpers/calendar/calendar-period/day-period.js

@@ -1,12 +1,15 @@
 import { CalendarPeriod } from './calendar-period.abstract';
 import { CalendarDate } from '../calendar-date';
+import { DateDirection, getClosestWorkday } from '../../../components/vega-calendar/utils';
 /**
  * Period of day.
  */
 export class DayPeriod extends CalendarPeriod {
-  constructor(current) {
+  constructor(current, showWeekends) {
     super(DayPeriod.DISPLAY_DATE_COUNT, current);
     this._type = 'day';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
    * @inheritDoc
@@ -14,7 +17,11 @@ export class DayPeriod extends CalendarPeriod {
   next() {
     const nextDate = this.current.toDate();
     nextDate.setDate(nextDate.getDate() + 1);
-    return this.createBy(CalendarDate.from(nextDate));
+    let calendarDate = CalendarDate.from(nextDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
   }
   /**
    * @inheritDoc
@@ -22,13 +29,29 @@ export class DayPeriod extends CalendarPeriod {
   previous() {
     const previousDate = this.current.toDate();
     previousDate.setDate(previousDate.getDate() - 1);
-    return this.createBy(CalendarDate.from(previousDate));
+    let calendarDate = CalendarDate.from(previousDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate, DateDirection.PREVIOUS);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * Go to now.
+   *
+   * @returns {this} - The current period.
+   */
+  now() {
+    let calendarDate = CalendarDate.from(new Date());
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
   }
   /**
    * @inheritDoc
    */
   createBy(current) {
-    return new DayPeriod(current);
+    return new DayPeriod(current, this._showWeekends);
   }
 }
 DayPeriod.DISPLAY_DATE_COUNT = 1;

package/dist/collection/helpers/calendar/calendar-period/month-period.js

@@ -4,9 +4,11 @@ import { CalendarDate } from '../calendar-date';
  * Period of month
  */
 export class MonthPeriod extends CalendarPeriod {
-  constructor(current) {
+  constructor(current, showWeekends) {
     super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
     this._type = 'month';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
    * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
@@ -42,7 +44,7 @@ export class MonthPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   createBy(current) {
-    return new MonthPeriod(current);
+    return new MonthPeriod(current, this._showWeekends);
   }
 }
 MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;

package/dist/collection/helpers/calendar/calendar-period/week-period.js

@@ -5,9 +5,11 @@ import { CalendarDate } from '../calendar-date';
  * Period of the week
  */
 export class WeekPeriod extends CalendarPeriod {
-  constructor(current) {
+  constructor(current, showWeekends) {
     super(WeekPeriod.DISPLAY_DATE_COUNT, current);
     this._type = 'week';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
    * @inheritDoc
@@ -29,7 +31,7 @@ export class WeekPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   createBy(current) {
-    return new WeekPeriod(current);
+    return new WeekPeriod(current, this._showWeekends);
   }
 }
 WeekPeriod.DISPLAY_DATE_COUNT = 7;

package/dist/collection/helpers/calendar/calendar-view-generator/month-view-generator.js

@@ -9,7 +9,8 @@ export class MonthViewGenerator extends CalendarViewGenerator {
    * @inheritDoc
    */
   generate(period) {
-    const calendarDates = [];
+    const showWeekends = period.showWeekends;
+    let calendarDates = [];
     let week = [];
     const dates = this.generateDates(period);
     dates.forEach((date, i) => {
@@ -19,6 +20,11 @@ export class MonthViewGenerator extends CalendarViewGenerator {
       const item = CalendarDate.from(date);
       week.push(item);
     });
-    return new CalendarView(this.generateWeekHead(), calendarDates);
+    let weekDays = this.generateWeekHead();
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      calendarDates = calendarDates.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, calendarDates);
   }
 }