@tylertech/forge 3.1.2 → 3.2.0

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

@@ -9,6 +9,7 @@ import { BaseComponent } from '../../core/base/base-component';
 import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
 /**
  * @property {boolean} [allowInvalidDate=false] - Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).
+ * @property {DatePickerCalendarDropdownText} calendarText - Customized strings to display in the calendar dropdown UI.
  * @property {boolean} [disabled=false] - Whether the date picker is disabled or not.
  * @property {(date: Date) => boolean} disableDayCallback - The callback to use for testing whether a specific date should be disabled or not.
  * @property {Date | Date[] | null | undefined} disabledDates - The dates that are restricted from being selected.
@@ -32,6 +33,7 @@ import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
  * @property {string} yearRange - The year range.
  *
  * @attribute {boolean} [allow-invalid-date=false] - Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).
+ * @attribute {DatePickerCalendarDropdownText} [calendar-text] - Customized strings to display in the calendar dropdown UI.
  * @attribute {boolean} [disabled=false] - Whether the date picker is disabled or not.
  * @attribute {string} [disabled-days-of-week] - The days of the week to disable from selection.
  * @attribute {string} [locale] - The locale to use.
@@ -111,6 +113,9 @@ export class BaseDatePickerComponent extends BaseComponent {
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.LOCALE:
                 this.locale = newValue;
                 break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.CALENDAR_TEXT:
+                this.calendarText = JSON.parse(newValue);
+                break;
         }
     }
 }
@@ -180,3 +185,6 @@ __decorate([
 __decorate([
     coreProperty()
 ], BaseDatePickerComponent.prototype, "locale", void 0);
+__decorate([
+    coreProperty()
+], BaseDatePickerComponent.prototype, "calendarText", void 0);

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

@@ -22,8 +22,10 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         if (!this._fromInputElement || !this._fromInputElement) {
             throw new Error(`The ${DATE_RANGE_PICKER_CONSTANTS.elementName} requires two inputs`);
         }
-        const separator = this._createInputSeparator();
-        this._fromInputElement.insertAdjacentElement('afterend', separator);
+        if (!this._component.querySelector(`[${FIELD_CONSTANTS.attributes.MULTI_INPUT_SEPARATOR}]`)) {
+            const separator = this._createInputSeparator();
+            this._fromInputElement.insertAdjacentElement('afterend', separator);
+        }
     }
     _initializeCalendarDropdown() {
         const targetElement = this._getDefaultTargetElement();

package/esm/list/list-item/list-item-constants.d.ts

@@ -15,6 +15,7 @@ export declare const LIST_ITEM_CONSTANTS: {
         THREE_LINE: string;
         WRAP: string;
         NONINTERACTIVE: string;
+        FOCUS_PROPAGATION: string;
     };
     attributes: {
         SELECTED: string;
@@ -26,6 +27,7 @@ export declare const LIST_ITEM_CONSTANTS: {
         THREE_LINE: string;
         WRAP: string;
         NONINTERACTIVE: string;
+        FOCUS_PROPAGATION: string;
     };
     classes: {
         ROOT: string;
@@ -47,7 +49,11 @@ export declare const LIST_ITEM_CONSTANTS: {
     events: {
         SELECT: string;
     };
+    defaults: {
+        FOCUS_PROPAGATION: ListItemFocusPropagation;
+    };
 };
 export interface IListItemSelectEventData<T = any> {
     value: T;
 }
+export type ListItemFocusPropagation = 'allow' | 'off';

package/esm/list/list-item/list-item-constants.js

@@ -14,7 +14,8 @@ const observedAttributes = {
     TWO_LINE: 'two-line',
     THREE_LINE: 'three-line',
     WRAP: 'wrap',
-    NONINTERACTIVE: 'noninteractive'
+    NONINTERACTIVE: 'noninteractive',
+    FOCUS_PROPAGATION: 'focus-propagation'
 };
 const attributes = {
     ...observedAttributes
@@ -39,6 +40,9 @@ const selectors = {
 const events = {
     SELECT: `${elementName}-select`
 };
+const defaults = {
+    FOCUS_PROPAGATION: 'allow'
+};
 export const LIST_ITEM_CONSTANTS = {
     elementName,
     observedAttributes,
@@ -46,5 +50,6 @@ export const LIST_ITEM_CONSTANTS = {
     classes,
     selectors,
     ids,
-    events
+    events,
+    defaults
 };

package/esm/list/list-item/list-item-core.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { IListItemAdapter } from './list-item-adapter';
+import { ListItemFocusPropagation } from './list-item-constants';
 export interface IListItemCore {
     selected: boolean;
     active: boolean;
@@ -14,6 +15,7 @@ export interface IListItemCore {
     threeLine: boolean;
     wrap: boolean;
     noninteractive: boolean;
+    focusPropagation: ListItemFocusPropagation;
 }
 export declare class ListItemCore implements IListItemCore {
     private _adapter;
@@ -26,6 +28,7 @@ export declare class ListItemCore implements IListItemCore {
     private _threeLine;
     private _wrap;
     private _noninteractive;
+    private _focusPropagation;
     private _interactiveStateChangeListener;
     private _mousedownListener;
     private _clickListener;
@@ -57,4 +60,6 @@ export declare class ListItemCore implements IListItemCore {
     set wrap(value: boolean);
     get noninteractive(): boolean;
     set noninteractive(value: boolean);
+    get focusPropagation(): ListItemFocusPropagation;
+    set focusPropagation(value: ListItemFocusPropagation);
 }

package/esm/list/list-item/list-item-core.js

@@ -15,6 +15,7 @@ export class ListItemCore {
         this._threeLine = false;
         this._wrap = false;
         this._noninteractive = false;
+        this._focusPropagation = LIST_ITEM_CONSTANTS.defaults.FOCUS_PROPAGATION;
         this._interactiveStateChangeListener = this._onInteractiveStateChange.bind(this);
         this._mousedownListener = this._onMousedown.bind(this);
         this._clickListener = this._onClick.bind(this);
@@ -35,7 +36,7 @@ export class ListItemCore {
     _onMousedown(evt) {
         const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
         const fromInteractiveElement = composedElements.some(el => el === this._adapter.interactiveElement);
-        if (!fromInteractiveElement) {
+        if (this._focusPropagation === 'off' || !fromInteractiveElement) {
             evt.preventDefault();
         }
     }
@@ -104,7 +105,9 @@ export class ListItemCore {
         this._dispatchSelectEvent();
     }
     _clickInteractiveElement() {
-        this._adapter.interactiveElement?.focus();
+        if (this._focusPropagation === 'allow') {
+            this._adapter.interactiveElement?.focus();
+        }
         this._adapter.tempDeactivateFocusIndicator(); // Workaround until we can call `focus({ focusVisible: false })` to prevent focus ring from showing
         this._adapter.interactiveElement?.click();
     }
@@ -227,4 +230,16 @@ export class ListItemCore {
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.NONINTERACTIVE, this._noninteractive);
         }
     }
+    get focusPropagation() {
+        return this._focusPropagation;
+    }
+    set focusPropagation(value) {
+        if (!['allow', 'off'].includes(value)) {
+            value = LIST_ITEM_CONSTANTS.defaults.FOCUS_PROPAGATION;
+        }
+        if (this._focusPropagation !== value) {
+            this._focusPropagation = value;
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.FOCUS_PROPAGATION, this._focusPropagation !== LIST_ITEM_CONSTANTS.defaults.FOCUS_PROPAGATION, this._focusPropagation);
+        }
+    }
 }

package/esm/list/list-item/list-item.d.ts

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IListItemSelectEventData } from './list-item-constants';
+import { IListItemSelectEventData, ListItemFocusPropagation } from './list-item-constants';
 import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { BaseComponent } from '../../core/base/base-component';
@@ -17,6 +17,7 @@ export interface IListItemProperties<T = unknown> {
     threeLine: boolean;
     wrap: boolean;
     noninteractive: boolean;
+    focusPropagation: ListItemFocusPropagation;
 }
 export interface IListItemComponent<T = unknown> extends IListItemProperties<T>, IWithElementInternals, IWithDefaultAria {
 }
@@ -43,6 +44,7 @@ declare const ListItemComponent_base: import("../..").AbstractConstructor<import
  * @property {boolean} [threeLine=false] - Sets the list item height to support at least three lines of text.
  * @property {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @property {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @property {boolean} [focusPropagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @attribute {boolean} [selected=false] - Applies the selected state to the list item.
  * @attribute {boolean} [active=false] - Applies the active state to the list item by emulating its focused state.
@@ -53,6 +55,7 @@ declare const ListItemComponent_base: import("../..").AbstractConstructor<import
  * @attribute {boolean} [three-line=false] - Sets the list item height to support at least three lines of text.
  * @attribute {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @attribute {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @attribute {boolean} [focus-propagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
  *
@@ -128,5 +131,6 @@ export declare class ListItemComponent extends ListItemComponent_base implements
     threeLine: boolean;
     wrap: boolean;
     noninteractive: boolean;
+    focusPropagation: ListItemFocusPropagation;
 }
 export {};

package/esm/list/list-item/list-item.js

@@ -29,6 +29,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--fo
  * @property {boolean} [threeLine=false] - Sets the list item height to support at least three lines of text.
  * @property {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @property {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @property {boolean} [focusPropagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @attribute {boolean} [selected=false] - Applies the selected state to the list item.
  * @attribute {boolean} [active=false] - Applies the active state to the list item by emulating its focused state.
@@ -39,6 +40,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--fo
  * @attribute {boolean} [three-line=false] - Sets the list item height to support at least three lines of text.
  * @attribute {boolean} [wrap=false] - Sets the list item to wrap its text content.
  * @attribute {boolean} [noninteractive=false] - Controls whether the list item will automatically attach itself to interactive slotted elements or not.
+ * @attribute {boolean} [focus-propagation="allow"] - Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.
  *
  * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
  *
@@ -142,6 +144,9 @@ let ListItemComponent = class ListItemComponent extends WithElementInternals(Wit
             case LIST_ITEM_CONSTANTS.observedAttributes.NONINTERACTIVE:
                 this.noninteractive = coerceBoolean(newValue);
                 break;
+            case LIST_ITEM_CONSTANTS.observedAttributes.FOCUS_PROPAGATION:
+                this.focusPropagation = newValue;
+                break;
         }
     }
 };
@@ -172,6 +177,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], ListItemComponent.prototype, "noninteractive", void 0);
+__decorate([
+    coreProperty()
+], ListItemComponent.prototype, "focusPropagation", void 0);
 ListItemComponent = __decorate([
     customElement({
         name: LIST_ITEM_CONSTANTS.elementName,

package/esm/list-dropdown/list-dropdown-utils.js

@@ -152,6 +152,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
             }
             let listItemElement = document.createElement('forge-list-item');
             listItemElement.value = option.value;
+            listItemElement.focusPropagation = 'off';
             listItemElement.setAttribute('role', 'presentation');
             const buttonElement = document.createElement('button');
             buttonElement.type = 'button';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {