| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- /**
- * @license
- * Copyright 2020 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.
- */
- import { __assign, __extends, __values } from "tslib";
- import { AnimationFrame } from '@material/animation/animationframe';
- import { MDCFoundation } from '@material/base/foundation';
- import { KEY } from '@material/dom/keyboard';
- import { MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType } from '../action/constants';
- import { MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents } from './constants';
- var Direction;
- (function (Direction) {
- Direction[Direction["UNSPECIFIED"] = 0] = "UNSPECIFIED";
- Direction[Direction["LEFT"] = 1] = "LEFT";
- Direction[Direction["RIGHT"] = 2] = "RIGHT";
- })(Direction || (Direction = {}));
- var AnimationKeys;
- (function (AnimationKeys) {
- AnimationKeys["SELECTION"] = "selection";
- AnimationKeys["EXIT"] = "exit";
- })(AnimationKeys || (AnimationKeys = {}));
- /**
- * MDCChipFoundation provides a foundation for all chips.
- */
- var MDCChipFoundation = /** @class */ (function (_super) {
- __extends(MDCChipFoundation, _super);
- function MDCChipFoundation(adapter) {
- var _this = _super.call(this, __assign(__assign({}, MDCChipFoundation.defaultAdapter), adapter)) || this;
- _this.animFrame = new AnimationFrame();
- return _this;
- }
- Object.defineProperty(MDCChipFoundation, "defaultAdapter", {
- get: function () {
- return {
- addClass: function () { return undefined; },
- emitEvent: function () { return undefined; },
- getActions: function () { return []; },
- getAttribute: function () { return null; },
- getElementID: function () { return ''; },
- getOffsetWidth: function () { return 0; },
- hasClass: function () { return false; },
- isActionDisabled: function () { return false; },
- isActionFocusable: function () { return false; },
- isActionSelectable: function () { return false; },
- isActionSelected: function () { return false; },
- isRTL: function () { return false; },
- removeClass: function () { return undefined; },
- setActionDisabled: function () { return undefined; },
- setActionFocus: function () { return undefined; },
- setActionSelected: function () { return undefined; },
- setStyleProperty: function () { return undefined; },
- };
- },
- enumerable: false,
- configurable: true
- });
- MDCChipFoundation.prototype.destroy = function () {
- this.animFrame.cancelAll();
- };
- MDCChipFoundation.prototype.getElementID = function () {
- return this.adapter.getElementID();
- };
- MDCChipFoundation.prototype.setDisabled = function (isDisabled) {
- var e_1, _a;
- var actions = this.getActions();
- try {
- for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
- var action = actions_1_1.value;
- this.adapter.setActionDisabled(action, isDisabled);
- }
- }
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
- finally {
- try {
- if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
- }
- finally { if (e_1) throw e_1.error; }
- }
- if (isDisabled) {
- this.adapter.addClass(MDCChipCssClasses.DISABLED);
- }
- else {
- this.adapter.removeClass(MDCChipCssClasses.DISABLED);
- }
- };
- MDCChipFoundation.prototype.isDisabled = function () {
- var e_2, _a;
- var actions = this.getActions();
- try {
- for (var actions_2 = __values(actions), actions_2_1 = actions_2.next(); !actions_2_1.done; actions_2_1 = actions_2.next()) {
- var action = actions_2_1.value;
- if (this.adapter.isActionDisabled(action)) {
- return true;
- }
- }
- }
- catch (e_2_1) { e_2 = { error: e_2_1 }; }
- finally {
- try {
- if (actions_2_1 && !actions_2_1.done && (_a = actions_2.return)) _a.call(actions_2);
- }
- finally { if (e_2) throw e_2.error; }
- }
- return false;
- };
- MDCChipFoundation.prototype.getActions = function () {
- return this.adapter.getActions();
- };
- MDCChipFoundation.prototype.isActionFocusable = function (action) {
- return this.adapter.isActionFocusable(action);
- };
- MDCChipFoundation.prototype.isActionSelectable = function (action) {
- return this.adapter.isActionSelectable(action);
- };
- MDCChipFoundation.prototype.isActionSelected = function (action) {
- return this.adapter.isActionSelected(action);
- };
- MDCChipFoundation.prototype.setActionFocus = function (action, focus) {
- this.adapter.setActionFocus(action, focus);
- };
- MDCChipFoundation.prototype.setActionSelected = function (action, isSelected) {
- this.adapter.setActionSelected(action, isSelected);
- this.animateSelection(isSelected);
- };
- MDCChipFoundation.prototype.startAnimation = function (animation) {
- if (animation === MDCChipAnimation.ENTER) {
- this.adapter.addClass(MDCChipCssClasses.ENTER);
- return;
- }
- if (animation === MDCChipAnimation.EXIT) {
- this.adapter.addClass(MDCChipCssClasses.EXIT);
- return;
- }
- };
- MDCChipFoundation.prototype.handleAnimationEnd = function (event) {
- var _this = this;
- var animationName = event.animationName;
- if (animationName === MDCChipAnimation.ENTER) {
- this.adapter.removeClass(MDCChipCssClasses.ENTER);
- this.adapter.emitEvent(MDCChipEvents.ANIMATION, {
- chipID: this.getElementID(),
- animation: MDCChipAnimation.ENTER,
- addedAnnouncement: this.getAddedAnnouncement(),
- isComplete: true,
- });
- return;
- }
- if (animationName === MDCChipAnimation.EXIT) {
- this.adapter.removeClass(MDCChipCssClasses.EXIT);
- this.adapter.addClass(MDCChipCssClasses.HIDDEN);
- var width = this.adapter.getOffsetWidth();
- this.adapter.setStyleProperty('width', width + "px");
- // Wait two frames so the width gets applied correctly.
- this.animFrame.request(AnimationKeys.EXIT, function () {
- _this.animFrame.request(AnimationKeys.EXIT, function () {
- _this.adapter.setStyleProperty('width', '0');
- });
- });
- }
- };
- MDCChipFoundation.prototype.handleTransitionEnd = function () {
- if (!this.adapter.hasClass(MDCChipCssClasses.HIDDEN))
- return;
- this.adapter.emitEvent(MDCChipEvents.ANIMATION, {
- chipID: this.getElementID(),
- animation: MDCChipAnimation.EXIT,
- removedAnnouncement: this.getRemovedAnnouncement(),
- isComplete: true,
- });
- };
- MDCChipFoundation.prototype.handleActionInteraction = function (_a) {
- var detail = _a.detail;
- var source = detail.source, actionID = detail.actionID;
- var isSelectable = this.adapter.isActionSelectable(source);
- var isSelected = this.adapter.isActionSelected(source);
- this.adapter.emitEvent(MDCChipEvents.INTERACTION, {
- chipID: this.getElementID(),
- shouldRemove: this.shouldRemove(detail),
- actionID: actionID,
- isSelectable: isSelectable,
- isSelected: isSelected,
- source: source,
- });
- };
- MDCChipFoundation.prototype.handleActionNavigation = function (_a) {
- var detail = _a.detail;
- var source = detail.source, key = detail.key;
- var isRTL = this.adapter.isRTL();
- var isTrailingActionFocusable = this.adapter.isActionFocusable(MDCChipActionType.TRAILING);
- var isPrimaryActionFocusable = this.adapter.isActionFocusable(MDCChipActionType.PRIMARY);
- var dir = this.directionFromKey(key, isRTL);
- var shouldNavigateToTrailing = source === MDCChipActionType.PRIMARY &&
- dir === Direction.RIGHT && isTrailingActionFocusable;
- var shouldNavigateToPrimary = source === MDCChipActionType.TRAILING &&
- dir === Direction.LEFT && isPrimaryActionFocusable;
- if (shouldNavigateToTrailing) {
- this.navigateActions({ from: source, to: MDCChipActionType.TRAILING });
- return;
- }
- if (shouldNavigateToPrimary) {
- this.navigateActions({ from: source, to: MDCChipActionType.PRIMARY });
- return;
- }
- this.adapter.emitEvent(MDCChipEvents.NAVIGATION, {
- chipID: this.getElementID(),
- isRTL: isRTL,
- source: source,
- key: key,
- });
- };
- MDCChipFoundation.prototype.directionFromKey = function (key, isRTL) {
- var isLeftKey = key === KEY.ARROW_LEFT;
- var isRightKey = key === KEY.ARROW_RIGHT;
- if (!isRTL && isLeftKey || isRTL && isRightKey) {
- return Direction.LEFT;
- }
- if (!isRTL && isRightKey || isRTL && isLeftKey) {
- return Direction.RIGHT;
- }
- return Direction.UNSPECIFIED;
- };
- MDCChipFoundation.prototype.navigateActions = function (nav) {
- this.adapter.setActionFocus(nav.from, MDCChipActionFocusBehavior.NOT_FOCUSABLE);
- this.adapter.setActionFocus(nav.to, MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);
- };
- MDCChipFoundation.prototype.shouldRemove = function (_a) {
- var source = _a.source, trigger = _a.trigger;
- if (trigger === MDCChipActionInteractionTrigger.BACKSPACE_KEY ||
- trigger === MDCChipActionInteractionTrigger.DELETE_KEY) {
- return true;
- }
- return source === MDCChipActionType.TRAILING;
- };
- MDCChipFoundation.prototype.getRemovedAnnouncement = function () {
- var msg = this.adapter.getAttribute(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT);
- return msg || undefined;
- };
- MDCChipFoundation.prototype.getAddedAnnouncement = function () {
- var msg = this.adapter.getAttribute(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT);
- return msg || undefined;
- };
- MDCChipFoundation.prototype.animateSelection = function (isSelected) {
- var _this = this;
- this.resetAnimationStyles();
- // Wait two frames to ensure the animation classes are unset
- this.animFrame.request(AnimationKeys.SELECTION, function () {
- _this.animFrame.request(AnimationKeys.SELECTION, function () {
- _this.updateSelectionStyles(isSelected);
- });
- });
- };
- MDCChipFoundation.prototype.resetAnimationStyles = function () {
- this.adapter.removeClass(MDCChipCssClasses.SELECTING);
- this.adapter.removeClass(MDCChipCssClasses.DESELECTING);
- this.adapter.removeClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);
- this.adapter.removeClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);
- };
- MDCChipFoundation.prototype.updateSelectionStyles = function (isSelected) {
- var _this = this;
- var hasIcon = this.adapter.hasClass(MDCChipCssClasses.WITH_PRIMARY_ICON);
- if (hasIcon && isSelected) {
- this.adapter.addClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);
- this.animFrame.request(AnimationKeys.SELECTION, function () {
- _this.adapter.addClass(MDCChipCssClasses.SELECTED);
- });
- return;
- }
- if (hasIcon && !isSelected) {
- this.adapter.addClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);
- this.animFrame.request(AnimationKeys.SELECTION, function () {
- _this.adapter.removeClass(MDCChipCssClasses.SELECTED);
- });
- return;
- }
- if (isSelected) {
- this.adapter.addClass(MDCChipCssClasses.SELECTING);
- this.animFrame.request(AnimationKeys.SELECTION, function () {
- _this.adapter.addClass(MDCChipCssClasses.SELECTED);
- });
- return;
- }
- if (!isSelected) {
- this.adapter.addClass(MDCChipCssClasses.DESELECTING);
- this.animFrame.request(AnimationKeys.SELECTION, function () {
- _this.adapter.removeClass(MDCChipCssClasses.SELECTED);
- });
- return;
- }
- };
- return MDCChipFoundation;
- }(MDCFoundation));
- export { MDCChipFoundation };
- // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
- export default MDCChipFoundation;
- //# sourceMappingURL=foundation.js.map
|