@material/chips - npm Package Compare versions

4

action/component.d.ts

		@@ -34,3 +34,3 @@ /**
		*/
		export declare type MDCChipActionFactory = (el: Element, foundation?: MDCChipActionFoundation) => MDCChipAction;
		export declare type MDCChipActionFactory = (el: HTMLElement, foundation?: MDCChipActionFoundation) => MDCChipAction;
		/**
		@@ -41,3 +41,3 @@ * MDCChipAction provides component encapsulation of the different foundation
		export declare class MDCChipAction extends MDCComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
		static attachTo(root: Element): MDCChipAction;
		static attachTo(root: HTMLElement): MDCChipAction;
		private readonly rootHTML;
		@@ -44,0 +44,0 @@ private rippleInstance;

14

action/component.js

		@@ -23,3 +23,3 @@ /**
		*/
		import { __assign, __extends } from "tslib";
		import { __assign, __extends, __makeTemplateObject } from "tslib";
		import { MDCComponent } from '@material/base/component';
		@@ -29,2 +29,4 @@ import { closest } from '@material/dom/ponyfill';
		import { MDCRippleFoundation } from '@material/ripple/foundation';
		import { safeAttrPrefix } from 'safevalues';
		import { safeElement } from 'safevalues/dom';
		import { computePrimaryActionRippleClientRect, GRAPHIC_SELECTED_WIDTH_STYLE_PROP } from './component-ripple';
		@@ -34,2 +36,9 @@ import { MDCChipActionCssClasses } from './constants';
		import { MDCChipTrailingActionFoundation } from './trailing-foundation';
		var ALLOWED_ATTR_PREFIXES = [
		safeAttrPrefix(templateObject_1 \|\| (templateObject_1 = __makeTemplateObject(["aria-"], ["aria-"]))),
		safeAttrPrefix(templateObject_2 \|\| (templateObject_2 = __makeTemplateObject(["data-"], ["data-"]))),
		safeAttrPrefix(templateObject_3 \|\| (templateObject_3 = __makeTemplateObject(["disabled"], ["disabled"]))),
		safeAttrPrefix(templateObject_4 \|\| (templateObject_4 = __makeTemplateObject(["role"], ["role"]))),
		safeAttrPrefix(templateObject_5 \|\| (templateObject_5 = __makeTemplateObject(["tabindex"], ["tabindex"]))),
		];
		/**
		@@ -100,3 +109,3 @@ * MDCChipAction provides component encapsulation of the different foundation
		setAttribute: function (name, value) {
		_this.root.setAttribute(name, value);
		safeElement.setPrefixedAttribute(ALLOWED_ATTR_PREFIXES, _this.root, name, value);
		},
		@@ -148,2 +157,3 @@ };
		export { MDCChipAction };
		var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
		//# sourceMappingURL=component.js.map

2

action/foundation.d.ts

		@@ -34,3 +34,3 @@ /**
		handleClick(): void;
		handleKeydown(event: KeyboardEvent): void;
		handleKeydown(event: KeyboardEvent): true \| undefined;
		setDisabled(isDisabled: boolean): void;
		@@ -37,0 +37,0 @@ isDisabled(): boolean;

2

action/foundation.js

		@@ -74,2 +74,4 @@ /**
		}
		// signal to propagate the event since this Key isn't handled by chip
		return true;
		};
		@@ -76,0 +78,0 @@ MDCChipActionFoundation.prototype.setDisabled = function (isDisabled) {

19

CHANGELOG.md

		@@ -6,4 +6,19 @@ # Change Log

		# [15.0.0-canary.c0a11ef0d.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.c0a11ef0d.0) (2022-05-18)
		# [15.0.0-canary.c0d21ecc9.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.c0d21ecc9.0) (2023-10-09)

		Note: Version bump only for package @material/chips

		### Bug Fixes

		* chip: Propagate unhandled keyboard events ([6081d82](https://github.com/material-components/material-components-web/commit/6081d829b081384ff8433a92bf91db364c588e16))
		* chips: Add missing tokens for leading icon for validation ([4356e05](https://github.com/material-components/material-components-web/commit/4356e05c5e17a58d0a714e9f087db4b5060085bd))
		* chips: Update elevation resolver function and mixins that apply elevation ([96f4726](https://github.com/material-components/material-components-web/commit/96f472604cd098572f50987262bcab933574f7b2))
		* chips: Update elevation resolver function and mixins that apply elevation ([a0ae73b](https://github.com/material-components/material-components-web/commit/a0ae73b0e05a584715b2ec2841c033267f914c34))
		* chips: Update elevation resolver logic and update suggestion chip accordingly ([7c35e50](https://github.com/material-components/material-components-web/commit/7c35e503698c72d1d848d1429cbb3106d555930d))
		* chips: Update theme mixins to use the new resolver function ([05fb07f](https://github.com/material-components/material-components-web/commit/05fb07f9fd11ebf692b74591bc944360f613108f))
		* Makes material component to depend on https://github.com/google/safevalues and be Trusted Type compatible. ([a44241e](https://github.com/material-components/material-components-web/commit/a44241e5428e7f83733b2bd8ab7acc851fc2fb85))


		### Features

		* chips: fix HCM chip styles ([86efd56](https://github.com/material-components/material-components-web/commit/86efd56f6a2aa9870a8457900e686bc35d3cb3bc))
		* chips: Make light-theme tokens public ([51311e6](https://github.com/material-components/material-components-web/commit/51311e69ec61d62c214e0020fb856c39919ee657))

2

chip-set/component.d.ts

		@@ -31,3 +31,3 @@ /**
		export declare class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
		static attachTo(root: Element): MDCChipSet;
		static attachTo(root: HTMLElement): MDCChipSet;
		private handleChipAnimation;
		@@ -34,0 +34,0 @@ private handleChipInteraction;

3

chip-set/foundation.js

		@@ -75,3 +75,4 @@ /**
		}
		if (animation === MDCChipAnimation.ENTER && isComplete && addedAnnouncement) {
		if (animation === MDCChipAnimation.ENTER && isComplete &&
		addedAnnouncement) {
		this.adapter.announceMessage(addedAnnouncement);
		@@ -78,0 +79,0 @@ return;

5

chip/component.d.ts

		@@ -32,3 +32,3 @@ /**
		*/
		export declare type MDCChipFactory = (el: Element, foundation?: MDCChipFoundation) => MDCChip;
		export declare type MDCChipFactory = (el: HTMLElement, foundation?: MDCChipFoundation) => MDCChip;
		/**
		@@ -38,4 +38,3 @@ * MDCChip provides component encapsulation of the foundation implementation.
		export declare class MDCChip extends MDCComponent<MDCChipFoundation> {
		static attachTo(root: Element): MDCChip;
		private readonly rootHTML;
		static attachTo(root: HTMLElement): MDCChip;
		private handleActionInteraction;
		@@ -42,0 +41,0 @@ private handleActionNavigation;

10

chip/component.js

		@@ -34,5 +34,3 @@ /**
		function MDCChip() {
		var _this = _super !== null && _super.apply(this, arguments) \|\| this;
		_this.rootHTML = _this.root;
		return _this;
		return _super !== null && _super.apply(this, arguments) \|\| this;
		}
		@@ -98,5 +96,5 @@ MDCChip.attachTo = function (root) {
		getAttribute: function (attrName) { return _this.root.getAttribute(attrName); },
		getElementID: function () { return _this.rootHTML.id; },
		getElementID: function () { return _this.root.id; },
		getOffsetWidth: function () {
		return _this.rootHTML.offsetWidth;
		return _this.root.offsetWidth;
		},
		@@ -155,3 +153,3 @@ hasClass: function (className) { return _this.root.classList.contains(className); },
		setStyleProperty: function (prop, value) {
		_this.rootHTML.style.setProperty(prop, value);
		_this.root.style.setProperty(prop, value);
		},
		@@ -158,0 +156,0 @@ };

12

deprecated/chip-set/component.d.ts

		@@ -26,9 +26,10 @@ /**
		import { MDCChipSetFoundation } from './foundation';
		/** MDC Chip Set */
		export declare class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {
		static attachTo(root: Element): MDCChipSet;
		get chips(): ReadonlyArray<MDCChip>;
		static attachTo(root: HTMLElement): MDCChipSet;
		get chips(): readonly MDCChip[];
		/**
		* @return An array of the IDs of all selected chips.
		*/
		get selectedChipIds(): ReadonlyArray<string>;
		get selectedChipIds(): readonly string[];
		private chipsList;
		@@ -49,3 +50,3 @@ private chipFactory;
		*/
		addChip(chipEl: Element): void;
		addChip(chipEl: HTMLElement): void;
		getDefaultFoundation(): MDCChipSetFoundation;
		@@ -57,5 +58,6 @@ /**
		/**
		* Returns the index of the chip with the given id, or -1 if the chip does not exist.
		* Returns the index of the chip with the given id, or -1 if the chip does not
		* exist.
		*/
		private findChipIndex;
		}

27

deprecated/chip-set/component.js

		@@ -32,2 +32,3 @@ /**
		var idCounter = 0;
		/** MDC Chip Set */
		var MDCChipSet = /** @class */ (function (_super) {
		@@ -84,13 +85,13 @@ __extends(MDCChipSet, _super);
		}
		this.handleChipInteraction = function (evt) {
		return _this.foundation.handleChipInteraction(evt.detail);
		this.handleChipInteraction = function (event) {
		_this.foundation.handleChipInteraction(event.detail);
		};
		this.handleChipSelection = function (evt) {
		return _this.foundation.handleChipSelection(evt.detail);
		this.handleChipSelection = function (event) {
		_this.foundation.handleChipSelection(event.detail);
		};
		this.handleChipRemoval = function (evt) {
		return _this.foundation.handleChipRemoval(evt.detail);
		this.handleChipRemoval = function (event) {
		_this.foundation.handleChipRemoval(event.detail);
		};
		this.handleChipNavigation = function (evt) {
		return _this.foundation.handleChipNavigation(evt.detail);
		this.handleChipNavigation = function (event) {
		_this.foundation.handleChipNavigation(event.detail);
		};
		@@ -132,4 +133,5 @@ this.listen(INTERACTION_EVENT, this.handleChipInteraction);
		var _this = this;
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		var adapter = {
		@@ -173,3 +175,3 @@ announceMessage: function (message) {
		MDCChipSet.prototype.instantiateChips = function (chipFactory) {
		var chipElements = [].slice.call(this.root.querySelectorAll(CHIP_SELECTOR));
		var chipElements = Array.from(this.root.querySelectorAll(CHIP_SELECTOR));
		return chipElements.map(function (el) {
		@@ -181,3 +183,4 @@ el.id = el.id \|\| "mdc-chip-" + ++idCounter;
		/**
		* Returns the index of the chip with the given id, or -1 if the chip does not exist.
		* Returns the index of the chip with the given id, or -1 if the chip does not
		* exist.
		*/
		@@ -184,0 +187,0 @@ MDCChipSet.prototype.findChipIndex = function (chipId) {

14

deprecated/chip-set/foundation.d.ts

		@@ -26,2 +26,3 @@ /**
		import { MDCChipSetAdapter } from './adapter';
		/** MDC Chip Set Foundation */
		export declare class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
		@@ -37,3 +38,4 @@ static get strings(): {
		/**
		* The ids of the selected chips in the set. Only used for choice chip set or filter chip set.
		* The ids of the selected chips in the set. Only used for choice chip set or
		* filter chip set.
		*/
		@@ -45,6 +47,7 @@ private selectedChipIds;
		*/
		getSelectedChipIds(): ReadonlyArray<string>;
		getSelectedChipIds(): readonly string[];
		/**
		* 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.
		* 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.
		*/
		@@ -57,3 +60,4 @@ select(chipId: string): void;
		/**
		* Handles a chip selection event, used to handle discrepancy when selection state is set directly on the Chip.
		* Handles a chip selection event, used to handle discrepancy when selection
		* state is set directly on the Chip.
		*/
		@@ -60,0 +64,0 @@ handleChipSelection({ chipId, selected, shouldIgnore }: MDCChipSelectionEventDetail): void;

27

deprecated/chip-set/foundation.js

		@@ -27,2 +27,3 @@ /**
		import { cssClasses, strings } from './constants';
		/** MDC Chip Set Foundation */
		var MDCChipSetFoundation = /** @class */ (function (_super) {
		@@ -33,3 +34,4 @@ __extends(MDCChipSetFoundation, _super);
		/**
		* The ids of the selected chips in the set. Only used for choice chip set or filter chip set.
		* The ids of the selected chips in the set. Only used for choice chip set or
		* filter chip set.
		*/
		@@ -78,4 +80,5 @@ _this.selectedChipIds = [];
		/**
		* 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.
		* 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.
		*/
		@@ -98,3 +101,4 @@ MDCChipSetFoundation.prototype.select = function (chipId) {
		/**
		* Handles a chip selection event, used to handle discrepancy when selection state is set directly on the Chip.
		* Handles a chip selection event, used to handle discrepancy when selection
		* state is set directly on the Chip.
		*/
		@@ -132,3 +136,4 @@ MDCChipSetFoundation.prototype.handleChipSelection = function (_a) {
		this.removeFocusFromChipsExcept(nextIndex);
		// After removing a chip, we should focus the trailing action for the next chip.
		// After removing a chip, we should focus the trailing action for the next
		// chip.
		this.adapter.focusChipTrailingActionAtIndex(nextIndex);
		@@ -179,13 +184,17 @@ };
		if (shouldJumpChips && source === EventSource.PRIMARY) {
		return this.adapter.focusChipPrimaryActionAtIndex(index);
		this.adapter.focusChipPrimaryActionAtIndex(index);
		return;
		}
		if (shouldJumpChips && source === EventSource.TRAILING) {
		return this.adapter.focusChipTrailingActionAtIndex(index);
		this.adapter.focusChipTrailingActionAtIndex(index);
		return;
		}
		var dir = this.getDirection(key);
		if (dir === Direction.LEFT) {
		return this.adapter.focusChipTrailingActionAtIndex(index);
		this.adapter.focusChipTrailingActionAtIndex(index);
		return;
		}
		if (dir === Direction.RIGHT) {
		return this.adapter.focusChipPrimaryActionAtIndex(index);
		this.adapter.focusChipPrimaryActionAtIndex(index);
		return;
		}
		@@ -192,0 +201,0 @@ };

16

deprecated/chip/adapter.d.ts

		@@ -66,8 +66,9 @@ /**
		/**
		* Emits a custom "MDCChip:selection" event denoting the chip has been selected or deselected.
		* Emits a custom "MDCChip:selection" event denoting the chip has been
		* selected or deselected.
		*/
		notifySelection(selected: boolean, chipSetShouldIgnore: boolean): void;
		/**
		* Emits a custom "MDCChip:trailingIconInteraction" event denoting the trailing icon has been
		* interacted with (typically on click or keydown).
		* Emits a custom "MDCChip:trailingIconInteraction" event denoting the
		* trailing icon has been interacted with (typically on click or keydown).
		*/
		@@ -80,3 +81,4 @@ notifyTrailingIconInteraction(): void;
		/**
		* Emits a custom event "MDCChip:navigation" denoting a focus navigation event.
		* Emits a custom event "MDCChip:navigation" denoting a focus navigation
		* event.
		*/
		@@ -93,3 +95,4 @@ notifyNavigation(key: string, source: EventSource): void;
		/**
		* @return The computed property value of the given style property on the root element.
		* @return The computed property value of the given style property on the root
		* element.
		*/
		@@ -110,3 +113,4 @@ getComputedStyleValue(propertyName: string): string;
		/**
		* @return The bounding client rect of the checkmark element or null if it doesn't exist.
		* @return The bounding client rect of the checkmark element or null if it
		* doesn't exist.
		*/
		@@ -113,0 +117,0 @@ getCheckmarkBoundingClientRect(): DOMRect \| null;

9

deprecated/chip/component.d.ts

		@@ -28,3 +28,5 @@ /**
		import { MDCChipFoundation } from './foundation';
		export declare type MDCChipFactory = (el: Element, foundation?: MDCChipFoundation) => MDCChip;
		/** MDC Chip Factory */
		export declare type MDCChipFactory = (el: HTMLElement, foundation?: MDCChipFoundation) => MDCChip;
		/** MDC Chip */
		export declare class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippleCapableSurface {
		@@ -40,3 +42,4 @@ /**
		/**
		* @return Whether a trailing icon click should trigger exit/removal of the chip.
		* @return Whether a trailing icon click should trigger exit/removal of the
		* chip.
		*/
		@@ -54,3 +57,3 @@ get shouldRemoveOnTrailingIconClick(): boolean;
		get id(): string;
		static attachTo(root: Element): MDCChip;
		static attachTo(root: HTMLElement): MDCChip;
		private leadingIcon;
		@@ -57,0 +60,0 @@ private checkmark;

62

deprecated/chip/component.js

		@@ -31,2 +31,3 @@ /**
		import { MDCChipFoundation } from './foundation';
		/** MDC Chip */
		var MDCChip = /** @class */ (function (_super) {
		@@ -55,3 +56,4 @@ __extends(MDCChip, _super);
		/**
		* @return Whether a trailing icon click should trigger exit/removal of the chip.
		* @return Whether a trailing icon click should trigger exit/removal of the
		* chip.
		*/
		@@ -101,4 +103,6 @@ get: function () {
		if (trailingActionFactory === void 0) { trailingActionFactory = function (el) { return new MDCChipTrailingAction(el); }; }
		this.leadingIcon = this.root.querySelector(strings.LEADING_ICON_SELECTOR);
		this.checkmark = this.root.querySelector(strings.CHECKMARK_SELECTOR);
		this.leadingIcon =
		this.root.querySelector(strings.LEADING_ICON_SELECTOR);
		this.checkmark =
		this.root.querySelector(strings.CHECKMARK_SELECTOR);
		this.primaryAction =
		@@ -110,4 +114,5 @@ this.root.querySelector(strings.PRIMARY_ACTION_SELECTOR);
		}
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		var rippleAdapter = __assign(__assign({}, MDCRipple.createAdapter(this)), { computeBoundingRect: function () { return _this.foundation.getDimensions(); } });
		@@ -124,4 +129,4 @@ this.rippleSurface =
		this.handleTrailingActionNavigation =
		function (evt) {
		_this.foundation.handleTrailingActionNavigation(evt);
		function (event) {
		_this.foundation.handleTrailingActionNavigation(event);
		};
		@@ -132,13 +137,13 @@ // Native events
		};
		this.handleKeydown = function (evt) {
		_this.foundation.handleKeydown(evt);
		this.handleKeydown = function (event) {
		_this.foundation.handleKeydown(event);
		};
		this.handleTransitionEnd = function (evt) {
		_this.foundation.handleTransitionEnd(evt);
		this.handleTransitionEnd = function (event) {
		_this.foundation.handleTransitionEnd(event);
		};
		this.handleFocusIn = function (evt) {
		_this.foundation.handleFocusIn(evt);
		this.handleFocusIn = function (event) {
		_this.foundation.handleFocusIn(event);
		};
		this.handleFocusOut = function (evt) {
		_this.foundation.handleFocusOut(evt);
		this.handleFocusOut = function (event) {
		_this.foundation.handleFocusOut(event);
		};
		@@ -176,6 +181,9 @@ this.listen('transitionend', this.handleTransitionEnd);
		var _this = this;
		// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
		// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
		// DO NOT INLINE this variable. For backward compatibility, foundations take
		// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
		// methods, we need a separate, strongly typed adapter variable.
		var adapter = {
		addClass: function (className) { return _this.root.classList.add(className); },
		addClass: function (className) {
		_this.root.classList.add(className);
		},
		addClassToLeadingIcon: function (className) {
		@@ -216,5 +224,7 @@ if (_this.leadingIcon) {
		},
		notifyInteraction: function () { return _this.emit(strings.INTERACTION_EVENT, { chipId: _this.id }, true /* shouldBubble */); },
		notifyInteraction: function () {
		_this.emit(strings.INTERACTION_EVENT, { chipId: _this.id }, true /* shouldBubble */);
		},
		notifyNavigation: function (key, source) {
		return _this.emit(strings.NAVIGATION_EVENT, { chipId: _this.id, key: key, source: source }, true /* shouldBubble */);
		_this.emit(strings.NAVIGATION_EVENT, { chipId: _this.id, key: key, source: source }, true /* shouldBubble */);
		},
		@@ -225,10 +235,12 @@ notifyRemoval: function (removedAnnouncement) {
		notifySelection: function (selected, shouldIgnore) {
		return _this.emit(strings.SELECTION_EVENT, { chipId: _this.id, selected: selected, shouldIgnore: shouldIgnore }, true /* shouldBubble */);
		_this.emit(strings.SELECTION_EVENT, { chipId: _this.id, selected: selected, shouldIgnore: shouldIgnore }, true /* shouldBubble */);
		},
		notifyTrailingIconInteraction: function () {
		return _this.emit(strings.TRAILING_ICON_INTERACTION_EVENT, { chipId: _this.id }, true /* shouldBubble */);
		_this.emit(strings.TRAILING_ICON_INTERACTION_EVENT, { chipId: _this.id }, true /* shouldBubble */);
		},
		notifyEditStart: function () { },
		notifyEditFinish: function () { },
		removeClass: function (className) { return _this.root.classList.remove(className); },
		removeClass: function (className) {
		_this.root.classList.remove(className);
		},
		removeClassFromLeadingIcon: function (className) {
		@@ -246,7 +258,7 @@ if (_this.leadingIcon) {
		if (_this.primaryAction) {
		_this.primaryAction.setAttribute(attr, value);
		_this.safeSetAttribute(_this.primaryAction, attr, value);
		}
		},
		setStyleProperty: function (propertyName, value) {
		return _this.root.style.setProperty(propertyName, value);
		_this.root.style.setProperty(propertyName, value);
		},
		@@ -253,0 +265,0 @@ };

6

deprecated/chip/constants.js

		@@ -82,3 +82,4 @@ /**
		export var navigationKeys = new Set();
		// IE11 has no support for new Set with iterable so we need to initialize this by hand
		// IE11 has no support for new Set with iterable so we need to initialize this
		// by hand
		navigationKeys.add(strings.ARROW_LEFT_KEY);
		@@ -95,3 +96,4 @@ navigationKeys.add(strings.ARROW_RIGHT_KEY);
		export var jumpChipKeys = new Set();
		// IE11 has no support for new Set with iterable so we need to initialize this by hand
		// IE11 has no support for new Set with iterable so we need to initialize this
		// by hand
		jumpChipKeys.add(strings.ARROW_UP_KEY);
		@@ -98,0 +100,0 @@ jumpChipKeys.add(strings.ARROW_DOWN_KEY);

16

deprecated/chip/foundation.d.ts

		@@ -26,2 +26,3 @@ /**
		import { MDCChipAdapter } from './adapter';
		/** MDC Chip Foundation */
		export declare class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
		@@ -76,3 +77,6 @@ static get strings(): {
		static get defaultAdapter(): MDCChipAdapter;
		/** Whether a trailing icon click should immediately trigger exit/removal of the chip. */
		/**
		* Whether a trailing icon click should immediately trigger exit/removal of
		* the chip.
		*/
		private shouldRemoveOnTrailingIconClick;
		@@ -104,5 +108,5 @@ /**
		*/
		handleTransitionEnd(evt: TransitionEvent): void;
		handleFocusIn(evt: FocusEvent): void;
		handleFocusOut(evt: FocusEvent): void;
		handleTransitionEnd(event: TransitionEvent): void;
		handleFocusIn(event: FocusEvent): void;
		handleFocusOut(event: FocusEvent): void;
		/**
		@@ -116,4 +120,4 @@ * Handles an interaction event on the trailing icon element. This is used to
		*/
		handleKeydown(evt: KeyboardEvent): void;
		handleTrailingActionNavigation(evt: MDCChipTrailingActionNavigationEvent): void;
		handleKeydown(event: KeyboardEvent): void;
		handleTrailingActionNavigation(event: MDCChipTrailingActionNavigationEvent): void;
		/**
		@@ -120,0 +124,0 @@ * Called by the chip set to remove focus from the chip actions.

104

deprecated/chip/foundation.js

		@@ -39,2 +39,3 @@ /**
		})(FocusBehavior \|\| (FocusBehavior = {}));
		/** MDC Chip Foundation */
		var MDCChipFoundation = /** @class */ (function (_super) {
		@@ -44,3 +45,6 @@ __extends(MDCChipFoundation, _super);
		var _this = _super.call(this, __assign(__assign({}, MDCChipFoundation.defaultAdapter), adapter)) \|\| this;
		/** Whether a trailing icon click should immediately trigger exit/removal of the chip. */
		/**
		* Whether a trailing icon click should immediately trigger exit/removal of
		* the chip.
		*/
		_this.shouldRemoveOnTrailingIconClick = true;
		@@ -136,4 +140,4 @@ /**
		};
		// When a chip has a checkmark and not a leading icon, the bounding rect changes in size depending on the current
		// size of the checkmark.
		// When a chip has a checkmark and not a leading icon, the bounding rect
		// changes in size depending on the current size of the checkmark.
		if (!this.adapter.hasLeadingIcon()) {
		@@ -143,6 +147,7 @@ var checkmarkRect = getCheckmarkRect();
		var rootRect = getRootRect();
		// Checkmark is a square, meaning the client rect's width and height are identical once the animation completes.
		// However, the checkbox is initially hidden by setting the width to 0.
		// To account for an initial width of 0, we use the checkbox's height instead (which equals the end-state width)
		// when adding it to the root client rect's width.
		// Checkmark is a square, meaning the client rect's width and height are
		// identical once the animation completes. However, the checkbox is
		// initially hidden by setting the width to 0. To account for an initial
		// width of 0, we use the checkbox's height instead (which equals the
		// end-state width) when adding it to the root client rect's width.
		return {
		@@ -178,19 +183,23 @@ bottom: rootRect.bottom,
		*/
		MDCChipFoundation.prototype.handleTransitionEnd = function (evt) {
		MDCChipFoundation.prototype.handleTransitionEnd = function (event) {
		var _this = this;
		// Handle transition end event on the chip when it is about to be removed.
		var shouldHandle = this.adapter.eventTargetHasClass(evt.target, cssClasses.CHIP_EXIT);
		var widthIsAnimating = evt.propertyName === 'width';
		var opacityIsAnimating = evt.propertyName === 'opacity';
		var shouldHandle = this.adapter.eventTargetHasClass(event.target, cssClasses.CHIP_EXIT);
		var widthIsAnimating = event.propertyName === 'width';
		var opacityIsAnimating = event.propertyName === 'opacity';
		if (shouldHandle && opacityIsAnimating) {
		// See: https://css-tricks.com/using-css-transitions-auto-dimensions/#article-header-id-5
		// See:
		// https://css-tricks.com/using-css-transitions-auto-dimensions/#article-header-id-5
		var chipWidth_1 = this.adapter.getComputedStyleValue('width');
		// On the next frame (once we get the computed width), explicitly set the chip's width
		// to its current pixel width, so we aren't transitioning out of 'auto'.
		// On the next frame (once we get the computed width), explicitly set the
		// chip's width to its current pixel width, so we aren't transitioning out
		// of 'auto'.
		requestAnimationFrame(function () {
		_this.adapter.setStyleProperty('width', chipWidth_1);
		// To mitigate jitter, start transitioning padding and margin before width.
		// To mitigate jitter, start transitioning padding and margin before
		// width.
		_this.adapter.setStyleProperty('padding', '0');
		_this.adapter.setStyleProperty('margin', '0');
		// On the next frame (once width is explicitly set), transition width to 0.
		// On the next frame (once width is explicitly set), transition width to
		// 0.
		requestAnimationFrame(function () {
		@@ -207,9 +216,10 @@ _this.adapter.setStyleProperty('width', '0');
		}
		// Handle a transition end event on the leading icon or checkmark, since the transition end event bubbles.
		// Handle a transition end event on the leading icon or checkmark, since the
		// transition end event bubbles.
		if (!opacityIsAnimating) {
		return;
		}
		var shouldHideLeadingIcon = this.adapter.eventTargetHasClass(evt.target, cssClasses.LEADING_ICON) &&
		var shouldHideLeadingIcon = this.adapter.eventTargetHasClass(event.target, cssClasses.LEADING_ICON) &&
		this.adapter.hasClass(cssClasses.SELECTED);
		var shouldShowLeadingIcon = this.adapter.eventTargetHasClass(evt.target, cssClasses.CHECKMARK) &&
		var shouldShowLeadingIcon = this.adapter.eventTargetHasClass(event.target, cssClasses.CHECKMARK) &&
		!this.adapter.hasClass(cssClasses.SELECTED);
		@@ -225,5 +235,5 @@ if (shouldHideLeadingIcon) {
		};
		MDCChipFoundation.prototype.handleFocusIn = function (evt) {
		MDCChipFoundation.prototype.handleFocusIn = function (event) {
		// Early exit if the event doesn't come from the primary action
		if (!this.eventFromPrimaryAction(evt)) {
		if (!this.eventFromPrimaryAction(event)) {
		return;
		@@ -233,5 +243,5 @@ }
		};
		MDCChipFoundation.prototype.handleFocusOut = function (evt) {
		MDCChipFoundation.prototype.handleFocusOut = function (event) {
		// Early exit if the event doesn't come from the primary action
		if (!this.eventFromPrimaryAction(evt)) {
		if (!this.eventFromPrimaryAction(event)) {
		return;
		@@ -255,6 +265,6 @@ }
		*/
		MDCChipFoundation.prototype.handleKeydown = function (evt) {
		MDCChipFoundation.prototype.handleKeydown = function (event) {
		if (this.isEditing()) {
		if (this.shouldFinishEditing(evt)) {
		evt.preventDefault();
		if (this.shouldFinishEditing(event)) {
		event.preventDefault();
		this.finishEditing();
		@@ -267,8 +277,8 @@ }
		if (this.isEditable()) {
		if (this.shouldStartEditing(evt)) {
		evt.preventDefault();
		if (this.shouldStartEditing(event)) {
		event.preventDefault();
		this.startEditing();
		}
		}
		if (this.shouldNotifyInteraction(evt)) {
		if (this.shouldNotifyInteraction(event)) {
		this.adapter.notifyInteraction();
		@@ -278,4 +288,4 @@ this.setPrimaryActionFocusable(this.getFocusBehavior());
		}
		if (this.isDeleteAction(evt)) {
		evt.preventDefault();
		if (this.isDeleteAction(event)) {
		event.preventDefault();
		this.removeChip();
		@@ -285,11 +295,11 @@ return;
		// Early exit if the key is not usable
		if (!navigationKeys.has(evt.key)) {
		if (!navigationKeys.has(event.key)) {
		return;
		}
		// Prevent default behavior for movement keys which could include scrolling
		evt.preventDefault();
		this.focusNextAction(evt.key, EventSource.PRIMARY);
		event.preventDefault();
		this.focusNextAction(event.key, EventSource.PRIMARY);
		};
		MDCChipFoundation.prototype.handleTrailingActionNavigation = function (evt) {
		this.focusNextAction(evt.detail.key, EventSource.TRAILING);
		MDCChipFoundation.prototype.handleTrailingActionNavigation = function (event) {
		this.focusNextAction(event.detail.key, EventSource.TRAILING);
		};
		@@ -368,16 +378,16 @@ /**
		};
		MDCChipFoundation.prototype.shouldStartEditing = function (evt) {
		return this.eventFromPrimaryAction(evt) && evt.key === strings.ENTER_KEY;
		MDCChipFoundation.prototype.shouldStartEditing = function (event) {
		return this.eventFromPrimaryAction(event) && event.key === strings.ENTER_KEY;
		};
		MDCChipFoundation.prototype.shouldFinishEditing = function (evt) {
		return evt.key === strings.ENTER_KEY;
		MDCChipFoundation.prototype.shouldFinishEditing = function (event) {
		return event.key === strings.ENTER_KEY;
		};
		MDCChipFoundation.prototype.shouldNotifyInteraction = function (evt) {
		return evt.key === strings.ENTER_KEY \|\| evt.key === strings.SPACEBAR_KEY;
		MDCChipFoundation.prototype.shouldNotifyInteraction = function (event) {
		return event.key === strings.ENTER_KEY \|\| event.key === strings.SPACEBAR_KEY;
		};
		MDCChipFoundation.prototype.isDeleteAction = function (evt) {
		MDCChipFoundation.prototype.isDeleteAction = function (event) {
		var isDeletable = this.adapter.hasClass(cssClasses.DELETABLE);
		return isDeletable &&
		(evt.key === strings.BACKSPACE_KEY \|\| evt.key === strings.DELETE_KEY \|\|
		evt.key === strings.IE_DELETE_KEY);
		(event.key === strings.BACKSPACE_KEY \|\| event.key === strings.DELETE_KEY \|\|
		event.key === strings.IE_DELETE_KEY);
		};
		@@ -400,4 +410,4 @@ MDCChipFoundation.prototype.setSelectedImpl = function (selected) {
		};
		MDCChipFoundation.prototype.eventFromPrimaryAction = function (evt) {
		return this.adapter.eventTargetHasClass(evt.target, cssClasses.PRIMARY_ACTION);
		MDCChipFoundation.prototype.eventFromPrimaryAction = function (event) {
		return this.adapter.eventTargetHasClass(event.target, cssClasses.PRIMARY_ACTION);
		};
		@@ -404,0 +414,0 @@ MDCChipFoundation.prototype.startEditing = function () {

8

deprecated/README.md

		@@ -461,6 +461,6 @@ <!--docs:
		`beginExit() => void` \| Begins the exit animation which leads to removal of the chip
		`handleInteraction(evt: Event) => void` \| Handles an interaction event on the root element
		`handleTransitionEnd(evt: Event) => void` \| Handles a transition end event on the root element
		`handleTrailingIconInteraction(evt: Event) => void` \| Handles an interaction event on the trailing icon element
		`handleKeydown(evt: Event) => void` \| Handles a keydown event on the root element
		`handleInteraction(event: Event) => void` \| Handles an interaction event on the root element
		`handleTransitionEnd(event: Event) => void` \| Handles a transition end event on the root element
		`handleTrailingIconInteraction(event: Event) => void` \| Handles an interaction event on the trailing icon element
		`handleKeydown(event: Event) => void` \| Handles a keydown event on the root element
		`removeFocus() => void` \| Removes focusability from the chip
		@@ -467,0 +467,0 @@

5

deprecated/trailingaction/component.d.ts

		@@ -30,6 +30,7 @@ /**
		*/
		export declare type MDCChipTrailingActionFactory = (el: Element, foundation?: MDCChipTrailingActionFoundation) => MDCChipTrailingAction;
		export declare type MDCChipTrailingActionFactory = (el: HTMLElement, foundation?: MDCChipTrailingActionFoundation) => MDCChipTrailingAction;
		/** MDC Chip Trailing Action */
		export declare class MDCChipTrailingAction extends MDCComponent<MDCChipTrailingActionFoundation> implements MDCRippleCapableSurface {
		get ripple(): MDCRipple;
		static attachTo(root: Element): MDCChipTrailingAction;
		static attachTo(root: HTMLElement): MDCChipTrailingAction;
		private rippleSurface;
		@@ -36,0 +37,0 @@ private handleClick;

14

deprecated/trailingaction/component.js

		@@ -29,2 +29,3 @@ /**
		import { MDCChipTrailingActionFoundation } from './foundation';
		/** MDC Chip Trailing Action */
		var MDCChipTrailingAction = /** @class */ (function (_super) {
		@@ -58,7 +59,7 @@ __extends(MDCChipTrailingAction, _super);
		var _this = this;
		this.handleClick = function (evt) {
		_this.foundation.handleClick(evt);
		this.handleClick = function (event) {
		_this.foundation.handleClick(event);
		};
		this.handleKeydown = function (evt) {
		_this.foundation.handleKeydown(evt);
		this.handleKeydown = function (event) {
		_this.foundation.handleKeydown(event);
		};
		@@ -81,3 +82,2 @@ this.listen('click', this.handleClick);
		focus: function () {
		// TODO(b/157231863): Migate MDCComponent#root to HTMLElement
		_this.root.focus();
		@@ -87,3 +87,3 @@ },
		notifyInteraction: function (trigger) {
		return _this.emit(strings.INTERACTION_EVENT, { trigger: trigger }, true /* shouldBubble */);
		_this.emit(strings.INTERACTION_EVENT, { trigger: trigger }, true /* shouldBubble */);
		},
		@@ -94,3 +94,3 @@ notifyNavigation: function (key) {
		setAttribute: function (attr, value) {
		_this.root.setAttribute(attr, value);
		_this.safeSetAttribute(_this.root, attr, value);
		},
		@@ -97,0 +97,0 @@ };

5

deprecated/trailingaction/foundation.d.ts

		@@ -25,2 +25,3 @@ /**
		import { MDCChipTrailingActionAdapter } from './adapter';
		/** MDC Chip Trailing Action Foundation */
		export declare class MDCChipTrailingActionFoundation extends MDCFoundation<MDCChipTrailingActionAdapter> {
		@@ -35,4 +36,4 @@ static get strings(): {
		constructor(adapter?: Partial<MDCChipTrailingActionAdapter>);
		handleClick(evt: MouseEvent): void;
		handleKeydown(evt: KeyboardEvent): void;
		handleClick(event: MouseEvent): void;
		handleKeydown(event: KeyboardEvent): void;
		removeFocus(): void;
		@@ -39,0 +40,0 @@ focus(): void;

13

deprecated/trailingaction/foundation.js

		@@ -27,2 +27,3 @@ /**
		import { InteractionTrigger, strings } from './constants';
		/** MDC Chip Trailing Action Foundation */
		var MDCChipTrailingActionFoundation = /** @class */ (function (_super) {
		@@ -53,9 +54,9 @@ __extends(MDCChipTrailingActionFoundation, _super);
		});
		MDCChipTrailingActionFoundation.prototype.handleClick = function (evt) {
		evt.stopPropagation();
		MDCChipTrailingActionFoundation.prototype.handleClick = function (event) {
		event.stopPropagation();
		this.adapter.notifyInteraction(InteractionTrigger.CLICK);
		};
		MDCChipTrailingActionFoundation.prototype.handleKeydown = function (evt) {
		evt.stopPropagation();
		var key = normalizeKey(evt);
		MDCChipTrailingActionFoundation.prototype.handleKeydown = function (event) {
		event.stopPropagation();
		var key = normalizeKey(event);
		if (this.shouldNotifyInteractionFromKey(key)) {
		@@ -66,3 +67,3 @@ var trigger = this.getTriggerFromKey(key);
		}
		if (isNavigationEvent(evt)) {
		if (isNavigationEvent(event)) {
		this.adapter.notifyNavigation(key);
		@@ -69,0 +70,0 @@ return;

4

deprecated/trailingaction/README.md

		@@ -114,4 +114,4 @@ # Trailing Action (deprecated)
		`isNavigable() => boolean` \| Returns the navigability of the trailing action
		`handleClick(evt: MouseEvent) => void` \| Handles a click event on the root element
		`handleKeydown(evt: KeyboardEvent) => void` \| Handles a keydown event on the root element
		`handleClick(event: MouseEvent) => void` \| Handles a click event on the root element
		`handleKeydown(event: KeyboardEvent) => void` \| Handles a keydown event on the root element

		@@ -118,0 +118,0 @@ #### `MDCChipTrailingActionFoundation` Event Handlers

35

package.json

		{
		"name": "@material/chips",
		"description": "The Material Components for the Web chips component",
		"version": "15.0.0-canary.c0a11ef0d.0",
		"version": "15.0.0-canary.c0d21ecc9.0",
		"license": "MIT",
		@@ -23,20 +23,21 @@ "main": "dist/mdc.chips.js",
		"dependencies": {
		"@material/animation": "15.0.0-canary.c0a11ef0d.0",
		"@material/base": "15.0.0-canary.c0a11ef0d.0",
		"@material/checkbox": "15.0.0-canary.c0a11ef0d.0",
		"@material/density": "15.0.0-canary.c0a11ef0d.0",
		"@material/dom": "15.0.0-canary.c0a11ef0d.0",
		"@material/elevation": "15.0.0-canary.c0a11ef0d.0",
		"@material/feature-targeting": "15.0.0-canary.c0a11ef0d.0",
		"@material/focus-ring": "15.0.0-canary.c0a11ef0d.0",
		"@material/ripple": "15.0.0-canary.c0a11ef0d.0",
		"@material/rtl": "15.0.0-canary.c0a11ef0d.0",
		"@material/shape": "15.0.0-canary.c0a11ef0d.0",
		"@material/theme": "15.0.0-canary.c0a11ef0d.0",
		"@material/tokens": "15.0.0-canary.c0a11ef0d.0",
		"@material/touch-target": "15.0.0-canary.c0a11ef0d.0",
		"@material/typography": "15.0.0-canary.c0a11ef0d.0",
		"@material/animation": "15.0.0-canary.c0d21ecc9.0",
		"@material/base": "15.0.0-canary.c0d21ecc9.0",
		"@material/checkbox": "15.0.0-canary.c0d21ecc9.0",
		"@material/density": "15.0.0-canary.c0d21ecc9.0",
		"@material/dom": "15.0.0-canary.c0d21ecc9.0",
		"@material/elevation": "15.0.0-canary.c0d21ecc9.0",
		"@material/feature-targeting": "15.0.0-canary.c0d21ecc9.0",
		"@material/focus-ring": "15.0.0-canary.c0d21ecc9.0",
		"@material/ripple": "15.0.0-canary.c0d21ecc9.0",
		"@material/rtl": "15.0.0-canary.c0d21ecc9.0",
		"@material/shape": "15.0.0-canary.c0d21ecc9.0",
		"@material/theme": "15.0.0-canary.c0d21ecc9.0",
		"@material/tokens": "15.0.0-canary.c0d21ecc9.0",
		"@material/touch-target": "15.0.0-canary.c0d21ecc9.0",
		"@material/typography": "15.0.0-canary.c0d21ecc9.0",
		"safevalues": "^0.3.4",
		"tslib": "^2.1.0"
		},
		"gitHead": "a97df68c1dadba0530f5fcda79fb8bc3082d963a"
		"gitHead": "0a932ea790a12d359ce4ec7c5c4c7aec7edf565d"
		}

deprecated/chip-set/mdc-chip-set.import.scss

deprecated/chip/mdc-chip.import.scss

_assist-chip-theme.scss