@tylertech/forge 2.0.0

package/esm/icon/icon-utils.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IconRegistry } from './icon-registry';
+import { ICON_CONSTANTS } from './icon-constants';
+import { createSvgFromString } from '../core/utils/svg-utils';
+const _activeIconRequests = new Map();
+/** Determines if the provided SVG icon content is valid */
+export function sanitizeSvgContent(svgContent, customViewBox, usePartAttrs = true) {
+    if (!svgContent || !svgContent.includes('svg')) {
+        return '';
+    }
+    if (!customViewBox && !svgContent.includes('viewBox')) {
+        customViewBox = `0 0 ${ICON_CONSTANTS.numbers.DEFAULT_WIDTH} ${ICON_CONSTANTS.numbers.DEFAULT_HEIGHT}`;
+    }
+    const svgElement = createSvgFromString(svgContent, customViewBox);
+    if (usePartAttrs && svgElement) {
+        svgElement.setAttribute('part', 'svg');
+        svgElement.querySelectorAll('path').forEach(node => {
+            node.setAttribute('part', node.tagName.toLowerCase());
+        });
+    }
+    return svgElement ? svgElement.outerHTML : '';
+}
+export function getCachedIcon(key) {
+    return IconRegistry.get(key);
+}
+export function awaitIconDefinition(key, listener) {
+    IconRegistry.awaitIcon(key, listener);
+}
+export function removeIconListener(key, listener) {
+    IconRegistry.removeListener(key, listener);
+}
+export function fetchIconContent(url, name) {
+    // Check if we already have an active request for this URL
+    let request = _activeIconRequests.get(url);
+    if (!request) {
+        if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+            // we don't already have a request
+            request = fetch(url).then(async (response) => {
+                if (response.ok) {
+                    const data = await response.text() || '';
+                    IconRegistry.define({ name, data });
+                    _activeIconRequests.delete(url);
+                    return data;
+                }
+                IconRegistry.define({ name, data: '' });
+                return '';
+            });
+            // Cache this request in case of duplicate requests
+            _activeIconRequests.set(url, request);
+        }
+        else {
+            // set to empty for ssr scenarios and resolve promise
+            IconRegistry.define({ name, data: '' });
+            return Promise.resolve('');
+        }
+    }
+    return request || Promise.resolve('');
+}
+export function sanitizeExternalType(type) {
+    const isValidType = ['standard', 'extended', 'custom'].includes(type);
+    return isValidType ? type : '';
+}

package/esm/icon/icon.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IconUrlBuilder, IconExternalType } from './icon-constants';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IIconComponent extends IBaseComponent {
+    name: string | undefined;
+    src: string | undefined;
+    lazy: boolean;
+    external: boolean;
+    externalType: IconExternalType;
+    externalUrlBuilder: IconUrlBuilder;
+    viewbox: string;
+    layout(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-icon': IIconComponent;
+    }
+}
+export declare class IconComponent extends BaseComponent implements IIconComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** The name of the icon within the icon registry to be used. */
+    name: string | undefined;
+    /** Provides the ability to set the SVG string content directly. */
+    src: string | undefined;
+    /** Controls whether the icon will be loaded dynamically when it comes into view. False by default. */
+    lazy: boolean;
+    /** Controls whether external network requests are allowed for this icon. Only pertains for icons that aren't defined in the registry. */
+    external: boolean;
+    /** The type of icon to load externally. Possible values: "standard", "extended", "custom". */
+    externalType: IconExternalType;
+    /** A callback that can be provided to generate a URL that will be used to fetch an SVG icon. */
+    externalUrlBuilder: IconUrlBuilder;
+    /** A custom value to apply to the `viewBox` attribute on the internal `<svg>` element. */
+    viewbox: string;
+    /** Forces a reload of the icon. */
+    layout(): void;
+}

package/esm/icon/icon.js

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { IconAdapter } from './icon-adapter';
+import { IconFoundation } from './icon-foundation';
+import { ICON_CONSTANTS } from './icon-constants';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template></template>';
+const styles = ':host{font-size:24px;font-size:var(--forge-icon-font-size, 24px);display:inline-block;contain:content;-webkit-box-sizing:content-box!important;box-sizing:content-box!important}:host>svg{fill:currentColor;fill:var(--forge-icon-theme-color,currentColor);stroke:currentColor;stroke:var(--forge-icon-theme-color,currentColor);display:block;width:1em;height:1em;stroke-width:0}:host([hidden]){display:none}:host([theme=primary]){color:var(\"primary\")}:host([theme=secondary]){color:var(\"secondary\")}:host([theme=warning]){color:#d14900;color:var(\"warning\", #d14900)}:host([theme=danger]){color:#b00020;color:var(\"danger\", #b00020)}:host([theme=success]){color:#2e7d32;color:var(\"success\", #2e7d32)}:host([theme=info]){color:#424242;color:var(\"info\", #424242)}:host([theme=tertiary]){color:#3d5afe;color:var(\"tertiary\", #3d5afe)}';
+let IconComponent = class IconComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new IconFoundation(new IconAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            ICON_CONSTANTS.attributes.NAME,
+            ICON_CONSTANTS.attributes.SRC,
+            ICON_CONSTANTS.attributes.LAZY,
+            ICON_CONSTANTS.attributes.EXTERNAL,
+            ICON_CONSTANTS.attributes.EXTERNAL_TYPE,
+            ICON_CONSTANTS.attributes.VIEWBOX
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case ICON_CONSTANTS.attributes.NAME:
+                this.name = newValue;
+                break;
+            case ICON_CONSTANTS.attributes.SRC:
+                this.src = newValue;
+                break;
+            case ICON_CONSTANTS.attributes.LAZY:
+                this.lazy = coerceBoolean(newValue);
+                break;
+            case ICON_CONSTANTS.attributes.EXTERNAL:
+                this.external = coerceBoolean(newValue);
+                break;
+            case ICON_CONSTANTS.attributes.EXTERNAL_TYPE:
+                this.externalType = newValue;
+                break;
+            case ICON_CONSTANTS.attributes.VIEWBOX:
+                this.viewbox = newValue;
+                break;
+        }
+    }
+    /** Forces a reload of the icon. */
+    layout() {
+        this._foundation.layout();
+    }
+};
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "name", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "src", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "lazy", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "external", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "externalType", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "externalUrlBuilder", void 0);
+__decorate([
+    FoundationProperty()
+], IconComponent.prototype, "viewbox", void 0);
+IconComponent = __decorate([
+    CustomElement({
+        name: ICON_CONSTANTS.elementName
+    })
+], IconComponent);
+export { IconComponent };

package/esm/icon/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './icon-adapter';
+export * from './icon-constants';
+export * from './icon-foundation';
+export * from './icon-registry';
+export * from './icon-utils';
+export * from './icon';
+export * from './icon-component-delegate';
+export declare function defineIconComponent(): void;

package/esm/icon/index.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { IconComponent } from './icon';
+import { IconRegistry } from './icon-registry';
+import { ICON_REGISTRY_KEY } from './icon-constants';
+export * from './icon-adapter';
+export * from './icon-constants';
+export * from './icon-foundation';
+export * from './icon-registry';
+export * from './icon-utils';
+export * from './icon';
+export * from './icon-component-delegate';
+export function defineIconComponent() {
+    defineCustomElement(IconComponent);
+}
+// Store a reference to the icon registry on `window`.
+if (window && !window[ICON_REGISTRY_KEY]) {
+    window[ICON_REGISTRY_KEY] = IconRegistry;
+}

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

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IIconComponent } from '../icon';
+import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
+import { IIconButtonComponent } from './icon-button';
+export declare type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
+export interface IIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
+    iconName?: string;
+    iconType?: 'font' | 'component';
+    iconClass?: string | string[];
+}
+export interface IIconButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
+}
+export declare class IconButtonComponentDelegate extends BaseComponentDelegate<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
+    private _buttonElement;
+    private _iconElement?;
+    constructor(config?: IIconButtonComponentDelegateConfig);
+    protected _build(): IIconButtonComponent;
+    get iconElement(): IIconComponent | undefined;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get butttonElement(): HTMLButtonElement | undefined;
+    protected _configure(): void;
+    private _configureIcon;
+    onClick(listener: (evt: MouseEvent) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+}

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass } from '@tylertech/forge-core';
+import { ICON_CONSTANTS } from '../icon';
+import { ICON_CLASS_NAME } from '../constants';
+import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
+import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
+export class IconButtonComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    _build() {
+        const component = document.createElement(ICON_BUTTON_CONSTANTS.elementName);
+        this._buttonElement = document.createElement('button');
+        this._buttonElement.type = 'button';
+        component.appendChild(this._buttonElement);
+        return component;
+    }
+    get iconElement() {
+        return this._iconElement;
+    }
+    get disabled() {
+        return !!this._buttonElement.disabled;
+    }
+    set disabled(value) {
+        this._buttonElement.disabled = value;
+    }
+    get butttonElement() {
+        return this._buttonElement;
+    }
+    _configure() {
+        this._configureIcon();
+    }
+    _configureIcon() {
+        var _a, _b;
+        if (!((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.iconName)) {
+            return;
+        }
+        const type = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.iconType) || 'component';
+        switch (type) {
+            case 'font':
+                const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
+                addClass(classes, this._buttonElement);
+                this._buttonElement.textContent = this._config.options.iconName;
+                break;
+            case 'component':
+                this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
+                this._iconElement.name = this._config.options.iconName;
+                if (this._config.options.iconClass) {
+                    addClass(this._config.options.iconClass, this._iconElement);
+                }
+                this._buttonElement.appendChild(this._iconElement);
+                break;
+        }
+    }
+    onClick(listener) {
+        this._buttonElement.addEventListener('click', listener);
+    }
+    onFocus(listener) {
+        this._buttonElement.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        this._buttonElement.addEventListener('blur', evt => listener(evt));
+    }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const ICON_BUTTON_CONSTANTS: {
+    elementName: "forge-icon-button";
+    attributes: {
+        TOGGLE: string;
+        IS_ON: string;
+        ICON_ON: string;
+        DENSE: string;
+        DENSITY_LEVEL: string;
+    };
+    selectors: {
+        BUTTON: string;
+        ICON: string;
+    };
+    classes: {
+        BUTTON: string;
+        BUTTON_ON: string;
+        BUTTON_DENSE: string;
+        ICON: string;
+        ICON_ON: string;
+        DENSITY: string[];
+    };
+    events: {
+        CHANGE: string;
+    };
+};

package/esm/icon-button/icon-button-constants.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}icon-button`;
+const attributes = {
+    TOGGLE: 'toggle',
+    IS_ON: 'is-on',
+    ICON_ON: 'forge-icon-button-on',
+    DENSE: 'dense',
+    DENSITY_LEVEL: 'density-level'
+};
+const selectors = {
+    BUTTON: 'button',
+    ICON: 'i, span, svg, img, forge-icon'
+};
+const classes = {
+    BUTTON: 'forge-icon-button',
+    BUTTON_ON: 'forge-icon-button--on',
+    BUTTON_DENSE: 'forge-icon-button--dense',
+    ICON: 'forge-icon-button__icon',
+    ICON_ON: 'forge-icon-button__icon--on',
+    DENSITY: [
+        'forge-icon-button--dense-1',
+        'forge-icon-button--dense-2',
+        'forge-icon-button--dense-3',
+        'forge-icon-button--dense-4',
+        'forge-icon-button--dense-5',
+        'forge-icon-button--dense-6'
+    ]
+};
+const events = {
+    CHANGE: `${elementName}-change`
+};
+export const ICON_BUTTON_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    classes,
+    events
+};

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IIconButtonComponent extends IBaseComponent {
+    toggle: boolean;
+    isOn: boolean;
+    dense: boolean;
+    densityLevel: number;
+    layout(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-icon-button': IIconButtonComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-icon-button-change': CustomEvent<boolean>;
+    }
+}
+/**
+ * The custom element class behind the `<forge-icon-button>` element.
+ */
+export declare class IconButtonComponent extends BaseComponent implements IIconButtonComponent {
+    static get observedAttributes(): string[];
+    private _rippleInstance;
+    private _buttonElement;
+    private _toggle;
+    private _isOn;
+    private _dense;
+    private _densityLevel;
+    private _toggleHandler;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Gets/sets whether the button is togglable. */
+    get toggle(): boolean;
+    set toggle(value: boolean);
+    /** Gets/sets the toggled state of the icon button. Only applies when `toggle = true`. */
+    get isOn(): boolean;
+    set isOn(value: boolean);
+    /** Gets/sets whether the icon button is dense. */
+    get dense(): boolean;
+    set dense(value: boolean);
+    /** Controls the density level. 1 (least dense) to 6 (most dense). */
+    get densityLevel(): number;
+    set densityLevel(value: number);
+    private _initialize;
+    private _toggleValue;
+    private _applyToggle;
+    private _applyDensity;
+    private _initializeToggle;
+    private _destroyToggle;
+    layout(): void;
+}