@tylertech/forge 2.0.0

package/esm/button-toggle/button-toggle/button-toggle-adapter.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { ForgeRipple } from '../../ripple';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { BUTTON_TOGGLE_CONSTANTS } from './button-toggle-constants';
+export class ButtonToggleAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._buttonElement = getShadowElement(component, BUTTON_TOGGLE_CONSTANTS.selectors.BUTTON);
+    }
+    setSelected(value) {
+        if (value) {
+            this._buttonElement.classList.add(BUTTON_TOGGLE_CONSTANTS.classes.SELECTED);
+        }
+        else {
+            this._buttonElement.classList.remove(BUTTON_TOGGLE_CONSTANTS.classes.SELECTED);
+        }
+        this._buttonElement.setAttribute('aria-pressed', value.toString());
+    }
+    addEventListener(type, listener) {
+        this._buttonElement.addEventListener(type, listener);
+    }
+    removeEventListener(type, listener) {
+        this._buttonElement.removeEventListener(type, listener);
+    }
+    initializeRipple() {
+        return new ForgeRipple(this._buttonElement);
+    }
+    setDisabled(value) {
+        this._buttonElement.disabled = value;
+        if (value) {
+            this._buttonElement.setAttribute('aria-disabled', value.toString());
+        }
+        else {
+            this._buttonElement.removeAttribute('aria-disabled');
+        }
+    }
+    setDense(value) {
+        if (value) {
+            this._buttonElement.classList.add(BUTTON_TOGGLE_CONSTANTS.classes.DENSE);
+        }
+        else {
+            this._buttonElement.classList.remove(BUTTON_TOGGLE_CONSTANTS.classes.DENSE);
+        }
+    }
+    requestFocus() {
+        this._buttonElement.focus();
+    }
+    detectStretchState() {
+        if (this._component.hasAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.STRETCH)) {
+            return;
+        }
+        const buttonToggleGroup = this._component.parentElement;
+        if (buttonToggleGroup && buttonToggleGroup.hasAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.STRETCH) && buttonToggleGroup.stretch) {
+            this._component.setAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.STRETCH, '');
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BUTTON_TOGGLE_CONSTANTS: {
+    elementName: "forge-button-toggle";
+    attributes: {
+        VALUE: string;
+        SELECTED: string;
+        DISABLED: string;
+        DENSE: string;
+        BUTTON_ARIA_LABEL: string;
+        SELECTED_ADJACENT: string;
+        SELECTED_ADJACENT_VERTICAL: string;
+        STRETCH: string;
+    };
+    classes: {
+        SELECTED: string;
+        DENSE: string;
+    };
+    selectors: {
+        BUTTON: string;
+        SELECTED: string;
+    };
+    events: {
+        SELECT: string;
+    };
+};
+export interface IButtonToggleSelectEventData {
+    value: string;
+    selected: boolean;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}button-toggle`;
+const attributes = {
+    VALUE: 'value',
+    SELECTED: 'selected',
+    DISABLED: 'disabled',
+    DENSE: 'dense',
+    BUTTON_ARIA_LABEL: 'button-aria-label',
+    SELECTED_ADJACENT: 'selected-adjacent',
+    SELECTED_ADJACENT_VERTICAL: 'selected-adjacent-vertical',
+    STRETCH: 'stretch'
+};
+const classes = {
+    SELECTED: 'forge-button-toggle__selected',
+    DENSE: 'forge-button-toggle--dense'
+};
+const selectors = {
+    BUTTON: '.forge-button-toggle',
+    SELECTED: `.${classes.SELECTED}`
+};
+const events = {
+    SELECT: `${elementName}-select`
+};
+export const BUTTON_TOGGLE_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    selectors,
+    events
+};

package/esm/button-toggle/button-toggle/button-toggle-foundation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IButtonToggleAdapter } from './button-toggle-adapter';
+export interface IButtonToggleFoundation extends ICustomElementFoundation {
+    value: any;
+    selected: boolean;
+    disabled: boolean;
+    dense: boolean;
+    setFocus(): void;
+}
+export declare class ButtonToggleFoundation implements IButtonToggleFoundation {
+    private _adapter;
+    private _value;
+    private _selected;
+    private _disabled;
+    private _dense;
+    private _clickListener;
+    private _rippleInstance;
+    constructor(_adapter: IButtonToggleAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _onClick;
+    private _updateSelectedState;
+    get value(): any;
+    set value(value: any);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get dense(): boolean;
+    set dense(value: boolean);
+    setFocus(): void;
+}

package/esm/button-toggle/button-toggle/button-toggle-foundation.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BUTTON_TOGGLE_CONSTANTS } from './button-toggle-constants';
+export class ButtonToggleFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._selected = false;
+        this._disabled = false;
+        this._dense = false;
+        this._clickListener = evt => this._onClick(evt);
+    }
+    initialize() {
+        this._rippleInstance = this._adapter.initializeRipple();
+        this._adapter.addEventListener('click', this._clickListener);
+        this._adapter.setSelected(this._selected);
+        this._adapter.setDisabled(this._disabled);
+        this._adapter.setDense(this._dense);
+        this._adapter.detectStretchState();
+    }
+    disconnect() {
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+        }
+        this._adapter.removeEventListener('click', this._clickListener);
+    }
+    _onClick(evt) {
+        this._selected = !this._selected;
+        this._updateSelectedState();
+        this._adapter.emitHostEvent(BUTTON_TOGGLE_CONSTANTS.events.SELECT, { value: this._value, selected: this._selected });
+    }
+    _updateSelectedState() {
+        this._adapter.setSelected(this._selected);
+        this._adapter.setHostAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED, this._selected.toString());
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            this._updateSelectedState();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.setDense(this._dense);
+        }
+    }
+    setFocus() {
+        this._adapter.requestFocus();
+    }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { IButtonToggleSelectEventData } from './button-toggle-constants';
+export interface IButtonToggleComponent extends IBaseComponent {
+    value: any;
+    selected: boolean;
+    disabled: boolean;
+    dense: boolean;
+}
+export interface IButtonToggleComponentEventMap extends HTMLElementEventMap {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-button-toggle': IButtonToggleComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-button-toggle-select': CustomEvent<IButtonToggleSelectEventData>;
+    }
+}
+export declare class ButtonToggleComponent extends BaseComponent implements IButtonToggleComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    private _buttonElement;
+    constructor();
+    initializedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    value: any;
+    selected: boolean;
+    disabled: boolean;
+    dense: boolean;
+    focus(): void;
+}

package/esm/button-toggle/button-toggle/button-toggle.js

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty, getShadowElement } from '@tylertech/forge-core';
+import { BaseComponent } from '../../core/base/base-component';
+import { ButtonToggleAdapter } from './button-toggle-adapter';
+import { BUTTON_TOGGLE_CONSTANTS } from './button-toggle-constants';
+import { ButtonToggleFoundation } from './button-toggle-foundation';
+const template = '<template><button type=\"button\" class=\"forge-button-toggle\" aria-pressed=\"false\" part=\"button\"><slot name=\"leading\"></slot><slot></slot><slot name=\"trailing\"></slot></button></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-button-toggle{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:0 0;border-radius:4px;border-radius:var(--mdc-shape-small,4px);height:36px;text-transform:none;box-sizing:border-box;overflow:hidden;border-style:solid;-webkit-transition:border 280ms cubic-bezier(.4, 0, .2, 1);transition:border 280ms cubic-bezier(.4, 0, .2, 1);font-family:Roboto,sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, .875rem));letter-spacing:.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, .0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight,var(--mdc-typography-button-font-weight,500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform,var(--mdc-typography-button-text-transform,uppercase));height:36px;height:var(--mdc-outlined-button-container-height,36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px);padding:0 15px 0 15px;border-width:1px;width:100%;box-sizing:border-box;-webkit-transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);border-radius:0;border-bottom-width:var(--forge-button-toggle-border-bottom-width,1px);border-right-width:var(--forge-button-toggle-border-right-width,1px);border-top-left-radius:var(--forge-button-toggle-border-top-left-radius,4px);border-bottom-left-radius:var(--forge-button-toggle-border-bottom-left-radius,4px);border-top-right-radius:var(--forge-button-toggle-border-top-right-radius,4px);border-bottom-right-radius:var(--forge-button-toggle-border-bottom-right-radius,4px)}.forge-button-toggle::after,.forge-button-toggle::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button-toggle::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-button-toggle::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button-toggle.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button-toggle.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-button-toggle.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button-toggle.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-button-toggle.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-button-toggle::after,.forge-button-toggle::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button-toggle.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button-toggle::after,.forge-button-toggle::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-button-toggle.mdc-ripple-surface--hover::before,.forge-button-toggle:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button-toggle.mdc-ripple-upgraded--background-focused::before,.forge-button-toggle:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button-toggle:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button-toggle .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-button-toggle::-moz-focus-inner{padding:0;border:0}.forge-button-toggle:active{outline:0}.forge-button-toggle:hover{cursor:pointer}.forge-button-toggle:disabled{cursor:default;pointer-events:none}.forge-button-toggle .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-button-toggle:not(:disabled){background-color:transparent}.forge-button-toggle:not(:disabled){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-button-toggle .mdc-button__ripple{border-style:solid;border-color:transparent}.forge-button-toggle:not(:disabled){color:#3f51b5;color:var(--mdc-outlined-button-label-text-color,var(--mdc-theme-primary,#3f51b5))}.forge-button-toggle:disabled{color:rgba(0,0,0,.38);color:var(--mdc-outlined-button-disabled-label-text-color,rgba(0,0,0,.38))}.forge-button-toggle .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size,1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size,1.125rem)}.forge-button-toggle .mdc-button__ripple::after,.forge-button-toggle .mdc-button__ripple::before{background-color:#3f51b5;background-color:var(--mdc-outlined-button-hover-state-layer-color,var(--mdc-theme-primary,#3f51b5))}.forge-button-toggle.mdc-ripple-surface--hover .mdc-button__ripple::before,.forge-button-toggle:hover .mdc-button__ripple::before{opacity:.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, .04)}.forge-button-toggle.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.forge-button-toggle:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, .12)}.forge-button-toggle:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, .12)}.forge-button-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.forge-button-toggle .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px))}.forge-button-toggle:not(:disabled){border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-outline-color,rgba(0,0,0,.12))}.forge-button-toggle:disabled{border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-disabled-outline-color,rgba(0,0,0,.12))}.forge-button-toggle.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-button-toggle.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-button-toggle .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px)}.forge-button-toggle .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width,1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width,1px))}.forge-button-toggle.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-button-toggle.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-button-toggle .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px}.forge-button-toggle .mdc-button__touch{left:calc(-1 * 1px);width:calc(100% + 2 * 1px)}.forge-button-toggle:not(:disabled){border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-button-toggle:disabled{border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-button-toggle__selected:not(:disabled){background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:rgba(255,255,255,.87);color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87))}.forge-button-toggle__selected:not(:disabled)::after,.forge-button-toggle__selected:not(:disabled)::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button-toggle__selected:not(:disabled).mdc-ripple-surface--hover::before,.forge-button-toggle__selected:not(:disabled):hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button-toggle__selected:not(:disabled).mdc-ripple-upgraded--background-focused::before,.forge-button-toggle__selected:not(:disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-toggle__selected:not(:disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle__selected:not(:disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-toggle__selected:not(:disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-toggle__selected:disabled{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:rgba(255,255,255,.87);color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87));opacity:.37}.forge-button-toggle__selected:disabled::after,.forge-button-toggle__selected:disabled::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-button-toggle__selected:disabled.mdc-ripple-surface--hover::before,.forge-button-toggle__selected:disabled:hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-button-toggle__selected:disabled.mdc-ripple-upgraded--background-focused::before,.forge-button-toggle__selected:disabled:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-toggle__selected:disabled:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-toggle__selected:disabled:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-toggle__selected:disabled.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-toggle ::slotted([slot=leading]){display:inline-block;width:1.125rem;height:1.125rem;font-size:1.125rem!important;vertical-align:top;margin-right:4px}.forge-button-toggle ::slotted([slot=trailing]){display:inline-block;width:1.125rem;height:1.125rem;font-size:1.125rem!important;vertical-align:top;margin-left:4px}.forge-button-toggle--dense{height:24px;margin-top:0;margin-bottom:0;height:1.5rem;font-size:.75rem}.forge-button-toggle--dense .mdc-button__touch{height:100%}.forge-button-toggle--dense ::slotted([slot=leading]){width:.875rem;height:.875rem;font-size:.875rem!important}.forge-button-toggle--dense ::slotted([slot=trailing]){width:.875rem;height:.875rem;font-size:.875rem!important}:host{display:inline-block}:host([hidden]){display:none}:host([stretch]){width:100%;-webkit-box-flex:1;flex:1}:host([selected-adjacent]) .forge-button-toggle{border-left-color:var(--mdc-theme-text-primary-on-dark)}:host([selected-adjacent-vertical]) .forge-button-toggle{border-top-color:var(--mdc-theme-text-primary-on-dark)}';
+let ButtonToggleComponent = class ButtonToggleComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ButtonToggleFoundation(new ButtonToggleAdapter(this));
+        this._buttonElement = getShadowElement(this, BUTTON_TOGGLE_CONSTANTS.selectors.BUTTON);
+    }
+    static get observedAttributes() {
+        return [
+            BUTTON_TOGGLE_CONSTANTS.attributes.VALUE,
+            BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED,
+            BUTTON_TOGGLE_CONSTANTS.attributes.DISABLED,
+            BUTTON_TOGGLE_CONSTANTS.attributes.DENSE,
+            BUTTON_TOGGLE_CONSTANTS.attributes.BUTTON_ARIA_LABEL
+        ];
+    }
+    initializedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BUTTON_TOGGLE_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED:
+                this.selected = coerceBoolean(newValue);
+                break;
+            case BUTTON_TOGGLE_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case BUTTON_TOGGLE_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+            case BUTTON_TOGGLE_CONSTANTS.attributes.BUTTON_ARIA_LABEL:
+                this._buttonElement.setAttribute('aria-label', newValue);
+                break;
+        }
+    }
+    focus() {
+        this._foundation.setFocus();
+    }
+};
+__decorate([
+    FoundationProperty()
+], ButtonToggleComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonToggleComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonToggleComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonToggleComponent.prototype, "dense", void 0);
+ButtonToggleComponent = __decorate([
+    CustomElement({
+        name: BUTTON_TOGGLE_CONSTANTS.elementName
+    })
+], ButtonToggleComponent);
+export { ButtonToggleComponent };

package/esm/button-toggle/button-toggle/index.d.ts

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

package/esm/button-toggle/button-toggle/index.js

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

package/esm/button-toggle/button-toggle-group/button-toggle-group-adapter.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { IButtonToggleComponent } from '../button-toggle/button-toggle';
+import { IButtonToggleGroupComponent } from './button-toggle-group';
+import { IButtonToggleOption } from './button-toggle-group-constants';
+export interface IButtonToggleGroupAdapter extends IBaseAdapter {
+    addListener(type: string, listener: (evt: Event) => void): void;
+    removeListener(type: string, listener: (evt: Event) => void): void;
+    addSlotChangeListener(listener: (evt: Event) => void): void;
+    removeSlotChangeListener(listener: (evt: Event) => void): void;
+    deselect(selectedToggle: IButtonToggleComponent): void;
+    applyAdjacentSelections(isVertical: boolean): void;
+    setVertical(isVertical: boolean): void;
+    setStretch(value: boolean): void;
+    setDense(value: boolean): void;
+    setDisabled(value: boolean): void;
+    getSelectedValues(): any[];
+    applyValues(values: any[]): void;
+    createOptions(options: IButtonToggleOption[]): void;
+}
+export declare class ButtonToggleGroupAdapter extends BaseAdapter<IButtonToggleGroupComponent> implements IButtonToggleGroupAdapter {
+    private _rootElement;
+    private _slotElement;
+    constructor(component: IButtonToggleGroupComponent);
+    addListener(type: string, listener: (evt: Event) => void): void;
+    removeListener(type: string, listener: (evt: Event) => void): void;
+    addSlotChangeListener(listener: EventListener): void;
+    removeSlotChangeListener(listener: EventListener): void;
+    deselect(selectedToggle: IButtonToggleComponent): void;
+    applyAdjacentSelections(isVertical: boolean): void;
+    setVertical(isVertical: boolean): void;
+    setStretch(value: boolean): void;
+    setDense(value: boolean): void;
+    setDisabled(value: boolean): void;
+    getSelectedValues(): any[];
+    applyValues(values: any[]): void;
+    createOptions(options: IButtonToggleOption[]): void;
+    private _createButtonToggle;
+    private _getButtonToggleElements;
+}

package/esm/button-toggle/button-toggle-group/button-toggle-group-adapter.js

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, removeAllChildren } from '@tylertech/forge-core';
+import { ICON_CLASS_NAME } from '../../constants';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { BUTTON_TOGGLE_CONSTANTS } from '../button-toggle/button-toggle-constants';
+import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
+export class ButtonToggleGroupAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, BUTTON_TOGGLE_GROUP_CONSTANTS.selectors.ROOT);
+        this._slotElement = this._rootElement.querySelector('slot');
+    }
+    addListener(type, listener) {
+        this._rootElement.addEventListener(type, listener);
+    }
+    removeListener(type, listener) {
+        this._rootElement.removeEventListener(type, listener);
+    }
+    addSlotChangeListener(listener) {
+        this._slotElement.addEventListener('slotchange', listener);
+    }
+    removeSlotChangeListener(listener) {
+        this._slotElement.addEventListener('slotchange', listener);
+    }
+    deselect(selectedToggle) {
+        const toggles = this._getButtonToggleElements();
+        toggles.filter(t => t !== selectedToggle).forEach(t => t.selected = false);
+    }
+    applyAdjacentSelections(isVertical) {
+        const toggles = this._getButtonToggleElements();
+        for (let i = toggles.length - 1; i > 0; i--) {
+            toggles[i].removeAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT);
+            toggles[i].removeAttribute(BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT_VERTICAL);
+            if (toggles[i].selected && toggles[i - 1].selected) {
+                const attr = isVertical ? BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT_VERTICAL : BUTTON_TOGGLE_CONSTANTS.attributes.SELECTED_ADJACENT;
+                toggles[i].setAttribute(attr, '');
+            }
+        }
+    }
+    setVertical(isVertical) {
+        if (isVertical) {
+            this._rootElement.classList.add(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.VERTICAL);
+        }
+        else {
+            this._rootElement.classList.remove(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.VERTICAL);
+        }
+    }
+    setStretch(value) {
+        if (value) {
+            this._rootElement.classList.add(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.STRETCH);
+        }
+        else {
+            this._rootElement.classList.remove(BUTTON_TOGGLE_GROUP_CONSTANTS.classes.STRETCH);
+        }
+        const toggles = this._getButtonToggleElements();
+        toggles.forEach(toggle => {
+            if (value) {
+                toggle.setAttribute('stretch', '');
+            }
+            else {
+                toggle.removeAttribute('stretch');
+            }
+        });
+    }
+    setDense(value) {
+        const toggles = this._getButtonToggleElements();
+        toggles.forEach(t => t.dense = value);
+    }
+    setDisabled(value) {
+        const toggles = this._getButtonToggleElements();
+        toggles.forEach(t => t.disabled = value);
+    }
+    getSelectedValues() {
+        const toggles = this._getButtonToggleElements();
+        return toggles.filter(t => t.selected).map(t => t.value);
+    }
+    applyValues(values) {
+        const toggles = this._getButtonToggleElements();
+        toggles.forEach(t => t.selected = values.indexOf(t.value) >= 0);
+    }
+    createOptions(options) {
+        removeAllChildren(this._component);
+        options.forEach(o => {
+            this._component.appendChild(this._createButtonToggle(o));
+        });
+    }
+    _createButtonToggle(option) {
+        const buttonToggle = document.createElement(BUTTON_TOGGLE_CONSTANTS.elementName);
+        buttonToggle.value = option.value;
+        if (option.label) {
+            buttonToggle.textContent = option.label;
+        }
+        else if (option.icon) {
+            const icon = document.createElement('i');
+            icon.textContent = option.icon;
+            icon.classList.add(ICON_CLASS_NAME);
+            icon.setAttribute('aria-hidden', 'true');
+            buttonToggle.appendChild(icon);
+        }
+        if (option.leadingIcon) {
+            const leadingIcon = document.createElement('i');
+            leadingIcon.slot = 'leading';
+            leadingIcon.textContent = option.leadingIcon;
+            leadingIcon.classList.add(ICON_CLASS_NAME);
+            leadingIcon.setAttribute('aria-hidden', 'true');
+            buttonToggle.appendChild(leadingIcon);
+        }
+        if (option.trailingIcon) {
+            const trailingIcon = document.createElement('i');
+            trailingIcon.slot = 'trailing';
+            trailingIcon.textContent = option.trailingIcon;
+            trailingIcon.classList.add(ICON_CLASS_NAME);
+            trailingIcon.setAttribute('aria-hidden', 'true');
+            buttonToggle.appendChild(trailingIcon);
+        }
+        return buttonToggle;
+    }
+    _getButtonToggleElements() {
+        return Array.from(this._component.querySelectorAll(BUTTON_TOGGLE_CONSTANTS.elementName));
+    }
+}

package/esm/button-toggle/button-toggle-group/button-toggle-group-constants.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
+    elementName: "forge-button-toggle-group";
+    attributes: {
+        VALUE: string;
+        MULTIPLE: string;
+        MANDATORY: string;
+        VERTICAL: string;
+        STRETCH: string;
+        DISABLED: string;
+        DENSE: string;
+    };
+    classes: {
+        VERTICAL: string;
+        STRETCH: string;
+    };
+    selectors: {
+        ROOT: string;
+    };
+    events: {
+        CHANGE: string;
+    };
+};
+export declare type IButtonToggleGroupChangeEventData<T> = T;
+export interface IButtonToggleOption {
+    label?: string;
+    icon?: string;
+    value: any;
+    leadingIcon?: string;
+    trailingIcon?: string;
+}

package/esm/button-toggle/button-toggle-group/button-toggle-group-constants.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}button-toggle-group`;
+const attributes = {
+    VALUE: 'value',
+    MULTIPLE: 'multiple',
+    MANDATORY: 'mandatory',
+    VERTICAL: 'vertical',
+    STRETCH: 'stretch',
+    DISABLED: 'disabled',
+    DENSE: 'dense'
+};
+const classes = {
+    VERTICAL: 'forge-button-toggle-group--vertical',
+    STRETCH: 'forge-button-toggle-group--stretch'
+};
+const selectors = {
+    ROOT: '.forge-button-toggle-group'
+};
+const events = {
+    CHANGE: `${elementName}-change`
+};
+export const BUTTON_TOGGLE_GROUP_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    selectors,
+    events
+};