@tylertech/forge 2.0.0

package/esm/floating-label/floating-label.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FloatingLabelAdapter } from './floating-label-adapter';
+import { FloatingLabelFoundation } from './floating-label-foundation';
+export class FloatingLabel {
+    constructor(_labelElement) {
+        this._labelElement = _labelElement;
+        this._foundation = new FloatingLabelFoundation(new FloatingLabelAdapter(this._labelElement));
+        this._foundation.initialize();
+    }
+    /** Returns the current label floating state. */
+    get isFloating() {
+        return this._foundation.isFloating;
+    }
+    destroy() {
+        this._foundation.disconnect();
+        this._labelElement = undefined;
+    }
+    /**
+     * Sets the floating state of the label element.
+     * @param shouldFloat If true, sets the label to float, otherwise un-float.
+     * @param alwaysFloat If true, sets the label to always float, defaults to: `false`.
+     */
+    float(shouldFloat, alwaysFloat = false) {
+        this._foundation.float(shouldFloat, alwaysFloat);
+    }
+    /** Returns the scroll width of the label element. */
+    getWidth() {
+        return this._foundation.getWidth();
+    }
+}

package/esm/floating-label/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './floating-label-adapter';
+export * from './floating-label-constants';
+export * from './floating-label-foundation';
+export * from './floating-label';

package/esm/floating-label/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './floating-label-adapter';
+export * from './floating-label-constants';
+export * from './floating-label-foundation';
+export * from './floating-label';

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IIconComponent } from './icon';
+import { BaseAdapter, IBaseAdapter } from '../core';
+export interface IIconAdapter extends IBaseAdapter {
+    initialize(): void;
+    canLazyLoad(): boolean;
+    observeVisibility(listener: () => void): void;
+    destroyVisibilityObserver(): void;
+    setContent(content: string): void;
+}
+export declare class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAdapter {
+    private _observer;
+    constructor(component: IIconComponent);
+    initialize(): void;
+    canLazyLoad(): boolean;
+    observeVisibility(listener: () => void): void;
+    destroyVisibilityObserver(): void;
+    setContent(content: string): void;
+}

package/esm/icon/icon-adapter.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter } from '../core';
+import { ICON_CONSTANTS } from './icon-constants';
+export class IconAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+    }
+    initialize() {
+        if (!this._component.hasAttribute('aria-hidden')) {
+            this._component.setAttribute('aria-hidden', 'true');
+        }
+    }
+    canLazyLoad() {
+        return !!window.IntersectionObserver;
+    }
+    observeVisibility(listener) {
+        this._observer = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                this.destroyVisibilityObserver();
+                listener();
+            }
+        }, { rootMargin: `${ICON_CONSTANTS.numbers.LAZY_ROOT_MARGIN}px` });
+        this._observer.observe(this._component);
+    }
+    destroyVisibilityObserver() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = undefined;
+        }
+    }
+    setContent(content) {
+        const shadowRoot = this._component.shadowRoot;
+        const styleTag = shadowRoot.querySelector('style');
+        shadowRoot.innerHTML = content;
+        if (styleTag) {
+            shadowRoot.appendChild(styleTag);
+        }
+    }
+}

package/esm/icon/icon-component-delegate.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate, IBaseComponentDelegateOptions, IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
+import { IIconComponent } from './icon';
+export interface IIconComponentDelegateOptions extends IBaseComponentDelegateOptions {
+}
+export interface IIconComponentDelegateConfig extends IBaseComponentDelegateConfig<IIconComponent, IIconComponentDelegateOptions> {
+}
+export declare class IconComponentDelegate extends BaseComponentDelegate<IIconComponent, IIconComponentDelegateOptions> {
+    constructor(config?: IIconComponentDelegateConfig);
+    protected _build(): IIconComponent;
+}

package/esm/icon/icon-component-delegate.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
+import { ICON_CONSTANTS } from './icon-constants';
+export class IconComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    _build() {
+        return document.createElement(ICON_CONSTANTS.elementName);
+    }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const ICON_CONSTANTS: {
+    elementName: "forge-icon";
+    attributes: {
+        NAME: string;
+        SRC: string;
+        LAZY: string;
+        EXTERNAL: string;
+        EXTERNAL_TYPE: string;
+        VIEWBOX: string;
+    };
+    numbers: {
+        LAZY_ROOT_MARGIN: number;
+        DEFAULT_WIDTH: number;
+        DEFAULT_HEIGHT: number;
+    };
+    strings: {
+        DEFAULT_NETWORK_BASE_URL: string;
+    };
+};
+export declare const ICON_REGISTRY_KEY = "forgeIcons";
+export declare type IconUrlBuilder = (name: string, type: IconExternalType) => string;
+export declare type IconExternalType = '' | 'custom' | 'standard' | 'extended';

package/esm/icon/icon-constants.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX, CDN_BASE_URL } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}icon`;
+const observedAttributes = {
+    NAME: 'name',
+    SRC: 'src',
+    LAZY: 'lazy',
+    EXTERNAL: 'external',
+    EXTERNAL_TYPE: 'external-type',
+    VIEWBOX: 'viewbox'
+};
+const attributes = Object.assign({}, observedAttributes);
+const numbers = {
+    LAZY_ROOT_MARGIN: 50,
+    DEFAULT_WIDTH: 24,
+    DEFAULT_HEIGHT: 24
+};
+const strings = {
+    DEFAULT_NETWORK_BASE_URL: `${CDN_BASE_URL}v1/icons/svg`
+};
+export const ICON_CONSTANTS = {
+    elementName,
+    attributes,
+    numbers,
+    strings
+};
+export const ICON_REGISTRY_KEY = 'forgeIcons';

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IIconAdapter } from './icon-adapter';
+import { IconUrlBuilder, IconExternalType } from './icon-constants';
+export interface IIconFoundation extends ICustomElementFoundation {
+    name: string | undefined;
+    src: string | undefined;
+    lazy: boolean;
+    external: boolean;
+    externalType: IconExternalType;
+    externalUrlBuilder: IconUrlBuilder;
+    viewbox: string;
+    layout(): void;
+}
+export declare class IconFoundation implements IIconFoundation {
+    private _adapter;
+    private _name;
+    private _src;
+    private _lazy;
+    private _external;
+    private _externalType;
+    private _externalUrlBuilder;
+    private _viewbox;
+    private _applyTimer;
+    private _lazyListener;
+    private _registrationListener;
+    constructor(_adapter: IIconAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _safeApplyIcon;
+    private _tryRemoveListener;
+    private _applyIcon;
+    private _clearIconQueue;
+    private _queueIconUpdate;
+    private _loadIcon;
+    private _setIconContent;
+    private _tryGetIcon;
+    private _getExternalUrl;
+    get name(): string | undefined;
+    set name(value: string | undefined);
+    get src(): string | undefined;
+    set src(value: string | undefined);
+    get lazy(): boolean;
+    set lazy(value: boolean);
+    get external(): boolean;
+    set external(value: boolean);
+    get externalType(): IconExternalType;
+    set externalType(value: IconExternalType);
+    get externalUrlBuilder(): IconUrlBuilder;
+    set externalUrlBuilder(cb: IconUrlBuilder);
+    get viewbox(): string;
+    set viewbox(value: string);
+    layout(): void;
+}

package/esm/icon/icon-foundation.js

@@ -0,0 +1,187 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICON_CONSTANTS } from './icon-constants';
+import { sanitizeSvgContent, fetchIconContent, getCachedIcon, sanitizeExternalType, awaitIconDefinition, removeIconListener } from './icon-utils';
+export class IconFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._external = false;
+        this._externalType = 'standard';
+        this._lazyListener = () => this._loadIcon();
+    }
+    initialize() {
+        this._adapter.initialize();
+        this._applyIcon();
+    }
+    disconnect() {
+        this._adapter.destroyVisibilityObserver();
+        this._clearIconQueue();
+        this._tryRemoveListener();
+    }
+    _safeApplyIcon() {
+        if (!this._adapter.isConnected) {
+            return;
+        }
+        this._clearIconQueue();
+        this._queueIconUpdate();
+    }
+    _tryRemoveListener() {
+        if (this._registrationListener && this._name) {
+            removeIconListener(this._name, this._registrationListener);
+        }
+    }
+    _applyIcon() {
+        if (this._lazy && this._adapter.canLazyLoad()) {
+            this._adapter.observeVisibility(this._lazyListener);
+        }
+        else {
+            this._loadIcon();
+        }
+    }
+    _clearIconQueue() {
+        if (this._applyTimer) {
+            clearTimeout(this._applyTimer);
+            this._applyTimer = undefined;
+        }
+    }
+    _queueIconUpdate() {
+        this._applyTimer = window.setTimeout(() => {
+            this._applyTimer = undefined;
+            this._applyIcon();
+        });
+    }
+    async _loadIcon() {
+        try {
+            if (this._src) {
+                // We were provided direct icon source content so just set that
+                this._setIconContent(this._src);
+            }
+            else if (this._name) {
+                // Let's attempt to get our icon from the cache
+                let content = this._tryGetIcon(this._name);
+                if (!content) {
+                    if (!this._external) {
+                        // We attach a listener to the registry to let us know when the icon is registered
+                        this._registrationListener = () => this._applyIcon();
+                        awaitIconDefinition(this._name, this._registrationListener);
+                        // For now, we render nothing...
+                        this._adapter.setContent('');
+                        return;
+                    }
+                    // We don't have a registry icon, so let's try the network to fetch it
+                    if (!this._externalType) {
+                        throw new Error(`Invalid external type provided for icon: ${this._name}`);
+                    }
+                    const url = this._getExternalUrl(this._name, this._externalType);
+                    if (url) {
+                        content = await fetchIconContent(url, this._name);
+                    }
+                }
+                this._setIconContent(content);
+            }
+            else {
+                this._adapter.setContent('');
+            }
+        }
+        catch (e) {
+            this._adapter.setContent('');
+            throw e;
+        }
+    }
+    _setIconContent(svgContent) {
+        const content = sanitizeSvgContent(svgContent, this._viewbox);
+        this._adapter.setContent(content);
+    }
+    _tryGetIcon(key) {
+        return getCachedIcon(key);
+    }
+    _getExternalUrl(name, type) {
+        if (typeof this._externalUrlBuilder === 'function') {
+            return this._externalUrlBuilder(name, type);
+        }
+        const setName = sanitizeExternalType(this._externalType);
+        return `${ICON_CONSTANTS.strings.DEFAULT_NETWORK_BASE_URL}${setName ? `/${setName}` : ''}/${name}.svg`;
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (this._name !== value) {
+            // We need to remove our listener for the previous name if we have any
+            if (!!this._registrationListener) {
+                this._tryRemoveListener();
+            }
+            this._name = (value || '').replace(/\s+/, '');
+            this._safeApplyIcon();
+            this._adapter.toggleHostAttribute(ICON_CONSTANTS.attributes.NAME, !!this._name, this._name);
+        }
+    }
+    get src() {
+        return this._src;
+    }
+    set src(value) {
+        if (this._src !== value) {
+            this._src = value;
+            if (this._adapter.isConnected) {
+                this._applyIcon();
+            }
+        }
+    }
+    get lazy() {
+        return this._lazy;
+    }
+    set lazy(value) {
+        if (this._lazy !== value) {
+            this._lazy = value;
+            this._safeApplyIcon();
+            this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.LAZY, `${this._lazy}`);
+        }
+    }
+    get external() {
+        return this._external;
+    }
+    set external(value) {
+        if (this._external !== value) {
+            this._external = value;
+            this._safeApplyIcon();
+            this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.EXTERNAL, `${this._external}`);
+        }
+    }
+    get externalType() {
+        return this._externalType;
+    }
+    set externalType(value) {
+        if (this._externalType !== value) {
+            this._externalType = value;
+            this._safeApplyIcon();
+            this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.EXTERNAL_TYPE, `${this._externalType}`);
+        }
+    }
+    get externalUrlBuilder() {
+        return this._externalUrlBuilder;
+    }
+    set externalUrlBuilder(cb) {
+        if (this._externalUrlBuilder !== cb) {
+            this._externalUrlBuilder = cb;
+            this._safeApplyIcon();
+        }
+    }
+    get viewbox() {
+        return this._viewbox;
+    }
+    set viewbox(value) {
+        if (this._viewbox !== value) {
+            this._viewbox = value;
+            this._safeApplyIcon();
+            this._adapter.setHostAttribute(ICON_CONSTANTS.attributes.VIEWBOX, `${this.viewbox}`);
+        }
+    }
+    layout() {
+        if (this._adapter.isConnected) {
+            this._applyIcon();
+        }
+    }
+}

package/esm/icon/icon-registry.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/** The shape of an SVG icon that can be defined with the icon registry. */
+export interface IIcon {
+    /** The unique name of the icon. */
+    name: string;
+    /** The SVG icon data. */
+    data: string;
+}
+/**
+ * The registry for SVG icon instances being used within the current context.
+ */
+export declare class IconRegistry {
+    private static _icons;
+    private static _listeners;
+    /**
+     * Defines a new icon.
+     * @param icon The icon(s) to register.
+     */
+    static define(icon: IIcon | IIcon[] | string, svgData?: string): void;
+    /**
+     * Removes a defined icon.
+     * @param icon The icon to unregister.
+     */
+    static remove(icon: IIcon | string): void;
+    /**
+     * Removes a listener
+     * @param key The icon name.
+     * @param listener The listener callback.
+     */
+    static removeListener(key: string, listener: () => void): void;
+    /** Removes all defined icons. */
+    static clear(): void;
+    /** Gets the icon data by its name, or `undefined` if not found. */
+    static get(name: string): string | undefined;
+    /** Gets the names of registered icons. */
+    static getIconNames(): string[];
+    /** Registers a listener to be notified when an icon with the provided key is registered in the future. */
+    static awaitIcon(key: string, listener: () => void): void;
+    /** Gets the number of defined icons in the registry. */
+    static get size(): number;
+    /** Registers an icon, and attempts to invalidate any listeners. */
+    private static _register;
+    /** Gets all listeners for a specific key, calls the listeners (if any are found), and removes the listeners after they are called. */
+    private static _invalidateListeners;
+    /** Normalizes incoming parameters to an `IIcon` type. */
+    private static _parseIcon;
+    /** Determines if the provided `icon` matches the `IIcon` shape. */
+    private static _isIconObject;
+}

package/esm/icon/icon-registry.js

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * The registry for SVG icon instances being used within the current context.
+ */
+export class IconRegistry {
+    /**
+     * Defines a new icon.
+     * @param icon The icon(s) to register.
+     */
+    static define(icon, svgData) {
+        if (Array.isArray(icon)) {
+            return icon.filter(i => IconRegistry._isIconObject(i))
+                .forEach(i => IconRegistry._register(i.name, i.data));
+        }
+        const { name, data } = IconRegistry._parseIcon(icon, svgData);
+        IconRegistry._register(name, data);
+    }
+    /**
+     * Removes a defined icon.
+     * @param icon The icon to unregister.
+     */
+    static remove(icon) {
+        const key = IconRegistry._isIconObject(icon) ? icon.name : icon;
+        IconRegistry._icons.delete(key);
+    }
+    /**
+     * Removes a listener
+     * @param key The icon name.
+     * @param listener The listener callback.
+     */
+    static removeListener(key, listener) {
+        const listeners = IconRegistry._listeners.get(key);
+        if (Array.isArray(listeners) && listeners.includes(listener)) {
+            listeners.splice(listeners.indexOf(listener), 1);
+        }
+    }
+    /** Removes all defined icons. */
+    static clear() {
+        IconRegistry._icons.clear();
+        IconRegistry._listeners.clear();
+    }
+    /** Gets the icon data by its name, or `undefined` if not found. */
+    static get(name) {
+        return IconRegistry._icons.get(name);
+    }
+    /** Gets the names of registered icons. */
+    static getIconNames() {
+        return Array.from(IconRegistry._icons.keys());
+    }
+    /** Registers a listener to be notified when an icon with the provided key is registered in the future. */
+    static awaitIcon(key, listener) {
+        var _a;
+        if (IconRegistry._icons.has(key)) {
+            listener();
+            return;
+        }
+        const listeners = (_a = IconRegistry._listeners.get(key)) !== null && _a !== void 0 ? _a : [];
+        IconRegistry._listeners.set(key, [...listeners, listener]);
+    }
+    /** Gets the number of defined icons in the registry. */
+    static get size() {
+        return IconRegistry._icons.size;
+    }
+    /** Registers an icon, and attempts to invalidate any listeners. */
+    static _register(key, value) {
+        IconRegistry._icons.set(key, value);
+        IconRegistry._invalidateListeners(key);
+    }
+    /** Gets all listeners for a specific key, calls the listeners (if any are found), and removes the listeners after they are called. */
+    static _invalidateListeners(key) {
+        const listeners = IconRegistry._listeners.get(key);
+        if (Array.isArray(listeners) && listeners.length) {
+            listeners.forEach(listener => listener());
+            IconRegistry._listeners.delete(key);
+        }
+    }
+    /** Normalizes incoming parameters to an `IIcon` type. */
+    static _parseIcon(icon, data = '') {
+        if (IconRegistry._isIconObject(icon)) {
+            return icon;
+        }
+        return { name: icon, data };
+    }
+    /** Determines if the provided `icon` matches the `IIcon` shape. */
+    static _isIconObject(icon) {
+        return typeof icon === 'object' && icon.hasOwnProperty('name') && icon.hasOwnProperty('data');
+    }
+}
+IconRegistry._icons = new Map();
+IconRegistry._listeners = new Map();

package/esm/icon/icon-utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/** Determines if the provided SVG icon content is valid */
+export declare function sanitizeSvgContent(svgContent: string | undefined, customViewBox?: string, usePartAttrs?: boolean): string;
+export declare function getCachedIcon(key: string): string | undefined;
+export declare function awaitIconDefinition(key: string, listener: () => void): void;
+export declare function removeIconListener(key: string, listener: () => void): void;
+export declare function fetchIconContent(url: string, name: string): Promise<string>;
+export declare function sanitizeExternalType(type: string): string;