component.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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 } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { announce } from '@material/dom/announce';
  26. import { MDCChip } from '../chip/component';
  27. import { MDCChipEvents } from '../chip/constants';
  28. import { MDCChipSetCssClasses } from './constants';
  29. import { MDCChipSetFoundation } from './foundation';
  30. /**
  31. * MDCChip provides component encapsulation of the foundation implementation.
  32. */
  33. var MDCChipSet = /** @class */ (function (_super) {
  34. __extends(MDCChipSet, _super);
  35. function MDCChipSet() {
  36. return _super !== null && _super.apply(this, arguments) || this;
  37. }
  38. MDCChipSet.attachTo = function (root) {
  39. return new MDCChipSet(root);
  40. };
  41. MDCChipSet.prototype.initialize = function (chipFactory) {
  42. if (chipFactory === void 0) { chipFactory = function (el) { return new MDCChip(el); }; }
  43. this.chips = [];
  44. var chipEls = this.root.querySelectorAll("." + MDCChipSetCssClasses.CHIP);
  45. for (var i = 0; i < chipEls.length; i++) {
  46. var chip = chipFactory(chipEls[i]);
  47. this.chips.push(chip);
  48. }
  49. };
  50. MDCChipSet.prototype.initialSyncWithDOM = function () {
  51. var _this = this;
  52. this.handleChipAnimation = function (event) {
  53. _this.foundation.handleChipAnimation(event);
  54. };
  55. this.handleChipInteraction = function (event) {
  56. _this.foundation.handleChipInteraction(event);
  57. };
  58. this.handleChipNavigation = function (event) {
  59. _this.foundation.handleChipNavigation(event);
  60. };
  61. this.listen(MDCChipEvents.ANIMATION, this.handleChipAnimation);
  62. this.listen(MDCChipEvents.INTERACTION, this.handleChipInteraction);
  63. this.listen(MDCChipEvents.NAVIGATION, this.handleChipNavigation);
  64. };
  65. MDCChipSet.prototype.destroy = function () {
  66. this.unlisten(MDCChipEvents.ANIMATION, this.handleChipAnimation);
  67. this.unlisten(MDCChipEvents.INTERACTION, this.handleChipInteraction);
  68. this.unlisten(MDCChipEvents.NAVIGATION, this.handleChipNavigation);
  69. _super.prototype.destroy.call(this);
  70. };
  71. MDCChipSet.prototype.getDefaultFoundation = function () {
  72. var _this = this;
  73. // DO NOT INLINE this variable. For backward compatibility, foundations take
  74. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  75. // methods, we need a separate, strongly typed adapter variable.
  76. var adapter = {
  77. announceMessage: function (message) {
  78. announce(message);
  79. },
  80. emitEvent: function (eventName, eventDetail) {
  81. _this.emit(eventName, eventDetail, true /* shouldBubble */);
  82. },
  83. getAttribute: function (attrName) { return _this.root.getAttribute(attrName); },
  84. getChipActionsAtIndex: function (index) {
  85. if (!_this.isIndexValid(index))
  86. return [];
  87. return _this.chips[index].getActions();
  88. },
  89. getChipCount: function () { return _this.chips.length; },
  90. getChipIdAtIndex: function (index) {
  91. if (!_this.isIndexValid(index))
  92. return '';
  93. return _this.chips[index].getElementID();
  94. },
  95. getChipIndexById: function (id) {
  96. return _this.chips.findIndex(function (chip) { return chip.getElementID() === id; });
  97. },
  98. isChipFocusableAtIndex: function (index, action) {
  99. if (!_this.isIndexValid(index))
  100. return false;
  101. return _this.chips[index].isActionFocusable(action);
  102. },
  103. isChipSelectableAtIndex: function (index, action) {
  104. if (!_this.isIndexValid(index))
  105. return false;
  106. return _this.chips[index].isActionSelectable(action);
  107. },
  108. isChipSelectedAtIndex: function (index, action) {
  109. if (!_this.isIndexValid(index))
  110. return false;
  111. return _this.chips[index].isActionSelected(action);
  112. },
  113. removeChipAtIndex: function (index) {
  114. if (!_this.isIndexValid(index))
  115. return;
  116. _this.chips[index].destroy();
  117. _this.chips[index].remove();
  118. _this.chips.splice(index, 1);
  119. },
  120. setChipFocusAtIndex: function (index, action, focus) {
  121. if (!_this.isIndexValid(index))
  122. return;
  123. _this.chips[index].setActionFocus(action, focus);
  124. },
  125. setChipSelectedAtIndex: function (index, action, selected) {
  126. if (!_this.isIndexValid(index))
  127. return;
  128. _this.chips[index].setActionSelected(action, selected);
  129. },
  130. startChipAnimationAtIndex: function (index, animation) {
  131. if (!_this.isIndexValid(index))
  132. return;
  133. _this.chips[index].startAnimation(animation);
  134. },
  135. };
  136. // Default to the primary foundation
  137. return new MDCChipSetFoundation(adapter);
  138. };
  139. /** Returns the index of the chip with the given ID or -1 if none exists. */
  140. MDCChipSet.prototype.getChipIndexByID = function (chipID) {
  141. return this.chips.findIndex(function (chip) { return chip.getElementID() === chipID; });
  142. };
  143. /**
  144. * Returns the ID of the chip at the given index or an empty string if the
  145. * index is out of bounds.
  146. */
  147. MDCChipSet.prototype.getChipIdAtIndex = function (index) {
  148. if (!this.isIndexValid(index))
  149. return '';
  150. return this.chips[index].getElementID();
  151. };
  152. /** Returns the unique indexes of the selected chips. */
  153. MDCChipSet.prototype.getSelectedChipIndexes = function () {
  154. return this.foundation.getSelectedChipIndexes();
  155. };
  156. /** Sets the selection state of the chip. */
  157. MDCChipSet.prototype.setChipSelected = function (index, action, isSelected) {
  158. this.foundation.setChipSelected(index, action, isSelected);
  159. };
  160. /** Returns the selection state of the chip. */
  161. MDCChipSet.prototype.isChipSelected = function (index, action) {
  162. return this.foundation.isChipSelected(index, action);
  163. };
  164. /** Animates the chip addition at the given index. */
  165. MDCChipSet.prototype.addChip = function (index) {
  166. this.foundation.addChip(index);
  167. };
  168. /** Removes the chip at the given index. */
  169. MDCChipSet.prototype.removeChip = function (index) {
  170. this.foundation.removeChip(index);
  171. };
  172. MDCChipSet.prototype.isIndexValid = function (index) {
  173. return index > -1 && index < this.chips.length;
  174. };
  175. return MDCChipSet;
  176. }(MDCComponent));
  177. export { MDCChipSet };
  178. //# sourceMappingURL=component.js.map