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

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

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, removeAllChildren } from '@tylertech/forge-core';
-import { ICON_CLASS_NAME } from '../../constants';
+import { getShadowElement } from '@tylertech/forge-core';
+import { getFormState, getFormValue, getValidationMessage, internals, isFocusable } 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';
@@ -12,7 +12,7 @@ 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');
+        this._defaultSlotElement = this._rootElement.querySelector('slot');
     }
     addListener(type, listener) {
         this._rootElement.addEventListener(type, listener);
@@ -21,59 +21,24 @@ export class ButtonToggleGroupAdapter extends BaseAdapter {
         this._rootElement.removeEventListener(type, listener);
     }
     addSlotChangeListener(listener) {
-        this._slotElement.addEventListener('slotchange', listener);
+        this._defaultSlotElement.addEventListener('slotchange', listener);
     }
     removeSlotChangeListener(listener) {
-        this._slotElement.addEventListener('slotchange', listener);
+        this._defaultSlotElement.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) {
+        this._component[isFocusable] = !value;
         const toggles = this._getButtonToggleElements();
         toggles.forEach(t => t.disabled = value);
     }
+    setReadonly(value) {
+        const toggles = this._getButtonToggleElements();
+        toggles.forEach(t => t.readonly = value);
+    }
     getSelectedValues() {
         const toggles = this._getButtonToggleElements();
         return toggles.filter(t => t.selected).map(t => t.value);
@@ -82,56 +47,26 @@ export class ButtonToggleGroupAdapter extends BaseAdapter {
         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;
+    setFormValue() {
+        if (!this._component.form) {
+            return;
         }
-        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);
+        const data = this._component[getFormValue]();
+        const state = this._component[getFormState]();
+        this._component[internals].setFormValue(data, state);
+    }
+    setFormValidity() {
+        if (!this._component.form || !this._component.required) {
+            return;
         }
-        if (option.leadingIcon) {
-            let leadingIcon;
-            if (option.leadingIconType === 'component') {
-                leadingIcon = document.createElement('forge-icon');
-                leadingIcon.name = option.leadingIcon;
-            }
-            else {
-                leadingIcon = document.createElement('i');
-                leadingIcon.textContent = option.leadingIcon;
-                leadingIcon.classList.add(ICON_CLASS_NAME);
-                leadingIcon.setAttribute('aria-hidden', 'true');
-            }
-            leadingIcon.slot = 'leading';
-            buttonToggle.appendChild(leadingIcon);
+        const required = this._component.multiple ? !this._component.value.length : !this._component.value;
+        if (required) {
+            const validationMessage = this._component[getValidationMessage]({ required });
+            this._component[internals].setValidity({ valueMissing: required }, validationMessage, this._getButtonToggleElements()[0]);
         }
-        if (option.trailingIcon) {
-            let trailingIcon;
-            if (option.trailingIconType === 'component') {
-                trailingIcon = document.createElement('forge-icon');
-                trailingIcon.name = option.trailingIcon;
-            }
-            else {
-                trailingIcon = document.createElement('i');
-                trailingIcon.textContent = option.trailingIcon;
-                trailingIcon.classList.add(ICON_CLASS_NAME);
-                trailingIcon.setAttribute('aria-hidden', 'true');
-            }
-            trailingIcon.slot = 'trailing';
-            buttonToggle.appendChild(trailingIcon);
+        else {
+            this._component[internals].setValidity({});
         }
-        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

@@ -3,8 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../../constants';
 export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
     elementName: "forge-button-toggle-group";
+    observedAttributes: {
+        VALUE: string;
+        MULTIPLE: string;
+        MANDATORY: string;
+        VERTICAL: string;
+        STRETCH: string;
+        DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
+        DENSE: string;
+        NO_OUTLINE: string;
+        THEME: string;
+    };
     attributes: {
         VALUE: string;
         MULTIPLE: string;
@@ -12,7 +26,11 @@ export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
         VERTICAL: string;
         STRETCH: string;
         DISABLED: string;
+        REQUIRED: string;
+        READONLY: string;
         DENSE: string;
+        NO_OUTLINE: string;
+        THEME: string;
     };
     classes: {
         VERTICAL: string;
@@ -25,14 +43,5 @@ export declare const BUTTON_TOGGLE_GROUP_CONSTANTS: {
         CHANGE: string;
     };
 };
-export type IButtonToggleGroupChangeEventData<T = any> = T;
-export type ButtonToggleIconType = 'font' | 'component';
-export interface IButtonToggleOption {
-    label?: string;
-    icon?: string;
-    value: any;
-    leadingIcon?: string;
-    leadingIconType?: ButtonToggleIconType;
-    trailingIcon?: string;
-    trailingIconType?: ButtonToggleIconType;
-}
+export type IButtonToggleGroupChangeEventData<T = unknown> = T;
+export type ButtonToggleGroupTheme = Theme;

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

@@ -5,15 +5,20 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}button-toggle-group`;
-const attributes = {
+const observedAttributes = {
     VALUE: 'value',
     MULTIPLE: 'multiple',
     MANDATORY: 'mandatory',
     VERTICAL: 'vertical',
     STRETCH: 'stretch',
     DISABLED: 'disabled',
-    DENSE: 'dense'
+    REQUIRED: 'required',
+    READONLY: 'readonly',
+    DENSE: 'dense',
+    NO_OUTLINE: 'no-outline',
+    THEME: 'theme'
 };
+const attributes = Object.assign({}, observedAttributes);
 const classes = {
     VERTICAL: 'forge-button-toggle-group--vertical',
     STRETCH: 'forge-button-toggle-group--stretch'
@@ -26,6 +31,7 @@ const events = {
 };
 export const BUTTON_TOGGLE_GROUP_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     classes,
     selectors,

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

@@ -5,39 +5,41 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IButtonToggleGroupAdapter } from './button-toggle-group-adapter';
-import { IButtonToggleOption } from './button-toggle-group-constants';
+import { ButtonToggleGroupTheme } from './button-toggle-group-constants';
 export interface IButtonToggleGroupFoundation extends ICustomElementFoundation {
-    value: any;
+    value: unknown;
     multiple: boolean;
     stretch: boolean;
     mandatory: boolean;
     vertical: boolean;
     dense: boolean;
     disabled: boolean;
-    options: IButtonToggleOption[];
+    readonly: boolean;
+    required: boolean;
+    outlined: boolean;
+    theme: ButtonToggleGroupTheme;
 }
 export declare class ButtonToggleGroupFoundation implements IButtonToggleGroupFoundation {
     private _adapter;
-    private _isInitialized;
+    private _values;
+    private _outlined;
     private _multiple;
     private _mandatory;
     private _vertical;
     private _stretch;
     private _dense;
     private _disabled;
-    private _options;
-    private _values;
-    private _originalValue;
+    private _readonly;
+    private _required;
+    private _theme;
     private _selectListener;
     private _slotListener;
     constructor(_adapter: IButtonToggleGroupAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     private _synchronize;
     private _onSelect;
-    private _getValue;
     private _applyValue;
-    private _applyOptions;
     get value(): any;
     set value(value: any);
     get multiple(): boolean;
@@ -52,6 +54,12 @@ export declare class ButtonToggleGroupFoundation implements IButtonToggleGroupFo
     set dense(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get options(): IButtonToggleOption[];
-    set options(value: IButtonToggleOption[]);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get outlined(): boolean;
+    set outlined(value: boolean);
+    get theme(): ButtonToggleGroupTheme;
+    set theme(value: ButtonToggleGroupTheme);
 }

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

@@ -8,192 +8,196 @@ import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
 export class ButtonToggleGroupFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._isInitialized = false;
+        this._values = [];
+        this._outlined = true;
         this._multiple = false;
         this._mandatory = false;
         this._vertical = false;
         this._stretch = false;
         this._dense = false;
         this._disabled = false;
-        this._options = [];
-        this._values = [];
+        this._readonly = false;
+        this._required = false;
+        this._theme = 'tertiary';
         this._selectListener = evt => this._onSelect(evt);
         this._slotListener = () => this._synchronize();
     }
     initialize() {
-        if (this._options && this._options.length) {
-            this._applyOptions(false);
-        }
+        this._adapter.setFormValue();
+        this._adapter.setFormValidity();
         this._adapter.addListener(BUTTON_TOGGLE_CONSTANTS.events.SELECT, this._selectListener);
         this._adapter.addSlotChangeListener(this._slotListener);
-        this._adapter.setVertical(this._vertical);
-        this._adapter.setStretch(this._stretch);
-        this._adapter.setDense(this._dense);
-        this._adapter.setDisabled(this._disabled);
-        this._adapter.applyAdjacentSelections(this._vertical);
-        this._isInitialized = true;
-    }
-    disconnect() {
-        this._isInitialized = false;
+    }
+    destroy() {
         this._adapter.removeListener(BUTTON_TOGGLE_CONSTANTS.events.SELECT, this._selectListener);
         this._adapter.removeSlotChangeListener(this._slotListener);
     }
     _synchronize() {
-        if (!this._multiple) {
-            const selectedValues = this._adapter.getSelectedValues().concat(this._values);
-            this.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : null;
+        if (this._disabled) {
+            this._adapter.setDisabled(this._disabled);
         }
-        else {
+        if (this._readonly) {
+            this._adapter.setReadonly(this._readonly);
+        }
+        if (this._multiple) {
             const selectedValues = new Set(this._adapter.getSelectedValues().concat(this._values));
-            this._applyValue(Array.from(selectedValues));
+            this.value = Array.from(selectedValues);
+        }
+        else {
+            const selectedValues = this._adapter.getSelectedValues().concat(this._values);
+            this.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : null;
         }
     }
     _onSelect(evt) {
-        const target = evt.target;
-        // When in mandatory mode we need to ensure at least one element is selected. If there are no selections
-        // then we need to reselect the target toggle because it was deselected
+        // When in mandatory mode we need to ensure at least one element is selected. If the user tries to deselect the last
+        // element, we prevent the select event from toggling.
         if (this._mandatory) {
             const values = this._adapter.getSelectedValues();
             if (!values.length) {
-                target.selected = true;
+                evt.preventDefault();
                 return;
             }
         }
-        // When not in multiple mode, we deselect all toggles, except for the one that was just changed
-        if (!this._multiple) {
-            this._adapter.deselect(target);
+        // Compute the new state to provide in the change event
+        let value;
+        if (evt.detail.selected) {
+            value = this._multiple ? [...this._values, evt.detail.value] : [evt.detail.value];
         }
-        this._adapter.applyAdjacentSelections(this._vertical);
-        this._adapter.emitHostEvent(BUTTON_TOGGLE_GROUP_CONSTANTS.events.CHANGE, this._getValue());
-    }
-    _getValue() {
-        var _a;
-        const selections = this._adapter.getSelectedValues();
-        return this._multiple ? Array.from(new Set(selections)) : (_a = selections.slice(0, 1)[0]) !== null && _a !== void 0 ? _a : null;
+        else {
+            value = this._multiple ? this._values.filter(v => v !== evt.detail.value) : [];
+        }
+        const detail = this._multiple ? value : value.length ? value[0] : null;
+        const changeEvt = new CustomEvent(BUTTON_TOGGLE_GROUP_CONSTANTS.events.CHANGE, { detail, bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(changeEvt);
+        if (changeEvt.defaultPrevented) {
+            evt.preventDefault();
+            return;
+        }
+        this._values = value;
+        this._adapter.applyValues(this._values);
+        this._adapter.setFormValue();
+        this._adapter.setFormValidity();
     }
     _applyValue(value) {
-        let values = value instanceof Array ? value : [value];
+        let values = Array.isArray(value) ? value : value != null ? [value] : [];
+        this._values = values;
         if (!this._multiple && values.length > 1) {
-            values = values[0];
+            values = [values[0]];
         }
-        this._values = values;
         this._adapter.applyValues(values);
-        if (this._multiple) {
-            this._adapter.applyAdjacentSelections(this._vertical);
-        }
-    }
-    _applyOptions(init = true) {
-        if (this._options) {
-            this._adapter.createOptions(this._options);
-            if (init) {
-                this._adapter.setStretch(this._stretch);
-                this._adapter.setDense(this._dense);
-                this._adapter.setDisabled(this._disabled);
-                this._adapter.applyAdjacentSelections(this._vertical);
-            }
-        }
+        this._adapter.setFormValue();
+        this._adapter.setFormValidity();
     }
     get value() {
-        if (!this._isInitialized) {
-            return this._originalValue;
-        }
-        return this._getValue();
+        var _a;
+        // Combine the selected toggle values with our current state to ensure we always return the latest value
+        // even if our state doesn't match a selected toggle.
+        const values = Array.from(new Set(this._adapter.getSelectedValues().concat(this._values)));
+        return this._multiple ? Array.from(values) : (_a = values[0]) !== null && _a !== void 0 ? _a : null;
     }
     set value(value) {
-        this._originalValue = value;
         this._applyValue(value);
     }
     get multiple() {
         return this._multiple;
     }
     set multiple(value) {
+        value = !!value;
         if (this._multiple !== value) {
             this._multiple = value;
-            this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MULTIPLE, this._multiple);
+            this._applyValue(this._values);
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MULTIPLE, this._multiple);
         }
     }
     get mandatory() {
         return this._mandatory;
     }
     set mandatory(value) {
+        value = !!value;
         if (this._mandatory !== value) {
             this._mandatory = value;
-            if (this._mandatory) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY, this._mandatory);
         }
     }
     get vertical() {
         return this._vertical;
     }
     set vertical(value) {
+        value = !!value;
         if (this._vertical !== value) {
             this._vertical = value;
-            this._adapter.setVertical(this._vertical);
-            this._adapter.applyAdjacentSelections(this._vertical);
-            if (this._vertical) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL, this._vertical);
         }
     }
     get stretch() {
         return this._stretch;
     }
     set stretch(value) {
+        value = !!value;
         if (this._stretch !== value) {
             this._stretch = value;
-            this._adapter.setStretch(this._stretch);
-            if (this._stretch) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH, this._stretch);
         }
     }
     get dense() {
         return this._dense;
     }
     set dense(value) {
+        value = !!value;
         if (this._dense !== value) {
             this._dense = value;
-            this._adapter.setDense(this._dense);
-            if (this._dense) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE, this._dense);
         }
     }
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
+        value = !!value;
         if (this._disabled !== value) {
             this._disabled = value;
             this._adapter.setDisabled(this._disabled);
-            if (this._disabled) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        value = !!value;
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this._adapter.setReadonly(this._readonly);
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.READONLY, this._readonly);
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        value = !!value;
+        if (this._required !== value) {
+            this._required = value;
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.REQUIRED, this._required);
+        }
+    }
+    get outlined() {
+        return this._outlined;
+    }
+    set outlined(value) {
+        value = !!value;
+        if (this._outlined !== value) {
+            this._outlined = value;
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.NO_OUTLINE, !this._outlined);
         }
     }
-    get options() {
-        return this._options.map(o => (Object.assign({}, o)));
+    get theme() {
+        return this._theme;
     }
-    set options(value) {
-        this._options = value.map(o => (Object.assign({}, o)));
-        if (this._isInitialized) {
-            this._applyOptions();
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.THEME, this._theme !== 'tertiary', this._theme);
         }
     }
 }