@tylertech/forge 2.0.0

package/esm/calendar/calendar-constants.d.ts

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { DateRange } from './core/date-range';
+export declare const CALENDAR_CONSTANTS: {
+    elementName: "forge-calendar";
+    attributes: {
+        DATA_DATE: string;
+        DATA_EVENT_THEME: string;
+        POPUP_CONTEXT: string;
+        ALLOW_SINGLE_DATE_RANGE: string;
+        CLEAR_BUTTON: string;
+        CONSTRAIN_TO_ENABLED: string;
+        FIRST_DAY_OF_WEEK: string;
+        FIXED_HEIGHT: string;
+        LIST_YEARS: string;
+        LOCALE: string;
+        MAX: string;
+        MENU_ANIMATION: string;
+        MIN: string;
+        MODE: string;
+        MONTH: string;
+        PREVENT_FOCUS: string;
+        READONLY: string;
+        SELECTION_FOLLOWS_MONTH: string;
+        SHOW_HEADER: string;
+        SHOW_OTHER_MONTHS: string;
+        SHOW_TODAY: string;
+        TODAY_BUTTON: string;
+        VIEW: string;
+        YEAR: string;
+        YEAR_RANGE: string;
+    };
+    classes: {
+        ALLOW_SINGLE_DATE_RANGE: string;
+        DATE: string;
+        DATE_GRID: string;
+        DATE_INNER: string;
+        DATE_OTHER_MONTH: string;
+        DATE_SPACER: string;
+        DATE_SELECTED: string;
+        DATE_TODAY: string;
+        DATE_VIEW: string;
+        DATE_VIEW_ROW: string;
+        DATE_WRAPPER: string;
+        DAY: string;
+        EVENT: string;
+        EVENT_OVERFLOW: string;
+        EVENT_WRAPPER: string;
+        FIXED_HEIGHT: string;
+        FOOTER: string;
+        HEADER: string;
+        MDC_RIPPLE_UPGRADED_FOCUSED: string;
+        MONTH_MENU_OPEN: string;
+        PREVENT_FOCUS: string;
+        RANGE: string;
+        RANGE_END: string;
+        RANGE_START: string;
+        RANGE_TARGET: string;
+        READONLY: string;
+        RTL: string;
+        SHOW_OTHER_MONTHS: string;
+        SHOW_TODAY: string;
+        VIEW: string;
+        YEAR_MENU_OPEN: string;
+    };
+    ids: {
+        ACCESSIBLE_HEADER: string;
+        ACCESSIBLE_MONTH: string;
+        ACCESSIBLE_YEAR: string;
+        CLEAR_BUTTON: string;
+        DATE_GRID: string;
+        DATE_VIEW: string;
+        DAY_ROW: string;
+        FOOTER: string;
+        HEADER: string;
+        MENU: string;
+        MONTH_BUTTON: string;
+        NEXT_BUTTON: string;
+        NEXT_BUTTON_TOOLTIP: string;
+        PREVIOUS_BUTTON: string;
+        PREVIOUS_BUTTON_TOOLTIP: string;
+        TODAY_BUTTON: string;
+        YEAR_BUTTON: string;
+    };
+    parts: {
+        CLEAR_BUTTON: string;
+        DATE: string;
+        DATE_OTHER_MONTH: string;
+        DATE_VIEW: string;
+        DATE_WRAPPER: string;
+        DAY: string;
+        EVENT: string;
+        EVENT_WRAPPER: string;
+        FOOTER: string;
+        HEADER: string;
+        MONTH_BUTTON: string;
+        MONTH_BUTTON_ELEMENT: string;
+        NEXT_BUTTON: string;
+        PREVIOUS_BUTTON: string;
+        RANGE: string;
+        RANGE_END: string;
+        RANGE_START: string;
+        TODAY: string;
+        TODAY_BUTTON: string;
+        WEEKEND: string;
+        YEAR_BUTTON: string;
+        YEAR_BUTTON_ELEMENT: string;
+        SUNDAY: string;
+        MONDAY: string;
+        TUESDAY: string;
+        WEDNESDAY: string;
+        THURSDAY: string;
+        FRIDAY: string;
+        SATURDAY: string;
+    };
+    selectors: {
+        ACCESSIBLE_HEADER: string;
+        ACCESSIBLE_MONTH: string;
+        ACCESSIBLE_YEAR: string;
+        CALENDAR: string;
+        CLEAR_BUTTON: string;
+        DATE: string;
+        DATE_GRID: string;
+        DATE_INNER: string;
+        DATE_OTHER_MONTH: string;
+        DATE_SPACER: string;
+        DATE_SELECTED: string;
+        DATE_TODAY: string;
+        DATE_VIEW: string;
+        DATE_WRAPPER: string;
+        DAY_ROW: string;
+        EVENT_WRAPPER: string;
+        FOOTER: string;
+        HEADER: string;
+        MENU: "forge-calendar-menu";
+        MONTH_BUTTON: string;
+        NEXT_BUTTON: string;
+        NEXT_BUTTON_TOOLTIP: string;
+        PREVIOUS_BUTTON: string;
+        PREVIOUS_BUTTON_TOOLTIP: string;
+        RANGE: string;
+        RANGE_END: string;
+        RANGE_START: string;
+        TODAY_BUTTON: string;
+        TOOLTIP: "forge-tooltip";
+        VIEW: string;
+        YEAR_BUTTON: string;
+    };
+    events: {
+        DATE_SELECT: string;
+        FOCUS_CHANGE: string;
+        MONTH_CHANGE: string;
+        VIEW_CHANGE: string;
+    };
+    numbers: {
+        DEFAULT_MAX_YEAR_OFFSET: number;
+        DEFAULT_MIN_YEAR_OFFSET: number;
+        FINAL_WEEK_BEGIN_INDEX: number;
+        MONTH_LENGTH: number;
+        PENULTIMATE_WEEK_BEGIN_INDEX: number;
+        WEEK_LENGTH: number;
+        YEARS_IN_VIEW: number;
+    };
+};
+export declare type CalendarDateBuilder = (date: ICalendarDateConfig, element: HTMLElement) => HTMLElement;
+export declare type CalendarDateSelectCallback = (date: ICalendarDate) => boolean | Promise<boolean>;
+export declare type CalendarDayBuilder = (day: DayOfWeek, element: HTMLElement) => HTMLElement;
+export declare type CalendarDisabledDateBuilder = (date: Date) => boolean;
+export declare type CalendarEventBuilder = (date: Date) => ICalendarEvent[] | ICalendarEvent | null;
+export declare type CalendarTooltipBuilder = (date: ICalendarDate, content: string) => string | null;
+export declare type CalendarMode = 'single' | 'multiple' | 'range';
+export declare type CalendarView = 'date' | 'month' | 'year';
+export declare type RangeSelectionState = 'none' | 'from' | 'to';
+export declare type CalendarEventColor = 'primary' | 'secondary' | 'blue' | 'light-green' | 'cyan' | 'teal' | 'orange' | 'blue-grey' | 'grey' | 'red' | 'pink' | 'purple' | 'light-blue' | 'deep-purple' | 'green' | 'lime' | 'yellow' | 'brown' | 'deep-orange';
+export interface ICalendarDate {
+    date: Date;
+    selected: boolean;
+    events: ICalendarEvent[];
+}
+export interface ICalendarDateConfig {
+    date: Date;
+    selected: boolean;
+    today: boolean;
+    thisMonth: boolean;
+    disabled: boolean;
+}
+export interface ICalendarDateOptions {
+    builder?: CalendarDateBuilder;
+    locale?: string;
+    showOtherMonths?: boolean;
+}
+export interface ICalendarDayOptions {
+    builder?: CalendarDayBuilder;
+    locale?: string;
+}
+export interface ICalendarEvent {
+    date: Date;
+    label: string;
+    color: CalendarEventColor | string;
+}
+export interface ICalendarDateSelectEventData {
+    date: Date | null;
+    selected: boolean;
+    range?: DateRange;
+    rangeSelectionState?: RangeSelectionState;
+    type: CalendarView;
+}
+export interface ICalendarMonthChangeEventData {
+    month: number;
+    userSelected: boolean;
+    year: number;
+}
+export interface ICalendarFocusChangeEventData {
+    selected: boolean;
+    text: string;
+    type: CalendarView;
+    value: Date | number;
+}
+export interface ICalendarNumberRange {
+    max: number;
+    min: number;
+}
+export interface ICalendarDisabledDateParams {
+    builder: CalendarDisabledDateBuilder | undefined;
+    disabledDates: Date[];
+    disabledDaysOfWeek: DayOfWeek[];
+    maxDate: Date | null;
+    minDate: Date | null;
+    otherMonth?: boolean;
+}
+export interface ICalendarMenuMonthConfig {
+    locale?: string;
+    max: Date | null;
+    min: Date | null;
+    selectedMonth: number;
+    selectedYear: number;
+}
+export interface ICalendarMenuYearConfig {
+    locale?: string;
+    max: number;
+    min: number;
+    selectedYear: number;
+    yearInView: number;
+}
+export declare enum DayOfWeek {
+    Sunday = 0,
+    Monday = 1,
+    Tuesday = 2,
+    Wednesday = 3,
+    Thursday = 4,
+    Friday = 5,
+    Saturday = 6
+}
+export declare enum CalendarMonthFocus {
+    First = 1,
+    Last = 2,
+    Current = 3
+}

package/esm/calendar/calendar-constants.js

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { TOOLTIP_CONSTANTS } from '../tooltip/tooltip-constants';
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { CALENDAR_MENU_CONSTANTS } from './calendar-menu';
+const elementName = `${COMPONENT_NAME_PREFIX}calendar`;
+const observedAttributes = {
+    ALLOW_SINGLE_DATE_RANGE: 'allow-single-date-range',
+    CLEAR_BUTTON: 'clear-button',
+    CONSTRAIN_TO_ENABLED: 'constrain-to-enabled',
+    FIRST_DAY_OF_WEEK: 'first-day-of-week',
+    FIXED_HEIGHT: 'static-height',
+    LIST_YEARS: 'list-years',
+    LOCALE: 'locale',
+    MAX: 'max',
+    MENU_ANIMATION: 'menu-animation',
+    MIN: 'min',
+    MODE: 'mode',
+    MONTH: 'month',
+    PREVENT_FOCUS: 'prevent-focus',
+    READONLY: 'readonly',
+    SELECTION_FOLLOWS_MONTH: 'selection-follows-month',
+    SHOW_HEADER: 'show-header',
+    SHOW_OTHER_MONTHS: 'show-other-months',
+    SHOW_TODAY: 'show-today',
+    TODAY_BUTTON: 'today-button',
+    VIEW: 'view',
+    YEAR: 'year',
+    YEAR_RANGE: 'year-range'
+};
+const attributes = Object.assign(Object.assign({}, observedAttributes), { DATA_DATE: 'data-date', DATA_EVENT_THEME: 'data-event-theme', POPUP_CONTEXT: 'forge-popup-context' });
+const classes = {
+    ALLOW_SINGLE_DATE_RANGE: 'forge-calendar--allow-single-date-range',
+    DATE: 'forge-calendar__date',
+    DATE_GRID: 'forge-calendar__date-grid',
+    DATE_INNER: 'forge-calendar__date__inner',
+    DATE_OTHER_MONTH: 'forge-calendar__date--other-month',
+    DATE_SPACER: 'forge-calendar__date-spacer',
+    DATE_SELECTED: 'forge-calendar__date--selected',
+    DATE_TODAY: 'forge-calendar__date--today',
+    DATE_VIEW: 'forge-calendar__date-view',
+    DATE_VIEW_ROW: 'forge-calendar__date-view__row',
+    DATE_WRAPPER: 'forge-calendar__date-wrapper',
+    DAY: 'forge-calendar__day',
+    EVENT: 'forge-calendar__event',
+    EVENT_OVERFLOW: 'forge-calendar__event--overflow',
+    EVENT_WRAPPER: 'forge-calendar__event__wrapper',
+    FIXED_HEIGHT: 'forge-calendar--fixed-height',
+    FOOTER: 'forge-calendar__footer',
+    HEADER: 'forge-calendar__header',
+    MDC_RIPPLE_UPGRADED_FOCUSED: 'mdc-ripple-upgraded--background-focused',
+    MONTH_MENU_OPEN: 'forge-calendar--month-menu-open',
+    PREVENT_FOCUS: 'forge-calendar--prevent-focus',
+    RANGE: 'forge-calendar__range',
+    RANGE_END: 'forge-calendar__range--end',
+    RANGE_START: 'forge-calendar__range--start',
+    RANGE_TARGET: 'forge-calendar__range__target',
+    READONLY: 'forge-calendar--readonly',
+    RTL: 'forge-calendar--rtl',
+    SHOW_OTHER_MONTHS: 'forge-calendar--show-other-months',
+    SHOW_TODAY: 'forge-calendar--show-today',
+    VIEW: 'forge-calendar__view',
+    YEAR_MENU_OPEN: 'forge-calendar--year-menu-open'
+};
+const ids = {
+    ACCESSIBLE_HEADER: 'accessible-header',
+    ACCESSIBLE_MONTH: 'accessible-month',
+    ACCESSIBLE_YEAR: 'accessible-year',
+    CLEAR_BUTTON: 'clear-button',
+    DATE_GRID: 'date-grid',
+    DATE_VIEW: 'date-view',
+    DAY_ROW: 'day-row',
+    FOOTER: 'footer',
+    HEADER: 'header',
+    MENU: 'menu',
+    MONTH_BUTTON: 'month-button',
+    NEXT_BUTTON: 'next-button',
+    NEXT_BUTTON_TOOLTIP: 'next-button-tooltip',
+    PREVIOUS_BUTTON: 'previous-button',
+    PREVIOUS_BUTTON_TOOLTIP: 'previous-button-tooltip',
+    TODAY_BUTTON: 'today-button',
+    YEAR_BUTTON: 'year-button'
+};
+const weekdayParts = {
+    SUNDAY: 'sunday',
+    MONDAY: 'monday',
+    TUESDAY: 'tuesday',
+    WEDNESDAY: 'wednesday',
+    THURSDAY: 'thursday',
+    FRIDAY: 'friday',
+    SATURDAY: 'saturday'
+};
+const parts = Object.assign(Object.assign({}, weekdayParts), { CLEAR_BUTTON: 'clear-button', DATE: 'date', DATE_OTHER_MONTH: 'date-other-month', DATE_VIEW: 'date-view', DATE_WRAPPER: 'date-wrapper', DAY: 'day', EVENT: 'event', EVENT_WRAPPER: 'event-wrapper', FOOTER: 'footer', HEADER: 'header', MONTH_BUTTON: 'month-button', MONTH_BUTTON_ELEMENT: 'month-button-element', NEXT_BUTTON: 'next-button', PREVIOUS_BUTTON: 'previous-button', RANGE: 'range', RANGE_END: 'range-end', RANGE_START: 'range-start', TODAY: 'today', TODAY_BUTTON: 'today-button', WEEKEND: 'weekend', YEAR_BUTTON: 'year-button', YEAR_BUTTON_ELEMENT: 'year-button-element' });
+const selectors = {
+    ACCESSIBLE_HEADER: `#${ids.ACCESSIBLE_HEADER}`,
+    ACCESSIBLE_MONTH: `#${ids.ACCESSIBLE_MONTH}`,
+    ACCESSIBLE_YEAR: `#${ids.ACCESSIBLE_YEAR}`,
+    CALENDAR: '.forge-calendar',
+    CLEAR_BUTTON: `#${ids.CLEAR_BUTTON}`,
+    DATE: `.${classes.DATE}`,
+    DATE_GRID: `#${ids.DATE_GRID}`,
+    DATE_INNER: `.${classes.DATE_INNER}`,
+    DATE_OTHER_MONTH: `.${classes.DATE_OTHER_MONTH}`,
+    DATE_SPACER: `.${classes.DATE_SPACER}`,
+    DATE_SELECTED: `.${classes.DATE_SELECTED}`,
+    DATE_TODAY: `.${classes.DATE_TODAY}`,
+    DATE_VIEW: `#${ids.DATE_VIEW}`,
+    DATE_WRAPPER: `.${classes.DATE_WRAPPER}`,
+    DAY_ROW: `#${ids.DAY_ROW}`,
+    EVENT_WRAPPER: `.${classes.EVENT_WRAPPER}`,
+    FOOTER: `#${ids.FOOTER}`,
+    HEADER: `#${ids.HEADER}`,
+    MENU: CALENDAR_MENU_CONSTANTS.elementName,
+    MONTH_BUTTON: `#${ids.MONTH_BUTTON}`,
+    NEXT_BUTTON: `#${ids.NEXT_BUTTON}`,
+    NEXT_BUTTON_TOOLTIP: `#${ids.NEXT_BUTTON_TOOLTIP}`,
+    PREVIOUS_BUTTON: `#${ids.PREVIOUS_BUTTON}`,
+    PREVIOUS_BUTTON_TOOLTIP: `#${ids.PREVIOUS_BUTTON_TOOLTIP}`,
+    RANGE: `.${classes.RANGE}`,
+    RANGE_END: `.${classes.RANGE_END}`,
+    RANGE_START: `.${classes.RANGE_START}`,
+    TODAY_BUTTON: `#${ids.TODAY_BUTTON}`,
+    TOOLTIP: TOOLTIP_CONSTANTS.elementName,
+    VIEW: '#view',
+    YEAR_BUTTON: `#${ids.YEAR_BUTTON}`
+};
+const events = {
+    DATE_SELECT: `${elementName}-date-select`,
+    FOCUS_CHANGE: `${elementName}-focus-change`,
+    MONTH_CHANGE: `${elementName}-month-change`,
+    VIEW_CHANGE: `${elementName}-view-change`
+};
+const numbers = {
+    DEFAULT_MAX_YEAR_OFFSET: 50,
+    DEFAULT_MIN_YEAR_OFFSET: 50,
+    FINAL_WEEK_BEGIN_INDEX: 35,
+    MONTH_LENGTH: 42,
+    PENULTIMATE_WEEK_BEGIN_INDEX: 28,
+    WEEK_LENGTH: 7,
+    YEARS_IN_VIEW: 20
+};
+export const CALENDAR_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    ids,
+    parts,
+    selectors,
+    events,
+    numbers
+};
+export var DayOfWeek;
+(function (DayOfWeek) {
+    DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
+    DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
+    DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday";
+    DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday";
+    DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday";
+    DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday";
+    DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday";
+})(DayOfWeek || (DayOfWeek = {}));
+export var CalendarMonthFocus;
+(function (CalendarMonthFocus) {
+    CalendarMonthFocus[CalendarMonthFocus["First"] = 1] = "First";
+    CalendarMonthFocus[CalendarMonthFocus["Last"] = 2] = "Last";
+    CalendarMonthFocus[CalendarMonthFocus["Current"] = 3] = "Current";
+})(CalendarMonthFocus || (CalendarMonthFocus = {}));

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

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { DayOfWeek, ICalendarDateConfig, ICalendarDateOptions, ICalendarEvent } from './calendar-constants';
+/** Converts a day into an id string prefixed with "d". */
+export declare function getDayId(day: DayOfWeek): string;
+/** Converts a date object into a "yyyymmdd" id string prefixed with "d". */
+export declare function getDateId(date: Date): string;
+/** Converts a date object into a "yyyymmdd" if string prefixed with "e". */
+export declare function getEventWrapperId(date: Date): string;
+/** Returns a day element. */
+export declare function getDayElement(day: DayOfWeek, locale?: string): HTMLElement;
+/** Returns a date row element. */
+export declare function getDateRow(dates: ICalendarDateConfig[], index: number, options?: ICalendarDateOptions): HTMLElement;
+/** Returns a date element. */
+export declare function getDateElement(date: ICalendarDateConfig, locale?: string): HTMLElement;
+/** Returns a date spacer element. */
+export declare function getDateSpacerElement(date: Date): HTMLElement;
+/** Returns an event wrapper element. */
+export declare function getEventWrapperElement(date: Date): HTMLElement;
+/** Returns an event element. */
+export declare function getEventElement(event: ICalendarEvent, overflow?: boolean): HTMLElement;
+/** Returns a tooltip element. */
+export declare function getTooltip(content: string): HTMLElement;
+/** Returns a calendar header. */
+export declare function getHeader(): HTMLElement;
+/** Returns content for the month button. */
+export declare function getMonthButtonContent(month: number, locale?: string): HTMLElement[];
+/** Returns content for the year button. */
+export declare function getYearButtonContent(year: number, locale?: string): HTMLElement[];
+/** Returns a hidden, accessible header. */
+export declare function getAccessibleHeader(): HTMLElement;
+/** Returns a calendar footer. */
+export declare function getFooter(): HTMLElement;
+/** Returns a clear button. */
+export declare function getClearButton(): HTMLElement;
+/** Returns a today button. */
+export declare function getTodayButton(): 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. */
+export declare function eventIncludesElement(evt: Event, id: string): HTMLElement | null;
+/** Sets the tabindex on a date element. */
+export declare function setTabindexOnElement(element: HTMLElement, value: number, setFocus: boolean, preventFocus?: boolean): void;