@tylertech/forge 3.3.1 → 3.3.3

package/dist/scaffold/forge-scaffold.css

@@ -6,7 +6,7 @@
 .forge-scaffold {
   --_scaffold-height: var(--forge-scaffold-height, 100%);
   --_scaffold-width: var(--forge-scaffold-width, 100%);
-  --_scaffold-overflow: var(--forge-scaffold-overflow, hidden);
+  --_scaffold-overflow: var(--forge-scaffold-overflow, initial);
   --_scaffold-body-position: var(--forge-scaffold-body-position, relative);
 }
 
@@ -40,7 +40,7 @@
   grid-area: body;
   min-width: 0;
   min-height: 0;
-  overflow: hidden;
+  overflow: var(--_scaffold-overflow);
 }
 .forge-scaffold__body > * {
   overflow: auto;

package/dist/vscode.html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "name": "forge-accordion",
-      "description": "\n---\n",
+      "description": "\n---\n\n\n### **Events:**\n - **forge-accordion-toggle** - Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.",
       "attributes": [
         {
           "name": "panel-selector",

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

@@ -8,4 +8,7 @@ export declare const ACCORDION_CONSTANTS: {
     attributes: {
         PANEL_SELECTOR: string;
     };
+    events: {
+        TOGGLE: string;
+    };
 };

package/esm/accordion/accordion-constants.js

@@ -8,7 +8,11 @@ const elementName = `${COMPONENT_NAME_PREFIX}accordion`;
 const attributes = {
     PANEL_SELECTOR: 'panel-selector'
 };
+const events = {
+    TOGGLE: `${elementName}-toggle`
+};
 export const ACCORDION_CONSTANTS = {
     elementName,
-    attributes
+    attributes,
+    events
 };

package/esm/accordion/accordion-core.js

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { EXPANSION_PANEL_CONSTANTS } from '../expansion-panel/expansion-panel-constants';
+import { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from '../expansion-panel/expansion-panel-constants';
 import { ACCORDION_CONSTANTS } from './accordion-constants';
 export class AccordionCore {
     constructor(_adapter) {
@@ -27,9 +27,12 @@ export class AccordionCore {
         const panels = this._adapter.getChildPanels(this._panelSelector);
         panels.forEach(panel => {
             if (evt.target !== panel && !this._adapter.isNestedPanel(panel)) {
-                panel.open = false;
+                if (panel.open) {
+                    panel[emulateUserToggle](false);
+                }
             }
         });
+        this._adapter.dispatchHostEvent(new CustomEvent(ACCORDION_CONSTANTS.events.TOGGLE, { detail: evt.target, bubbles: true, composed: true }));
     }
     get panelSelector() {
         return this._panelSelector;

package/esm/accordion/accordion.d.ts

@@ -16,6 +16,8 @@ declare global {
  * @tag forge-accordion
  *
  * @dependency forge-expansion-panel
+ *
+ * @fires {CustomEvent<IExpansionPanelComponent>} forge-accordion-toggle - Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.
  */
 export declare class AccordionComponent extends BaseComponent implements IAccordionComponent {
     static get observedAttributes(): string[];

package/esm/accordion/accordion.js

@@ -14,6 +14,8 @@ import { AccordionCore } from './accordion-core';
  * @tag forge-accordion
  *
  * @dependency forge-expansion-panel
+ *
+ * @fires {CustomEvent<IExpansionPanelComponent>} forge-accordion-toggle - Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.
  */
 let AccordionComponent = class AccordionComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/card/card.js

@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/f
 import { BaseComponent } from '../core/base/base-component';
 import { CARD_CONSTANTS } from './card-constants';
 const template = '<template><div class=\"forge-card\" part=\"root\"><slot></slot></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, hidden);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host([raised]) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-card{--_card-background:var(--forge-card-background, var(--forge-theme-surface, #ffffff));--_card-height:var(--forge-card-height, 100%);--_card-width:var(--forge-card-width, 100%);--_card-outline-color:var(--forge-card-outline-color, var(--forge-theme-outline, #e0e0e0));--_card-outline-width:var(--forge-card-outline-width, var(--forge-border-thin, 1px));--_card-outline-style:var(--forge-card-outline-style, solid);--_card-elevation:var(--forge-card-elevation, none);--_card-padding:var(--forge-card-padding, var(--forge-spacing-medium, 16px));--_card-shape:var(--forge-card-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_card-overflow:var(--forge-card-overflow, initial);--_card-raised-elevation:var(--forge-card-raised-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_card-raised-outline-width:var(--forge-card-raised-outline-width, 0)}.forge-card{background:var(--_card-background);border-color:var(--_card-outline-color);border-width:var(--_card-outline-width);border-style:var(--_card-outline-style);border-radius:var(--_card-shape);box-shadow:var(--_card-elevation);box-sizing:border-box;padding:var(--_card-padding);overflow:var(--_card-overflow);height:var(--_card-height);width:var(--_card-width);-webkit-tap-highlight-color:transparent}:host([raised]) .forge-card{--_card-elevation:var(--_card-raised-elevation);--_card-outline-width:var(--_card-raised-outline-width)}:host([no-padding]) .forge-card{--_card-padding:var(--forge-card-padding, 0)}';
 /**
  * @tag forge-card
  *

package/esm/chip-field/chip-field-adapter.d.ts

@@ -11,6 +11,7 @@ export interface IChipFieldAdapter extends IBaseFieldAdapter {
     readonly popoverTargetElement: HTMLElement;
     readonly hasInputValue: boolean;
     readonly inputHasFocus: boolean;
+    readonly inputElement: HTMLInputElement | undefined;
     initialize(): void;
     addRootListener(type: string, listener: EventListener, options?: EventListenerOptions): void;
     removeRootListener(type: string, listener: EventListener, options?: EventListenerOptions): void;
@@ -38,6 +39,7 @@ export declare class ChipFieldAdapter extends BaseFieldAdapter implements IChipF
     get hasPlaceholder(): boolean;
     get hasInputValue(): boolean;
     get inputHasFocus(): boolean;
+    get inputElement(): HTMLInputElement | undefined;
     get popoverTargetElement(): HTMLElement;
     constructor(component: IChipFieldComponent);
     initialize(): void;

package/esm/chip-field/chip-field-adapter.js

@@ -22,6 +22,9 @@ export class ChipFieldAdapter extends BaseFieldAdapter {
     get inputHasFocus() {
         return !!this._inputElement?.matches(':focus');
     }
+    get inputElement() {
+        return this._inputElement;
+    }
     get popoverTargetElement() {
         if (!this._popoverTargetElement) {
             this._popoverTargetElement = getShadowElement(this._fieldElement, FIELD_CONSTANTS.selectors.POPOVER_TARGET);

package/esm/chip-field/chip-field-core.js

@@ -56,10 +56,13 @@ export class ChipFieldCore extends BaseFieldCore {
             return;
         }
     }
-    _onClick(_evt) {
+    _onClick(evt) {
         if (this._disabled) {
             return;
         }
+        if (evt.target === this._adapter.inputElement) {
+            return;
+        }
         this._adapter.focusInput();
         this._adapter.clickInput();
     }

package/esm/expansion-panel/expansion-panel-adapter.d.ts

@@ -10,10 +10,13 @@ export interface IExpansionPanelAdapter extends IBaseAdapter {
     addHeaderListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
     tryToggleOpenIcon(value: boolean): void;
     setContentVisibility(visible: boolean): void;
+    animationStart(): void;
+    animationEnd(): void;
 }
 export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelComponent> implements IExpansionPanelAdapter {
     private _headerElement;
     private _contentElement;
+    private _innerElement;
     private _transitionStartListener;
     private _transitionEndListener;
     private _transitionCompleteListener;
@@ -24,4 +27,6 @@ export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelCo
     setContentVisibility(visible: boolean): void;
     private _onTransitionStart;
     private _onTransitionEnd;
+    animationStart(): void;
+    animationEnd(): void;
 }

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -13,6 +13,7 @@ export class ExpansionPanelAdapter extends BaseAdapter {
         this._transitionEndListener = this._onTransitionEnd.bind(this);
         this._headerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER);
         this._contentElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.CONTENT);
+        this._innerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.INNER);
     }
     setAnimationCompleteListener(listener) {
         this._transitionCompleteListener = listener;
@@ -42,4 +43,10 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             this._transitionCompleteListener();
         }
     }
+    animationStart() {
+        this._innerElement.style.overflow = 'hidden';
+    }
+    animationEnd() {
+        this._innerElement.style.removeProperty('overflow');
+    }
 }

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -22,6 +22,7 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
     selectors: {
         HEADER: string;
         CONTENT: string;
+        INNER: string;
         IGNORE: string;
         OPEN_ICON: string;
     };
@@ -32,3 +33,4 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
 };
 export type ExpansionPanelOrientation = 'horizontal' | 'vertical';
 export type ExpansionPanelAnimationType = 'default' | 'none';
+export declare const emulateUserToggle: unique symbol;

package/esm/expansion-panel/expansion-panel-constants.js

@@ -21,6 +21,7 @@ const classes = {
 const selectors = {
     HEADER: '.header',
     CONTENT: '.content',
+    INNER: '.inner',
     IGNORE: ':is([data-forge-ignore],[forge-ignore])',
     OPEN_ICON: `:is([slot=header] ${OPEN_ICON_CONSTANTS.elementName}, ${OPEN_ICON_CONSTANTS.elementName}[slot^=header])`
 };
@@ -36,3 +37,4 @@ export const EXPANSION_PANEL_CONSTANTS = {
     selectors,
     events
 };
+export const emulateUserToggle = Symbol('emulateUserToggle');

package/esm/expansion-panel/expansion-panel-core.d.ts

@@ -9,6 +9,7 @@ export interface IExpansionPanelCore {
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
+    dispatchToggleEvent(): void;
 }
 export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _adapter;
@@ -24,7 +25,7 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _onKeydown;
     private _onAnimationComplete;
     private _togglePanel;
-    private _dispatchToggleEvent;
+    dispatchToggleEvent(): void;
     private _toggle;
     get open(): boolean;
     set open(value: boolean);

package/esm/expansion-panel/expansion-panel-core.js

@@ -28,30 +28,36 @@ export class ExpansionPanelCore {
         }
         evt.stopPropagation();
         this._toggle();
-        this._dispatchToggleEvent();
+        this.dispatchToggleEvent();
     }
     _onKeydown(evt) {
         if (evt.key === ' ' || evt.key === 'Enter') {
             evt.stopPropagation();
             evt.preventDefault();
             this._toggle();
-            this._dispatchToggleEvent();
+            this.dispatchToggleEvent();
         }
     }
     _onAnimationComplete() {
         if (!this._open) {
             this._adapter.setContentVisibility(false);
         }
+        else if (this._animationType !== 'none') {
+            this._adapter.animationEnd();
+        }
         this._adapter.dispatchHostEvent(new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.ANIMATION_COMPLETE, { detail: this._open }));
     }
     _togglePanel() {
         this._adapter.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, this._open);
         this._adapter.tryToggleOpenIcon(this._open);
         if (this._open) {
+            if (this._animationType !== 'none') {
+                this._adapter.animationStart();
+            }
             this._adapter.setContentVisibility(true);
         }
     }
-    _dispatchToggleEvent() {
+    dispatchToggleEvent() {
         const evt = new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.TOGGLE, {
             detail: this._open,
             bubbles: true,

package/esm/expansion-panel/expansion-panel.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { ExpansionPanelAnimationType, ExpansionPanelOrientation } from './expansion-panel-constants';
+import { ExpansionPanelAnimationType, ExpansionPanelOrientation, emulateUserToggle } from './expansion-panel-constants';
 export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
     orientation: ExpansionPanelOrientation;
@@ -63,4 +63,10 @@ export declare class ExpansionPanelComponent extends BaseComponent implements IE
      * Toggles the open state of the panel.
      */
     toggle(): void;
+    /**
+     * @internal
+     *
+     * Emulates a user toggle of the panel, by also dispatching the toggle event.
+     */
+    [emulateUserToggle](open: boolean): void;
 }

package/esm/expansion-panel/expansion-panel.js

@@ -7,10 +7,10 @@ import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAdapter } from './expansion-panel-adapter';
-import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
+import { EXPANSION_PANEL_CONSTANTS, emulateUserToggle } from './expansion-panel-constants';
 import { ExpansionPanelCore } from './expansion-panel-core';
 const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"content hidden\" part=\"content\"><div class=\"inner\"><slot></slot></div></div></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;transition-property:visibility,opacity,grid-template-rows;transition-duration:var(--_expansion-panel-animation-duration);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;overflow:hidden;opacity:0}.content .inner{display:grid;grid-template-rows:1fr;overflow:hidden}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{transition:none}}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{transition-property:opacity,grid-template-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{transition:none}';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;transition-property:visibility,opacity,grid-template-rows;transition-duration:var(--_expansion-panel-animation-duration);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;opacity:0}.content .inner{display:grid;grid-template-rows:1fr}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{transition:none}}:host(:not([open])) .inner{overflow:hidden}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{transition-property:opacity,grid-template-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{transition:none}';
 /**
  * @tag forge-expansion-panel
  *
@@ -72,6 +72,18 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
     toggle() {
         this.open = !this.open;
     }
+    /**
+     * @internal
+     *
+     * Emulates a user toggle of the panel, by also dispatching the toggle event.
+     */
+    [emulateUserToggle](open) {
+        if (this.open === open) {
+            return;
+        }
+        this.open = open;
+        this._core.dispatchToggleEvent();
+    }
 };
 __decorate([
     coreProperty()

package/esm/field/field-adapter.d.ts

@@ -20,6 +20,7 @@ export interface IFieldAdapter extends IBaseAdapter<IFieldComponent> {
 export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implements IFieldAdapter {
     private readonly _rootElement;
     private readonly _containerElement;
+    private readonly _inputContainerElement;
     private readonly _labelElement;
     private readonly _popoverIconElement;
     private readonly _focusIndicatorElement;

package/esm/field/field-adapter.js

@@ -15,6 +15,7 @@ export class FieldAdapter extends BaseAdapter {
         super(component);
         this._rootElement = getShadowElement(component, FIELD_CONSTANTS.selectors.ROOT);
         this._containerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.CONTAINER);
+        this._inputContainerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.INPUT_CONTAINER);
         this._labelElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL);
         this._popoverIconElement = getShadowElement(component, FIELD_CONSTANTS.selectors.POPOVER_ICON);
         this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
@@ -45,14 +46,22 @@ export class FieldAdapter extends BaseAdapter {
      * Adds or removes animation classes on the root element.
      */
     setFloatingLabel(value, skipAnimation = false) {
-        if (skipAnimation) {
+        if (skipAnimation || !this._labelElement) {
             return;
         }
+        // Temporarily lock the input container element width to its current width before the animation starts
+        // to ensure that the element cannot collapse while the animation is executing. The width will be
+        // removed after the animation completes.
+        const { width: inputContainerWidth } = this._inputContainerElement.getBoundingClientRect();
+        if (inputContainerWidth > 0) {
+            this._inputContainerElement.style.setProperty('width', `${inputContainerWidth}px`);
+        }
         const className = value ? FIELD_CONSTANTS.classes.FLOATING_IN : FIELD_CONSTANTS.classes.FLOATING_OUT;
         const animationName = value ? FIELD_CONSTANTS.animations.FLOAT_IN_LABEL : FIELD_CONSTANTS.animations.FLOAT_OUT_LABEL;
         const animationEndListener = (evt) => {
             if (evt.animationName === animationName) {
                 removeClass(className, this._rootElement);
+                this._inputContainerElement.style.removeProperty('width');
                 this._rootElement.removeEventListener('animationend', animationEndListener);
             }
         };

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

@@ -59,6 +59,7 @@ export declare const FIELD_CONSTANTS: {
     selectors: {
         ROOT: string;
         CONTAINER: string;
+        INPUT_CONTAINER: string;
         LABEL: string;
         POPOVER_ICON: string;
         LABEL_ELEMENTS: string;

package/esm/field/field-constants.js

@@ -30,6 +30,7 @@ const classes = {
 const selectors = {
     ROOT: '#root',
     CONTAINER: '#container',
+    INPUT_CONTAINER: '#input',
     LABEL: '#label',
     POPOVER_ICON: '#popover-icon',
     LABEL_ELEMENTS: `:where(label, ${LABEL_CONSTANTS.elementName})`,