@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

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

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+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;
+    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 _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 readonly(): boolean;
+    set readonly(value: boolean);
+    get icon(): SwitchIconVisibility;
+    set icon(value: SwitchIconVisibility);
+    get labelPosition(): SwitchLabelPosition;
+    set labelPosition(value: SwitchLabelPosition);
+}

package/esm/switch/switch-foundation.js

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+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._readonly = false;
+        this._icon = 'on';
+        this._labelPosition = 'end';
+        this._changeListener = (evt) => this._handleChange(evt);
+        this._inputSlotListener = () => this._handleInputSlotChange();
+    }
+    initialize() {
+        this._adapter.initialize();
+        this._adapter.addRootListener('change', this._changeListener);
+        this._adapter.addInputSlotListener(this._inputSlotListener);
+        this._adapter.setIconVisibility(this._icon);
+        this._adapter.syncValue(this._submittedValue);
+    }
+    proxyClick() {
+        this._adapter.proxyClick();
+    }
+    proxyLabel(value) {
+        this._adapter.proxyLabel(value);
+    }
+    syncValidity(hasCustomValidityError) {
+        this._adapter.syncValidity(hasCustomValidityError);
+    }
+    setValidity(flags, message) {
+        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;
+        this._on = newValue;
+        const isCancelled = !this._adapter.emitHostEvent(SWITCH_CONSTANTS.events.CHANGE, newValue, true, true);
+        if (isCancelled) {
+            this._on = oldValue;
+            this._adapter.setOn(this._on);
+            return;
+        }
+        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
+        this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.SELECTED, this._on);
+    }
+    get on() {
+        return this._on;
+    }
+    set on(value) {
+        if (this._on !== value) {
+            this._on = value;
+            this._adapter.setOn(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;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (this._required !== value) {
+            this._required = value;
+            this._adapter.setRequired(this._required);
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.REQUIRED, this._required);
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    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() {
+        return this._icon;
+    }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value;
+            this._adapter.setIconVisibility(this._icon);
+            this._adapter.setHostAttribute(SWITCH_CONSTANTS.attributes.ICON, this._icon);
+        }
+    }
+    get labelPosition() {
+        return this._labelPosition;
+    }
+    set labelPosition(value) {
+        if (this._labelPosition !== value) {
+            this._labelPosition = value;
+            this._adapter.setLabelPosition(this._labelPosition);
+            this._adapter.setHostAttribute(SWITCH_CONSTANTS.attributes.LABEL_POSITION, this._labelPosition);
+        }
+    }
+}

package/esm/switch/switch.d.ts

@@ -3,54 +3,183 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { SwitchLabelPosition } from './switch-constants';
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface ISwitchComponent extends IBaseComponent {
-    dense: boolean;
-    disabled: boolean;
+import { BaseNullableFormComponent, IBaseNullableFormComponent } from '../core/base/base-nullable-form-component';
+import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
+import { ILabelAware } from '../label/label-aware';
+import { internals } from '../constants';
+export interface ISwitchComponent extends IBaseNullableFormComponent, ILabelAware {
+    on: boolean;
+    /**
+     * @deprecated use `on` instead
+     */
     selected: boolean;
+    defaultOn: boolean;
+    dense: boolean;
+    icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
+    toggle(force?: boolean): void;
+    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-switch': ISwitchComponent;
     }
     interface HTMLElementEventMap {
-        'forge-switch-select': CustomEvent<boolean>;
+        'forge-switch-change': CustomEvent<boolean>;
     }
 }
 /**
- * The custom element class behind the `<forge-switch>` element.
- *
  * @tag forge-switch
+ *
+ * @summary Switches toggle the state of a single setting on or off.
+ *
+ * @description
+ * Use switches to:
+ * - Toggle a single item on or off, on mobile and tablet
+ * - Immediately activate or deactivate something
+ *
+ * @property {boolean} on - Whether the switch is on the on or off state.
+ * @property {boolean} selected - Deprecated. Alias for `on`.
+ * @property {boolean} defaultOn - Whether the switch is on or off by default.
+ * @property {string} value - The value of the switch.
+ * @property {boolean} dense - The density state.
+ * @property {boolean} disabled - Controls if the switch is disabled.
+ * @property {boolean} required = Controls if the switch is required.
+ * @property {boolean} readonly - Controls if the switch is readonly.
+ * @property {SwitchIconVisibility} icon - Controls the presence of the off and on icons.
+ * @property {SwitchLabelPosition} labelPosition - Whether the label appears before or after the switch.
+ *
+ * @attribute {string} on - Controls whether the switch is in the on or off state.
+ * @attribute {string} selected - Deprecated. Alias for `on`.
+ * @attribute {string} default-on - Controls whether the switch is in the on or off state by default.
+ * @attribute {string} value - The value of the switch.
+ * @attribute {string} dense - Sets the density state.
+ * @attribute {string} disabled - Controls if the switch is disabled.
+ * @attribute {string} required - Controls if the switch is required.
+ * @attribute {string} readonly - Controls if the switch is readonly.
+ * @attribute {string} icon - Controls the presence of the off and on icons.
+ * @attribute {string} label-position - Sets whether the label appears before or after the switch.
+ *
+ * @method {(force?: boolean) => void} toggle - Toggles whether the switch is selected or forces a selected state.
+ *
+ * @event {CustomEvent} forge-switch-change - Dispatches when the switch's value changes.
+ *
+ * @cssproperty --forge-theme-primary - The primary color of the switch.
+ * @cssproperty --forge-theme-on-primary - The color of elements placed on top of the primary color (the handle icons for example).
+ * @cssproperty --forge-switch-handle-on-color - The color of the handle in the switch's on state.
+ * @cssproperty --forge-switch-handle-off-color - The color of the handle in the switch's off state.
+ * @cssproperty --forge-switch-handle-active-on-color - The color of the handle when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-handle-active-off-color - The color of the handle when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-handle-size - The inline and block size of the handle.
+ * @cssproperty --forge-switch-handle-width - The inline size of the handle.
+ * @cssproperty --forge-switch-handle-height - The block size of the handle.
+ * @cssproperty --forge-switch-handle-scale - The scale transformation applied to the handle.
+ * @cssproperty --forge-switch-handle-on-scale - The scale transformation applied to the handle in the switch's on state.
+ * @cssproperty --forge-switch-handle-off-scale - The scale transformation applied to the handle in the switch's off state.
+ * @cssproperty --forge-switch-handle-active-scale - The scale transformation applied to the handle when the switch is active (pressed).
+ * @cssproperty --forge-switch-handle-active-on-scale - The scale transformation applied to the handle when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-handle-active-off-scale - The scale transformation applied to the handle when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-handle-shape - The shape of the handle.
+ * @cssproperty --forge-switch-handle-elevation - The handle's shadow.
+ * @cssproperty --forge-switch-handle-on-elevation - The handle's shadow in the switch's on state.
+ * @cssproperty --forge-switch-handle-off-elevation - The handle's shadow in the switch's off state.
+ * @cssproperty --forge-switch-handle-active-elevation - The handle's shadow when the switch is active (pressed).
+ * @cssproperty --forge-switch-handle-active-on-elevation - The handle's shadow when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-handle-active-off-elevation - The handle's shadow when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-track-on-color - The color of the track in the switch's on state.
+ * @cssproperty --forge-switch-track-off-color - The color fo the track in the switch's off state.
+ * @cssproperty --forge-switch-track-active-on-color - The color of the track when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-track-active-off-color - The color fo the track when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-track-width - The inline size of the track.
+ * @cssproperty --forge-switch-track-height - The block size of the track.
+ * @cssproperty --forge-switch-track-shape - The shape of the track.
+ * @cssproperty --forge-switch-track-border-width - The width of the track border.
+ * @cssproperty --forge-switch-track-on-border-width - The width of the track border in the switch's on state.
+ * @cssproperty --forge-switch-track-off-border-width - The width of the track border in the switch's off state.
+ * @cssproperty --forge-switch-track-active-on-border-width - The width of the track border when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-track-active-off-border-width - The width of the track border when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-track-border-color - The color of the track border.
+ * @cssproperty --forge-switch-track-on-border-color - The color of the track border in the switch's on state.
+ * @cssproperty --forge-switch-track-off-border-color - The color of the track border in the switch's off state.
+ * @cssproperty --forge-switch-track-active-on-border-color - The color of the track border when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-track-active-off-border-color - The color of the track border when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-icon-color - The color of the handle icons.
+ * @cssproperty --forge-switch-icon-on-color - The color of the handle icon in the switch's on state.
+ * @cssproperty --forge-switch-icon-off-color - The color of the handle icon in the switch's off state.
+ * @cssproperty --forge-switch-icon-active-on-color - The color of the handle icon when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-icon-active-off-color - The color of the handle icon when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-icon-size - The size of the handle icon.
+ * @cssproperty --forge-switch-icon-on-size - The size of the handle icon in the switch's on state.
+ * @cssproperty --forge-switch-icon-off-size - The size of the handle icon in the switch's off state.
+ * @cssproperty --forge-switch-icon-scale - The scale transformation applied to the handle icons.
+ * @cssproperty --forge-switch-icon-on-scale - The scale transformation applied to the handle icons in the switch's on state.
+ * @cssproperty --forge-switch-icon-off-scale - The scale transformation applied to the handle icons in the switch's off state.
+ * @cssproperty --forge-switch-icon-active-on-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its on state.
+ * @cssproperty --forge-switch-icon-active-off-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-gap - The space between the switch and label.
+ * @cssproperty --forge-switch-justify - How the switch and label are distributed along their main axis.
+ * @cssproperty --forge-switch-direction - Whether the switch and label are arranged along the inline or block axis.
+ * @cssproperty --forge-switch-state-layer-size - The inline and block size of the handle's state layer.
+ * @cssproperty --forge-switch-state-layer-width - The inline size of the handle's state layer.
+ * @cssproperty --forge-switch-state-layer-height - The block size of the handle's state layer.
+ * @cssproperty --forge-switch-state-layer-on-color - The color of the handle's state layer when the switch is in its on state.
+ * @cssproperty --forge-switch-state-layer-off-color - The color of the handle's state layer when the switch is in its off state.
+ * @cssproperty --forge-switch-state-layer-dense-size - The inline and block size of the handle's state layer when the dense switch is used.
+ * @cssproperty --forge-switch-state-layer-dense-width - The inline size of the handle's state layer when the dense switch is used.
+ * @cssproperty --forge-switch-state-layer-dense-height - The block size of the handle's state layer when the dense switch is used.
+ * @cssproperty --forge-switch-disabled-opacity - The opacity of the switch when disabled.
+ * @cssproperty --forge-switch-animation-duration - The duration of animations.
+ * @cssproperty --forge-switch-animation-timing - The timing function used in most animations.
+ * @cssproperty --forge-switch-active-animation-timing - The timing function used in active state animations.
+ *
+ * @csspart switch - Styles the switch container element.
+ * @csspart track - Styles the track element.
+ * @csspart handle - Styles the handle element.
+ * @csspart icon-on - Styles the on icon element.
+ * @csspart icon-off - Styles the off icon element.
+ * @csspart label - Styles the label element.
+ * @csspart state-layer - Styles the state layer root element.
+ * @csspart focus-indicator - Styles the focus indicator root element.
  */
-export declare class SwitchComponent extends BaseComponent implements ISwitchComponent {
+export declare class SwitchComponent extends BaseNullableFormComponent implements ISwitchComponent {
     static get observedAttributes(): string[];
-    private _containerElement;
-    private _buttonElement;
-    private _mdcSwitch;
-    private _dense;
-    private _disabled;
-    private _selected;
-    private _labelPosition;
-    private _clickListener;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get name(): string;
+    set name(value: string);
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    readonly [internals]: ElementInternals;
+    private readonly _foundation;
     constructor();
-    private _initialize;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private _applyInitialState;
-    private _onClick;
-    private _applySelected;
-    private _applyDense;
-    private _applyLabelPosition;
-    private _applyButtonLabel;
-    get dense(): boolean;
-    set dense(value: boolean);
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    get selected(): boolean;
-    set selected(value: boolean);
-    get labelPosition(): SwitchLabelPosition;
-    set labelPosition(value: SwitchLabelPosition);
+    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    formDisabledCallback(isDisabled: boolean): void;
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
+    on: boolean;
+    /**
+     * @deprecated use `on` instead
+     */
+    selected: boolean;
+    defaultOn: boolean;
+    value: string;
+    dense: boolean;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    icon: SwitchIconVisibility;
+    labelPosition: SwitchLabelPosition;
+    /**
+     * Toggles the switch on or off.
+     * @param force Whether to set the switch on or off.
+     */
+    toggle(force?: boolean): void;
 }