@tylertech/forge 3.0.0-next.14 → 3.0.0-next.16

package/esm/overlay/overlay-foundation.js

@@ -0,0 +1,288 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseOverlayFoundation } from './base/base-overlay-foundation';
+import { SUPPORTS_POPOVER, OVERLAY_CONSTANTS } from './overlay-constants';
+export class OverlayFoundation extends BaseOverlayFoundation {
+    constructor(adapter) {
+        super(adapter);
+        this._noAnchor = false;
+        this._open = false;
+        this._inline = false;
+        this._placement = 'bottom';
+        this._positionStrategy = 'fixed';
+        this._offset = {};
+        this._shift = false;
+        this._hide = OVERLAY_CONSTANTS.defaults.HIDE;
+        this._flip = OVERLAY_CONSTANTS.defaults.FLIP;
+        this._fallbackPlacements = null;
+        this._persistent = false;
+        this._arrowElementOffset = 0;
+        this._lightDismissListener = this._onLightDismiss.bind(this);
+    }
+    initialize() {
+        if (!this._noAnchor && !this._anchorElement && this._anchor) {
+            this._anchorElement = this._adapter.locateAnchorElement(this._anchor);
+        }
+        /* c8 ignore next 3 */
+        if (!SUPPORTS_POPOVER) {
+            this.inline = true;
+        }
+        if (this._adapter.hasHostAttribute(OVERLAY_CONSTANTS.attributes.OPEN)) {
+            this._applyOpen(true);
+        }
+    }
+    destroy() {
+        if (this._open) {
+            this._hideOverlay();
+        }
+    }
+    position() {
+        var _a;
+        if (!this._open || this._noAnchor || !this._anchorElement) {
+            return;
+        }
+        // Placement can only accept `PositionPlacement` values, so we coerce the value to a
+        // `PositionPlacement` when `'auto'` is provided
+        const positionPlacement = this._placement === 'auto' ? 'bottom' : this._placement;
+        this._adapter.positionElement({
+            anchorElement: this._anchorElement,
+            strategy: this._positionStrategy,
+            placement: positionPlacement,
+            auto: this._placement === 'auto',
+            hide: this._hide,
+            offset: this._offset,
+            shift: this._shift,
+            flip: this._flip,
+            boundary: this._boundary,
+            boundaryElement: this._boundaryElement,
+            fallbackPlacements: (_a = this._fallbackPlacements) !== null && _a !== void 0 ? _a : undefined
+        });
+    }
+    _onLightDismiss(reason) {
+        const detail = { reason };
+        const evt = new CustomEvent(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, { bubbles: false, cancelable: true, detail });
+        this._adapter.dispatchHostEvent(evt);
+        if (evt.defaultPrevented) {
+            return;
+        }
+        this._applyOpen(false);
+    }
+    _applyOpen(value) {
+        if (!this._adapter.isConnected) {
+            return;
+        }
+        this._open = value;
+        if (this._open) {
+            this._showOverlay();
+        }
+        else {
+            this._hideOverlay();
+        }
+        this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.OPEN, this._open);
+    }
+    _showOverlay() {
+        this._adapter.show();
+        if (!this._persistent) {
+            this._applyLightDismissListener();
+        }
+        if (!this._noAnchor && this._anchorElement) {
+            this.position();
+        }
+    }
+    _hideOverlay() {
+        this._adapter.tryHideDescendantOverlays();
+        this._adapter.hide();
+        this._adapter.removeLightDismissListener();
+    }
+    _applyLightDismissListener() {
+        this._adapter.addLightDismissListener(this._lightDismissListener);
+    }
+    get anchorElement() {
+        return this._anchorElement;
+    }
+    set anchorElement(value) {
+        this._anchorElement = value;
+        if (this._open) {
+            this.position();
+        }
+    }
+    get anchor() {
+        return this._anchor;
+    }
+    set anchor(value) {
+        if (this._anchor !== value) {
+            this._anchor = value;
+            if (this._adapter.isConnected) {
+                this._anchorElement = this._anchor ? this._adapter.locateAnchorElement(this._anchor) : null;
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.ANCHOR, !!this._anchor, this._anchor);
+        }
+    }
+    get noAnchor() {
+        return this._noAnchor;
+    }
+    set noAnchor(value) {
+        value = Boolean(value);
+        if (this._noAnchor !== value) {
+            this._noAnchor = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.NO_ANCHOR, this._noAnchor);
+        }
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            this._applyOpen(value);
+        }
+    }
+    get arrowElement() {
+        return this._arrowElement;
+    }
+    set arrowElement(value) {
+        this._arrowElement = value;
+        if (this._open) {
+            this.position();
+        }
+    }
+    get arrowElementOffset() {
+        return this._arrowElementOffset;
+    }
+    set arrowElementOffset(value) {
+        this._arrowElementOffset = value;
+        if (this._open) {
+            this.position();
+        }
+    }
+    get inline() {
+        return this._inline;
+    }
+    set inline(value) {
+        // We force inline mode to true when the native Popover API isn't supported
+        value = SUPPORTS_POPOVER ? Boolean(value) : true;
+        if (this._inline !== value) {
+            this._inline = value;
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.INLINE, this._inline);
+        }
+    }
+    get placement() {
+        return this._placement;
+    }
+    set placement(value) {
+        if (this._placement !== value) {
+            this._placement = value;
+            if (this._open) {
+                this.position();
+            }
+            this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.PLACEMENT, this._placement);
+        }
+    }
+    get positionStrategy() {
+        return this._positionStrategy;
+    }
+    set positionStrategy(value) {
+        if (this._positionStrategy !== value) {
+            this._positionStrategy = value;
+            if (this._open) {
+                this.position();
+            }
+            this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.POSITION_STRATEGY, this._positionStrategy);
+        }
+    }
+    get offset() {
+        return this._offset;
+    }
+    set offset(value) {
+        this._offset = value;
+        if (this._open) {
+            this.position();
+        }
+    }
+    get shift() {
+        return this._shift;
+    }
+    set shift(value) {
+        value = Boolean(value);
+        if (this._shift !== value) {
+            this._shift = value;
+            if (this._open) {
+                this.position();
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._shift);
+        }
+    }
+    get hide() {
+        return this._hide;
+    }
+    set hide(value) {
+        if (this._hide !== value) {
+            this._hide = value !== null && value !== void 0 ? value : OVERLAY_CONSTANTS.defaults.HIDE;
+            if (this._open) {
+                this.position();
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.HIDE, this._hide !== OVERLAY_CONSTANTS.defaults.HIDE, String(this._hide));
+        }
+    }
+    get persistent() {
+        return this._persistent;
+    }
+    set persistent(value) {
+        value = Boolean(value);
+        if (this._persistent !== value) {
+            this._persistent = value;
+            if (this._persistent) {
+                this._adapter.removeLightDismissListener();
+            }
+            else if (this._open) {
+                this._applyLightDismissListener();
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.PERSISTENT, this._persistent);
+        }
+    }
+    get flip() {
+        return this._flip;
+    }
+    set flip(value) {
+        if (this._flip !== value) {
+            this._flip = value !== null && value !== void 0 ? value : OVERLAY_CONSTANTS.defaults.FLIP;
+            if (this._open) {
+                this.position();
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.FLIP, this._flip !== OVERLAY_CONSTANTS.defaults.FLIP, String(this._flip));
+        }
+    }
+    get boundary() {
+        return this._boundary;
+    }
+    set boundary(value) {
+        if (this._boundary !== value) {
+            this._boundary = value;
+            if (this._open) {
+                this.position();
+            }
+            this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.BOUNDARY, !!this._boundary, this._boundary);
+        }
+    }
+    get boundaryElement() {
+        return this._boundaryElement;
+    }
+    set boundaryElement(value) {
+        this._boundaryElement = value;
+        if (this._open) {
+            this.position();
+        }
+    }
+    get fallbackPlacements() {
+        return this._fallbackPlacements;
+    }
+    set fallbackPlacements(value) {
+        this._fallbackPlacements = value;
+        if (this._open) {
+            this.position();
+        }
+    }
+}

package/esm/overlay/overlay.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { OverlayLightDismissEventData, overlayStack } from './overlay-constants';
+import { OverlayFoundation } from './overlay-foundation';
+import { BaseOverlay, IBaseOverlay } from './base/base-overlay';
+export interface IOverlayComponent extends IBaseOverlay {
+    arrowElement: HTMLElement | undefined;
+    arrowElementOffset: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-overlay': IOverlayComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-overlay-light-dismiss': CustomEvent<OverlayLightDismissEventData>;
+    }
+}
+/**
+ * @tag forge-overlay
+ *
+ * @summary Overlays are used to render content in an element that rendered above all content on the page,
+ * and positioned around a specified anchor element.
+ *
+ * @description
+ * An overlay is a low-level building block component that does not provide any visual styles. Its only
+ * purpose is to render slotted content above all other content on the page. The element is positioned
+ * around an anchor element with various positioning options.
+ *
+ * @property {boolean} open - Whether or not the overlay is open.
+ * @property {boolean} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @property {HTMLElement} anchorElement - The element to anchor the overlay to.
+ * @property {HTMLElement} anchor - The id of the element to anchor the overlay to.
+ * @property {boolean} noAnchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @property {HTMLElement} arrowElement - The element to use as the arrow for the overlay.
+ * @property {number} arrowElementOffset - The offset to apply to the arrow element.
+ * @property {OverlayPlacement} placement - The placement of the overlay relative to the anchor element.
+ * @property {OverlayPositionStrategy} positionStrategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
+ * @property {boolean} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @property {OverlayHideState} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @property {OverlayFlipState} flip - Whether or not the overlay should flip to the opposite placement when not enough room.
+ * @property {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @property {HTMLElement | null} boundaryElement - The element to use as the boundary for the overlay.
+ * @property {OverlayPlacement[]} fallbackPlacements - The fallback placements to use when the overlay cannot be placed in the desired placement.
+ *
+ * @attribute {string} anchor - The id of the element to anchor the overlay to.
+ * @attribute {string} no-anchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @attribute {string} open - Whether or not the overlay is open.
+ * @attribute {string} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @attribute {string} placement - The placement of the overlay relative to the anchor element.
+ * @attribute {string} position-strategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @attribute {string} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @attribute {string} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @attribute {string} no-flip - Tells the overlay not to flip to the opposite placement when not enough room.
+ * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
+ * @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @attribute {string} fallback-placements - The fallback placements to use when the overlay cannot be placed in the desired placement. Should be a comma separated list of placements.
+ *
+ * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-light-dismiss - Dispatches when the overlay is light dismissed via the escape key or clicking outside the overlay.
+ *
+ * @cssproperty --forge-overlay-position - The `position` of the overlay.
+ * @cssproperty --forge-overlay-z-index - The `z-index` of the overlay. Defaults to the `popup` range.
+ * @cssproperty --forge-overlay-height - The `height` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-width - The `width` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-position-block-start - The `block-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-block-end - The `block-end` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-start - The `inline-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-end - The `inline-end` position of the overlay.
+ *
+ * @slot - The content to render inside the positioned overlay container.
+ *
+ * @csspart root - The component's root element.
+ */
+export declare class OverlayComponent extends BaseOverlay<OverlayFoundation> implements IOverlayComponent {
+    static get observedAttributes(): string[];
+    /**
+     * Contains all the overlays that are currently open.
+     */
+    static readonly [overlayStack]: Set<IOverlayComponent>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    arrowElement: HTMLElement;
+    arrowElementOffset: number;
+}

package/esm/overlay/overlay.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { OverlayAdapter } from './overlay-adapter';
+import { overlayStack, OVERLAY_CONSTANTS } from './overlay-constants';
+import { OverlayFoundation } from './overlay-foundation';
+import { BaseOverlay } from './base/base-overlay';
+const template = '<template><div class=\"forge-overlay\" part=\"root\"><slot></slot></div></template>';
+const styles = ':host{display:contents}:host([hidden]){display:none}.forge-overlay{--_overlay-position:var(--forge-overlay-position, fixed);--_overlay-z-index:var(--forge-overlay-z-index, var(--forge-z-index-popup, 10));--_overlay-height:var(--forge-overlay-height, fit-content);--_overlay-width:var(--forge-overlay-width, fit-content);--_overlay-position-inline-start:var(--forge-overlay-position-inline-start, auto);--_overlay-position-inline-end:var(--forge-overlay-position-inline-end, auto);--_overlay-position-block-start:var(--forge-overlay-position-block-start, auto);--_overlay-position-block-end:var(--forge-overlay-position-block-end, auto)}.forge-overlay{display:none;-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_overlay-height);width:var(--_overlay-width);border-radius:inherit;position:var(--_overlay-position);top:0;left:0;z-index:var(--_overlay-z-index);background:inherit;color:inherit}:host([position-strategy=absolute]) .forge-overlay{--_overlay-position:var(--forge-overlay-position, absolute)}:host([open][inline]) .forge-overlay{display:block;padding:0;margin:0;border:none;overflow:visible;inset:unset}:host([open]) .forge-overlay:popover-open{display:block;padding:0;margin:0;border:none;overflow:visible;inset:unset}:host([open][no-anchor]) .forge-overlay:popover-open{inset:0;margin:auto;-webkit-margin-start:var(--_overlay-position-inline-start);margin-inline-start:var(--_overlay-position-inline-start);-webkit-margin-end:var(--_overlay-position-inline-end);margin-inline-end:var(--_overlay-position-inline-end);-webkit-margin-before:var(--_overlay-position-block-start);margin-block-start:var(--_overlay-position-block-start);-webkit-margin-after:var(--_overlay-position-block-end);margin-block-end:var(--_overlay-position-block-end)}';
+/**
+ * @tag forge-overlay
+ *
+ * @summary Overlays are used to render content in an element that rendered above all content on the page,
+ * and positioned around a specified anchor element.
+ *
+ * @description
+ * An overlay is a low-level building block component that does not provide any visual styles. Its only
+ * purpose is to render slotted content above all other content on the page. The element is positioned
+ * around an anchor element with various positioning options.
+ *
+ * @property {boolean} open - Whether or not the overlay is open.
+ * @property {boolean} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @property {HTMLElement} anchorElement - The element to anchor the overlay to.
+ * @property {HTMLElement} anchor - The id of the element to anchor the overlay to.
+ * @property {boolean} noAnchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @property {HTMLElement} arrowElement - The element to use as the arrow for the overlay.
+ * @property {number} arrowElementOffset - The offset to apply to the arrow element.
+ * @property {OverlayPlacement} placement - The placement of the overlay relative to the anchor element.
+ * @property {OverlayPositionStrategy} positionStrategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
+ * @property {boolean} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @property {OverlayHideState} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @property {boolean} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @property {OverlayFlipState} flip - Whether or not the overlay should flip to the opposite placement when not enough room.
+ * @property {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @property {HTMLElement | null} boundaryElement - The element to use as the boundary for the overlay.
+ * @property {OverlayPlacement[]} fallbackPlacements - The fallback placements to use when the overlay cannot be placed in the desired placement.
+ *
+ * @attribute {string} anchor - The id of the element to anchor the overlay to.
+ * @attribute {string} no-anchor - Whether or not the overlay should be rendered without an anchor (centered on page by default).
+ * @attribute {string} open - Whether or not the overlay is open.
+ * @attribute {string} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
+ * @attribute {string} placement - The placement of the overlay relative to the anchor element.
+ * @attribute {string} position-strategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
+ * @attribute {string} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
+ * @attribute {string} persistent - Whether or not the overlay handles light dismiss itself or not.
+ * @attribute {string} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @attribute {string} no-flip - Tells the overlay not to flip to the opposite placement when not enough room.
+ * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
+ * @attribute {string} boundary - The id of the element to use as the boundary for the overlay.
+ * @attribute {string} fallback-placements - The fallback placements to use when the overlay cannot be placed in the desired placement. Should be a comma separated list of placements.
+ *
+ * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-light-dismiss - Dispatches when the overlay is light dismissed via the escape key or clicking outside the overlay.
+ *
+ * @cssproperty --forge-overlay-position - The `position` of the overlay.
+ * @cssproperty --forge-overlay-z-index - The `z-index` of the overlay. Defaults to the `popup` range.
+ * @cssproperty --forge-overlay-height - The `height` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-width - The `width` of the overlay. Defaults to `min-content`.
+ * @cssproperty --forge-overlay-position-block-start - The `block-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-block-end - The `block-end` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-start - The `inline-start` position of the overlay.
+ * @cssproperty --forge-overlay-position-inline-end - The `inline-end` position of the overlay.
+ *
+ * @slot - The content to render inside the positioned overlay container.
+ *
+ * @csspart root - The component's root element.
+ */
+let OverlayComponent = class OverlayComponent extends BaseOverlay {
+    static get observedAttributes() {
+        return Object.values(OVERLAY_CONSTANTS.observedAttributes);
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new OverlayFoundation(new OverlayAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+};
+_a = overlayStack;
+/**
+ * Contains all the overlays that are currently open.
+ */
+OverlayComponent[_a] = new Set();
+__decorate([
+    FoundationProperty()
+], OverlayComponent.prototype, "arrowElement", void 0);
+__decorate([
+    FoundationProperty()
+], OverlayComponent.prototype, "arrowElementOffset", void 0);
+OverlayComponent = __decorate([
+    CustomElement({
+        name: OVERLAY_CONSTANTS.elementName
+    })
+], OverlayComponent);
+export { OverlayComponent };

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

@@ -72,3 +72,12 @@ export interface IPaginatorChangeEvent {
     pageIndex: number;
     offset: number;
 }
+export interface IPaginatorRangeState {
+    pageSize: number;
+    pageIndex: number;
+    offset: number;
+    pageStart: number;
+    pageEnd: number;
+    total: number;
+}
+export type PaginatorRangeLabelBuilder = ((state: IPaginatorRangeState) => string) | undefined | null;

package/esm/paginator/paginator-foundation.d.ts

@@ -5,7 +5,7 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IPaginatorAdapter } from './paginator-adapter';
-import { PaginatorAlternativeAlignment } from './paginator-constants';
+import { PaginatorAlternativeAlignment, PaginatorRangeLabelBuilder } from './paginator-constants';
 export interface IPaginatorFoundation extends ICustomElementFoundation {
     pageIndex: number;
     pageSize: number;
@@ -13,6 +13,7 @@ export interface IPaginatorFoundation extends ICustomElementFoundation {
     total: number;
     pageSizeOptions: number[] | boolean;
     pageSizeLabel: string;
+    rangeLabelCallback: PaginatorRangeLabelBuilder;
     focus(options?: FocusOptions): void;
 }
 export declare class PaginatorFoundation {
@@ -28,7 +29,7 @@ export declare class PaginatorFoundation {
     private _disabled;
     private _alternative;
     private _alignment;
-    private _rangeLabel;
+    private _rangeLabelCallback;
     private _firstPageListener;
     private _previousPageListener;
     private _nextPageListener;
@@ -84,4 +85,6 @@ export declare class PaginatorFoundation {
     set alternative(value: boolean);
     get alignment(): PaginatorAlternativeAlignment;
     set alignment(value: PaginatorAlternativeAlignment);
+    get rangeLabelCallback(): PaginatorRangeLabelBuilder;
+    set rangeLabelCallback(value: PaginatorRangeLabelBuilder);
 }

package/esm/paginator/paginator-foundation.js

@@ -118,17 +118,31 @@ export class PaginatorFoundation {
         return Math.ceil(this._total / this._pageSize) - 1;
     }
     _updateRangeLabel() {
-        if (this.pageSize > 1) {
-            const startIndex = this._pageIndex * this._pageSize;
-            const indexStart = Math.floor(startIndex / this._pageSize) || 0;
-            const pageStart = (indexStart * this._pageSize) + 1;
-            const pageEnd = startIndex < this._total ? Math.min(startIndex + this._pageSize, this._total) : startIndex + this._pageSize;
-            this._rangeLabel = `${pageStart}-${pageEnd} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+        let rangeLabel;
+        if (typeof this._rangeLabelCallback === 'function') {
+            const state = {
+                pageSize: this._pageSize,
+                pageIndex: this._pageIndex,
+                offset: this._offset,
+                pageStart: (this._pageIndex * this._pageSize) + 1,
+                pageEnd: Math.min((this._pageIndex + 1) * this._pageSize, this._total),
+                total: this._total
+            };
+            rangeLabel = this._rangeLabelCallback.call(null, state);
         }
         else {
-            this._rangeLabel = `${this._pageIndex + 1} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+            if (this.pageSize > 1) {
+                const startIndex = this._pageIndex * this._pageSize;
+                const indexStart = Math.floor(startIndex / this._pageSize) || 0;
+                const pageStart = (indexStart * this._pageSize) + 1;
+                const pageEnd = startIndex < this._total ? Math.min(startIndex + this._pageSize, this._total) : startIndex + this._pageSize;
+                rangeLabel = `${pageStart}-${pageEnd} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+            }
+            else {
+                rangeLabel = `${this._pageIndex + 1} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+            }
         }
-        this._adapter.setRangeLabel(this._rangeLabel);
+        this._adapter.setRangeLabel(rangeLabel);
     }
     _syncInteractionState() {
         this._adapter.enableFirstPageButton();
@@ -379,4 +393,11 @@ export class PaginatorFoundation {
             this._applyAlternativeAlignment();
         }
     }
+    get rangeLabelCallback() {
+        return this._rangeLabelCallback;
+    }
+    set rangeLabelCallback(value) {
+        this._rangeLabelCallback = value;
+        this._updateRangeLabel();
+    }
 }

package/esm/paginator/paginator.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { PaginatorAlternativeAlignment, IPaginatorChangeEvent } from './paginator-constants';
+import { PaginatorAlternativeAlignment, IPaginatorChangeEvent, PaginatorRangeLabelBuilder } from './paginator-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IPaginatorComponent extends IBaseComponent {
     pageIndex: number;
@@ -17,6 +17,7 @@ export interface IPaginatorComponent extends IBaseComponent {
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    rangeLabelCallback: PaginatorRangeLabelBuilder;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -56,5 +57,6 @@ export declare class PaginatorComponent extends BaseComponent implements IPagina
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    rangeLabelCallback: PaginatorRangeLabelBuilder;
     focus(options?: FocusOptions): void;
 }

package/esm/paginator/paginator.js

@@ -14,7 +14,7 @@ import { SelectComponent } from '../select';
 import { IconComponent, IconRegistry } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
 import { TooltipComponent } from '../tooltip';
-const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></div></div></template>';
+const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\" placement=\"top\">Go to the last page</forge-tooltip></div></div></template>';
 const styles = '.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
 /**
  * @tag forge-paginator
@@ -126,6 +126,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], PaginatorComponent.prototype, "alignment", void 0);
+__decorate([
+    FoundationProperty()
+], PaginatorComponent.prototype, "rangeLabelCallback", void 0);
 PaginatorComponent = __decorate([
     CustomElement({
         name: PAGINATOR_CONSTANTS.elementName,

package/esm/popover/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './popover-adapter';
+export * from './popover-constants';
+export * from './popover-foundation';
+export * from './popover';
+export declare function definePopoverComponent(): void;

package/esm/popover/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { PopoverComponent } from './popover';
+export * from './popover-adapter';
+export * from './popover-constants';
+export * from './popover-foundation';
+export * from './popover';
+export function definePopoverComponent() {
+    defineCustomElement(PopoverComponent);
+}