wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
66 lines (65 loc) • 3.72 kB
TypeScript
import { default as WJElement } from '../wje-element/element.js';
/**
* `Toggle` is a custom web component that represents a toggle input.
* @summary This element represents a toggle input.
* @documentation https://elements.webjet.sk/components/toggle
* @status stable
* @augments {WJElement}
* @csspart native - The native toggle wrapper.
* @csspart input - The toggle input.
* @csspart toggle - The toggle part.
* @slot - The default slot for the toggle.
* @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.
* @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.
* @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.
* @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.
* @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.
* @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.
* @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.
* @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.
* @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.
* @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.
* @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.
* @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.
* @tag wje-toggle
*/
export default class Toggle extends WJElement {
/**
* Get CSS stylesheet for the Button element.
* @static
* @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
*/
static get cssStyleSheet(): CSSStyleSheet;
/**
* Get observed attributes for the toggle element.
* @returns {string[]}
*/
static get observedAttributes(): string[];
/**
* Set checked attribute for the toggle element.
*/
set disabled(value: boolean);
/**
* Get checked attribute for the toggle element.
* @returns {boolean} true if the toggle is disabled, false otherwise
*/
get disabled(): boolean;
/**
* Set checked attribute for the toggle element.
*/
set checked(value: boolean);
/**
* Get checked attribute for the toggle element.
* @returns {boolean} true if the toggle is checked, false otherwise
*/
get checked(): boolean;
/**
* Draw the toggle element for the component.
*/
draw(): DocumentFragment;
input: HTMLInputElement;
/**
* After draw method for the toggle element to add event listeners for the input element after the element is drawn.
*/
afterDraw(): void;
}