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

package/esm/switch/switch-adapter.js

@@ -3,10 +3,15 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleClass } from '@tylertech/forge-core';
-import { BaseAdapter, forwardAriaAttributes } from '../core';
+import { getShadowElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { internals } from '../constants';
+import { BaseAdapter, INPUT_PROPERTIES, SlottedElementAdapter, cloneAttributes, cloneProperties, cloneValidationMessage, forwardAttributes } from '../core';
 import { SWITCH_CONSTANTS } from './switch-constants';
 export class SwitchAdapter extends BaseAdapter {
+    get _activeInputElement() {
+        var _a;
+        return (_a = this._inputAdapter.el) !== null && _a !== void 0 ? _a : this._inputElement;
+    }
     constructor(component) {
         super(component);
         this._rootElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ROOT);
@@ -14,22 +19,40 @@ export class SwitchAdapter extends BaseAdapter {
         this._labelElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.LABEL);
         this._iconOnElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ICON_ON);
         this._iconOffElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.ICON_OFF);
+        this._stateLayerElement = getShadowElement(component, SWITCH_CONSTANTS.selectors.STATE_LAYER);
+        this._inputAdapter = new SlottedElementAdapter();
     }
     initialize() {
-        forwardAriaAttributes({
-            observedAttributes: SWITCH_CONSTANTS.ariaAttributes,
-            sourceEl: this._component,
-            targetEl: this._inputElement
-        });
+        const slottedInput = this._component.querySelector(SWITCH_CONSTANTS.selectors.SLOTTED_INPUT);
+        if (slottedInput) {
+            slottedInput.slot = 'input';
+            this._switchInput(slottedInput, this._inputElement);
+        }
+        else {
+            this._initializeForwardObserver(this._inputElement);
+        }
+        this._observeInput(slottedInput !== null && slottedInput !== void 0 ? slottedInput : this._inputElement);
     }
     setOn(value) {
-        this._inputElement.checked = value;
+        this._activeInputElement.checked = value;
+    }
+    setDefaultOn(value) {
+        this._activeInputElement.toggleAttribute('checked', value);
+    }
+    setValue(value) {
+        this._activeInputElement.value = value;
     }
     setDisabled(value) {
-        this._inputElement.disabled = value;
+        this._activeInputElement.disabled = value;
+        this._stateLayerElement.disabled = value;
     }
     setRequired(value) {
-        this._inputElement.required = value;
+        this._activeInputElement.required = value;
+    }
+    setReadonly(value) {
+        this._activeInputElement.readOnly = value;
+        toggleAttribute(this._activeInputElement, value, 'aria-readonly', value.toString());
+        this._stateLayerElement.disabled = value;
     }
     setIconVisibility(value) {
         const hideOn = value === 'none' || value === 'off';
@@ -46,24 +69,83 @@ export class SwitchAdapter extends BaseAdapter {
             this._rootElement.append(this._labelElement);
         }
     }
-    addInputListener(event, callback) {
-        this._inputElement.addEventListener(event, callback);
+    addRootListener(event, callback) {
+        this._rootElement.addEventListener(event, callback);
+    }
+    addInputSlotListener(callback) {
+        this._inputElement.addEventListener('slotchange', callback);
+    }
+    detectInputElement() {
+        const inputElement = this._inputSlotElement.assignedElements()[0];
+        if (inputElement) {
+            this._inputAdapter.attachElement(inputElement);
+        }
+        else {
+            this._inputAdapter.attachElement(this._inputElement);
+        }
+    }
+    proxyClick() {
+        this._activeInputElement.click();
+        // TODO: use `{ focusVisble: false }` when supported.
+        this._activeInputElement.focus();
+    }
+    proxyLabel(value) {
+        this._labelElementText = value !== null && value !== void 0 ? value : undefined;
+        this._setAriaLabel();
     }
     syncValue(value) {
+        if (value === null) {
+            this._component[internals].setFormValue(null, SWITCH_CONSTANTS.state.OFF);
+            return;
+        }
         const data = new FormData();
-        data.append(this._component.name, String(value));
-        this._component.internals.setFormValue(data, value.toString());
+        data.append(this._component.name, value);
+        this._component[internals].setFormValue(data, SWITCH_CONSTANTS.state.ON);
     }
     syncValidity(hasCustomValidityError) {
         if (hasCustomValidityError) {
-            this._inputElement.setCustomValidity(this._component.internals.validationMessage);
+            this._activeInputElement.setCustomValidity(this._component[internals].validationMessage);
         }
         else {
-            this._inputElement.setCustomValidity('');
+            this._activeInputElement.setCustomValidity('');
         }
-        this._component.internals.setValidity(this._inputElement.validity, this._inputElement.validationMessage, this._inputElement);
+        this._component[internals].setValidity(this._activeInputElement.validity, this._activeInputElement.validationMessage, this._activeInputElement);
     }
     setValidity(flags, message) {
-        this._component.internals.setValidity(flags, message, this._inputElement);
+        this._component[internals].setValidity(flags, message, this._activeInputElement);
+    }
+    _initializeInput() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._initializeForwardObserver(this._activeInputElement);
+    }
+    _initializeForwardObserver(el) {
+        this._forwardObserver = forwardAttributes(this._component, SWITCH_CONSTANTS.forwardedAttributes, (name, value) => {
+            // Use the connected label element as a fallback if aria-label is removed. Store the value so
+            // it can be used to determine whether an updated label element should take effect.
+            if (name === 'aria-label') {
+                this._forwardedAriaLabel = value !== null && value !== void 0 ? value : undefined;
+                this._setAriaLabel();
+                return;
+            }
+            // Otherwise forward the attribute to the element.
+            toggleAttribute(el, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    _setAriaLabel() {
+        var _a;
+        const hasAriaLabel = !!this._forwardedAriaLabel || !!this._labelElementText;
+        toggleAttribute(this._activeInputElement, hasAriaLabel, 'aria-label', (_a = this._forwardedAriaLabel) !== null && _a !== void 0 ? _a : this._labelElementText);
+    }
+    _switchInput(newEl, oldEl) {
+        cloneAttributes(oldEl, newEl, ['type', 'role', 'checked', 'aria-readonly']);
+        cloneProperties(oldEl, newEl, INPUT_PROPERTIES);
+        cloneValidationMessage(oldEl, newEl);
+    }
+    _observeInput(el = this._inputElement) {
+        this._inputAdapter.initialize(el, (newEl, oldEl) => {
+            this._switchInput(newEl, oldEl);
+            this._initializeInput();
+        });
     }
 }

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

@@ -6,28 +6,43 @@
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core';
 import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
 import { ISwitchComponent } from './switch';
+import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
 export type SwitchComponentDelegateProps = Partial<ISwitchComponent>;
 export interface ISwitchComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;
-    on?: boolean;
-    selected?: boolean;
 }
 export interface ISwitchComponentDelegateConfig extends IBaseComponentDelegateConfig<ISwitchComponent, ISwitchComponentDelegateOptions> {
 }
 export declare class SwitchComponentDelegate extends FormFieldComponentDelegate<ISwitchComponent, ISwitchComponentDelegateOptions> {
-    private _labelElement?;
     constructor(config?: ISwitchComponentDelegateConfig);
-    get value(): boolean;
-    set value(value: boolean);
+    get value(): string;
+    set value(value: string);
+    get on(): boolean;
+    set on(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get defaultOn(): boolean;
+    set defaultOn(value: boolean);
+    get icon(): SwitchIconVisibility;
+    set icon(value: SwitchIconVisibility);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get labelElement(): HTMLSpanElement | undefined;
+    get dense(): boolean;
+    set dense(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get labelPosition(): SwitchLabelPosition;
+    set labelPosition(value: SwitchLabelPosition);
     onChange(listener: (value: boolean) => void): void;
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;
     setLabel(text: string | null): void;
+    toggle(force?: boolean): void;
     protected _build(): ISwitchComponent;
     protected _configure(): void;
-    private _createLabel;
 }

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

@@ -10,19 +10,70 @@ export class SwitchComponentDelegate extends FormFieldComponentDelegate {
         super(config);
     }
     get value() {
-        return this._element.on;
+        return this._element.value;
     }
     set value(value) {
+        this._element.value = value;
+    }
+    get on() {
+        return this._element.on;
+    }
+    set on(value) {
         this._element.on = value;
     }
+    get selected() {
+        return this._element.selected;
+    }
+    set selected(value) {
+        this._element.selected = value;
+    }
+    get defaultOn() {
+        return this._element.defaultOn;
+    }
+    set defaultOn(value) {
+        this._element.defaultOn = value;
+    }
+    get icon() {
+        return this._element.icon;
+    }
+    set icon(value) {
+        this._element.icon = value;
+    }
     get disabled() {
         return this._element.disabled;
     }
     set disabled(value) {
         this._element.disabled = value;
     }
-    get labelElement() {
-        return this._labelElement;
+    get dense() {
+        return this._element.dense;
+    }
+    set dense(value) {
+        this._element.dense = value;
+    }
+    get required() {
+        return this._element.required;
+    }
+    set required(value) {
+        this._element.required = value;
+    }
+    get readonly() {
+        return this._element.readonly;
+    }
+    set readonly(value) {
+        this._element.readonly = value;
+    }
+    get name() {
+        return this._element.name;
+    }
+    set name(value) {
+        this._element.name = value;
+    }
+    get labelPosition() {
+        return this._element.labelPosition;
+    }
+    set labelPosition(value) {
+        this._element.labelPosition = value;
     }
     onChange(listener) {
         this._element.addEventListener('forge-switch-change', ({ detail }) => listener(detail));
@@ -34,37 +85,21 @@ export class SwitchComponentDelegate extends FormFieldComponentDelegate {
         this._element.addEventListener('blur', evt => listener(evt));
     }
     setLabel(text) {
-        if (text) {
-            if (this._labelElement) {
-                this._labelElement.textContent = text;
-            }
-            else {
-                this._createLabel(text);
-            }
-        }
-        else if (this._labelElement) {
-            this._element.removeChild(this._labelElement);
-            this._labelElement = undefined;
-        }
+        this._element.innerText = text !== null && text !== void 0 ? text : '';
+    }
+    toggle(force) {
+        this._element.toggle(force);
     }
     _build() {
         return document.createElement(SWITCH_CONSTANTS.elementName);
     }
     _configure() {
-        var _a, _b, _c, _d, _e;
-        if (typeof ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.label) === 'string') {
-            this._createLabel(this._config.options.label);
-        }
-        if (((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.on) !== undefined || ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.selected) !== undefined) {
-            this._element.on = ((_d = this._config.options.on) !== null && _d !== void 0 ? _d : this._config.options.selected);
-        }
-        if ((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.id) {
+        var _a, _b;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
             this._element.id = this._config.options.id;
         }
-    }
-    _createLabel(text) {
-        this._labelElement = document.createElement('span');
-        this._labelElement.textContent = text;
-        this._element.appendChild(this._labelElement);
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) {
+            this._element.innerText = this._config.options.label;
+        }
     }
 }

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

@@ -13,13 +13,19 @@ export declare const SWITCH_CONSTANTS: {
         LABEL: string;
         ICON_ON: string;
         ICON_OFF: string;
+        INPUT_SLOT: string;
+        STATE_LAYER: string;
+        SLOTTED_INPUT: string;
     };
     attributes: {
         ON: string;
         SELECTED: string;
+        DEFAULT_ON: string;
+        VALUE: string;
+        DENSE: string;
         DISABLED: string;
         REQUIRED: string;
-        DENSE: string;
+        READONLY: string;
         ICON: string;
         LABEL_POSITION: string;
     };
@@ -27,7 +33,11 @@ export declare const SWITCH_CONSTANTS: {
     events: {
         CHANGE: string;
     };
-    ariaAttributes: string[];
+    state: {
+        ON: string;
+        OFF: string;
+    };
+    forwardedAttributes: string[];
 };
 export type SwitchLabelPosition = 'start' | 'end';
 export type SwitchIconVisibility = 'both' | 'none' | 'off' | 'on';

package/esm/switch/switch-constants.js

@@ -4,36 +4,47 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { getObservedAriaAttributes } from '../core';
+import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}switch`;
 const classes = {
     HIDDEN: 'hidden'
 };
-const selectors = {
-    ROOT: '.forge-switch',
-    INPUT: '#input',
-    LABEL: '#label',
-    ICON_ON: '#icon-on',
-    ICON_OFF: '#icon-off'
-};
 const attributes = {
     ON: 'on',
     SELECTED: 'selected',
+    DEFAULT_ON: 'default-on',
+    VALUE: 'value',
+    DENSE: 'dense',
     DISABLED: 'disabled',
     REQUIRED: 'required',
-    DENSE: 'dense',
+    READONLY: 'readonly',
     ICON: 'icon',
     LABEL_POSITION: 'label-position'
 };
+const selectors = {
+    ROOT: '.forge-switch',
+    INPUT: '#input',
+    LABEL: '#label',
+    ICON_ON: '#icon-on',
+    ICON_OFF: '#icon-off',
+    INPUT_SLOT: 'slot[name=input]',
+    STATE_LAYER: 'forge-state-layer',
+    SLOTTED_INPUT: 'input[type=checkbox]'
+};
 const events = {
     CHANGE: `${elementName}-change`
 };
-const ariaAttributes = getObservedAriaAttributes({ unprefixed: true });
+const state = {
+    ON: 'on',
+    OFF: 'off'
+};
+const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const SWITCH_CONSTANTS = {
     classes,
     selectors,
     attributes,
     elementName,
     events,
-    ariaAttributes
+    state,
+    forwardedAttributes
 };

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

@@ -8,37 +8,56 @@ import { ISwitchAdapter } from './switch-adapter';
 import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
 export interface ISwitchFoundation extends ICustomElementFoundation {
     on: boolean;
+    defaultOn: boolean;
+    value: string;
+    dense: boolean;
     disabled: boolean;
     required: boolean;
-    dense: boolean;
+    readonly: boolean;
     icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
     syncValidity(hasCustomValidityError: boolean): void;
     setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
 export declare class SwitchFoundation implements ISwitchFoundation {
     private readonly _adapter;
     private _on;
+    private _defaultOn;
+    private _value;
+    private _dense;
     private _disabled;
     private _required;
-    private _dense;
+    private _readonly;
     private _icon;
     private _labelPosition;
+    private get _submittedValue();
     private readonly _changeListener;
+    private readonly _inputSlotListener;
     constructor(_adapter: ISwitchAdapter);
     initialize(): void;
+    proxyClick(): void;
+    proxyLabel(value: string | null): void;
     syncValidity(hasCustomValidityError: boolean): void;
     setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
     private _handleChange;
+    private _handleInputSlotChange;
     private _setOnAttribute;
     get on(): boolean;
     set on(value: boolean);
+    get defaultOn(): boolean;
+    set defaultOn(value: boolean);
+    get value(): string;
+    set value(value: string);
+    get dense(): boolean;
+    set dense(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
     get required(): boolean;
     set required(value: boolean);
-    get dense(): boolean;
-    set dense(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
     get icon(): SwitchIconVisibility;
     set icon(value: SwitchIconVisibility);
     get labelPosition(): SwitchLabelPosition;

package/esm/switch/switch-foundation.js

@@ -5,22 +5,36 @@
  */
 import { SWITCH_CONSTANTS } from './switch-constants';
 export class SwitchFoundation {
+    get _submittedValue() {
+        return this._on ? this._value : null;
+    }
     constructor(_adapter) {
         this._adapter = _adapter;
         // State
         this._on = false;
+        this._defaultOn = false;
+        this._value = 'on';
+        this._dense = false;
         this._disabled = false;
         this._required = false;
-        this._dense = false;
+        this._readonly = false;
         this._icon = 'on';
         this._labelPosition = 'end';
         this._changeListener = (evt) => this._handleChange(evt);
+        this._inputSlotListener = () => this._handleInputSlotChange();
     }
     initialize() {
         this._adapter.initialize();
-        this._adapter.addInputListener('change', this._changeListener);
+        this._adapter.addRootListener('change', this._changeListener);
+        this._adapter.addInputSlotListener(this._inputSlotListener);
         this._adapter.setIconVisibility(this._icon);
-        this._adapter.syncValue(this._on);
+        this._adapter.syncValue(this._submittedValue);
+    }
+    proxyClick() {
+        this._adapter.proxyClick();
+    }
+    proxyLabel(value) {
+        this._adapter.proxyLabel(value);
     }
     syncValidity(hasCustomValidityError) {
         this._adapter.syncValidity(hasCustomValidityError);
@@ -29,6 +43,10 @@ export class SwitchFoundation {
         this._adapter.setValidity(flags, message);
     }
     _handleChange(evt) {
+        if (this._readonly) {
+            this._adapter.setOn(this._on);
+            return;
+        }
         const target = evt.target;
         const newValue = target.checked;
         const oldValue = this._on;
@@ -39,9 +57,12 @@ export class SwitchFoundation {
             this._adapter.setOn(this._on);
             return;
         }
-        this._adapter.syncValue(this._on);
+        this._adapter.syncValue(this._submittedValue);
         this._setOnAttribute();
     }
+    _handleInputSlotChange() {
+        this._adapter.detectInputElement();
+    }
     _setOnAttribute() {
         this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.ON, this._on);
         // Also set selected for backwards compatibility
@@ -54,10 +75,40 @@ export class SwitchFoundation {
         if (this._on !== value) {
             this._on = value;
             this._adapter.setOn(this._on);
-            this._adapter.syncValue(this._on);
+            this._adapter.syncValue(this._submittedValue);
             this._setOnAttribute();
         }
     }
+    get defaultOn() {
+        return this._defaultOn;
+    }
+    set defaultOn(value) {
+        if (this._defaultOn !== value) {
+            this._defaultOn = value;
+            this._adapter.setDefaultOn(this._defaultOn);
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DEFAULT_ON, this._defaultOn);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this._adapter.setValue(this._value);
+            this._adapter.syncValue(this._submittedValue);
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.VALUE, true, this._value);
+        }
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
     get disabled() {
         return this._disabled;
     }
@@ -78,13 +129,14 @@ export class SwitchFoundation {
             this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.REQUIRED, this._required);
         }
     }
-    get dense() {
-        return this._dense;
+    get readonly() {
+        return this._readonly;
     }
-    set dense(value) {
-        if (this._dense !== value) {
-            this._dense = value;
-            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DENSE, this._dense);
+    set readonly(value) {
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this._adapter.setReadonly(this._readonly);
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.READONLY, this._readonly);
         }
     }
     get icon() {