@limetech/lime-elements/dist/types/components/switch/switch.d.ts

Lime Elements

import { Label } from '../dynamic-label/label.types';
/**
 * The Switch component is a fundamental element in UI design that serves as a toggle switch
 * to control the state of a specific setting or option in an application or website.
 * The two distinct positions of the Switch are visually indicative of the two states:
 * ON and OFF; making it easy for users to understand the current state of the controlled feature.
 *
 * The Switch component is widely used in user interfaces to enable users to
 * quickly and intuitively change binary settings.
 *
 * :::important
 * Checkboxes are sometimes used interchangeably with switches in user interfaces.
 * But there is an important difference between the two! Please read our guidelines about
 * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
 *
 * @exampleComponent limel-example-switch
 * @exampleComponent limel-example-switch-helper-text
 * @exampleComponent limel-example-switch-readonly
 */
export declare class Switch {
  /**
   * Label to display next to the switch
   */
  label: string;
  /**
   * Disables the switch when `true`,
   * and visually shows that the switch is editable but disabled.
   * This tells the users that if certain requirements are met,
   * the switch may become interactable.
   */
  disabled: boolean;
  /**
   * Disables the switch when `true`. This visualizes the switch slightly differently.
   * But shows no visual sign indicating that the switch is disabled
   * or can ever become interactable.
   */
  readonly: boolean;
  /**
   * Set to `true` to indicate that the current value is invalid.
   */
  invalid: boolean;
  /**
   * The value of the switch
   */
  value: boolean;
  /**
   * Optional helper text to display below the switch
   */
  helperText: string;
  /**
   * The labels to use to clarify what kind of data is being visualized,
   * when the component is `readonly`.
   */
  readonlyLabels?: Array<Label<boolean>>;
  /**
   * Emitted when the value has changed
   */
  private change;
  private host;
  private helperTextId;
  private fieldId;
  private mdcSwitch;
  connectedCallback(): void;
  componentWillLoad(): void;
  componentDidLoad(): void;
  private initialize;
  disconnectedCallback(): void;
  render(): any[];
  protected valueWatcher(newValue: boolean): void;
  private renderHelperLine;
  private hasHelperText;
  private handleClick;
}
//# sourceMappingURL=switch.d.ts.map