@material/chips

@material/chips

Version 14.0.0
Published 2 years ago
1.6 MB
16 dependencies
MIT license

Install

npm i @material/chips

yarn add @material/chips

pnpm add @material/chips

Overview

The Material Components for the Web chips component

Index

Classes

class MDCChip

class MDCChip extends MDCComponent<MDCChipFoundation> {}

MDCChip provides component encapsulation of the foundation implementation.

method attachTo

static attachTo: (root: Element) => MDCChip;

method destroy

destroy: () => void;

method getActions

getActions: () => MDCChipActionType[];

Returns the MDCChipActionTypes for the encapsulated actions.

method getDefaultFoundation

getDefaultFoundation: () => MDCChipFoundation;

method getElementID

getElementID: () => string;

Returns the ID of the root element.

method initialize

initialize: (actionFactory?: MDCChipActionFactory) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method isActionFocusable

isActionFocusable: (action: MDCChipActionType) => boolean;

Returns the focusability of the action.

method isActionSelectable

isActionSelectable: (action: MDCChipActionType) => boolean;

Returns the selectability of the action.

method isActionSelected

isActionSelected: (action: MDCChipActionType) => boolean;

Returns the selected state of the action.

method isDisabled

isDisabled: () => boolean;

method remove

remove: () => void;

Exposed to be called by the parent chip set.

method setActionFocus

setActionFocus: (
    action: MDCChipActionType,
    focus: MDCChipActionFocusBehavior
) => void;

Sets the focus behavior of the action.

method setActionSelected

setActionSelected: (action: MDCChipActionType, isSelected: boolean) => void;

Sets the selected state of the action.

method setDisabled

setDisabled: (isDisabled: boolean) => void;

method startAnimation

startAnimation: (animation: MDCChipAnimation) => void;

Starts the animation on the chip.

class MDCChipAction

class MDCChipAction
    extends MDCComponent<MDCChipActionFoundation>
    implements MDCRippleCapableSurface {}

MDCChipAction provides component encapsulation of the different foundation implementations.

property ripple

readonly ripple: MDCRipple;

method actionType

actionType: () => MDCChipActionType;

method attachTo

static attachTo: (root: Element) => MDCChipAction;

method destroy

destroy: () => void;

method getDefaultFoundation

getDefaultFoundation: () =>
    | MDCChipPrimaryActionFoundation
    | MDCChipTrailingActionFoundation;

method initialize

initialize: (rippleFactory?: MDCRippleFactory) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method isDisabled

isDisabled: () => boolean;

method isFocusable

isFocusable: () => boolean;

method isSelectable

isSelectable: () => boolean;

method isSelected

isSelected: () => boolean;

method setDisabled

setDisabled: (isDisabled: boolean) => void;

method setFocus

setFocus: (behavior: MDCChipActionFocusBehavior) => void;

method setSelected

setSelected: (isSelected: boolean) => void;

class MDCChipActionFoundation

abstract class MDCChipActionFoundation extends MDCFoundation<MDCChipActionAdapter> {}

MDCChipActionFoundation provides a base abstract foundation for all chip actions.

constructor

constructor(adapter?: Partial<MDCChipActionAdapter>);

property defaultAdapter

static readonly defaultAdapter: MDCChipActionAdapter;

method actionType

abstract actionType: () => MDCChipActionType;

method handleClick

handleClick: () => void;

method handleKeydown

handleKeydown: (event: KeyboardEvent) => void;

method isDisabled

isDisabled: () => boolean;

method isFocusable

isFocusable: () => boolean;

method isSelectable

abstract isSelectable: () => boolean;

method isSelected

isSelected: () => boolean;

method setDisabled

setDisabled: (isDisabled: boolean) => void;

method setFocus

setFocus: (behavior: MDCChipActionFocusBehavior) => void;

method setSelected

setSelected: (isSelected: boolean) => void;

method shouldEmitInteractionOnRemoveKey

protected abstract shouldEmitInteractionOnRemoveKey: () => boolean;

class MDCChipFoundation

class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {}

MDCChipFoundation provides a foundation for all chips.

constructor

constructor(adapter?: Partial<MDCChipAdapter>);

property defaultAdapter

static readonly defaultAdapter: MDCChipAdapter;

method destroy

destroy: () => void;

method getActions

getActions: () => MDCChipActionType[];

method getElementID

getElementID: () => string;

method handleActionInteraction

handleActionInteraction: ({ detail }: ActionInteractionEvent) => void;

method handleActionNavigation

handleActionNavigation: ({ detail }: ActionNavigationEvent) => void;

method handleAnimationEnd

handleAnimationEnd: (event: AnimationEvent) => void;

method handleTransitionEnd

handleTransitionEnd: () => void;

method isActionFocusable

isActionFocusable: (action: MDCChipActionType) => boolean;

method isActionSelectable

isActionSelectable: (action: MDCChipActionType) => boolean;

method isActionSelected

isActionSelected: (action: MDCChipActionType) => boolean;

method isDisabled

isDisabled: () => boolean;

method setActionFocus

setActionFocus: (
    action: MDCChipActionType,
    focus: MDCChipActionFocusBehavior
) => void;

method setActionSelected

setActionSelected: (action: MDCChipActionType, isSelected: boolean) => void;

method setDisabled

setDisabled: (isDisabled: boolean) => void;

method startAnimation

startAnimation: (animation: MDCChipAnimation) => void;

class MDCChipPrimaryActionFoundation

class MDCChipPrimaryActionFoundation extends MDCChipActionFoundation {}

MDCChipPrimaryActionFoundation provides the business logic for the primary chip action.

method actionType

actionType: () => MDCChipActionType;

method isSelectable

isSelectable: () => boolean;

method shouldEmitInteractionOnRemoveKey

protected shouldEmitInteractionOnRemoveKey: () => boolean;

class MDCChipSet

class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {}

MDCChip provides component encapsulation of the foundation implementation.

method addChip

addChip: (index: number) => void;

Animates the chip addition at the given index.

method attachTo

static attachTo: (root: Element) => MDCChipSet;

method destroy

destroy: () => void;

method getChipIdAtIndex

getChipIdAtIndex: (index: number) => string;

Returns the ID of the chip at the given index or an empty string if the index is out of bounds.

method getChipIndexByID

getChipIndexByID: (chipID: string) => number;

Returns the index of the chip with the given ID or -1 if none exists.

method getDefaultFoundation

getDefaultFoundation: () => MDCChipSetFoundation;

method getSelectedChipIndexes

getSelectedChipIndexes: () => ReadonlySet<number>;

Returns the unique indexes of the selected chips.

method initialize

initialize: (chipFactory?: MDCChipFactory) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method isChipSelected

isChipSelected: (index: number, action: MDCChipActionType) => boolean;

Returns the selection state of the chip.

method removeChip

removeChip: (index: number) => void;

Removes the chip at the given index.

method setChipSelected

setChipSelected: (
    index: number,
    action: MDCChipActionType,
    isSelected: boolean
) => void;

Sets the selection state of the chip.

class MDCChipSetFoundation

class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {}

MDCChipSetFoundation provides a foundation for all chips.

constructor

constructor(adapter?: Partial<MDCChipSetAdapter>);

property defaultAdapter

static readonly defaultAdapter: MDCChipSetAdapter;

method addChip

addChip: (index: number) => void;

method getSelectedChipIndexes

getSelectedChipIndexes: () => ReadonlySet<number>;

Returns the unique selected indexes of the chips.

method handleChipAnimation

handleChipAnimation: ({ detail }: ChipAnimationEvent) => void;

method handleChipInteraction

handleChipInteraction: ({ detail }: ChipInteractionEvent) => void;

method handleChipNavigation

handleChipNavigation: ({ detail }: ChipNavigationEvent) => void;

method isChipSelected

isChipSelected: (index: number, action: MDCChipActionType) => boolean;

Returns the selected state of the chip at the given index and action.

method removeChip

removeChip: (index: number) => void;

Removes the chip at the given index.

method setChipSelected

setChipSelected: (
    index: number,
    action: MDCChipActionType,
    isSelected: boolean
) => void;

Sets the selected state of the chip at the given index and action.

class MDCChipTrailingActionFoundation

class MDCChipTrailingActionFoundation extends MDCChipActionFoundation {}

MDCChipTrailingActionFoundation provides the business logic for the trailing chip action.

method actionType

actionType: () => MDCChipActionType;

method isSelectable

isSelectable: () => boolean;

method shouldEmitInteractionOnRemoveKey

protected shouldEmitInteractionOnRemoveKey: () => boolean;

Interfaces

interface MDCChipActionAdapter

interface MDCChipActionAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method emitEvent

emitEvent: <D extends object>(name: MDCChipActionEvents, detail: D) => void;

method focus

focus: () => void;

method getAttribute

getAttribute: (attr: MDCChipActionAttributes) => string | null;

method getElementID

getElementID: () => string;

method removeAttribute

removeAttribute: (attr: MDCChipActionAttributes) => void;

method setAttribute

setAttribute: (attr: MDCChipActionAttributes, value: string) => void;

interface MDCChipActionInteractionEventDetail

interface MDCChipActionInteractionEventDetail {}

MDCChipActionInteractionEventDetail provides the details for the interaction event.

property actionID

actionID: string;

property source

source: MDCChipActionType;

property trigger

trigger: MDCChipActionInteractionTrigger;

interface MDCChipActionNavigationEventDetail

interface MDCChipActionNavigationEventDetail {}

MDCChipActionNavigationEventDetail provides the details for the navigation event.

property key

key: string;

property source

source: MDCChipActionType;

interface MDCChipAdapter

interface MDCChipAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method addClass

addClass: (className: MDCChipCssClasses) => void;

Adds the given class to the root element.

method emitEvent

emitEvent: <D extends object>(eventName: MDCChipEvents, eventDetail: D) => void;

Emits the given event with the given detail.

method getActions

getActions: () => MDCChipActionType[];

Returns the child actions provided by the chip.

method getAttribute

getAttribute: (attrName: MDCChipAttributes) => string | null;

Returns the value for the given attribute, if it exists.

method getElementID

getElementID: () => string;

Returns the ID of the root element.

method getOffsetWidth

getOffsetWidth: () => number;

Returns the offset width of the root element.

method hasClass

hasClass: (className: MDCChipCssClasses) => boolean;

Returns true if the root element has the given class.

method isActionDisabled

isActionDisabled: (action: MDCChipActionType) => boolean;

Proxies to the MDCChipAction#isDisabled method.

method isActionFocusable

isActionFocusable: (action: MDCChipActionType) => boolean;

Proxies to the MDCChipAction#isFocusable method.

method isActionSelectable

isActionSelectable: (action: MDCChipActionType) => boolean;

Proxies to the MDCChipAction#isSelectable method.

method isActionSelected

isActionSelected: (action: MDCChipActionType) => boolean;

Proxies to the MDCChipAction#isSelected method.

method isRTL

isRTL: () => boolean;

Returns true if the text direction is right-to-left.

method removeClass

removeClass: (className: MDCChipCssClasses) => void;

Removes the given class from the root element.

method setActionDisabled

setActionDisabled: (action: MDCChipActionType, isDisabled: boolean) => void;

Proxies to the MDCChipAction#setDisabled method.

method setActionFocus

setActionFocus: (
    action: MDCChipActionType,
    behavior: MDCChipActionFocusBehavior
) => void;

Proxies to the MDCChipAction#setFocus method.

method setActionSelected

setActionSelected: (action: MDCChipActionType, isSelected: boolean) => void;

Proxies to the MDCChipAction#setSelected method.

method setStyleProperty

setStyleProperty: (property: string, value: string) => void;

Sets the style property to the given value.

interface MDCChipAnimationEventDetail

interface MDCChipAnimationEventDetail {}

MDCChipAnimationEventDetail provides details for the animation event.

property addedAnnouncement

addedAnnouncement?: string;

property animation

animation: MDCChipAnimation;

property chipID

chipID: string;

property isComplete

isComplete: boolean;

property removedAnnouncement

removedAnnouncement?: string;

interface MDCChipInteractionEventDetail

interface MDCChipInteractionEventDetail {}

MDCChipInteractionEventDetail provides details for the interaction event.

property actionID

actionID: string;

property chipID

chipID: string;

property isSelectable

isSelectable: boolean;

property isSelected

isSelected: boolean;

property shouldRemove

shouldRemove: boolean;

property source

source: MDCChipActionType;

interface MDCChipNavigationEventDetail

interface MDCChipNavigationEventDetail {}

MDCChipNavigationEventDetail provides details for the navigation event.

property chipID

chipID: string;

property isRTL

isRTL: boolean;

property key

key: string;

property source

source: MDCChipActionType;

interface MDCChipSetAdapter

interface MDCChipSetAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method announceMessage

announceMessage: (message: string) => void;

Announces the message via an aria-live region

method emitEvent

emitEvent: <D extends object>(
    eventName: MDCChipSetEvents,
    eventDetail: D
) => void;

Emits the given event with the given detail.

method getAttribute

getAttribute: (attrName: MDCChipSetAttributes) => string | null;

Returns the value for the given attribute, if it exists.

method getChipActionsAtIndex

getChipActionsAtIndex: (index: number) => MDCChipActionType[];

Returns the actions provided by the child chip at the given index.

method getChipCount

getChipCount: () => number;

Returns the number of child chips.

method getChipIdAtIndex

getChipIdAtIndex: (index: number) => string;

Returns the ID of the chip at the given index.

method getChipIndexById

getChipIndexById: (chipID: string) => number;

Returns the index of the child chip with the matching ID.

method isChipFocusableAtIndex

isChipFocusableAtIndex: (
    index: number,
    actionType: MDCChipActionType
) => boolean;

Proxies to the MDCChip#isActionFocusable method.

method isChipSelectableAtIndex

isChipSelectableAtIndex: (
    index: number,
    actionType: MDCChipActionType
) => boolean;

Proxies to the MDCChip#isActionSelectable method.

method isChipSelectedAtIndex

isChipSelectedAtIndex: (index: number, actionType: MDCChipActionType) => boolean;

Proxies to the MDCChip#isActionSelected method.

method removeChipAtIndex

removeChipAtIndex: (index: number) => void;

Removes the chip at the given index.

method setChipFocusAtIndex

setChipFocusAtIndex: (
    index: number,
    action: MDCChipActionType,
    focus: MDCChipActionFocusBehavior
) => void;

Proxies to the MDCChip#setActionFocus method.

method setChipSelectedAtIndex

setChipSelectedAtIndex: (
    index: number,
    actionType: MDCChipActionType,
    isSelected: boolean
) => void;

Proxies to the MDCChip#setActionSelected method.

method startChipAnimationAtIndex

startChipAnimationAtIndex: (index: number, animation: MDCChipAnimation) => void;

Starts the chip animation at the given index.

interface MDCChipSetInteractionEventDetail

interface MDCChipSetInteractionEventDetail {}

MDCChipSetInteractionEventDetail provides detail about the interaction event.

property chipID

chipID: string;

property chipIndex

chipIndex: number;

interface MDCChipSetRemovalEventDetail

interface MDCChipSetRemovalEventDetail {}

MDCChipSetRemovalEventDetail provides detail about the removal event.

property chipID

chipID: string;

property chipIndex

chipIndex: number;

property isComplete

isComplete: boolean;

interface MDCChipSetSelectionEventDetail

interface MDCChipSetSelectionEventDetail {}

MDCChipSetSelectionEventDetail provides detail about the selection event.

property chipID

chipID: string;

property chipIndex

chipIndex: number;

property isSelected

isSelected: boolean;

Enums

enum MDCChipActionAttributes

enum MDCChipActionAttributes {
    ARIA_DISABLED = 'aria-disabled',
    ARIA_HIDDEN = 'aria-hidden',
    ARIA_SELECTED = 'aria-selected',
    DATA_DELETABLE = 'data-mdc-deletable',
    DISABLED = 'disabled',
    ROLE = 'role',
    TAB_INDEX = 'tabindex',
}

MDCChipActionAttributes provides the HTML attributes used by the foundation.

member ARIA_DISABLED

ARIA_DISABLED = 'aria-disabled'

member ARIA_HIDDEN

ARIA_HIDDEN = 'aria-hidden'

member ARIA_SELECTED

ARIA_SELECTED = 'aria-selected'

member DATA_DELETABLE

DATA_DELETABLE = 'data-mdc-deletable'

member DISABLED

DISABLED = 'disabled'

member ROLE

ROLE = 'role'

member TAB_INDEX

TAB_INDEX = 'tabindex'

enum MDCChipActionCssClasses

enum MDCChipActionCssClasses {
    PRIMARY_ACTION = 'mdc-evolution-chip__action--primary',
    TRAILING_ACTION = 'mdc-evolution-chip__action--trailing',
    CHIP_ROOT = 'mdc-evolution-chip',
}

MDCChipActionCssClasses provides the classes to be queried and manipulated on the root.

member CHIP_ROOT

CHIP_ROOT = 'mdc-evolution-chip'

member PRIMARY_ACTION

PRIMARY_ACTION = 'mdc-evolution-chip__action--primary'

member TRAILING_ACTION

TRAILING_ACTION = 'mdc-evolution-chip__action--trailing'

enum MDCChipActionEvents

enum MDCChipActionEvents {
    INTERACTION = 'MDCChipAction:interaction',
    NAVIGATION = 'MDCChipAction:navigation',
}

MDCChipActionEvents provides the different events emitted by the action.

member INTERACTION

INTERACTION = 'MDCChipAction:interaction'

NAVIGATION = 'MDCChipAction:navigation'

enum MDCChipActionFocusBehavior

enum MDCChipActionFocusBehavior {
    FOCUSABLE = 0,
    FOCUSABLE_AND_FOCUSED = 1,
    NOT_FOCUSABLE = 2,
}

MDCChipActionFocusBehavior provides configurations for focusing or unfocusing an action.

member FOCUSABLE

FOCUSABLE = 0

member FOCUSABLE_AND_FOCUSED

FOCUSABLE_AND_FOCUSED = 1

member NOT_FOCUSABLE

NOT_FOCUSABLE = 2

enum MDCChipActionInteractionTrigger

enum MDCChipActionInteractionTrigger {
    UNSPECIFIED = 0,
    CLICK = 1,
    BACKSPACE_KEY = 2,
    DELETE_KEY = 3,
    SPACEBAR_KEY = 4,
    ENTER_KEY = 5,
}

MDCChipActionInteractionTrigger provides detail of the different triggers for action interactions.

member BACKSPACE_KEY

BACKSPACE_KEY = 2

member CLICK

CLICK = 1

member DELETE_KEY

DELETE_KEY = 3

member ENTER_KEY

ENTER_KEY = 5

member SPACEBAR_KEY

SPACEBAR_KEY = 4

member UNSPECIFIED

UNSPECIFIED = 0

enum MDCChipActionType

enum MDCChipActionType {
    UNSPECIFIED = 0,
    PRIMARY = 1,
    TRAILING = 2,
}

MDCChipActionType provides the different types of available actions.

member PRIMARY

PRIMARY = 1

member TRAILING

TRAILING = 2

member UNSPECIFIED

UNSPECIFIED = 0

enum MDCChipAnimation

enum MDCChipAnimation {
    ENTER = 'mdc-evolution-chip-enter',
    EXIT = 'mdc-evolution-chip-exit',
}

MDCChipAnimation provides the names of runnable animations.

member ENTER

ENTER = 'mdc-evolution-chip-enter'

member EXIT

EXIT = 'mdc-evolution-chip-exit'

enum MDCChipAttributes

enum MDCChipAttributes {
    DATA_REMOVED_ANNOUNCEMENT = 'data-mdc-removed-announcement',
    DATA_ADDED_ANNOUNCEMENT = 'data-mdc-added-announcement',
}

MDCChipAttributes provides the named constants for strings used by the foundation.

member DATA_ADDED_ANNOUNCEMENT

DATA_ADDED_ANNOUNCEMENT = 'data-mdc-added-announcement'

member DATA_REMOVED_ANNOUNCEMENT

DATA_REMOVED_ANNOUNCEMENT = 'data-mdc-removed-announcement'

enum MDCChipCssClasses

enum MDCChipCssClasses {
    SELECTING = 'mdc-evolution-chip--selecting',
    DESELECTING = 'mdc-evolution-chip--deselecting',
    SELECTING_WITH_PRIMARY_ICON = 'mdc-evolution-chip--selecting-with-primary-icon',
    DESELECTING_WITH_PRIMARY_ICON = 'mdc-evolution-chip--deselecting-with-primary-icon',
    DISABLED = 'mdc-evolution-chip--disabled',
    ENTER = 'mdc-evolution-chip--enter',
    EXIT = 'mdc-evolution-chip--exit',
    SELECTED = 'mdc-evolution-chip--selected',
    HIDDEN = 'mdc-evolution-chip--hidden',
    WITH_PRIMARY_ICON = 'mdc-evolution-chip--with-primary-icon',
}

MDCChipCssClasses provides the named constants for class names.

member DESELECTING

DESELECTING = 'mdc-evolution-chip--deselecting'

member DESELECTING_WITH_PRIMARY_ICON

DESELECTING_WITH_PRIMARY_ICON = 'mdc-evolution-chip--deselecting-with-primary-icon'

member DISABLED

DISABLED = 'mdc-evolution-chip--disabled'

member ENTER

ENTER = 'mdc-evolution-chip--enter'

member EXIT

EXIT = 'mdc-evolution-chip--exit'

member HIDDEN

HIDDEN = 'mdc-evolution-chip--hidden'

member SELECTED

SELECTED = 'mdc-evolution-chip--selected'

member SELECTING

SELECTING = 'mdc-evolution-chip--selecting'

member SELECTING_WITH_PRIMARY_ICON

SELECTING_WITH_PRIMARY_ICON = 'mdc-evolution-chip--selecting-with-primary-icon'

member WITH_PRIMARY_ICON

WITH_PRIMARY_ICON = 'mdc-evolution-chip--with-primary-icon'

enum MDCChipEvents

enum MDCChipEvents {
    INTERACTION = 'MDCChip:interaction',
    NAVIGATION = 'MDCChip:navigation',
    ANIMATION = 'MDCChip:animation',
}

MDCChipEvents provides the named constants for emitted events.

member ANIMATION

ANIMATION = 'MDCChip:animation'

member INTERACTION

INTERACTION = 'MDCChip:interaction'

NAVIGATION = 'MDCChip:navigation'

enum MDCChipSetAttributes

enum MDCChipSetAttributes {
    ARIA_MULTISELECTABLE = 'aria-multiselectable',
}

MDCChipSetAttributes provides the named constants for attributes used by the foundation.

member ARIA_MULTISELECTABLE

ARIA_MULTISELECTABLE = 'aria-multiselectable'

enum MDCChipSetCssClasses

enum MDCChipSetCssClasses {
    CHIP = 'mdc-evolution-chip',
}

MDCChipSetCssClasses provides the named constants for class names.

member CHIP

CHIP = 'mdc-evolution-chip'

enum MDCChipSetEvents

enum MDCChipSetEvents {
    INTERACTION = 'MDCChipSet:interaction',
    REMOVAL = 'MDCChipSet:removal',
    SELECTION = 'MDCChipSet:selection',
}

MDCChipSetEvents provides the constants for emitted events.

member INTERACTION

INTERACTION = 'MDCChipSet:interaction'

member REMOVAL

REMOVAL = 'MDCChipSet:removal'

member SELECTION

SELECTION = 'MDCChipSet:selection'

Type Aliases

type ActionInteractionEvent

type ActionInteractionEvent = CustomEvent<MDCChipActionInteractionEventDetail>;

MDCChipActionInteractionEvent is the custom event for the interaction event.

type ActionNavigationEvent

type ActionNavigationEvent = CustomEvent<MDCChipActionNavigationEventDetail>;

MDCChipActionInteractionEvent is the custom event for the interaction event.

type ChipAnimationEvent

type ChipAnimationEvent = CustomEvent<MDCChipAnimationEventDetail>;

ChipAnimationEvent is the custom event for the animation event.

type ChipInteractionEvent

type ChipInteractionEvent = CustomEvent<MDCChipInteractionEventDetail>;

ChipInteractionEvent is the custom event for the interaction event.

type ChipNavigationEvent

type ChipNavigationEvent = CustomEvent<MDCChipNavigationEventDetail>;

ChipNavigationEvent is the custom event for the navigation event.

type MDCChipActionFactory

type MDCChipActionFactory = (
    el: Element,
    foundation?: MDCChipActionFoundation
) => MDCChipAction;

MDCChipActionFactory is used by the parent MDCChip component to initialize chip actions.

type MDCChipFactory

type MDCChipFactory = (el: Element, foundation?: MDCChipFoundation) => MDCChip;

MDCChipFactory is used by the parent MDCChipSet component to initialize chips.

Namespaces

namespace deprecated

module 'deprecated/index.d.ts' {}

Copyright 2019 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable chipCssClasses

const chipCssClasses: {
    CHECKMARK: string;
    CHIP_EXIT: string;
    DELETABLE: string;
    EDITABLE: string;
    EDITING: string;
    HIDDEN_LEADING_ICON: string;
    LEADING_ICON: string;
    PRIMARY_ACTION: string;
    PRIMARY_ACTION_FOCUSED: string;
    SELECTED: string;
    TEXT: string;
    TRAILING_ACTION: string;
    TRAILING_ICON: string;
};

variable chipSetCssClasses

const chipSetCssClasses: { CHOICE: string; FILTER: string };

variable chipSetStrings

const chipSetStrings: { CHIP_SELECTOR: string };

Copyright 2016 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable chipStrings

const chipStrings: {
    ADDED_ANNOUNCEMENT_ATTRIBUTE: string;
    ARIA_CHECKED: string;
    ARROW_DOWN_KEY: string;
    ARROW_LEFT_KEY: string;
    ARROW_RIGHT_KEY: string;
    ARROW_UP_KEY: string;
    BACKSPACE_KEY: string;
    CHECKMARK_SELECTOR: string;
    DELETE_KEY: string;
    END_KEY: string;
    ENTER_KEY: string;
    ENTRY_ANIMATION_NAME: string;
    HOME_KEY: string;
    IE_ARROW_DOWN_KEY: string;
    IE_ARROW_LEFT_KEY: string;
    IE_ARROW_RIGHT_KEY: string;
    IE_ARROW_UP_KEY: string;
    IE_DELETE_KEY: string;
    INTERACTION_EVENT: string;
    LEADING_ICON_SELECTOR: string;
    NAVIGATION_EVENT: string;
    PRIMARY_ACTION_SELECTOR: string;
    REMOVED_ANNOUNCEMENT_ATTRIBUTE: string;
    REMOVAL_EVENT: string;
    SELECTION_EVENT: string;
    SPACEBAR_KEY: string;
    TAB_INDEX: string;
    TRAILING_ACTION_SELECTOR: string;
    TRAILING_ICON_INTERACTION_EVENT: string;
    TRAILING_ICON_SELECTOR: string;
};

variable trailingActionStrings

const trailingActionStrings: {
    ARIA_HIDDEN: string;
    INTERACTION_EVENT: string;
    NAVIGATION_EVENT: string;
    TAB_INDEX: string;
};

class MDCChip

class MDCChip
    extends MDCComponent<MDCChipFoundation>
    implements MDCRippleCapableSurface {}

property id

readonly id: string;

property ripple

readonly ripple: MDCRipple;

property selected

selected: boolean;

Whether the chip is selected.

property shouldRemoveOnTrailingIconClick

shouldRemoveOnTrailingIconClick: boolean;

Whether a trailing icon click should trigger exit/removal of the chip.

method attachTo

static attachTo: (root: Element) => MDCChip;

method beginExit

beginExit: () => void;

Begins the exit animation which leads to removal of the chip.

method destroy

destroy: () => void;

method focusPrimaryAction

focusPrimaryAction: () => void;

method focusTrailingAction

focusTrailingAction: () => void;

method getDefaultFoundation

getDefaultFoundation: () => MDCChipFoundation;

method initialize

initialize: (
    rippleFactory?: MDCRippleFactory,
    trailingActionFactory?: MDCChipTrailingActionFactory
) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method remove

remove: () => void;

method removeFocus

removeFocus: () => void;

method setSelectedFromChipSet

setSelectedFromChipSet: (
    selected: boolean,
    shouldNotifyClients: boolean
) => void;

class MDCChipFoundation

class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {}

constructor

constructor(adapter?: Partial<MDCChipAdapter>);

property cssClasses

static readonly cssClasses: {
    CHECKMARK: string;
    CHIP_EXIT: string;
    DELETABLE: string;
    EDITABLE: string;
    EDITING: string;
    HIDDEN_LEADING_ICON: string;
    LEADING_ICON: string;
    PRIMARY_ACTION: string;
    PRIMARY_ACTION_FOCUSED: string;
    SELECTED: string;
    TEXT: string;
    TRAILING_ACTION: string;
    TRAILING_ICON: string;
};

property defaultAdapter

static readonly defaultAdapter: MDCChipAdapter;

property strings

static readonly strings: {
    ADDED_ANNOUNCEMENT_ATTRIBUTE: string;
    ARIA_CHECKED: string;
    ARROW_DOWN_KEY: string;
    ARROW_LEFT_KEY: string;
    ARROW_RIGHT_KEY: string;
    ARROW_UP_KEY: string;
    BACKSPACE_KEY: string;
    CHECKMARK_SELECTOR: string;
    DELETE_KEY: string;
    END_KEY: string;
    ENTER_KEY: string;
    ENTRY_ANIMATION_NAME: string;
    HOME_KEY: string;
    IE_ARROW_DOWN_KEY: string;
    IE_ARROW_LEFT_KEY: string;
    IE_ARROW_RIGHT_KEY: string;
    IE_ARROW_UP_KEY: string;
    IE_DELETE_KEY: string;
    INTERACTION_EVENT: string;
    LEADING_ICON_SELECTOR: string;
    NAVIGATION_EVENT: string;
    PRIMARY_ACTION_SELECTOR: string;
    REMOVED_ANNOUNCEMENT_ATTRIBUTE: string;
    REMOVAL_EVENT: string;
    SELECTION_EVENT: string;
    SPACEBAR_KEY: string;
    TAB_INDEX: string;
    TRAILING_ACTION_SELECTOR: string;
    TRAILING_ICON_INTERACTION_EVENT: string;
    TRAILING_ICON_SELECTOR: string;
};

method beginExit

beginExit: () => void;

Begins the exit animation which leads to removal of the chip.

method focusPrimaryAction

focusPrimaryAction: () => void;

Called by the chip set to focus the primary action.

method focusTrailingAction

focusTrailingAction: () => void;

Called by the chip set to focus the trailing action (if present), otherwise gives focus to the trailing action.

method getDimensions

getDimensions: () => DOMRect;

method getShouldRemoveOnTrailingIconClick

getShouldRemoveOnTrailingIconClick: () => boolean;

method handleClick

handleClick: () => void;

method handleDoubleClick

handleDoubleClick: () => void;

method handleFocusIn

handleFocusIn: (evt: FocusEvent) => void;

method handleFocusOut

handleFocusOut: (evt: FocusEvent) => void;

method handleKeydown

handleKeydown: (evt: KeyboardEvent) => void;

Handles a keydown event from the root element.

method handleTrailingActionInteraction

handleTrailingActionInteraction: () => void;

Handles an interaction event on the trailing icon element. This is used to prevent the ripple from activating on interaction with the trailing icon.

method handleTrailingActionNavigation

handleTrailingActionNavigation: (
    evt: MDCChipTrailingActionNavigationEvent
) => void;

method handleTransitionEnd

handleTransitionEnd: (evt: TransitionEvent) => void;

Handles a transition end event on the root element.

method isEditable

isEditable: () => boolean;

method isEditing

isEditing: () => boolean;

method isSelected

isSelected: () => boolean;

method removeFocus

removeFocus: () => void;

Called by the chip set to remove focus from the chip actions.

method setSelected

setSelected: (selected: boolean) => void;

method setSelectedFromChipSet

setSelectedFromChipSet: (
    selected: boolean,
    shouldNotifyClients: boolean
) => void;

method setShouldFocusPrimaryActionOnClick

setShouldFocusPrimaryActionOnClick: (shouldFocus: boolean) => void;

method setShouldRemoveOnTrailingIconClick

setShouldRemoveOnTrailingIconClick: (shouldRemove: boolean) => void;

class MDCChipSet

class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {}

property chips

readonly chips: readonly MDCChip[];

property selectedChipIds

readonly selectedChipIds: readonly string[];

An array of the IDs of all selected chips.

method addChip

addChip: (chipEl: Element) => void;

Adds a new chip object to the chip set from the given chip element.

method attachTo

static attachTo: (root: Element) => MDCChipSet;

method destroy

destroy: () => void;

method getDefaultFoundation

getDefaultFoundation: () => MDCChipSetFoundation;

method initialize

initialize: (chipFactory?: MDCChipFactory) => void;

Parameter chipFactory
A function which creates a new MDCChip.

method initialSyncWithDOM

initialSyncWithDOM: () => void;

class MDCChipSetFoundation

class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {}

constructor

constructor(adapter?: Partial<MDCChipSetAdapter>);

property cssClasses

static readonly cssClasses: { CHOICE: string; FILTER: string };

property defaultAdapter

static readonly defaultAdapter: MDCChipSetAdapter;

property strings

static readonly strings: { CHIP_SELECTOR: string };

method getSelectedChipIds

getSelectedChipIds: () => ReadonlyArray<string>;

Returns an array of the IDs of all selected chips.

method handleChipInteraction

handleChipInteraction: ({ chipId }: MDCChipInteractionEventDetail) => void;

Handles a chip interaction event

method handleChipNavigation

handleChipNavigation: ({
    chipId,
    key,
    source,
}: MDCChipNavigationEventDetail) => void;

Handles a chip navigation event.

method handleChipRemoval

handleChipRemoval: ({
    chipId,
    removedAnnouncement,
}: MDCChipRemovalEventDetail) => void;

Handles the event when a chip is removed.

method handleChipSelection

handleChipSelection: ({
    chipId,
    selected,
    shouldIgnore,
}: MDCChipSelectionEventDetail) => void;

Handles a chip selection event, used to handle discrepancy when selection state is set directly on the Chip.

method select

select: (chipId: string) => void;

Selects the chip with the given id. Deselects all other chips if the chip set is of the choice variant. Does not notify clients of the updated selection state.

class MDCChipTrailingAction

class MDCChipTrailingAction
    extends MDCComponent<MDCChipTrailingActionFoundation>
    implements MDCRippleCapableSurface {}

property ripple

readonly ripple: MDCRipple;

method attachTo

static attachTo: (root: Element) => MDCChipTrailingAction;

method destroy

destroy: () => void;

method focus

focus: () => void;

method getDefaultFoundation

getDefaultFoundation: () => MDCChipTrailingActionFoundation;

method initialize

initialize: (rippleFactory?: MDCRippleFactory) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method isNavigable

isNavigable: () => boolean;

method removeFocus

removeFocus: () => void;

class MDCChipTrailingActionFoundation

class MDCChipTrailingActionFoundation extends MDCFoundation<MDCChipTrailingActionAdapter> {}

constructor

constructor(adapter?: Partial<MDCChipTrailingActionAdapter>);

property defaultAdapter

static readonly defaultAdapter: MDCChipTrailingActionAdapter;

property strings

static readonly strings: {
    ARIA_HIDDEN: string;
    INTERACTION_EVENT: string;
    NAVIGATION_EVENT: string;
    TAB_INDEX: string;
};

method focus

focus: () => void;

method handleClick

handleClick: (evt: MouseEvent) => void;

method handleKeydown

handleKeydown: (evt: KeyboardEvent) => void;

method isNavigable

isNavigable: () => boolean;

method removeFocus

removeFocus: () => void;

interface MDCChipAdapter

interface MDCChipAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method addClass

addClass: (className: string) => void;

Adds a class to the root element.

method addClassToLeadingIcon

addClassToLeadingIcon: (className: string) => void;

Adds a class to the leading icon element.

method eventTargetHasClass

eventTargetHasClass: (target: EventTarget | null, className: string) => boolean;

true if target has className, false otherwise.

method focusPrimaryAction

focusPrimaryAction: () => void;

Gives focus to the primary action.

method focusTrailingAction

focusTrailingAction: () => void;

Sets focus to the trailing action.

method getAttribute

getAttribute: (attr: string) => string | null;

the attribute string value if present, otherwise null

method getCheckmarkBoundingClientRect

getCheckmarkBoundingClientRect: () => DOMRect | null;

The bounding client rect of the checkmark element or null if it doesn't exist.

method getComputedStyleValue

getComputedStyleValue: (propertyName: string) => string;

The computed property value of the given style property on the root element.

method getRootBoundingClientRect

getRootBoundingClientRect: () => DOMRect;

The bounding client rect of the root element.

method hasClass

hasClass: (className: string) => boolean;

true if the root element contains the given class.

method hasLeadingIcon

hasLeadingIcon: () => boolean;

Whether the chip has a leading icon.

method isRTL

isRTL: () => boolean;

true if the text direction is right-to-left.

method isTrailingActionNavigable

isTrailingActionNavigable: () => boolean;

Returns true if the trailing action is navigable. Should return the value of MDCChipTrailingAction#isNavigable() or false.

method notifyEditFinish

notifyEditFinish: () => void;

Emits when editing finishes.

method notifyEditStart

notifyEditStart: () => void;

Emits when editing starts.

method notifyInteraction

notifyInteraction: () => void;

Emits a custom "MDCChip:interaction" event denoting the chip has been interacted with (typically on click or keydown).

method notifyNavigation

notifyNavigation: (key: string, source: EventSource) => void;

Emits a custom event "MDCChip:navigation" denoting a focus navigation event.

method notifyRemoval

notifyRemoval: (removedAnnouncement: string | null) => void;

Emits a custom event "MDCChip:removal" denoting the chip will be removed.

method notifySelection

notifySelection: (selected: boolean, chipSetShouldIgnore: boolean) => void;

Emits a custom "MDCChip:selection" event denoting the chip has been selected or deselected.

method notifyTrailingIconInteraction

notifyTrailingIconInteraction: () => void;

Emits a custom "MDCChip:trailingIconInteraction" event denoting the trailing icon has been interacted with (typically on click or keydown).

method removeClass

removeClass: (className: string) => void;

Removes a class from the root element.

method removeClassFromLeadingIcon

removeClassFromLeadingIcon: (className: string) => void;

Removes a class from the leading icon element.

method removeTrailingActionFocus

removeTrailingActionFocus: () => void;

Removes focus from the trailing action.

method setPrimaryActionAttr

setPrimaryActionAttr: (attr: string, value: string) => void;

Sets the value of the attribute on the primary action content.

method setStyleProperty

setStyleProperty: (propertyName: string, value: string) => void;

Sets the property value of the given style property on the root element.

interface MDCChipInteractionEvent

interface MDCChipInteractionEvent extends Event {}

property detail

readonly detail: MDCChipInteractionEventDetail;

interface MDCChipInteractionEventDetail

interface MDCChipInteractionEventDetail {}

property chipId

chipId: string;

interface MDCChipNavigationEvent

interface MDCChipNavigationEvent extends Event {}

property detail

readonly detail: MDCChipNavigationEventDetail;

interface MDCChipNavigationEventDetail

interface MDCChipNavigationEventDetail extends MDCChipInteractionEventDetail {}

property key

key: string;

property source

source: EventSource;

interface MDCChipRemovalEvent

interface MDCChipRemovalEvent extends Event {}

property detail

readonly detail: MDCChipRemovalEventDetail;

interface MDCChipRemovalEventDetail

interface MDCChipRemovalEventDetail extends MDCChipInteractionEventDetail {}

property removedAnnouncement

removedAnnouncement: string | null;

interface MDCChipSelectionEvent

interface MDCChipSelectionEvent extends Event {}

property detail

readonly detail: MDCChipSelectionEventDetail;

interface MDCChipSelectionEventDetail

interface MDCChipSelectionEventDetail extends MDCChipInteractionEventDetail {}

property selected

selected: boolean;

property shouldIgnore

shouldIgnore: boolean;

interface MDCChipSetAdapter

interface MDCChipSetAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method announceMessage

announceMessage: (message: string) => void;

Announces the message via an aria-live region.

method focusChipPrimaryActionAtIndex

focusChipPrimaryActionAtIndex: (index: number) => void;

Calls Chip#focusPrimaryAction() on the chip at the given index.
Parameter index
the index of the chip

method focusChipTrailingActionAtIndex

focusChipTrailingActionAtIndex: (index: number) => void;

Calls Chip#focusTrailingAction() on the chip at the given index.
Parameter index
the index of the chip

method getChipListCount

getChipListCount: () => number;

the number of chips in the chip set.

method getIndexOfChipById

getIndexOfChipById: (chipId: string) => number;

Returns the index of the chip at the given ID.
Parameter chipId
the unique ID of the chip the numerical index of the chip with the matching id or -1.

method hasClass

hasClass: (className: string) => boolean;

true if the root element contains the given class name.

method isRTL

isRTL: () => boolean;

true if the text direction is RTL.

method removeChipAtIndex

removeChipAtIndex: (index: number) => void;

Removes the chip with the given index from the chip set. Make sure to remove it from the chip list, too.

method removeFocusFromChipAtIndex

removeFocusFromChipAtIndex: (index: number) => void;

Removes focus from the chip at the given index.
Parameter index
the index of the chip

method selectChipAtIndex

selectChipAtIndex: (
    index: number,
    isSelected: boolean,
    shouldNotifyClients: boolean
) => void;

Sets the selected state of the chip at the given index.

interface MDCChipTrailingActionAdapter

interface MDCChipTrailingActionAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method focus

focus: () => void;

method getAttribute

getAttribute: (attr: string) => string | null;

method notifyInteraction

notifyInteraction: (trigger: InteractionTrigger) => void;

method notifyNavigation

notifyNavigation: (key: string) => void;

method setAttribute

setAttribute: (attr: string, value: string) => void;

interface MDCChipTrailingActionInteractionEvent

interface MDCChipTrailingActionInteractionEvent extends Event {}

property detail

readonly detail: MDCChipTrailingActionInteractionEventDetail;

interface MDCChipTrailingActionInteractionEventDetail

interface MDCChipTrailingActionInteractionEventDetail {}

property trigger

trigger: InteractionTrigger;

interface MDCChipTrailingActionNavigationEvent

interface MDCChipTrailingActionNavigationEvent extends Event {}

property detail

readonly detail: MDCChipTrailingActionNavigationEventDetail;

interface MDCChipTrailingActionNavigationEventDetail

interface MDCChipTrailingActionNavigationEventDetail {}

property key

key: string;

type MDCChipFactory

type MDCChipFactory = (el: Element, foundation?: MDCChipFoundation) => MDCChip;

type MDCChipTrailingActionFactory

type MDCChipTrailingActionFactory = (
    el: Element,
    foundation?: MDCChipTrailingActionFoundation
) => MDCChipTrailingAction;

Creates a trailing action component on the given element.

Package Files (33)

Dependencies (16)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/chips.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/chips)

HTML

<a href="https://www.jsdocs.io/package/@material/chips"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 years ago.
Package analyzed in 6577 ms.
Missing or incorrect documentation? Open an issue for this package.