@justeattakeaway/pie-switch 0.18.4 → 0.20.0

package/README.md

@@ -8,92 +8,15 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-switch)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Events](#Events)
-7. [Contributing](#contributing)
-
 ## pie-switch
 
 `pie-switch` is a Web Component built using the Lit library.
 
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
-
-## Installation
-
-To install `pie-switch` in your application, run the following on your command line:
-
-```bash
-# npm
-$ npm i @justeattakeaway/pie-switch
-
-# yarn
-$ yarn add @justeattakeaway/pie-switch
-```
-
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
-
-
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieSwitch } from '@justeattakeaway/pie-switch';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-switch';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
 > [!IMPORTANT]
-> When using `pie-switch`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
-## Props
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| isChecked | `Boolean` | false | Indicates whether the switch is on or off |
-| isDisabled | `Boolean` | false | Indicates whether the switch is disabled or not |
-| aria  | `Object`  | `undefined`  | An object representing the aria labels `label` & `describedBy` that can be used on the switch;
-
-In your markup or JSX, you can then use these to set the properties for the `pie-switch` component:
-
-```html
-<!-- Native HTML -->
-<pie-switch></pie-switch>
-
-<!-- JSX -->
-<PieSwitch></PieSwitch>
-```
-
-## Events
+>For full information on using this component, please refer to our [documentation page](https://pie.design/components/switch/code/).
 
-| Event | Payload | Description |
-| ----- |-----| ----- |
-| `pie-switch-changed` | `this.isChecked` | Custom event to indicate a switch change. The event's detail contains the value of this.isChecked.  |
 
 ## Contributing
 

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit';
 
 export declare type AriaProps = {
@@ -16,20 +17,65 @@ export declare const labelPlacements: readonly ["leading", "trailing"];
  *
  * @constant
  */
-export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+export declare const ON_SWITCH_CHANGED_EVENT = "change";
 
 /**
  * @tagname pie-switch
- * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ * @event {CustomEvent} change - when the switch checked state is changed.
  */
 export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
+    static formAssociated: boolean;
+    private readonly _internals;
+    private input?;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    protected updated(_changedProperties: PropertyValues<this>): void;
     label?: string;
     labelPlacement: SwitchProps['labelPlacement'];
     aria: AriaProps;
-    isChecked: boolean;
+    checked: boolean;
+    required: boolean;
+    value: string;
+    name?: string;
     isDisabled: boolean;
     static styles: CSSResult;
+    /**
+     * Ensures that the form value and validation state are in sync with the component.
+     */
+    private handleFormAssociation;
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
     onChange(event: Event): void;
+    /**
+     * Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+     * @returns boolean
+     */
+    checkValidity(): boolean;
+    /**
+     * If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
+     * @returns boolean
+     */
+    reportValidity(): boolean;
+    /**
+     * Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * (Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).
+     * This string is empty if the component is valid.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
+     */
+    get validationMessage(): string;
     /**
      * Renders the label for a switch if provided.
      * if invalid value is passed, nothing gets rendered
@@ -52,9 +98,13 @@ export declare interface SwitchProps {
     /**
      * Same as the HTML checked attribute - indicates whether the switch is on or off
      */
-    isChecked?: boolean;
+    checked?: boolean;
+    /**
+     * Same as the HTML required attribute - indicates whether the switch must be turned or not
+     */
+    required: boolean;
     /**
-     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     * Same as the HTML disabled attribute - indicates whether the switch disabled or not
      */
     isDisabled?: boolean;
     /**
@@ -65,6 +115,14 @@ export declare interface SwitchProps {
      * The placement of the label such as leading or trailing
      */
     labelPlacement?: LabelPlacement;
+    /**
+     * Same as the HTML name attribute - indicates the name of the switch (for use with forms)
+     */
+    name?: string;
+    /**
+     * Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
+     */
+    value: string;
 }
 
 export { }