@tylertech/forge 3.8.2-dev.0 → 3.9.0-dev.0

package/esm/calendar/calendar-core.js

@@ -18,6 +18,9 @@ export class CalendarCore {
         this._month = new Date().getMonth();
         this._year = new Date().getFullYear();
         this._showToday = true;
+        this._showYesterday = true;
+        this._showLastSevenDays = true;
+        this._showLastThirtyDays = true;
         this._showOtherMonths = false;
         this._fixedHeight = false;
         this._events = [];
@@ -40,6 +43,9 @@ export class CalendarCore {
         this._showHeader = true;
         this._clearButton = false;
         this._todayButton = false;
+        this._yesterdayButton = false;
+        this._lastSevenDaysButton = false;
+        this._lastThirtyDaysButton = false;
         // Menu
         this._view = 'date';
         this._menuAnimation = 'scale';
@@ -66,6 +72,9 @@ export class CalendarCore {
         this._preventFocusListener = evt => evt.preventDefault();
         this._previousButtonListener = () => this._onPreviousButtonClicked();
         this._todayButtonListener = () => this._onTodayClicked();
+        this._yesterdayButtonListener = () => this._onYesterdayClicked();
+        this._lastSevenDaysButtonListener = () => this._onLastSevenDaysClicked();
+        this._lastThirtyDaysButtonListener = () => this._onLastThirtyDaysClicked();
         this._yearButtonListener = () => this._onYearButtonClicked();
     }
     initialize() {
@@ -77,6 +86,9 @@ export class CalendarCore {
         this._applyFixedHeight();
         this._applyReadOnly();
         this._applyShowToday();
+        this._applyShowYesterday();
+        this._applyShowLastSevenDays();
+        this._applyShowLastThirtyDays();
         this._applyPreventFocus();
         this._applyShowHeader();
         this._applyMonth();
@@ -86,6 +98,9 @@ export class CalendarCore {
         this._applyLocale();
         this._applyClearButton();
         this._applyTodayButton();
+        this._applyYesterdayButton();
+        this._applyLastSevenDaysButton();
+        this._applyLastThirtyDaysButton();
         this._applyFirstDayOfWeek();
         this._applyShowOtherMonths();
         this._createDateView();
@@ -415,6 +430,15 @@ export class CalendarCore {
     _onTodayClicked() {
         this.today();
     }
+    _onYesterdayClicked() {
+        this.yesterday();
+    }
+    _onLastSevenDaysClicked() {
+        this.lastSevenDays();
+    }
+    _onLastThirtyDaysClicked() {
+        this.lastThirtyDays();
+    }
     /** Attempts to the month and year of the value in single mode, then emits a selection event  */
     _trySetValueMonthAndYear(month, year, type = 'date') {
         if (!this.selectionFollowsMonth || this._mode !== 'single' || !this._value?.length) {
@@ -1360,7 +1384,7 @@ export class CalendarCore {
         if (!this._clearButton) {
             this._adapter.unregisterClearButtonListener(this._clearButtonListener);
             this._adapter.removeClearButton();
-            if (!this._todayButton) {
+            if (!this._todayButton && !this._yesterdayButton && !this._lastSevenDaysButton && !this._lastThirtyDaysButton) {
                 this._adapter.removeFooter();
             }
         }
@@ -1657,7 +1681,7 @@ export class CalendarCore {
         if (!this._todayButton) {
             this._adapter.unregisterTodayButtonListener(this._todayButtonListener);
             this._adapter.removeTodayButton();
-            if (!this._clearButton) {
+            if (!this._clearButton && !this._yesterdayButton && !this._lastSevenDaysButton && !this._lastThirtyDaysButton) {
                 this._adapter.removeFooter();
             }
         }
@@ -1667,6 +1691,63 @@ export class CalendarCore {
             this._adapter.registerTodayButtonListener(this._todayButtonListener);
         }
     }
+    _applyShowYesterday() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.SHOW_YESTERDAY, this._showYesterday);
+        this._adapter.setContainerClass(CALENDAR_CONSTANTS.classes.SHOW_YESTERDAY, this._showYesterday);
+    }
+    _applyYesterdayButton() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.YESTERDAY_BUTTON, true, this._yesterdayButton.toString());
+        if (!this._yesterdayButton) {
+            this._adapter.unregisterYesterdayButtonListener(this._yesterdayButtonListener);
+            this._adapter.removeYesterdayButton();
+            if (!this._clearButton && !this._todayButton && !this._lastSevenDaysButton && !this._lastThirtyDaysButton) {
+                this._adapter.removeFooter();
+            }
+        }
+        else {
+            this._adapter.setFooter();
+            this._adapter.setYesterdayButton();
+            this._adapter.registerYesterdayButtonListener(this._yesterdayButtonListener);
+        }
+    }
+    _applyShowLastSevenDays() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.SHOW_LAST_SEVEN_DAYS, this._showLastSevenDays);
+        this._adapter.setContainerClass(CALENDAR_CONSTANTS.classes.SHOW_LAST_SEVEN_DAYS, this._showLastSevenDays);
+    }
+    _applyLastSevenDaysButton() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.LAST_SEVEN_DAYS_BUTTON, true, this._lastSevenDaysButton.toString());
+        if (!this._lastSevenDaysButton) {
+            this._adapter.unregisterLastSevenDaysButtonListener(this._lastSevenDaysButtonListener);
+            this._adapter.removeLastSevenDaysButton();
+            if (!this._clearButton && !this._todayButton && !this._yesterdayButton) {
+                this._adapter.removeFooter();
+            }
+        }
+        else {
+            this._adapter.setFooter();
+            this._adapter.setLastSevenDaysButton();
+            this._adapter.registerLastSevenDaysButtonListener(this._lastSevenDaysButtonListener);
+        }
+    }
+    _applyShowLastThirtyDays() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.SHOW_LAST_THIRTY_DAYS, this._showLastThirtyDays);
+        this._adapter.setContainerClass(CALENDAR_CONSTANTS.classes.SHOW_LAST_THIRTY_DAYS, this._showLastThirtyDays);
+    }
+    _applyLastThirtyDaysButton() {
+        this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.LAST_THIRTY_DAYS_BUTTON, true, this._lastThirtyDaysButton.toString());
+        if (!this._lastThirtyDaysButton) {
+            this._adapter.unregisterLastThirtyDaysButtonListener(this._lastThirtyDaysButtonListener);
+            this._adapter.removeLastThirtyDaysButton();
+            if (!this._clearButton && !this._todayButton && !this._yesterdayButton && !this.lastSevenDaysButton) {
+                this._adapter.removeFooter();
+            }
+        }
+        else {
+            this._adapter.setFooter();
+            this._adapter.setLastThirtyDaysButton();
+            this._adapter.registerLastThirtyDaysButtonListener(this._lastThirtyDaysButtonListener);
+        }
+    }
     _applyTooltipBuilder() {
         if (this._view === 'date') {
             this._dates.forEach(d => {
@@ -2065,6 +2146,99 @@ export class CalendarCore {
     set todayCallback(value) {
         this._todayCallback = value;
     }
+    /** Get/set show yesterday */
+    get showYesterday() {
+        return this._showYesterday;
+    }
+    set showYesterday(value) {
+        if (this._showYesterday !== value) {
+            this._showYesterday = value;
+            if (this._isInitialized) {
+                this._applyShowYesterday();
+            }
+        }
+    }
+    /** Get/set whether to show the yesterday button */
+    get yesterdayButton() {
+        return this._yesterdayButton;
+    }
+    set yesterdayButton(value) {
+        if (this._yesterdayButton !== value) {
+            this._yesterdayButton = value;
+            if (this._isInitialized) {
+                this._applyYesterdayButton();
+            }
+        }
+    }
+    /* Get/set the yesterday button callback */
+    get yesterdayCallback() {
+        return this._yesterdayCallback;
+    }
+    set yesterdayCallback(value) {
+        this._yesterdayCallback = value;
+    }
+    /** Get/set show last seven days */
+    get showLastSevenDays() {
+        return this._showLastSevenDays;
+    }
+    set showLastSevenDays(value) {
+        if (this._showLastSevenDays !== value) {
+            this._showLastSevenDays = value;
+            if (this._isInitialized) {
+                this._applyShowLastSevenDays();
+            }
+        }
+    }
+    /** Get/set whether to show the last seven days button */
+    get lastSevenDaysButton() {
+        return this._lastSevenDaysButton;
+    }
+    set lastSevenDaysButton(value) {
+        if (this._lastSevenDaysButton !== value) {
+            this._lastSevenDaysButton = value;
+            if (this._isInitialized) {
+                this._applyLastSevenDaysButton();
+            }
+        }
+    }
+    /* Get/set the last seven days button callback */
+    get lastSevenDaysCallback() {
+        return this._lastSevenDaysCallback;
+    }
+    set lastSevenDaysCallback(value) {
+        this._lastSevenDaysCallback = value;
+    }
+    /** Get/set show last thirty days */
+    get showLastThirtyDays() {
+        return this._showLastThirtyDays;
+    }
+    set showLastThirtyDays(value) {
+        if (this._showLastThirtyDays !== value) {
+            this._showLastThirtyDays = value;
+            if (this._isInitialized) {
+                this._applyShowLastThirtyDays();
+            }
+        }
+    }
+    /** Get/set whether to show the last thirty days button */
+    get lastThirtyDaysButton() {
+        return this._lastThirtyDaysButton;
+    }
+    set lastThirtyDaysButton(value) {
+        if (this._lastThirtyDaysButton !== value) {
+            this._lastThirtyDaysButton = value;
+            if (this._isInitialized) {
+                this._applyLastThirtyDaysButton();
+            }
+        }
+    }
+    /* Get/set the last thirty days button callback */
+    get lastThirtyDaysCallback() {
+        return this._lastThirtyDaysCallback;
+    }
+    set lastThirtyDaysCallback(value) {
+        this._lastThirtyDaysCallback = value;
+    }
     /** Get/set the tooltip builder */
     get tooltipBuilder() {
         return this._tooltipBuilder;
@@ -2213,11 +2387,55 @@ export class CalendarCore {
     today() {
         const today = new Date();
         today.setHours(0, 0, 0, 0);
+        const endOfToday = new Date();
+        endOfToday.setHours(23, 59, 59, 0);
         this._goToDate(today, true);
         if (this._todayCallback) {
             this._todayCallback();
         }
     }
+    /** Go to yesterday */
+    yesterday() {
+        const today = new Date();
+        const yesterdayFrom = new Date(today.setDate(today.getDate() - 1));
+        yesterdayFrom.setHours(0, 0, 0, 0);
+        const yesterdayTo = new Date(yesterdayFrom);
+        yesterdayTo.setHours(23, 59, 59, 0);
+        const dateRange = [yesterdayFrom, yesterdayTo];
+        this._adapter.setRange(dateRange);
+        this._goToDate(yesterdayFrom, true);
+        if (this._yesterdayCallback) {
+            this._yesterdayCallback();
+        }
+    }
+    /** Go to last seven days */
+    lastSevenDays() {
+        const today = new Date();
+        const lastSevenDaysFrom = new Date(today.setDate(today.getDate() - 7));
+        lastSevenDaysFrom.setHours(0, 0, 0, 0);
+        const lastSevenDaysTo = new Date();
+        lastSevenDaysTo.setHours(23, 59, 59, 0);
+        const dateRange = [lastSevenDaysFrom, lastSevenDaysTo];
+        this._adapter.setRange(dateRange);
+        this._applyValue(dateRange);
+        if (this._lastSevenDaysCallback) {
+            this._lastSevenDaysCallback();
+        }
+    }
+    /** Go to last thirty days */
+    lastThirtyDays() {
+        const today = new Date();
+        const lastThirtyDaysFrom = new Date(today.setDate(today.getDate() - 30));
+        lastThirtyDaysFrom.setHours(0, 0, 0, 0);
+        const lastThirtyDaysTo = new Date();
+        lastThirtyDaysTo.setHours(23, 59, 59, 0);
+        const dateRange = [lastThirtyDaysFrom, lastThirtyDaysTo];
+        this._adapter.setRange(dateRange);
+        this._applyValue(dateRange);
+        if (this._lastThirtyDaysCallback) {
+            this._lastThirtyDaysCallback();
+        }
+    }
     /** Toggles a date selected or unselected */
     toggleDate(date, force) {
         this._onDateSelected(date);

package/esm/calendar/calendar-dom-utils.d.ts

@@ -38,6 +38,12 @@ export declare function getFooter(): HTMLElement;
 export declare function getClearButton(): HTMLElement;
 /** Returns a today button. */
 export declare function getTodayButton(): HTMLElement;
+/** Returns a yesterday button. */
+export declare function getYesterdayButton(): HTMLElement;
+/** Returns a last seven days button. */
+export declare function getLastSevenDaysButton(): HTMLElement;
+/** Returns a last thirty days button. */
+export declare function getLastThirtyDaysButton(): HTMLElement;
 /** Checks whether an event originated from a date element, returning the element if it did. */
 export declare function eventIncludesDate(evt: Event, includeDisabled?: boolean): HTMLElement | null;
 /** Checks whether an event originated from an element with the given id, returning the element if it did. */

package/esm/calendar/calendar-dom-utils.js

@@ -270,6 +270,42 @@ export function getTodayButton() {
     todayButton.appendChild(slot);
     return todayButton;
 }
+/** Returns a yesterday button. */
+export function getYesterdayButton() {
+    const yesterdayButton = document.createElement('forge-button');
+    yesterdayButton.id = CALENDAR_CONSTANTS.ids.YESTERDAY_BUTTON;
+    yesterdayButton.setAttribute('part', CALENDAR_CONSTANTS.parts.YESTERDAY_BUTTON);
+    yesterdayButton.type = 'button';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.YESTERDAY_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_YESTERDAY_BUTTON_TEXT;
+    yesterdayButton.appendChild(slot);
+    return yesterdayButton;
+}
+/** Returns a last seven days button. */
+export function getLastSevenDaysButton() {
+    const lastSevenDaysButton = document.createElement('forge-button');
+    lastSevenDaysButton.id = CALENDAR_CONSTANTS.ids.LAST_SEVEN_DAYS_BUTTON;
+    lastSevenDaysButton.setAttribute('part', CALENDAR_CONSTANTS.parts.LAST_SEVEN_DAYS_BUTTON);
+    lastSevenDaysButton.type = 'button';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.LAST_SEVEN_DAYS_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_LAST_SEVEN_DAYS_BUTTON_TEXT;
+    lastSevenDaysButton.appendChild(slot);
+    return lastSevenDaysButton;
+}
+/** Returns a last thirty days button. */
+export function getLastThirtyDaysButton() {
+    const lastThirtyDaysButton = document.createElement('forge-button');
+    lastThirtyDaysButton.id = CALENDAR_CONSTANTS.ids.LAST_THIRTY_DAYS_BUTTON;
+    lastThirtyDaysButton.setAttribute('part', CALENDAR_CONSTANTS.parts.LAST_THIRTY_DAYS_BUTTON);
+    lastThirtyDaysButton.type = 'button';
+    const slot = document.createElement('slot');
+    slot.name = CALENDAR_CONSTANTS.slots.LAST_THIRTY_DAYS_BUTTON_TEXT;
+    slot.innerText = CALENDAR_CONSTANTS.strings.DEFAULT_LAST_THIRTY_DAYS_BUTTON_TEXT;
+    lastThirtyDaysButton.appendChild(slot);
+    return lastThirtyDaysButton;
+}
 /** Checks whether an event originated from a date element, returning the element if it did. */
 export function eventIncludesDate(evt, includeDisabled) {
     const element = getEventPath(evt).find(p => p.classList && p.classList.contains(CALENDAR_CONSTANTS.classes.DATE));

package/esm/calendar/calendar.d.ts

@@ -17,11 +17,20 @@ export interface ICalendarComponent extends ICalendarBase, IBaseComponent {
     menuAnimation: CalendarMenuAnimationType;
     clearButton: boolean;
     todayButton: boolean;
+    yesterdayButton: boolean;
+    lastSevenDaysButton: boolean;
+    lastThirtyDaysButton: boolean;
     clearCallback: (() => void) | undefined;
     todayCallback: (() => void) | undefined;
+    yesterdayCallback: (() => void) | undefined;
+    lastSevenDaysCallback: (() => void) | undefined;
+    lastThirtyDaysCallback: (() => void) | undefined;
     tooltipBuilder: CalendarTooltipBuilder | undefined;
     clear(): void;
     today(): void;
+    yesterday(): void;
+    lastSevenDays(): void;
+    lastThirtyDays(): void;
     selectDate(date: Date, setFocus?: boolean): void;
     deselectDate(date: Date): void;
     toggleDate(date: Date, force?: boolean): void;
@@ -74,6 +83,15 @@ declare global {
  * @property {boolean} [showToday=true] - Whether to show the today button.
  * @property {boolean} [todayButton=false] - Whether to show a button to select today.
  * @property {() => void | undefined} todayCallback - Callback function to call when the today button is clicked.
+ * @property {boolean} [showYesterday=true] - Whether to show the yesterday button.
+ * @property {boolean} [yesterdayButton=false] - Whether to show a button to select yesterday.
+ * @property {() => void | undefined} yesterdayCallback - Callback function to call when the yesterday button is clicked.
+ * @property {boolean} [showLastSevenDays=true] - Whether to show the last seven days button.
+ * @property {boolean} [lastSevenDaysButton=false] - Whether to show a button to select last seven days.
+ * @property {() => void | undefined} lastSevenDaysCallback - Callback function to call when the last seven days button is clicked.
+ * @property {boolean} [showLastThirtyDays=true] - Whether to show the last thirty days button.
+ * @property {boolean} [lastThirtyDaysButton=false] - Whether to show a button to select last thirty days.
+ * @property {() => void | undefined} lastThirtyDaysCallback - Callback function to call when the last thirty days button is clicked.
  * @property {CalendarTooltipBuilder | undefined} tooltipBuilder - Function to build the tooltip content.
  * @property {Date | Date[] | DateRange | null | undefined} [value=[]] - The selected date(s).
  * @property {CalendarView} [view="date"] - The view of the calendar.
@@ -99,7 +117,13 @@ declare global {
  * @attribute {boolean} [show-header=true] - Whether to show the header.
  * @attribute {boolean} [show-other-months=false] - Whether to show days from other months.
  * @attribute {boolean} [show-today=true] - Whether to show the today button.
- * @attribute {boolean} [today-button=fakse] - Whether to show a button to select today.
+ * @attribute {boolean} [today-button=false] - Whether to show a button to select today.
+ * @attribute {boolean} [show-yesterday=true] - Whether to show the yesterday button.
+ * @attribute {boolean} [yesterday-button=false] - Whether to show a button to select yesterday.
+ * @attribute {boolean} [show-last-seven-days=true] - Whether to show the last seven days button.
+ * @attribute {boolean} [last-seven-days-button=false] - Whether to show a button to select last seven days.
+ * @attribute {boolean} [show-last-thirty-days=true] - Whether to show the last thirty days button.
+ * @attribute {boolean} [last-thirty-days-button=false] - Whether to show a button to select last thirty days.
  * @attribute {CalendarView} [view="date"] - The view of the calendar.
  * @attribute {number} [year=<current year>] - The year to display.
  * @attribute {string} [year-range="-50:+50"] - The range of years to display.
@@ -110,6 +134,9 @@ declare global {
  * @fires {CustomEvent<CalendarView>} forge-calendar-view-change - Event fired when the view changes.
  *
  * @slot today-button-text - Text to display in the today button.
+ * @slot yesterday-button-text - Text to display in the yesterday button.
+ * @slot last-seven-days-button-text - Text to display in the last seven days button.
+ * @slot last-thirty-days-button-text - Text to display in the last thirty days button.
  * @slot clear-button-text - Text to display in the clear button.
  * @slot next-month-button-text - Text to display in the next month button's tooltip.
  * @slot previous-month-button-text - Text to display in the previous month button's tooltip.
@@ -156,6 +183,15 @@ export declare class CalendarComponent extends BaseComponent implements ICalenda
     showToday: boolean;
     todayButton: boolean;
     todayCallback: (() => void) | undefined;
+    showYesterday: boolean;
+    yesterdayButton: boolean;
+    yesterdayCallback: (() => void) | undefined;
+    showLastSevenDays: boolean;
+    lastSevenDaysButton: boolean;
+    lastSevenDaysCallback: (() => void) | undefined;
+    showLastThirtyDays: boolean;
+    lastThirtyDaysButton: boolean;
+    lastThirtyDaysCallback: (() => void) | undefined;
     tooltipBuilder: CalendarTooltipBuilder | undefined;
     value: Date | Date[] | DateRange | null | undefined;
     view: CalendarView;
@@ -194,6 +230,9 @@ export declare class CalendarComponent extends BaseComponent implements ICalenda
      * Sets the calendar to today.
      */
     today(): void;
+    yesterday(): void;
+    lastSevenDays(): void;
+    lastThirtyDays(): void;
     /**
      * Toggles a date selection.
      */

package/esm/calendar/calendar.js

@@ -18,7 +18,7 @@ import { StateLayerComponent } from '../state-layer';
 import { FocusIndicatorComponent } from '../focus-indicator';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-calendar\" part=\"root\"><div id=\"view\" class=\"forge-calendar__view\" part=\"view\"><div id=\"date-view\" class=\"forge-calendar__date-view\" role=\"grid\" part=\"date-view\"><div role=\"rowgroup\" part=\"date-view-container\"><div id=\"day-row\" class=\"forge-calendar__date-view__row\" role=\"row\" part=\"date-view-row\"></div></div><div id=\"date-grid\" class=\"forge-calendar__date-grid\" role=\"rowgroup\" part=\"date-grid-container\"></div></div><forge-calendar-menu id=\"menu\" part=\"calendar-menu\"></forge-calendar-menu></div></div></template>';
-const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fit-content;position:relative}.forge-calendar__header{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__footer{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__view{position:relative}.forge-calendar__date-view{display:block}.forge-calendar__date-view__row{display:grid;grid-template-columns:repeat(7,1fr)}.forge-calendar__date-grid{display:grid}.forge-calendar__day{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);display:flex;justify-content:center;align-items:center;min-width:0;padding:0;font-weight:700;user-select:none}.forge-calendar__day::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date{margin-top:var(--forge-calendar-row-gap,2px);min-width:0;padding:0;border-radius:50%;position:relative;outline:0;cursor:default;user-select:none}.forge-calendar__date::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date forge-focus-indicator{--forge-focus-indicator-shape:50%}.forge-calendar__date__inner{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);top:calc(2px / 2);left:calc(2px / 2);display:flex;justify-content:center;align-items:center;border-radius:inherit;box-sizing:border-box}.forge-calendar--show-today .forge-calendar__date--today:not([disabled]){color:var(--forge-theme-primary,#3f51b5);border-color:var(--forge-theme-primary,#3f51b5)}.forge-calendar--show-today .forge-calendar__date--today .forge-calendar__date__inner{border-color:inherit;border-width:1px;border-style:solid;font-weight:700}.forge-calendar--show-today .forge-calendar__date--today.forge-calendar__date--selected{color:var(--forge-theme-on-primary,#fff)}.forge-calendar:not(.forge-calendar--readonly) .forge-calendar__date:not([disabled]){cursor:pointer}.forge-calendar__date--selected:not([disabled]) .forge-calendar__date__inner{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar__date--selected[disabled] .forge-calendar__date__inner{background-color:var(--forge-theme-primary-container-minimum,#f7f8fc);color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container)}.forge-calendar__date[disabled]{color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date-spacer{pointer-events:none}.forge-calendar--fixed-height .forge-calendar__date-spacer{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__range:not(.forge-calendar__date-spacer) .forge-calendar__range__target{background-color:var(--forge-theme-primary,#3f51b5);position:absolute;width:100%;height:100%;opacity:.14;border-radius:0}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--start .forge-calendar__range__target{border-top-left-radius:50%;border-bottom-left-radius:50%}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--end .forge-calendar__range__target{border-top-right-radius:50%;border-bottom-right-radius:50%}.forge-calendar__range:not(.forge-calendar__range--start):first-of-type .forge-calendar__range__target{border-top-left-radius:4px;border-bottom-left-radius:4px}.forge-calendar__range:not(.forge-calendar__range--end):last-of-type .forge-calendar__range__target{border-top-right-radius:4px;border-bottom-right-radius:4px}.forge-calendar--allow-single-date-range .forge-calendar__range--start.forge-calendar__range--end .forge-calendar__range__target{transition:transform .2s;transform:scale(1.15);transform-origin:center}.forge-calendar__event{font-size:var(--forge-calendar-event-dot-size, 12px)}.forge-calendar__event[data-event-theme=primary]{color:var(--forge-calendar-theme-event-primary-accent,#3f51b5)}.forge-calendar__event[data-event-theme=secondary]{color:var(--forge-calendar-theme-event-secondary-accent,#ffc107)}.forge-calendar__event[data-event-theme=blue]{color:var(--forge-calendar-theme-event-blue-accent,#2196f3)}.forge-calendar__event[data-event-theme=light-green]{color:var(--forge-calendar-theme-event-light-green-accent,#8bc34a)}.forge-calendar__event[data-event-theme=cyan]{color:var(--forge-calendar-theme-event-cyan-accent,#00bcd4)}.forge-calendar__event[data-event-theme=teal]{color:var(--forge-calendar-theme-event-teal-accent,#009688)}.forge-calendar__event[data-event-theme=orange]{color:var(--forge-calendar-theme-event-orange-accent,#ff9800)}.forge-calendar__event[data-event-theme=blue-grey]{color:var(--forge-calendar-theme-event-blue-grey-accent,#607d8b)}.forge-calendar__event[data-event-theme=grey]{color:var(--forge-calendar-theme-event-grey-accent,#9e9e9e)}.forge-calendar__event[data-event-theme=red]{color:var(--forge-calendar-theme-event-red-accent,#f44336)}.forge-calendar__event[data-event-theme=pink]{color:var(--forge-calendar-theme-event-pink-accent,#e91e63)}.forge-calendar__event[data-event-theme=purple]{color:var(--forge-calendar-theme-event-purple-accent,#9c27b0)}.forge-calendar__event[data-event-theme=light-blue]{color:var(--forge-calendar-theme-event-light-blue-accent,#03a9f4)}.forge-calendar__event[data-event-theme=deep-purple]{color:var(--forge-calendar-theme-event-deep-purple-accent,#673ab7)}.forge-calendar__event[data-event-theme=green]{color:var(--forge-calendar-theme-event-green-accent,#4caf50)}.forge-calendar__event[data-event-theme=lime]{color:var(--forge-calendar-theme-event-lime-accent,#cddc39)}.forge-calendar__event[data-event-theme=yellow]{color:var(--forge-calendar-theme-event-yellow-accent,#ffeb3b)}.forge-calendar__event[data-event-theme=brown]{color:var(--forge-calendar-theme-event-brown-accent,#795548)}.forge-calendar__event[data-event-theme=deep-orange]{color:var(--forge-calendar-theme-event-deep-orange-accent,#ff5722)}.forge-calendar__date[disabled] .forge-calendar__event{opacity:.14}.forge-calendar__event--overflow{background-color:var(--forge-theme-surface,#fff);color:var(--forge-theme-on-surface,#000);border-radius:50%}.forge-calendar__event__wrapper{display:flex;justify-content:center;gap:2px;position:absolute;bottom:0;left:0;width:100%;padding-bottom:2px;pointer-events:none}.forge-calendar__date-spacer .forge-calendar__event__wrapper{display:none}.forge-calendar--rtl .forge-calendar__header forge-icon-button forge-icon{transform:rotate(180deg)}#accessible-header{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}#month-button forge-icon{transition:transform .2s}.forge-calendar--month-menu-open #month-button forge-icon{transform:rotate(180deg)}#year-button forge-icon{transition:transform .2s}.forge-calendar--year-menu-open #year-button forge-icon{transform:rotate(180deg)}:host{--forge-calendar-event-stroke-color:var(--forge-theme-surface, #ffffff);display:inline-block}:host([hidden]){display:none}:host([forge-popover-context=true]){--forge-calendar-event-stroke-color:var(--forge-theme-surface-bright, #ffffff)}';
+const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fit-content;position:relative}.forge-calendar__header{padding:var(--forge-calendar-controls-padding,0);display:flex;align-items:center;justify-content:space-between}.forge-calendar__footer{padding:var(--forge-calendar-controls-padding,0);display:grid;grid-template-columns:33% 33% 33%;grid-auto-flow:row;justify-content:space-between}.forge-calendar__view{position:relative}.forge-calendar__date-view{display:block}.forge-calendar__date-view__row{display:grid;grid-template-columns:repeat(7,1fr)}.forge-calendar__date-grid{display:grid}.forge-calendar__day{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);display:flex;justify-content:center;align-items:center;min-width:0;padding:0;font-weight:700;user-select:none}.forge-calendar__day::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date{margin-top:var(--forge-calendar-row-gap,2px);min-width:0;padding:0;border-radius:50%;position:relative;outline:0;cursor:default;user-select:none}.forge-calendar__date::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__date forge-focus-indicator{--forge-focus-indicator-shape:50%}.forge-calendar__date__inner{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);top:calc(2px / 2);left:calc(2px / 2);display:flex;justify-content:center;align-items:center;border-radius:inherit;box-sizing:border-box}.forge-calendar--show-today .forge-calendar__date--today:not([disabled]){color:var(--forge-theme-primary,#3f51b5);border-color:var(--forge-theme-primary,#3f51b5)}.forge-calendar--show-today .forge-calendar__date--today .forge-calendar__date__inner{border-color:inherit;border-width:1px;border-style:solid;font-weight:700}.forge-calendar--show-today .forge-calendar__date--today.forge-calendar__date--selected{color:var(--forge-theme-on-primary,#fff)}.forge-calendar:not(.forge-calendar--readonly) .forge-calendar__date:not([disabled]){cursor:pointer}.forge-calendar__date--selected:not([disabled]) .forge-calendar__date__inner{background-color:var(--forge-theme-primary,#3f51b5);color:var(--forge-theme-on-primary,#fff)}.forge-calendar__date--selected[disabled] .forge-calendar__date__inner{background-color:var(--forge-theme-primary-container-minimum,#f7f8fc);color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date--selected forge-focus-indicator{--forge-focus-indicator-color:var(--forge-theme-primary-container)}.forge-calendar__date[disabled]{color:var(--forge-theme-text-low,rgba(0,0,0,.38))}.forge-calendar__date-spacer{pointer-events:none}.forge-calendar--fixed-height .forge-calendar__date-spacer{margin-top:var(--forge-calendar-row-gap,2px)}.forge-calendar--fixed-height .forge-calendar__date-spacer::after{float:left;padding-top:100%;content:\"\"}.forge-calendar__range:not(.forge-calendar__date-spacer) .forge-calendar__range__target{background-color:var(--forge-theme-primary,#3f51b5);position:absolute;width:100%;height:100%;opacity:.14;border-radius:0}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--start .forge-calendar__range__target{border-top-left-radius:50%;border-bottom-left-radius:50%}.forge-calendar__range:not(.forge-calendar__date-spacer).forge-calendar__range--end .forge-calendar__range__target{border-top-right-radius:50%;border-bottom-right-radius:50%}.forge-calendar__range:not(.forge-calendar__range--start):first-of-type .forge-calendar__range__target{border-top-left-radius:4px;border-bottom-left-radius:4px}.forge-calendar__range:not(.forge-calendar__range--end):last-of-type .forge-calendar__range__target{border-top-right-radius:4px;border-bottom-right-radius:4px}.forge-calendar--allow-single-date-range .forge-calendar__range--start.forge-calendar__range--end .forge-calendar__range__target{transition:transform .2s;transform:scale(1.15);transform-origin:center}.forge-calendar__event{font-size:var(--forge-calendar-event-dot-size, 12px)}.forge-calendar__event[data-event-theme=primary]{color:var(--forge-calendar-theme-event-primary-accent,#3f51b5)}.forge-calendar__event[data-event-theme=secondary]{color:var(--forge-calendar-theme-event-secondary-accent,#ffc107)}.forge-calendar__event[data-event-theme=blue]{color:var(--forge-calendar-theme-event-blue-accent,#2196f3)}.forge-calendar__event[data-event-theme=light-green]{color:var(--forge-calendar-theme-event-light-green-accent,#8bc34a)}.forge-calendar__event[data-event-theme=cyan]{color:var(--forge-calendar-theme-event-cyan-accent,#00bcd4)}.forge-calendar__event[data-event-theme=teal]{color:var(--forge-calendar-theme-event-teal-accent,#009688)}.forge-calendar__event[data-event-theme=orange]{color:var(--forge-calendar-theme-event-orange-accent,#ff9800)}.forge-calendar__event[data-event-theme=blue-grey]{color:var(--forge-calendar-theme-event-blue-grey-accent,#607d8b)}.forge-calendar__event[data-event-theme=grey]{color:var(--forge-calendar-theme-event-grey-accent,#9e9e9e)}.forge-calendar__event[data-event-theme=red]{color:var(--forge-calendar-theme-event-red-accent,#f44336)}.forge-calendar__event[data-event-theme=pink]{color:var(--forge-calendar-theme-event-pink-accent,#e91e63)}.forge-calendar__event[data-event-theme=purple]{color:var(--forge-calendar-theme-event-purple-accent,#9c27b0)}.forge-calendar__event[data-event-theme=light-blue]{color:var(--forge-calendar-theme-event-light-blue-accent,#03a9f4)}.forge-calendar__event[data-event-theme=deep-purple]{color:var(--forge-calendar-theme-event-deep-purple-accent,#673ab7)}.forge-calendar__event[data-event-theme=green]{color:var(--forge-calendar-theme-event-green-accent,#4caf50)}.forge-calendar__event[data-event-theme=lime]{color:var(--forge-calendar-theme-event-lime-accent,#cddc39)}.forge-calendar__event[data-event-theme=yellow]{color:var(--forge-calendar-theme-event-yellow-accent,#ffeb3b)}.forge-calendar__event[data-event-theme=brown]{color:var(--forge-calendar-theme-event-brown-accent,#795548)}.forge-calendar__event[data-event-theme=deep-orange]{color:var(--forge-calendar-theme-event-deep-orange-accent,#ff5722)}.forge-calendar__date[disabled] .forge-calendar__event{opacity:.14}.forge-calendar__event--overflow{background-color:var(--forge-theme-surface,#fff);color:var(--forge-theme-on-surface,#000);border-radius:50%}.forge-calendar__event__wrapper{display:flex;justify-content:center;gap:2px;position:absolute;bottom:0;left:0;width:100%;padding-bottom:2px;pointer-events:none}.forge-calendar__date-spacer .forge-calendar__event__wrapper{display:none}.forge-calendar--rtl .forge-calendar__header forge-icon-button forge-icon{transform:rotate(180deg)}#accessible-header{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}#month-button forge-icon{transition:transform .2s}.forge-calendar--month-menu-open #month-button forge-icon{transform:rotate(180deg)}#year-button forge-icon{transition:transform .2s}.forge-calendar--year-menu-open #year-button forge-icon{transform:rotate(180deg)}:host{--forge-calendar-event-stroke-color:var(--forge-theme-surface, #ffffff);display:inline-block}:host([hidden]){display:none}:host([forge-popover-context=true]){--forge-calendar-event-stroke-color:var(--forge-theme-surface-bright, #ffffff)}';
 /**
  * @tag forge-calendar
  *
@@ -52,6 +52,15 @@ const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fi
  * @property {boolean} [showToday=true] - Whether to show the today button.
  * @property {boolean} [todayButton=false] - Whether to show a button to select today.
  * @property {() => void | undefined} todayCallback - Callback function to call when the today button is clicked.
+ * @property {boolean} [showYesterday=true] - Whether to show the yesterday button.
+ * @property {boolean} [yesterdayButton=false] - Whether to show a button to select yesterday.
+ * @property {() => void | undefined} yesterdayCallback - Callback function to call when the yesterday button is clicked.
+ * @property {boolean} [showLastSevenDays=true] - Whether to show the last seven days button.
+ * @property {boolean} [lastSevenDaysButton=false] - Whether to show a button to select last seven days.
+ * @property {() => void | undefined} lastSevenDaysCallback - Callback function to call when the last seven days button is clicked.
+ * @property {boolean} [showLastThirtyDays=true] - Whether to show the last thirty days button.
+ * @property {boolean} [lastThirtyDaysButton=false] - Whether to show a button to select last thirty days.
+ * @property {() => void | undefined} lastThirtyDaysCallback - Callback function to call when the last thirty days button is clicked.
  * @property {CalendarTooltipBuilder | undefined} tooltipBuilder - Function to build the tooltip content.
  * @property {Date | Date[] | DateRange | null | undefined} [value=[]] - The selected date(s).
  * @property {CalendarView} [view="date"] - The view of the calendar.
@@ -77,7 +86,13 @@ const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fi
  * @attribute {boolean} [show-header=true] - Whether to show the header.
  * @attribute {boolean} [show-other-months=false] - Whether to show days from other months.
  * @attribute {boolean} [show-today=true] - Whether to show the today button.
- * @attribute {boolean} [today-button=fakse] - Whether to show a button to select today.
+ * @attribute {boolean} [today-button=false] - Whether to show a button to select today.
+ * @attribute {boolean} [show-yesterday=true] - Whether to show the yesterday button.
+ * @attribute {boolean} [yesterday-button=false] - Whether to show a button to select yesterday.
+ * @attribute {boolean} [show-last-seven-days=true] - Whether to show the last seven days button.
+ * @attribute {boolean} [last-seven-days-button=false] - Whether to show a button to select last seven days.
+ * @attribute {boolean} [show-last-thirty-days=true] - Whether to show the last thirty days button.
+ * @attribute {boolean} [last-thirty-days-button=false] - Whether to show a button to select last thirty days.
  * @attribute {CalendarView} [view="date"] - The view of the calendar.
  * @attribute {number} [year=<current year>] - The year to display.
  * @attribute {string} [year-range="-50:+50"] - The range of years to display.
@@ -88,6 +103,9 @@ const styles = '.forge-calendar{width:var(--forge-calendar-width,100%);height:fi
  * @fires {CustomEvent<CalendarView>} forge-calendar-view-change - Event fired when the view changes.
  *
  * @slot today-button-text - Text to display in the today button.
+ * @slot yesterday-button-text - Text to display in the yesterday button.
+ * @slot last-seven-days-button-text - Text to display in the last seven days button.
+ * @slot last-thirty-days-button-text - Text to display in the last thirty days button.
  * @slot clear-button-text - Text to display in the clear button.
  * @slot next-month-button-text - Text to display in the next month button's tooltip.
  * @slot previous-month-button-text - Text to display in the previous month button's tooltip.
@@ -118,6 +136,12 @@ let CalendarComponent = class CalendarComponent extends BaseComponent {
             CALENDAR_CONSTANTS.attributes.SHOW_OTHER_MONTHS,
             CALENDAR_CONSTANTS.attributes.SHOW_TODAY,
             CALENDAR_CONSTANTS.attributes.TODAY_BUTTON,
+            CALENDAR_CONSTANTS.attributes.SHOW_YESTERDAY,
+            CALENDAR_CONSTANTS.attributes.YESTERDAY_BUTTON,
+            CALENDAR_CONSTANTS.attributes.SHOW_LAST_SEVEN_DAYS,
+            CALENDAR_CONSTANTS.attributes.LAST_SEVEN_DAYS_BUTTON,
+            CALENDAR_CONSTANTS.attributes.SHOW_LAST_THIRTY_DAYS,
+            CALENDAR_CONSTANTS.attributes.LAST_THIRTY_DAYS_BUTTON,
             CALENDAR_CONSTANTS.attributes.VIEW,
             CALENDAR_CONSTANTS.attributes.YEAR,
             CALENDAR_CONSTANTS.attributes.YEAR_RANGE
@@ -200,6 +224,24 @@ let CalendarComponent = class CalendarComponent extends BaseComponent {
             case CALENDAR_CONSTANTS.attributes.TODAY_BUTTON:
                 this.todayButton = coerceBoolean(newValue);
                 break;
+            case CALENDAR_CONSTANTS.attributes.SHOW_YESTERDAY:
+                this.showYesterday = coerceBoolean(newValue);
+                break;
+            case CALENDAR_CONSTANTS.attributes.YESTERDAY_BUTTON:
+                this.yesterdayButton = coerceBoolean(newValue);
+                break;
+            case CALENDAR_CONSTANTS.attributes.SHOW_LAST_SEVEN_DAYS:
+                this.showLastSevenDays = coerceBoolean(newValue);
+                break;
+            case CALENDAR_CONSTANTS.attributes.LAST_SEVEN_DAYS_BUTTON:
+                this.lastSevenDaysButton = coerceBoolean(newValue);
+                break;
+            case CALENDAR_CONSTANTS.attributes.SHOW_LAST_THIRTY_DAYS:
+                this.showLastThirtyDays = coerceBoolean(newValue);
+                break;
+            case CALENDAR_CONSTANTS.attributes.LAST_THIRTY_DAYS_BUTTON:
+                this.lastThirtyDaysButton = coerceBoolean(newValue);
+                break;
             case CALENDAR_CONSTANTS.attributes.VIEW:
                 this.view = newValue;
                 break;
@@ -259,6 +301,15 @@ let CalendarComponent = class CalendarComponent extends BaseComponent {
     today() {
         this._core.today();
     }
+    yesterday() {
+        this._core.yesterday();
+    }
+    lastSevenDays() {
+        this._core.lastSevenDays();
+    }
+    lastThirtyDays() {
+        this._core.lastThirtyDays();
+    }
     /**
      * Toggles a date selection.
      */
@@ -356,6 +407,33 @@ __decorate([
 __decorate([
     coreProperty()
 ], CalendarComponent.prototype, "todayCallback", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "showYesterday", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "yesterdayButton", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "yesterdayCallback", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "showLastSevenDays", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "lastSevenDaysButton", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "lastSevenDaysCallback", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "showLastThirtyDays", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "lastThirtyDaysButton", void 0);
+__decorate([
+    coreProperty()
+], CalendarComponent.prototype, "lastThirtyDaysCallback", void 0);
 __decorate([
     coreProperty()
 ], CalendarComponent.prototype, "tooltipBuilder", void 0);

package/esm/calendar/core/calendar-base.d.ts

@@ -22,6 +22,9 @@ export interface ICalendarBase {
     readonly: boolean;
     showOtherMonths: boolean;
     showToday: boolean;
+    showYesterday: boolean;
+    showLastSevenDays: boolean;
+    showLastThirtyDays: boolean;
     value: Date | Date[] | DateRange | null | undefined;
     weekendDays: DayOfWeek[] | null | undefined;
     year: number;

package/esm/calendar/core/date-range.d.ts

@@ -6,10 +6,12 @@
 export interface IDateRange {
     from?: Date;
     to?: Date;
+    rangeName?: string;
 }
 export declare class DateRange implements IDateRange {
     from?: Date;
     to?: Date;
+    rangeName?: string;
     constructor(range?: IDateRange | null);
     copy(): DateRange;
 }

package/esm/calendar/core/date-range.js

@@ -8,6 +8,7 @@ export class DateRange {
         if (range) {
             this.from = range.from ? new Date(range.from) : undefined;
             this.to = range.to ? new Date(range.to) : undefined;
+            this.rangeName = range.rangeName ? range.rangeName : undefined;
         }
     }
     copy() {

package/esm/date-picker/base/base-date-picker-adapter.js

@@ -173,9 +173,6 @@ export class BaseDatePickerAdapter extends BaseAdapter {
                 return;
             }
             const iconButtonElement = this._createToggleElement();
-            // if (textField.density === 'extra-small') {
-            //   iconButtonElement.density = 'small';
-            // }
             textField.appendChild(iconButtonElement);
             this._toggleElement = iconButtonElement;
         }