Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
2,218 additions
and
1,782 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "cSpell.words": [ | ||
| "describedby", | ||
| "labelledby", | ||
| "radiogroup" | ||
| ] | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| import { html } from 'lit-html'; | ||
|
|
||
| export default html` | ||
| <section class="documentation-section"> | ||
| <h2>Usage</h2> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { AnypointRadioGroupElement } from './src/AnypointRadioGroupElement'; | ||
| export { AnypointRadioButtonElement } from './src/AnypointRadioButtonElement'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { AnypointRadioGroupElement } from './src/AnypointRadioGroupElement.js'; | ||
| export { AnypointRadioButtonElement } from './src/AnypointRadioButtonElement.js'; |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { LitElement, TemplateResult, CSSResult } from 'lit-element'; | ||
| import { CheckedElementMixin } from '@anypoint-web-components/anypoint-form-mixins'; | ||
|
|
||
|
|
||
| export declare interface AnypointRadioButtonElement extends CheckedElementMixin, LitElement { | ||
| onchange: EventListener; | ||
| } | ||
|
|
||
| /** | ||
| * `anypoint-radio-button` | ||
| * | ||
| * Anypoint styled radio button. | ||
| * | ||
| * ## Usage | ||
| * | ||
| * Install element: | ||
| * | ||
| * ``` | ||
| * npm i --save @anypoint-components/anypoint-radio-button | ||
| * ``` | ||
| * | ||
| * Import into your app: | ||
| * | ||
| * ```html | ||
| * <script type="module" src="node_modules/@anypoint-components/anypoint-radio-button.js"></script> | ||
| * ``` | ||
| * | ||
| * Or into another component | ||
| * | ||
| * ```javascript | ||
| * import '@anypoint-components/anypoint-radio-button.js'; | ||
| * ``` | ||
| * | ||
| * Use it: | ||
| * | ||
| * ```html | ||
| * <paper-radio-group selectable="anypoint-radio-button"> | ||
| * <anypoint-radio-button name="a">Apple</anypoint-radio-button> | ||
| * <anypoint-radio-button name="b">Banana</anypoint-radio-button> | ||
| * <anypoint-radio-button name="c">Orange</anypoint-radio-button> | ||
| * </paper-radio-group> | ||
| * ``` | ||
| * | ||
| * ### Styling | ||
| * | ||
| * `<anypoint-radio-button>` provides the following custom properties and mixins for styling: | ||
| * | ||
| * Custom property | Description | Default | ||
| * ----------------|-------------|---------- | ||
| * `--anypoint-radio-button-radio-container` | A mixin applied to the internal radio container | `{}` | ||
| * `--anypoint-radio-button-unchecked-color` | Border color of unchecked button | `--anypoint-color-aluminum5` | ||
| * `--anypoint-radio-button-unchecked-background-color` | Unchecked button background color | `transparent` | ||
| * `--anypoint-radio-button-checked-color` | Checked button selection color | `--anypoint-color-coreBlue3` | ||
| * `--anypoint-radio-button-checked-inner-background-color` | Checked button inner circle background color | `#fff` | ||
| * `--anypoint-radio-button-label-spacing` | Spacing between the label and the button | `5px` | ||
| * `--anypoint-radio-button-label-color` | Label color | `--primary-text-color` | ||
| * `--anypoint-radio-button-label` | A mixin applied to the internal label | `{}` | ||
| */ | ||
| export declare class AnypointRadioButtonElement { | ||
| readonly styles: CSSResult; | ||
|
|
||
| render(): TemplateResult; | ||
| /** | ||
| * Controls whether this button is in checked state. | ||
| * @attribute | ||
| */ | ||
| checked: boolean; | ||
| /** | ||
| * Controls whether this button is in disabled state. | ||
| * @attribute | ||
| */ | ||
| disabled: boolean; | ||
|
|
||
| connectedCallback(): void; | ||
|
|
||
| disconnectedCallback(): void; | ||
|
|
||
| _updateCheckedAria(checked?: boolean): void; | ||
|
|
||
| /** | ||
| * Handler for keyboard down event | ||
| */ | ||
| _keyDownHandler(e: KeyboardEvent): void; | ||
|
|
||
| /** | ||
| * Handler for pointer click event | ||
| */ | ||
| _clickHandler(): void; | ||
|
|
||
| /** | ||
| * Performs a click operation in next macro-task. | ||
| */ | ||
| _asyncClick(): void; | ||
|
|
||
| /** | ||
| * Handles `disable` property state change and manages `aria-disabled` | ||
| * and `tabindex` attributes | ||
| */ | ||
| _disabledChanged(disabled: boolean): void; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { LitElement, TemplateResult, CSSResult } from 'lit-element'; | ||
| import { AnypointMenuMixin } from '@anypoint-web-components/anypoint-menu-mixin'; | ||
|
|
||
| export declare interface AnypointRadioGroupElement extends AnypointMenuMixin, LitElement { | ||
| onselect: EventListener; | ||
| } | ||
|
|
||
| /** | ||
| * A web component that groups custom radio buttons and handles selection inside | ||
| * the group. | ||
| * | ||
| * Requirements for children: | ||
| * - must have role="radio" attribute | ||
| * - must have name attribute | ||
| * - radio state change must be notified via `change` event. | ||
| * | ||
| * Radio buttons with the same name inside their group will have single selection. | ||
| * This means when selecting a radio button any other currently selected button | ||
| * will be deselected. | ||
| * | ||
| * Also. when initializing the component, only last selected component keeps the | ||
| * selection. | ||
| * When new checked radio button is inserted into the group the selection is passed to the newly | ||
| * arriving element. | ||
| * | ||
| * This behavior is consistent with native DOM API. | ||
| * | ||
| * The group element exposes `selected` property that holds a reference to | ||
| * currently selected radio button. | ||
| * | ||
| * Example | ||
| * | ||
| * ``` | ||
| * <anypoint-radio-group> | ||
| * <anypoint-radio-button name="option"></anypoint-radio-button> | ||
| * <other-control role="button" name="option" checked></other-control> | ||
| * </anypoint-radio-group> | ||
| * ``` | ||
| */ | ||
| export declare class AnypointRadioGroupElement { | ||
| createRenderRoot(): AnypointRadioGroupElement; | ||
|
|
||
| /** | ||
| * List of radio button nodes. | ||
| */ | ||
| readonly elements: NodeList; | ||
|
|
||
| connectedCallback(): void; | ||
|
|
||
| /** | ||
| * Function that manages attribute change. | ||
| * If the changed attribute is `role` with value `radio` then the node is processed | ||
| * as a button and is added or removed from collection. | ||
| * @param {MutationRecord} record A MutationRecord received from MutationObserver | ||
| * callback. | ||
| */ | ||
| _processNodeAttributeChange(record): void; | ||
|
|
||
| /** | ||
| * Adds `change` event listener to detected radio buttons. | ||
| * A button is considered as a radio button when its `role` is `radio`. | ||
| * | ||
| * @param nodes List of nodes to process. | ||
| */ | ||
| _processAddedNodes(nodes: HTMLElement[]): void; | ||
|
|
||
| /** | ||
| * Removes event listeners and possibly clears `selected` when removing nodes from | ||
| * light DOM. | ||
| * @param nodes Nodes to process | ||
| */ | ||
| _processRemovedNodes(nodes: NodeList): void; | ||
|
|
||
| /** | ||
| * A function to be called when a node from the light DOM has been removed. | ||
| * It clears previously attached listeners and selection if passed node is | ||
| * currently selected node. | ||
| * @param node Removed node | ||
| */ | ||
| _nodeRemoved(node: Node): void; | ||
|
|
||
| /** | ||
| * Overrides `AnypointMenuMixin._onKeydown`. Adds right / left arrows support. | ||
| */ | ||
| _onKeydown(e: KeyboardEvent): void; | ||
|
|
||
| /** | ||
| * Overrides `AnypointSelectableMixin._applySelection` to manage item's checked | ||
| * state. | ||
| * @param item Selected / deselected item. | ||
| * @param isSelected True if the item is selected | ||
| */ | ||
| _applySelection(item: HTMLElement, isSelected: boolean): void; | ||
|
|
||
| /** | ||
| * Ensures that the last child element is checked in the group. | ||
| */ | ||
| _ensureSingleSelection(): void; | ||
|
|
||
| /** | ||
| * Overrides `AnypointSelectableMixin._mutationHandler`. | ||
| * Processes dynamically added nodes and updates selection if needed. | ||
| * @params mutationsList A list of changes record | ||
| */ | ||
| _mutationHandler(mutationsList: MutationRecord[]): void; | ||
|
|
||
| /** | ||
| * Overrides `AnypointSelectableMixin._observeItems` to include subtree. | ||
| */ | ||
| _observeItems(): MutationObserver; | ||
|
|
||
| /** | ||
| * Disables children when disabled state changes | ||
| */ | ||
| _disabledChanged(disabled: boolean): void; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters