@tylertech/forge 3.13.1 → 3.14.0-dev.0

package/dist/utils/forge-grid.css

@@ -1,54 +1,6 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-.forge-grid--horizontal {
-  display: grid;
-  grid-template-columns: 1fr;
-  align-items: center;
-}
-
-.forge-grid-auto-1fr--horizontal {
-  display: grid;
-  grid-template-columns: auto 1fr;
-}
-
-.forge-grid-auto-1fr-auto--horizontal {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-}
-
-.forge-grid-1fr-auto--horizontal {
-  display: grid;
-  grid-template-columns: 1fr auto;
-}
-
-.forge-grid--vertical {
-  display: grid;
-  grid-template-rows: 1fr;
-  align-items: center;
-}
-
-.forge-grid-auto-1fr--vertical {
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-
-.forge-grid-auto-1fr-auto--vertical {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-}
-
-.forge-grid-1fr-auto--vertical {
-  display: grid;
-  grid-template-rows: 1fr auto;
-}
-
-.forge-grid-item--left {
-  margin-right: auto;
-}
-
-.forge-grid-item--right {
-  margin-left: auto;
-}
+.forge-grid--horizontal{display:grid;grid-template-columns:1fr;align-items:center}.forge-grid-auto-1fr--horizontal{display:grid;grid-template-columns:auto 1fr}.forge-grid-auto-1fr-auto--horizontal{display:grid;grid-template-columns:auto 1fr auto}.forge-grid-1fr-auto--horizontal{display:grid;grid-template-columns:1fr auto}.forge-grid--vertical{display:grid;grid-template-rows:1fr;align-items:center}.forge-grid-auto-1fr--vertical{display:grid;grid-template-rows:auto 1fr}.forge-grid-auto-1fr-auto--vertical{display:grid;grid-template-rows:auto 1fr auto}.forge-grid-1fr-auto--vertical{display:grid;grid-template-rows:1fr auto}.forge-grid-item--left{margin-right:auto}.forge-grid-item--right{margin-left:auto}

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

@@ -1,8 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
 export declare const ACCORDION_CONSTANTS: {
     elementName: "forge-accordion";
     attributes: {

package/esm/accordion/accordion-constants.js

@@ -1,9 +1,11 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../constants';
+
+import { COMPONENT_NAME_PREFIX } from '../constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}accordion`;
 const attributes = {
     PANEL_SELECTOR: 'panel-selector'
@@ -11,8 +13,11 @@ const attributes = {
 const events = {
     TOGGLE: `${elementName}-toggle`
 };
-export const ACCORDION_CONSTANTS = {
+/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
+const ACCORDION_CONSTANTS = {
     elementName,
     attributes,
     events
 };
+
+export { ACCORDION_CONSTANTS };

package/esm/accordion/accordion.d.ts

@@ -1,17 +1,12 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { IBaseComponent } from '../core/base/base-component.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.js';
+/** @deprecated - This will be removed in the future. Please switch to using AccordionComponent. */
 export interface IAccordionComponent extends IBaseComponent {
     panelSelector: string;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'forge-accordion': IAccordionComponent;
-    }
-}
+export declare const ACCORDION_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-accordion
  *
@@ -21,16 +16,23 @@ declare global {
  *
  * @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[];
-    private _core;
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+export declare class AccordionComponent extends BaseLitElement {
+    #private;
+    /** @deprecated - Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
+    /** @deprecated - Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY]: (typeof ExpansionPanelComponent)[];
     /**
      * Gets/sets the selector to use for finding the child expansion panels. Defaults to searching the direct children for `<forge-expansion-panel>` elements.
      * Use this if you need to scope this accordion to a specific set of expansion panels, or your expansion panels are not direct children of the accordion.
      * @attribute panel-selector
      */
-    panelSelector: string;
+    panelSelector?: string;
+    connectedCallback(): void;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-accordion': AccordionComponent;
+    }
 }

package/esm/accordion/accordion.js

@@ -1,15 +1,18 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { customElement, coreProperty } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { ExpansionPanelComponent } from '../expansion-panel';
-import { AccordionAdapter } from './accordion-adapter';
-import { ACCORDION_CONSTANTS } from './accordion-constants';
-import { AccordionCore } from './accordion-core';
+
+import { __decorate } from 'tslib';
+import { CUSTOM_ELEMENT_NAME_PROPERTY, CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY, elementParents } from '@tylertech/forge-core';
+import { property, customElement } from 'lit/decorators.js';
+import { BaseLitElement } from '../core/base/base-lit-element.js';
+import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.js';
+import { emulateUserToggle } from '../expansion-panel/expansion-panel-constants.js';
+
+var _a, _b;
+const ACCORDION_TAG_NAME = 'forge-accordion';
 /**
  * @tag forge-accordion
  *
@@ -19,32 +22,58 @@ import { AccordionCore } from './accordion-core';
  *
  * @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() {
-        return [ACCORDION_CONSTANTS.attributes.PANEL_SELECTOR];
+let AccordionComponent = class AccordionComponent extends BaseLitElement {
+    static { _a = CUSTOM_ELEMENT_NAME_PROPERTY, _b = CUSTOM_ELEMENT_DEPENDENCIES_PROPERTY; }
+    /** @deprecated - Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_a] = ACCORDION_TAG_NAME; }
+    /** @deprecated - Used for compatibility with legacy Forge @customElement decorator. */
+    static { this[_b] = [ExpansionPanelComponent]; }
+    #onToggle = (evt) => this.#handleToggle(evt);
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('forge-expansion-panel-toggle', this.#onToggle);
     }
-    constructor() {
-        super();
-        this._core = new AccordionCore(new AccordionAdapter(this));
+    createRenderRoot() {
+        return this;
     }
-    connectedCallback() {
-        this._core.initialize();
+    #handleToggle(evt) {
+        if (!evt.detail || (this.panelSelector && !evt.target.matches(this.panelSelector))) {
+            return;
+        }
+        evt.stopPropagation();
+        if (this.#isNestedPanel(evt.target)) {
+            return;
+        }
+        const panels = this.#getChildPanels();
+        panels.forEach(panel => {
+            if (evt.target !== panel && !this.#isNestedPanel(panel)) {
+                if (panel.open) {
+                    panel[emulateUserToggle](false);
+                }
+            }
+        });
+        this.dispatchEvent(new CustomEvent('forge-accordion-toggle', { detail: evt.target, bubbles: true, composed: true }));
+    }
+    #isNestedPanel(element) {
+        if (!element || !this.contains(element)) {
+            return false;
+        }
+        const parents = elementParents(element, this);
+        return parents.some(el => el.tagName.toLocaleLowerCase() === 'forge-expansion-panel');
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case ACCORDION_CONSTANTS.attributes.PANEL_SELECTOR:
-                this.panelSelector = newValue;
-                break;
+    #getChildPanels() {
+        if (this.panelSelector) {
+            return Array.from(this.querySelectorAll(this.panelSelector)).filter(el => el.tagName.toLocaleLowerCase() === 'forge-expansion-panel');
         }
+        const children = Array.from(this.children);
+        return children.filter(child => child.tagName.toLocaleLowerCase() === 'forge-expansion-panel');
     }
 };
 __decorate([
-    coreProperty()
+    property({ type: String, attribute: 'panel-selector', reflect: true })
 ], AccordionComponent.prototype, "panelSelector", void 0);
 AccordionComponent = __decorate([
-    customElement({
-        name: ACCORDION_CONSTANTS.elementName,
-        dependencies: [ExpansionPanelComponent]
-    })
+    customElement(ACCORDION_TAG_NAME)
 ], AccordionComponent);
-export { AccordionComponent };
+
+export { ACCORDION_TAG_NAME, AccordionComponent };

package/esm/accordion/index.d.ts

@@ -1,10 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './accordion-adapter';
-export * from './accordion-constants';
-export * from './accordion-core';
-export * from './accordion';
+export * from './accordion-constants.js';
+export * from './accordion.js';
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/accordion'`). */
 export declare function defineAccordionComponent(): void;

package/esm/accordion/index.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { AccordionComponent } from './accordion';
-export * from './accordion-adapter';
-export * from './accordion-constants';
-export * from './accordion-core';
-export * from './accordion';
-export function defineAccordionComponent() {
+import { AccordionComponent } from './accordion.js';
+export { ACCORDION_TAG_NAME } from './accordion.js';
+export { ACCORDION_CONSTANTS } from './accordion-constants.js';
+
+/** @deprecated Definition functions are deprecated and replaced with side effect imports (`import '@tylertech/forge/accordion'`). */
+function defineAccordionComponent() {
     defineCustomElement(AccordionComponent);
 }
+
+export { AccordionComponent, defineAccordionComponent };

package/esm/app-bar/app-bar/app-bar-constants.d.ts

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 export declare const elementName: keyof HTMLElementTagNameMap;
 export declare const APP_BAR_CONSTANTS: {
     elementName: "forge-app-bar";

package/esm/app-bar/app-bar/app-bar-constants.js

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../../constants';
-export const elementName = `${COMPONENT_NAME_PREFIX}app-bar`;
+
+import { COMPONENT_NAME_PREFIX } from '../../constants.js';
+
+const elementName = `${COMPONENT_NAME_PREFIX}app-bar`;
 const observedAttributes = {
     TITLE_TEXT: 'title-text',
     ELEVATION: 'elevation',
@@ -30,10 +32,12 @@ const selectors = {
 const events = {
     NAVIGATE: `${elementName}-navigate`
 };
-export const APP_BAR_CONSTANTS = {
+const APP_BAR_CONSTANTS = {
     elementName,
     selectors,
     attributes,
     classes,
     events
 };
+
+export { APP_BAR_CONSTANTS, elementName };

package/esm/app-bar/app-bar/app-bar.d.ts

@@ -1,10 +1,9 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { AppBarElevation, AppBarTheme, AppBarThemeMode } from './app-bar-constants';
-import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { TemplateResult } from 'lit';
+import { IBaseComponent } from '../../core/base/base-component.js';
+import { BaseLitElement } from '../../core/base/base-lit-element.js';
+import { AppBarElevation, AppBarTheme, AppBarThemeMode } from './app-bar-constants.js';
+/** @deprecated - This will be removed in the future. Please switch to using AppBarComponent. */
 export interface IAppBarComponent extends IBaseComponent {
     titleText: string;
     elevation: AppBarElevation;
@@ -13,33 +12,11 @@ export interface IAppBarComponent extends IBaseComponent {
     href: string;
     target: string;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'forge-app-bar': IAppBarComponent;
-    }
-    interface HTMLElementEventMap {
-        'forge-app-bar-navigate': CustomEvent<void>;
-    }
-}
 /**
  * @tag forge-app-bar
  *
  * @summary App bars are headers used to display branding, navigation, and actions at the top of an application. They typically contain a logo, title, and various action items.
  *
- * @property {string} titleText - The text to display in the title.
- * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
- * @property {AppBarTheme} theme - The theme of the app bar.
- * @property {string} href - The href that will be used to make the logo and title area a clickable link.
- * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
- * @property {AppBarThemeMode} [themeMode="inherit"] - Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
- *
- * @attribute {string} title-text - The text to display in the title.
- * @attribute {string} [elevation="raised"] - The elevation of the app bar.
- * @attribute {string} theme - The theme of the app bar.
- * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
- * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
- * @attribute {string} [theme-mode="inherit"] - Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
- *
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
  * @cssproperty --forge-app-bar-theme-foreground - The text color of the app bar when using the **scoped theme mode**.
@@ -77,16 +54,56 @@ declare global {
  * @cssclass forge-app-bar__section-center - The center section of the app bar.
  * @cssclass forge-app-bar__section-end - The end section of the app bar.
  */
-export declare class AppBarComponent extends BaseComponent implements IAppBarComponent {
-    static get observedAttributes(): string[];
-    private _core;
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+export declare class AppBarComponent extends BaseLitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: "forge-app-bar";
+    /**
+     * The text to display in the title.
+     * @default ''
+     * @attribute title-text
+     */
     titleText: string;
+    /**
+     * The elevation of the app bar.
+     * @default 'raised'
+     * @attribute elevation
+     */
     elevation: AppBarElevation;
+    /**
+     * The theme of the app bar.
+     * @default ''
+     * @attribute theme
+     */
     theme: AppBarTheme;
+    /**
+     * The href that will be used to make the logo and title area a clickable link.
+     * @default ''
+     * @attribute href
+     */
     href: string;
+    /**
+     * The `<a>` target of the logo + title area link when `href` is set.
+     * @default ''
+     * @attribute target
+     */
     target: string;
+    /**
+     * Controls how the theme is applied. `inherit` will apply the global theme to the app bar and all child components. `scoped` will only apply the theme to the app bar and not set any global tokens.
+     * @default 'inherit'
+     * @attribute theme-mode
+     */
     themeMode: AppBarThemeMode;
+    constructor();
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-app-bar': IAppBarComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-app-bar-navigate': CustomEvent<void>;
+    }
 }