component.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. /**
  2. * @license
  3. * Copyright 2018 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 { __extends, __read, __values } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { MDCChipAction } from '../action/component';
  26. import { MDCChipActionEvents } from '../action/constants';
  27. import { MDCChipFoundation } from './foundation';
  28. /**
  29. * MDCChip provides component encapsulation of the foundation implementation.
  30. */
  31. var MDCChip = /** @class */ (function (_super) {
  32. __extends(MDCChip, _super);
  33. function MDCChip() {
  34. return _super !== null && _super.apply(this, arguments) || this;
  35. }
  36. MDCChip.attachTo = function (root) {
  37. return new MDCChip(root);
  38. };
  39. MDCChip.prototype.initialize = function (actionFactory) {
  40. if (actionFactory === void 0) { actionFactory = function (el) { return new MDCChipAction(el); }; }
  41. this.actions = new Map();
  42. var actionEls = this.root.querySelectorAll('.mdc-evolution-chip__action');
  43. for (var i = 0; i < actionEls.length; i++) {
  44. var action = actionFactory(actionEls[i]);
  45. this.actions.set(action.actionType(), action);
  46. }
  47. };
  48. MDCChip.prototype.initialSyncWithDOM = function () {
  49. var _this = this;
  50. this.handleActionInteraction = function (event) {
  51. _this.foundation.handleActionInteraction(event);
  52. };
  53. this.handleActionNavigation = function (event) {
  54. _this.foundation.handleActionNavigation(event);
  55. };
  56. this.listen(MDCChipActionEvents.INTERACTION, this.handleActionInteraction);
  57. this.listen(MDCChipActionEvents.NAVIGATION, this.handleActionNavigation);
  58. };
  59. MDCChip.prototype.destroy = function () {
  60. this.unlisten(MDCChipActionEvents.INTERACTION, this.handleActionInteraction);
  61. this.unlisten(MDCChipActionEvents.NAVIGATION, this.handleActionNavigation);
  62. _super.prototype.destroy.call(this);
  63. };
  64. MDCChip.prototype.getDefaultFoundation = function () {
  65. var _this = this;
  66. // DO NOT INLINE this variable. For backward compatibility, foundations take
  67. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  68. // methods, we need a separate, strongly typed adapter variable.
  69. var adapter = {
  70. addClass: function (className) {
  71. _this.root.classList.add(className);
  72. },
  73. emitEvent: function (eventName, eventDetail) {
  74. _this.emit(eventName, eventDetail, true /* shouldBubble */);
  75. },
  76. getActions: function () {
  77. var e_1, _a;
  78. var actions = [];
  79. try {
  80. for (var _b = __values(_this.actions), _c = _b.next(); !_c.done; _c = _b.next()) {
  81. var _d = __read(_c.value, 1), key = _d[0];
  82. actions.push(key);
  83. }
  84. }
  85. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  86. finally {
  87. try {
  88. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  89. }
  90. finally { if (e_1) throw e_1.error; }
  91. }
  92. return actions;
  93. },
  94. getAttribute: function (attrName) { return _this.root.getAttribute(attrName); },
  95. getElementID: function () { return _this.root.id; },
  96. getOffsetWidth: function () {
  97. return _this.root.offsetWidth;
  98. },
  99. hasClass: function (className) { return _this.root.classList.contains(className); },
  100. isActionSelectable: function (actionType) {
  101. var action = _this.actions.get(actionType);
  102. if (action) {
  103. return action.isSelectable();
  104. }
  105. return false;
  106. },
  107. isActionSelected: function (actionType) {
  108. var action = _this.actions.get(actionType);
  109. if (action) {
  110. return action.isSelected();
  111. }
  112. return false;
  113. },
  114. isActionFocusable: function (actionType) {
  115. var action = _this.actions.get(actionType);
  116. if (action) {
  117. return action.isFocusable();
  118. }
  119. return false;
  120. },
  121. isActionDisabled: function (actionType) {
  122. var action = _this.actions.get(actionType);
  123. if (action) {
  124. return action.isDisabled();
  125. }
  126. return false;
  127. },
  128. isRTL: function () { return window.getComputedStyle(_this.root).getPropertyValue('direction') === 'rtl'; },
  129. removeClass: function (className) {
  130. _this.root.classList.remove(className);
  131. },
  132. setActionDisabled: function (actionType, isDisabled) {
  133. var action = _this.actions.get(actionType);
  134. if (action) {
  135. action.setDisabled(isDisabled);
  136. }
  137. },
  138. setActionFocus: function (actionType, behavior) {
  139. var action = _this.actions.get(actionType);
  140. if (action) {
  141. action.setFocus(behavior);
  142. }
  143. },
  144. setActionSelected: function (actionType, isSelected) {
  145. var action = _this.actions.get(actionType);
  146. if (action) {
  147. action.setSelected(isSelected);
  148. }
  149. },
  150. setStyleProperty: function (prop, value) {
  151. _this.root.style.setProperty(prop, value);
  152. },
  153. };
  154. // Default to the primary foundation
  155. return new MDCChipFoundation(adapter);
  156. };
  157. /** Exposed to be called by the parent chip set. */
  158. MDCChip.prototype.remove = function () {
  159. var parent = this.root.parentNode;
  160. if (parent !== null) {
  161. parent.removeChild(this.root);
  162. }
  163. };
  164. /** Returns the MDCChipActionTypes for the encapsulated actions. */
  165. MDCChip.prototype.getActions = function () {
  166. return this.foundation.getActions();
  167. };
  168. /** Returns the ID of the root element. */
  169. MDCChip.prototype.getElementID = function () {
  170. return this.foundation.getElementID();
  171. };
  172. MDCChip.prototype.isDisabled = function () {
  173. return this.foundation.isDisabled();
  174. };
  175. MDCChip.prototype.setDisabled = function (isDisabled) {
  176. this.foundation.setDisabled(isDisabled);
  177. };
  178. /** Returns the focusability of the action. */
  179. MDCChip.prototype.isActionFocusable = function (action) {
  180. return this.foundation.isActionFocusable(action);
  181. };
  182. /** Returns the selectability of the action. */
  183. MDCChip.prototype.isActionSelectable = function (action) {
  184. return this.foundation.isActionSelectable(action);
  185. };
  186. /** Returns the selected state of the action. */
  187. MDCChip.prototype.isActionSelected = function (action) {
  188. return this.foundation.isActionSelected(action);
  189. };
  190. /** Sets the focus behavior of the action. */
  191. MDCChip.prototype.setActionFocus = function (action, focus) {
  192. this.foundation.setActionFocus(action, focus);
  193. };
  194. /** Sets the selected state of the action. */
  195. MDCChip.prototype.setActionSelected = function (action, isSelected) {
  196. this.foundation.setActionSelected(action, isSelected);
  197. };
  198. /** Starts the animation on the chip. */
  199. MDCChip.prototype.startAnimation = function (animation) {
  200. this.foundation.startAnimation(animation);
  201. };
  202. return MDCChip;
  203. }(MDCComponent));
  204. export { MDCChip };
  205. //# sourceMappingURL=component.js.map