component.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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 { __extends, __values } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { MDCSegmentedButtonSegment } from '../segment/component';
  26. import { events, selectors } from './constants';
  27. import { MDCSegmentedButtonFoundation } from './foundation';
  28. /** MDC Segmented Button */
  29. var MDCSegmentedButton = /** @class */ (function (_super) {
  30. __extends(MDCSegmentedButton, _super);
  31. function MDCSegmentedButton() {
  32. return _super !== null && _super.apply(this, arguments) || this;
  33. }
  34. MDCSegmentedButton.attachTo = function (root) {
  35. return new MDCSegmentedButton(root);
  36. };
  37. Object.defineProperty(MDCSegmentedButton.prototype, "segments", {
  38. get: function () {
  39. return this.segmentsList.slice();
  40. },
  41. enumerable: false,
  42. configurable: true
  43. });
  44. // initialSyncWithDOM
  45. MDCSegmentedButton.prototype.initialize = function (segmentFactory) {
  46. if (segmentFactory === void 0) { segmentFactory = function (el) {
  47. return new MDCSegmentedButtonSegment(el);
  48. }; }
  49. this.segmentFactory = segmentFactory;
  50. this.segmentsList = this.instantiateSegments(this.segmentFactory);
  51. };
  52. /**
  53. * @param segmentFactory Factory to create new child segments
  54. * @return Returns list of child segments found in DOM
  55. */
  56. MDCSegmentedButton.prototype.instantiateSegments = function (segmentFactory) {
  57. var segmentElements = Array.from(this.root.querySelectorAll(selectors.SEGMENT));
  58. return segmentElements.map(function (el) { return segmentFactory(el); });
  59. };
  60. MDCSegmentedButton.prototype.initialSyncWithDOM = function () {
  61. var _this = this;
  62. this.handleSelected = function (event) {
  63. _this.foundation.handleSelected(event.detail);
  64. };
  65. this.listen(events.SELECTED, this.handleSelected);
  66. var isSingleSelect = this.foundation.isSingleSelect();
  67. for (var i = 0; i < this.segmentsList.length; i++) {
  68. var segment = this.segmentsList[i];
  69. segment.setIndex(i);
  70. segment.setIsSingleSelect(isSingleSelect);
  71. }
  72. var selectedSegments = this.segmentsList.filter(function (segment) { return segment.isSelected(); });
  73. if (isSingleSelect && selectedSegments.length === 0 &&
  74. this.segmentsList.length > 0) {
  75. throw new Error('No segment selected in singleSelect mdc-segmented-button');
  76. }
  77. else if (isSingleSelect && selectedSegments.length > 1) {
  78. throw new Error('Multiple segments selected in singleSelect mdc-segmented-button');
  79. }
  80. };
  81. MDCSegmentedButton.prototype.destroy = function () {
  82. var e_1, _a;
  83. try {
  84. for (var _b = __values(this.segmentsList), _c = _b.next(); !_c.done; _c = _b.next()) {
  85. var segment = _c.value;
  86. segment.destroy();
  87. }
  88. }
  89. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  90. finally {
  91. try {
  92. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  93. }
  94. finally { if (e_1) throw e_1.error; }
  95. }
  96. this.unlisten(events.SELECTED, this.handleSelected);
  97. _super.prototype.destroy.call(this);
  98. };
  99. MDCSegmentedButton.prototype.getDefaultFoundation = function () {
  100. var _this = this;
  101. var adapter = {
  102. hasClass: function (className) {
  103. return _this.root.classList.contains(className);
  104. },
  105. getSegments: function () {
  106. return _this.mappedSegments();
  107. },
  108. selectSegment: function (indexOrSegmentId) {
  109. var segmentDetail = _this.mappedSegments().find(function (detail) { return detail.index === indexOrSegmentId ||
  110. detail.segmentId === indexOrSegmentId; });
  111. if (segmentDetail) {
  112. _this.segmentsList[segmentDetail.index].setSelected();
  113. }
  114. },
  115. unselectSegment: function (indexOrSegmentId) {
  116. var segmentDetail = _this.mappedSegments().find(function (detail) { return detail.index === indexOrSegmentId ||
  117. detail.segmentId === indexOrSegmentId; });
  118. if (segmentDetail) {
  119. _this.segmentsList[segmentDetail.index].setUnselected();
  120. }
  121. },
  122. notifySelectedChange: function (detail) {
  123. _this.emit(events.CHANGE, detail, true /* shouldBubble */);
  124. }
  125. };
  126. return new MDCSegmentedButtonFoundation(adapter);
  127. };
  128. /**
  129. * @return Returns readonly list of selected child segments as SegmentDetails
  130. */
  131. MDCSegmentedButton.prototype.getSelectedSegments = function () {
  132. return this.foundation.getSelectedSegments();
  133. };
  134. /**
  135. * Sets identified segment to be selected
  136. *
  137. * @param indexOrSegmentId Number index or string segmentId that identifies
  138. * child segment
  139. */
  140. MDCSegmentedButton.prototype.selectSegment = function (indexOrSegmentId) {
  141. this.foundation.selectSegment(indexOrSegmentId);
  142. };
  143. /**
  144. * Sets identified segment to be not selected
  145. *
  146. * @param indexOrSegmentId Number index or string segmentId that identifies
  147. * child segment
  148. */
  149. MDCSegmentedButton.prototype.unselectSegment = function (indexOrSegmentId) {
  150. this.foundation.unselectSegment(indexOrSegmentId);
  151. };
  152. /**
  153. * @param indexOrSegmentId Number index or string segmentId that identifies
  154. * child segment
  155. * @return Returns true if identified child segment is currently selected,
  156. * otherwise returns false
  157. */
  158. MDCSegmentedButton.prototype.isSegmentSelected = function (indexOrSegmentId) {
  159. return this.foundation.isSegmentSelected(indexOrSegmentId);
  160. };
  161. /**
  162. * @return Returns child segments mapped to readonly SegmentDetail list
  163. */
  164. MDCSegmentedButton.prototype.mappedSegments = function () {
  165. return this.segmentsList.map(function (segment, index) {
  166. return {
  167. index: index,
  168. selected: segment.isSelected(),
  169. segmentId: segment.getSegmentId()
  170. };
  171. });
  172. };
  173. return MDCSegmentedButton;
  174. }(MDCComponent));
  175. export { MDCSegmentedButton };
  176. //# sourceMappingURL=component.js.map