@tylertech/forge 2.0.0

package/esm/core/utils/date-utils.js

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isValidDate } from '@tylertech/forge-core';
+export const ISO_8601_REGEX = /^([\+-]?\d{4}(?!\d{2}\b))((-?)((0[1-9]|1[0-2])(\3([12]\d|0[1-9]|3[01]))?|W([0-4]\d|5[0-2])(-?[1-7])?|(00[1-9]|0[1-9]\d|[12]\d{2}|3([0-5]\d|6[1-6])))([T\s]((([01]\d|2[0-3])((:?)[0-5]\d)?|24\:?00)([\.,]\d+(?!:))?)?(\17[0-5]\d([\.,]\d+)?)?([zZ]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)?)?)?$/;
+export const ISO_TIMEZONE_REGEX = /a-z/i;
+const FUTURE_YEAR_COERCION = 10; // The number of years in the future to coerce two-digit years into current century
+/**
+ * Parses a date string value to a `Date` object in local time.
+ * @param str The date string value.
+ */
+export function parseDateString(value) {
+    value = value.replace(/_|\s/g, ''); // Remove potential extraneous characters
+    // We first check if this is a valid date in ISO 8601 format and return it if so
+    if (ISO_8601_REGEX.test(value)) {
+        const iso8601Date = new Date(value);
+        // This is an ISO string, but does it have a timezone? If not, we add current timezone offset
+        if (!ISO_TIMEZONE_REGEX.test(value)) {
+            iso8601Date.setMinutes(iso8601Date.getMinutes() + iso8601Date.getTimezoneOffset());
+        }
+        if (isValidDate(iso8601Date)) {
+            return iso8601Date;
+        }
+    }
+    let values = [];
+    // We accept dates with a "/" or "-" separator and in the format of MM/DD/YYYY
+    if (value.indexOf('/') !== -1) {
+        values = value.split('/');
+    }
+    else if (value.indexOf('-') !== -1) {
+        values = value.split('-');
+    }
+    else if ((value.length === 6 || value.length === 8) && !isNaN(+value)) {
+        values = [value.substring(0, 2), value.substring(2, 4), value.substring(4)];
+    }
+    const hasMonthDayYear = values.length === 3;
+    let [month, day, year] = values;
+    // Ensure are month and year values are coerced from 0 to 1 in case of incomplete entry
+    if (month === '0') {
+        month = '1';
+    }
+    if (day === '0') {
+        day = '1';
+    }
+    // Trap for the case where only 3 digit years are entered
+    if (typeof year === 'string' && year.length === 3) {
+        year = year.padEnd(4, '0');
+    }
+    if (hasMonthDayYear) {
+        const isValidMonthLength = month.length === 1 || month.length === 2;
+        const isValidDayLength = day.length === 1 || day.length === 2;
+        const isValidYearLength = year.length === 2 || year.length === 4;
+        if (!isValidMonthLength || !isValidDayLength || !isValidYearLength) {
+            return null;
+        }
+    }
+    else {
+        return null;
+    }
+    // Check if we need to coerce two-digit years to the four-digit equivalent
+    if (year.length === 2) {
+        const minYear = new Date().getFullYear() - (100 - FUTURE_YEAR_COERCION);
+        const maxYear = new Date().getFullYear() + FUTURE_YEAR_COERCION;
+        const minYearCentury = String(minYear).slice(0, 2);
+        const maxYearCentury = String(maxYear).slice(0, 2);
+        const normalizedMaxYear = +String(maxYear).slice(2);
+        year = +year <= normalizedMaxYear ? `${maxYearCentury}${year}` : `${minYearCentury}${year}`;
+    }
+    let numMonth = +month;
+    let numDay = +day;
+    const numYear = +year;
+    if (numMonth > 12) {
+        numMonth = 12;
+    }
+    const maxDaysInMonth = new Date(numYear, numMonth, 0).getDate();
+    if (numDay > maxDaysInMonth) {
+        numDay = maxDaysInMonth;
+    }
+    const parsedDate = new Date(numYear, numMonth - 1, numDay, 0, 0, 0, 0);
+    return isValidDate(parsedDate) ? parsedDate : null;
+}
+/**
+ * Formats a `Date` to a specified format.
+ * @param str The date string value.
+ */
+export function formatDate(date) {
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const year = date.getFullYear();
+    return [month, day, year].join('/');
+}
+/**
+ * Determines if two date objects are equal.
+ *
+ * Note: Time values are ignored.
+ * @param first The date to compare.
+ * @param second The date to compare the first date to.
+ * @returns A boolean whether the two dates are equivalent.
+ */
+export function isSameDate(first, second) {
+    if (!first && !second) {
+        return true;
+    }
+    else if (!first || !second) {
+        return false;
+    }
+    else if (!isValidDate(first) || !isValidDate(second)) {
+        return false;
+    }
+    return first.setHours(0, 0, 0, 0) === second.setHours(0, 0, 0, 0);
+}
+/**
+ * Returns the last date on a month.
+ *
+ * @param month The month.
+ * @param year The year of the month, needed for February otherwise optional.
+ * @returns The last date of the given month.
+ */
+export function getLastDateOfMonth(month, year) {
+    return new Date(year !== null && year !== void 0 ? year : 1970, month + 1, 0);
+}
+/**
+ * Returns the number of days in a month.
+ *
+ * @param month The month to find the length of.
+ * @param year The year to check within, needed for February otherwise optional.
+ * @returns The number of days in the month.
+ */
+export function getMonthLength(month, year) {
+    return getLastDateOfMonth(month, year).getDate();
+}

package/esm/core/utils/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './date-utils';
+export * from './svg-utils';
+export * from './time-utils';
+export * from './utils';

package/esm/core/utils/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './date-utils';
+export * from './svg-utils';
+export * from './time-utils';
+export * from './utils';

package/esm/core/utils/svg-utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Creates an SVG element from a string.
+ */
+export declare function createSvgFromString(svgContent: string, defaultViewBox?: string): SVGSVGElement | null;
+/**
+ * Determines if the provided element is a safe SVG to use.
+ * @param el The element reference to test.
+ */
+export declare function isSafeSvg(el: Element): boolean;

package/esm/core/utils/svg-utils.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Creates an SVG element from a string.
+ */
+export function createSvgFromString(svgContent, defaultViewBox) {
+    const div = document.createElement('div');
+    div.innerHTML = svgContent;
+    // Remove all non-svg child nodes
+    for (let i = div.childNodes.length - 1; i >= 0; i--) {
+        if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+            div.removeChild(div.childNodes[i]);
+        }
+    }
+    const svgElm = div.firstElementChild;
+    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg' && isSafeSvg(svgElm)) {
+        // Check if a custom viewbox value was provided and use that if so
+        if (defaultViewBox) {
+            svgElm.setAttribute('viewBox', defaultViewBox);
+        }
+        // Force a default viewBox if one doesn't exist (this ensures our icon is scalable)
+        if (!svgElm.hasAttribute('viewBox') && defaultViewBox) {
+            svgElm.setAttribute('viewBox', defaultViewBox);
+        }
+        // Remove any height and width attributes to ensure that the icon is properly scalable
+        svgElm.removeAttribute('height');
+        svgElm.removeAttribute('width');
+        return svgElm;
+    }
+    return null;
+}
+/**
+ * Determines if the provided element is a safe SVG to use.
+ * @param el The element reference to test.
+ */
+export function isSafeSvg(el) {
+    if (el.nodeType !== 1) {
+        return true;
+    }
+    // Validate no <script> tags exist
+    if (el.nodeName.toLowerCase() === 'script') {
+        return false;
+    }
+    // Ensure there are no inline listeners
+    const attributes = Array.from(el.attributes);
+    for (const attr of attributes) {
+        if (typeof attr.name === 'string' && attr.name.toLowerCase().startsWith('on')) {
+            return false;
+        }
+    }
+    // Ensure all child nodes are valid
+    const childNodes = Array.from(el.childNodes);
+    for (const node of childNodes) {
+        if (!isSafeSvg(node)) {
+            return false;
+        }
+    }
+    return true;
+}

package/esm/core/utils/time-utils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const TWENTY_FOUR_HOUR_TIME_REGEX: RegExp;
+export declare const TWELVE_HOUR_TIME_REGEX: RegExp;
+export declare const PARSEABLE_TIME_FORMAT: RegExp;
+export declare function tokenize24HourTimeString(value: string): {
+    hours: string;
+    minutes: string;
+    seconds: string;
+};
+export declare function tokenize12HourTimeString(value: string): {
+    hours: string;
+    minutes: string;
+    seconds: string;
+    meridiem: string;
+};
+export declare function isSupportedTimeFormat(value: string): boolean;
+export declare function tryCoerceTimeString(str: string, use24HourTime: boolean, allowSeconds: boolean): string;

package/esm/core/utils/time-utils.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export const TWENTY_FOUR_HOUR_TIME_REGEX = /^(0?[0-9]|1\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/;
+export const TWELVE_HOUR_TIME_REGEX = /^(0?[1-9]|1[0-2]):([0-5]\d)(:([0-5]\d))?\s*([AaPp][Mm])?$/;
+export const PARSEABLE_TIME_FORMAT = /^(\d\d?):?(\d\d?)(:?(\d?\d?))?\s*([AaPp][Mm]?)?$/;
+export function tokenize24HourTimeString(value) {
+    const matches = value.match(TWENTY_FOUR_HOUR_TIME_REGEX) || [null, 0, 0, null, 0];
+    const hours = matches[1];
+    const minutes = matches[2];
+    const seconds = matches[4];
+    return { hours, minutes, seconds };
+}
+export function tokenize12HourTimeString(value) {
+    const matches = value.match(TWELVE_HOUR_TIME_REGEX) || [null, 0, 0, null, 0, 'AM'];
+    const hours = matches[1];
+    const minutes = matches[2];
+    const seconds = matches[4];
+    const meridiem = matches[5];
+    return { hours, minutes, seconds, meridiem };
+}
+export function isSupportedTimeFormat(value) {
+    return TWENTY_FOUR_HOUR_TIME_REGEX.test(value) ||
+        TWELVE_HOUR_TIME_REGEX.test(value);
+}
+export function tryCoerceTimeString(str, use24HourTime, allowSeconds) {
+    str = str && typeof str === 'string' ? str.replace(/_|\s/g, '') : '';
+    if (/^\s*$/.test(str)) {
+        return '';
+    }
+    const matches = str.match(PARSEABLE_TIME_FORMAT);
+    if (!matches) {
+        return '';
+    }
+    let hoursStr = matches[1];
+    let minutesStr = matches[2];
+    let secondsStr = matches[4];
+    let meridiem = matches[5];
+    // Normalize the meridiem string
+    if (use24HourTime) {
+        meridiem = '';
+    }
+    else if (/[AaPp][Mm]/.test(meridiem)) {
+        meridiem = meridiem.toUpperCase();
+    }
+    else {
+        if (/^[AaPp]/.test(meridiem)) {
+            if (meridiem.toLowerCase().startsWith('a')) {
+                meridiem = 'AM';
+            }
+            else if (meridiem.toLowerCase().startsWith('p')) {
+                meridiem = 'PM';
+            }
+        }
+        else {
+            meridiem = '';
+        }
+    }
+    const hoursNum = +hoursStr || 0;
+    const minutesNum = +minutesStr || 0;
+    // Clamp and normalize hours
+    const maxHours = !meridiem || use24HourTime ? 23 : 12;
+    if (hoursNum >= maxHours) {
+        hoursStr = String(maxHours);
+    }
+    else if (hoursNum < 0) {
+        hoursStr = '00';
+    }
+    // Clamp and normalize minutes
+    if (minutesStr !== undefined) {
+        if (minutesNum > 59) {
+            minutesStr = '59';
+        }
+        else if (minutesNum < 0) {
+            minutesStr = '00';
+        }
+        else {
+            minutesStr = minutesStr.padStart(2, '0');
+        }
+    }
+    // Clamp and normalize seconds (if applicable)
+    if (secondsStr !== undefined) {
+        const secondsNum = +secondsStr || 0;
+        if (secondsNum > 59) {
+            secondsStr = '59';
+        }
+        else if (secondsNum < 0) {
+            secondsStr = '00';
+        }
+        else {
+            secondsStr = secondsStr.padStart(2, '0');
+        }
+    }
+    // Build resulting time string
+    let timeStr = hoursStr;
+    if (minutesStr !== undefined) {
+        timeStr += `:${minutesStr}`;
+        if (secondsStr === undefined && allowSeconds) {
+            secondsStr = '00';
+        }
+    }
+    if (secondsStr !== undefined) {
+        timeStr += `:${secondsStr}`;
+    }
+    if (meridiem) {
+        timeStr += ` ${meridiem}`;
+    }
+    return timeStr;
+}

package/esm/core/utils/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Highlights text in the given label by converting it to HTML and using a `<span>` tag to show the highlighted text within the original label.
+ * @param label The full text.
+ * @param highlightText The text to highlight.
+ */
+export declare function highlightTextHTML(label: string, highlightText: string): HTMLElement | undefined;

package/esm/core/utils/utils.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Highlights text in the given label by converting it to HTML and using a `<span>` tag to show the highlighted text within the original label.
+ * @param label The full text.
+ * @param highlightText The text to highlight.
+ */
+export function highlightTextHTML(label, highlightText) {
+    const text = label.toLowerCase();
+    const startIndex = text.indexOf(highlightText.toLowerCase());
+    if (startIndex !== -1) {
+        const endIndex = startIndex + highlightText.length;
+        const wrapperSpan = document.createElement('span');
+        const highlightSpan = document.createElement('span');
+        highlightSpan.style.fontWeight = 'bold';
+        highlightSpan.textContent = label.substring(startIndex, endIndex);
+        wrapperSpan.appendChild(document.createTextNode(label.substring(0, startIndex)));
+        wrapperSpan.appendChild(highlightSpan);
+        wrapperSpan.appendChild(document.createTextNode(label.substring(endIndex)));
+        return wrapperSpan;
+    }
+    return undefined;
+}

package/esm/date-picker/base/base-date-picker-adapter.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { DateRange, DayOfWeek, ICalendarComponent, ICalendarDateSelectEventData } from '../../calendar';
+import { ICalendarDropdown, ICalendarDropdownPopupConfig } from '../../calendar/calendar-dropdown';
+import { BaseAdapter, IBaseAdapter, IDateInputMaskOptions } from '../../core';
+import { BaseComponent } from '../../core/base/base-component';
+export interface IBaseDatePickerAdapter extends IBaseAdapter {
+    initialize(): void;
+    initializeAccessibility(): void;
+    destroy(): void;
+    setActiveDescendant(id: string): void;
+    initializeMask(options: IDateInputMaskOptions): void;
+    destroyMask(): void;
+    tryCreateToggle(): void;
+    addToggleListener(type: string, listener: (event: Event) => void): void;
+    removeToggleListener(type: string, listener: (event: Event) => void): void;
+    addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    removeInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    setInputValueChangedListener(context: any, listener: (value: any) => void): void;
+    hasInputElement(): boolean;
+    tryFocusInput(): void;
+    tryBlurInput(): void;
+    isInputDisabled(): boolean;
+    isInputFocused(): boolean;
+    setDisabled(value: boolean): void;
+    getInputValue(): string;
+    setInputValue(value: string, emitEvents: boolean): void;
+    selectInputText(): void;
+    emitInputEvent(type: string, data?: any): void;
+    attachCalendar(calendarConfig: Partial<ICalendarComponent>, dropdownConfig?: ICalendarDropdownPopupConfig): void;
+    detachCalendar(): void;
+    goToCalendarDate(date: Date): void;
+    addDateSelectListener(listener: (event: CustomEvent<ICalendarDateSelectEventData>) => void): void;
+    removeDateSelectListener(listener: (event: CustomEvent<ICalendarDateSelectEventData>) => void): void;
+    setCalendarValue(value: Date | DateRange | null): void;
+    setCalendarMinDate(value: Date | null): void;
+    setCalendarMaxDate(value: Date | null): void;
+    setCalendarDisabledDates(value: Date | Date[] | null): void;
+    setCalendarDisabledDaysOfWeek(value: DayOfWeek[]): void;
+    setCalendarDisableDayCallback(disableDayCallback: (date: Date) => boolean): void;
+    setCalendarActiveDate(date: Date): void;
+    getCalendarActiveDate(): Date | undefined;
+    setCalendarYearRange(value: string): void;
+    propagateCalendarKey(evt: KeyboardEvent): void;
+}
+export declare abstract class BaseDatePickerAdapter<T extends BaseComponent> extends BaseAdapter<T> implements IBaseDatePickerAdapter {
+    protected _identifier: string;
+    protected _calendarDropdown?: ICalendarDropdown;
+    protected _toggleElement?: HTMLElement;
+    protected _valueChangeListeners: Array<() => void>;
+    constructor(component: T);
+    abstract initializeAccessibility(): void;
+    protected abstract _initializeInput(): void;
+    protected abstract _initializeCalendarDropdown(): void;
+    abstract initializeMask(options: IDateInputMaskOptions): void;
+    abstract destroyMask(): void;
+    abstract setActiveDescendant(id: string): void;
+    abstract hasInputElement(): boolean;
+    abstract hasInputElement(): boolean;
+    abstract tryFocusInput(): void;
+    abstract tryBlurInput(): void;
+    abstract isInputDisabled(): boolean;
+    abstract isInputFocused(): boolean;
+    abstract setDisabled(value: boolean): void;
+    abstract addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    abstract removeInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    abstract setInputValueChangedListener(context: any, listener: (value: any) => void): void;
+    abstract getInputValue(): string;
+    abstract setInputValue(value: string, emitEvents: boolean): void;
+    abstract selectInputText(): void;
+    abstract emitInputEvent(type: string, data?: any): void;
+    initialize(): void;
+    destroy(): void;
+    destroyValueChangeListener(): void;
+    addToggleListener(type: string, listener: (event: Event) => void): void;
+    removeToggleListener(type: string, listener: (event: Event) => void): void;
+    attachCalendar(calendarConfig: Partial<ICalendarComponent>, dropdownConfig?: ICalendarDropdownPopupConfig): void;
+    detachCalendar(): void;
+    goToCalendarDate(date: Date): void;
+    addDateSelectListener(listener: (event: CustomEvent<ICalendarDateSelectEventData>) => void): void;
+    removeDateSelectListener(listener: (event: CustomEvent<ICalendarDateSelectEventData>) => void): void;
+    setCalendarValue(value: Date | DateRange | null): void;
+    setCalendarMinDate(value: Date | null): void;
+    setCalendarMaxDate(value: Date | null): void;
+    setCalendarDisabledDates(value: Date | Date[] | null): void;
+    setCalendarDisabledDaysOfWeek(value: DayOfWeek[]): void;
+    setCalendarDisableDayCallback(disableDayCallback: (date: Date) => boolean): void;
+    setCalendarActiveDate(date: Date): void;
+    getCalendarActiveDate(): Date | undefined;
+    setCalendarYearRange(value: string): void;
+    propagateCalendarKey(evt: KeyboardEvent): void;
+    tryCreateToggle(): void;
+    protected _createToggleElement(): HTMLElement;
+    protected _getDefaultTargetElement(): HTMLElement;
+}

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

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, randomChars } from '@tylertech/forge-core';
+import { CALENDAR_CONSTANTS } from '../../calendar';
+import { BaseAdapter } from '../../core';
+import { ICON_BUTTON_CONSTANTS } from '../../icon-button';
+import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
+import { createToggleElement } from './base-date-picker-utils';
+import { TEXT_FIELD_CONSTANTS } from '../../text-field';
+export class BaseDatePickerAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._valueChangeListeners = [];
+        this._identifier = randomChars();
+    }
+    initialize() {
+        this._initializeInput();
+    }
+    destroy() {
+        var _a;
+        (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.destroyValueChangeListener();
+    }
+    destroyValueChangeListener() {
+        this._valueChangeListeners.forEach(cb => cb());
+    }
+    addToggleListener(type, listener) {
+        var _a;
+        (_a = this._toggleElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+    }
+    removeToggleListener(type, listener) {
+        var _a;
+        (_a = this._toggleElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+    }
+    attachCalendar(calendarConfig, dropdownConfig) {
+        var _a, _b, _c;
+        if (this._calendarDropdown) {
+            (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.destroy();
+        }
+        this._initializeCalendarDropdown();
+        if (!this._calendarDropdown) {
+            throw new Error('CalendarDropdown was not initialized.');
+        }
+        if (dropdownConfig) {
+            Object.assign(this._calendarDropdown, dropdownConfig);
+        }
+        this._calendarDropdown.open(calendarConfig);
+        (_b = this._calendarDropdown.dropdownElement) === null || _b === void 0 ? void 0 : _b.style.setProperty('--forge-calendar-width', '320px');
+        (_c = this._calendarDropdown.calendar) === null || _c === void 0 ? void 0 : _c.style.setProperty('margin', '8px');
+    }
+    detachCalendar() {
+        if (this._calendarDropdown && this._calendarDropdown.isOpen) {
+            this._calendarDropdown.close();
+        }
+    }
+    goToCalendarDate(date) {
+        var _a, _b;
+        (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.goToDate(date, true);
+    }
+    addDateSelectListener(listener) {
+        var _a, _b;
+        (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.addEventListener(CALENDAR_CONSTANTS.events.DATE_SELECT, listener);
+    }
+    removeDateSelectListener(listener) {
+        var _a, _b;
+        (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.removeEventListener(CALENDAR_CONSTANTS.events.DATE_SELECT, listener);
+    }
+    setCalendarValue(value) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.calendar.value = value;
+        }
+    }
+    setCalendarMinDate(value) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.calendar.min = value;
+        }
+    }
+    setCalendarMaxDate(value) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.calendar.max = value;
+        }
+    }
+    setCalendarDisabledDates(value) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.calendar.disabledDates = value;
+        }
+    }
+    setCalendarDisabledDaysOfWeek(value) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.calendar.disabledDaysOfWeek = value;
+        }
+    }
+    setCalendarDisableDayCallback(disableDayCallback) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.calendar.disabledDateBuilder = disableDayCallback;
+        }
+    }
+    setCalendarActiveDate(date) {
+        var _a, _b;
+        (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.setActiveDate(date);
+    }
+    getCalendarActiveDate() {
+        var _a, _b;
+        return (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.activeDate;
+    }
+    setCalendarYearRange(value) {
+        var _a, _b;
+        if ((_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.yearRange) {
+            this._calendarDropdown.calendar.yearRange = value;
+        }
+    }
+    propagateCalendarKey(evt) {
+        var _a, _b;
+        (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.handleKey(evt);
+    }
+    tryCreateToggle() {
+        const textField = this._component.querySelector('forge-text-field');
+        const toggleElement = this._component.querySelector(BASE_DATE_PICKER_CONSTANTS.selectors.TOGGLE);
+        if (textField) {
+            const existingIconButton = textField.querySelector(`${ICON_BUTTON_CONSTANTS.elementName}[slot=trailing]`);
+            if (existingIconButton || toggleElement) {
+                this._toggleElement = (existingIconButton || toggleElement);
+                return;
+            }
+            const iconButtonElement = this._createToggleElement();
+            textField.appendChild(iconButtonElement);
+            this._toggleElement = iconButtonElement;
+        }
+        else if (toggleElement) {
+            this._toggleElement = toggleElement;
+        }
+    }
+    _createToggleElement() {
+        return createToggleElement('insert_invitation');
+    }
+    _getDefaultTargetElement() {
+        // This component is often used with the Forge text-field, if so, let's target our popup around
+        // one if its internal elements for best alignment
+        const textField = this._component.querySelector('forge-text-field');
+        if (textField && textField.shadowRoot) {
+            const textFieldRoot = getShadowElement(textField, TEXT_FIELD_CONSTANTS.selectors.ROOT);
+            if (textFieldRoot) {
+                return textFieldRoot;
+            }
+        }
+        return this._component.querySelector('input') || this._component;
+    }
+}