@material/chips
Version:
The Material Components for the Web chips component
313 lines • 14 kB
JavaScript
/**
* @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