foundation.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. /**
  2. * @license
  3. * Copyright 2020 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __assign, __extends, __values } from "tslib";
  24. import { AnimationFrame } from '@material/animation/animationframe';
  25. import { MDCFoundation } from '@material/base/foundation';
  26. import { KEY } from '@material/dom/keyboard';
  27. import { MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType } from '../action/constants';
  28. import { MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents } from './constants';
  29. var Direction;
  30. (function (Direction) {
  31. Direction[Direction["UNSPECIFIED"] = 0] = "UNSPECIFIED";
  32. Direction[Direction["LEFT"] = 1] = "LEFT";
  33. Direction[Direction["RIGHT"] = 2] = "RIGHT";
  34. })(Direction || (Direction = {}));
  35. var AnimationKeys;
  36. (function (AnimationKeys) {
  37. AnimationKeys["SELECTION"] = "selection";
  38. AnimationKeys["EXIT"] = "exit";
  39. })(AnimationKeys || (AnimationKeys = {}));
  40. /**
  41. * MDCChipFoundation provides a foundation for all chips.
  42. */
  43. var MDCChipFoundation = /** @class */ (function (_super) {
  44. __extends(MDCChipFoundation, _super);
  45. function MDCChipFoundation(adapter) {
  46. var _this = _super.call(this, __assign(__assign({}, MDCChipFoundation.defaultAdapter), adapter)) || this;
  47. _this.animFrame = new AnimationFrame();
  48. return _this;
  49. }
  50. Object.defineProperty(MDCChipFoundation, "defaultAdapter", {
  51. get: function () {
  52. return {
  53. addClass: function () { return undefined; },
  54. emitEvent: function () { return undefined; },
  55. getActions: function () { return []; },
  56. getAttribute: function () { return null; },
  57. getElementID: function () { return ''; },
  58. getOffsetWidth: function () { return 0; },
  59. hasClass: function () { return false; },
  60. isActionDisabled: function () { return false; },
  61. isActionFocusable: function () { return false; },
  62. isActionSelectable: function () { return false; },
  63. isActionSelected: function () { return false; },
  64. isRTL: function () { return false; },
  65. removeClass: function () { return undefined; },
  66. setActionDisabled: function () { return undefined; },
  67. setActionFocus: function () { return undefined; },
  68. setActionSelected: function () { return undefined; },
  69. setStyleProperty: function () { return undefined; },
  70. };
  71. },
  72. enumerable: false,
  73. configurable: true
  74. });
  75. MDCChipFoundation.prototype.destroy = function () {
  76. this.animFrame.cancelAll();
  77. };
  78. MDCChipFoundation.prototype.getElementID = function () {
  79. return this.adapter.getElementID();
  80. };
  81. MDCChipFoundation.prototype.setDisabled = function (isDisabled) {
  82. var e_1, _a;
  83. var actions = this.getActions();
  84. try {
  85. for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
  86. var action = actions_1_1.value;
  87. this.adapter.setActionDisabled(action, isDisabled);
  88. }
  89. }
  90. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  91. finally {
  92. try {
  93. if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
  94. }
  95. finally { if (e_1) throw e_1.error; }
  96. }
  97. if (isDisabled) {
  98. this.adapter.addClass(MDCChipCssClasses.DISABLED);
  99. }
  100. else {
  101. this.adapter.removeClass(MDCChipCssClasses.DISABLED);
  102. }
  103. };
  104. MDCChipFoundation.prototype.isDisabled = function () {
  105. var e_2, _a;
  106. var actions = this.getActions();
  107. try {
  108. for (var actions_2 = __values(actions), actions_2_1 = actions_2.next(); !actions_2_1.done; actions_2_1 = actions_2.next()) {
  109. var action = actions_2_1.value;
  110. if (this.adapter.isActionDisabled(action)) {
  111. return true;
  112. }
  113. }
  114. }
  115. catch (e_2_1) { e_2 = { error: e_2_1 }; }
  116. finally {
  117. try {
  118. if (actions_2_1 && !actions_2_1.done && (_a = actions_2.return)) _a.call(actions_2);
  119. }
  120. finally { if (e_2) throw e_2.error; }
  121. }
  122. return false;
  123. };
  124. MDCChipFoundation.prototype.getActions = function () {
  125. return this.adapter.getActions();
  126. };
  127. MDCChipFoundation.prototype.isActionFocusable = function (action) {
  128. return this.adapter.isActionFocusable(action);
  129. };
  130. MDCChipFoundation.prototype.isActionSelectable = function (action) {
  131. return this.adapter.isActionSelectable(action);
  132. };
  133. MDCChipFoundation.prototype.isActionSelected = function (action) {
  134. return this.adapter.isActionSelected(action);
  135. };
  136. MDCChipFoundation.prototype.setActionFocus = function (action, focus) {
  137. this.adapter.setActionFocus(action, focus);
  138. };
  139. MDCChipFoundation.prototype.setActionSelected = function (action, isSelected) {
  140. this.adapter.setActionSelected(action, isSelected);
  141. this.animateSelection(isSelected);
  142. };
  143. MDCChipFoundation.prototype.startAnimation = function (animation) {
  144. if (animation === MDCChipAnimation.ENTER) {
  145. this.adapter.addClass(MDCChipCssClasses.ENTER);
  146. return;
  147. }
  148. if (animation === MDCChipAnimation.EXIT) {
  149. this.adapter.addClass(MDCChipCssClasses.EXIT);
  150. return;
  151. }
  152. };
  153. MDCChipFoundation.prototype.handleAnimationEnd = function (event) {
  154. var _this = this;
  155. var animationName = event.animationName;
  156. if (animationName === MDCChipAnimation.ENTER) {
  157. this.adapter.removeClass(MDCChipCssClasses.ENTER);
  158. this.adapter.emitEvent(MDCChipEvents.ANIMATION, {
  159. chipID: this.getElementID(),
  160. animation: MDCChipAnimation.ENTER,
  161. addedAnnouncement: this.getAddedAnnouncement(),
  162. isComplete: true,
  163. });
  164. return;
  165. }
  166. if (animationName === MDCChipAnimation.EXIT) {
  167. this.adapter.removeClass(MDCChipCssClasses.EXIT);
  168. this.adapter.addClass(MDCChipCssClasses.HIDDEN);
  169. var width = this.adapter.getOffsetWidth();
  170. this.adapter.setStyleProperty('width', width + "px");
  171. // Wait two frames so the width gets applied correctly.
  172. this.animFrame.request(AnimationKeys.EXIT, function () {
  173. _this.animFrame.request(AnimationKeys.EXIT, function () {
  174. _this.adapter.setStyleProperty('width', '0');
  175. });
  176. });
  177. }
  178. };
  179. MDCChipFoundation.prototype.handleTransitionEnd = function () {
  180. if (!this.adapter.hasClass(MDCChipCssClasses.HIDDEN))
  181. return;
  182. this.adapter.emitEvent(MDCChipEvents.ANIMATION, {
  183. chipID: this.getElementID(),
  184. animation: MDCChipAnimation.EXIT,
  185. removedAnnouncement: this.getRemovedAnnouncement(),
  186. isComplete: true,
  187. });
  188. };
  189. MDCChipFoundation.prototype.handleActionInteraction = function (_a) {
  190. var detail = _a.detail;
  191. var source = detail.source, actionID = detail.actionID;
  192. var isSelectable = this.adapter.isActionSelectable(source);
  193. var isSelected = this.adapter.isActionSelected(source);
  194. this.adapter.emitEvent(MDCChipEvents.INTERACTION, {
  195. chipID: this.getElementID(),
  196. shouldRemove: this.shouldRemove(detail),
  197. actionID: actionID,
  198. isSelectable: isSelectable,
  199. isSelected: isSelected,
  200. source: source,
  201. });
  202. };
  203. MDCChipFoundation.prototype.handleActionNavigation = function (_a) {
  204. var detail = _a.detail;
  205. var source = detail.source, key = detail.key;
  206. var isRTL = this.adapter.isRTL();
  207. var isTrailingActionFocusable = this.adapter.isActionFocusable(MDCChipActionType.TRAILING);
  208. var isPrimaryActionFocusable = this.adapter.isActionFocusable(MDCChipActionType.PRIMARY);
  209. var dir = this.directionFromKey(key, isRTL);
  210. var shouldNavigateToTrailing = source === MDCChipActionType.PRIMARY &&
  211. dir === Direction.RIGHT && isTrailingActionFocusable;
  212. var shouldNavigateToPrimary = source === MDCChipActionType.TRAILING &&
  213. dir === Direction.LEFT && isPrimaryActionFocusable;
  214. if (shouldNavigateToTrailing) {
  215. this.navigateActions({ from: source, to: MDCChipActionType.TRAILING });
  216. return;
  217. }
  218. if (shouldNavigateToPrimary) {
  219. this.navigateActions({ from: source, to: MDCChipActionType.PRIMARY });
  220. return;
  221. }
  222. this.adapter.emitEvent(MDCChipEvents.NAVIGATION, {
  223. chipID: this.getElementID(),
  224. isRTL: isRTL,
  225. source: source,
  226. key: key,
  227. });
  228. };
  229. MDCChipFoundation.prototype.directionFromKey = function (key, isRTL) {
  230. var isLeftKey = key === KEY.ARROW_LEFT;
  231. var isRightKey = key === KEY.ARROW_RIGHT;
  232. if (!isRTL && isLeftKey || isRTL && isRightKey) {
  233. return Direction.LEFT;
  234. }
  235. if (!isRTL && isRightKey || isRTL && isLeftKey) {
  236. return Direction.RIGHT;
  237. }
  238. return Direction.UNSPECIFIED;
  239. };
  240. MDCChipFoundation.prototype.navigateActions = function (nav) {
  241. this.adapter.setActionFocus(nav.from, MDCChipActionFocusBehavior.NOT_FOCUSABLE);
  242. this.adapter.setActionFocus(nav.to, MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);
  243. };
  244. MDCChipFoundation.prototype.shouldRemove = function (_a) {
  245. var source = _a.source, trigger = _a.trigger;
  246. if (trigger === MDCChipActionInteractionTrigger.BACKSPACE_KEY ||
  247. trigger === MDCChipActionInteractionTrigger.DELETE_KEY) {
  248. return true;
  249. }
  250. return source === MDCChipActionType.TRAILING;
  251. };
  252. MDCChipFoundation.prototype.getRemovedAnnouncement = function () {
  253. var msg = this.adapter.getAttribute(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT);
  254. return msg || undefined;
  255. };
  256. MDCChipFoundation.prototype.getAddedAnnouncement = function () {
  257. var msg = this.adapter.getAttribute(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT);
  258. return msg || undefined;
  259. };
  260. MDCChipFoundation.prototype.animateSelection = function (isSelected) {
  261. var _this = this;
  262. this.resetAnimationStyles();
  263. // Wait two frames to ensure the animation classes are unset
  264. this.animFrame.request(AnimationKeys.SELECTION, function () {
  265. _this.animFrame.request(AnimationKeys.SELECTION, function () {
  266. _this.updateSelectionStyles(isSelected);
  267. });
  268. });
  269. };
  270. MDCChipFoundation.prototype.resetAnimationStyles = function () {
  271. this.adapter.removeClass(MDCChipCssClasses.SELECTING);
  272. this.adapter.removeClass(MDCChipCssClasses.DESELECTING);
  273. this.adapter.removeClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);
  274. this.adapter.removeClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);
  275. };
  276. MDCChipFoundation.prototype.updateSelectionStyles = function (isSelected) {
  277. var _this = this;
  278. var hasIcon = this.adapter.hasClass(MDCChipCssClasses.WITH_PRIMARY_ICON);
  279. if (hasIcon && isSelected) {
  280. this.adapter.addClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);
  281. this.animFrame.request(AnimationKeys.SELECTION, function () {
  282. _this.adapter.addClass(MDCChipCssClasses.SELECTED);
  283. });
  284. return;
  285. }
  286. if (hasIcon && !isSelected) {
  287. this.adapter.addClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);
  288. this.animFrame.request(AnimationKeys.SELECTION, function () {
  289. _this.adapter.removeClass(MDCChipCssClasses.SELECTED);
  290. });
  291. return;
  292. }
  293. if (isSelected) {
  294. this.adapter.addClass(MDCChipCssClasses.SELECTING);
  295. this.animFrame.request(AnimationKeys.SELECTION, function () {
  296. _this.adapter.addClass(MDCChipCssClasses.SELECTED);
  297. });
  298. return;
  299. }
  300. if (!isSelected) {
  301. this.adapter.addClass(MDCChipCssClasses.DESELECTING);
  302. this.animFrame.request(AnimationKeys.SELECTION, function () {
  303. _this.adapter.removeClass(MDCChipCssClasses.SELECTED);
  304. });
  305. return;
  306. }
  307. };
  308. return MDCChipFoundation;
  309. }(MDCFoundation));
  310. export { MDCChipFoundation };
  311. // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
  312. export default MDCChipFoundation;
  313. //# sourceMappingURL=foundation.js.map