component.js 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * @license
  3. * Copyright 2017 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 { MDCFloatingLabelFoundation } from '@material/floating-label/foundation';
  26. import { cssClasses, strings } from './constants';
  27. import { MDCNotchedOutlineFoundation } from './foundation';
  28. /** MDC Notched Outline */
  29. var MDCNotchedOutline = /** @class */ (function (_super) {
  30. __extends(MDCNotchedOutline, _super);
  31. function MDCNotchedOutline() {
  32. return _super !== null && _super.apply(this, arguments) || this;
  33. }
  34. MDCNotchedOutline.attachTo = function (root) {
  35. return new MDCNotchedOutline(root);
  36. };
  37. MDCNotchedOutline.prototype.initialSyncWithDOM = function () {
  38. this.notchElement =
  39. this.root.querySelector(strings.NOTCH_ELEMENT_SELECTOR);
  40. var label = this.root.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
  41. if (label) {
  42. label.style.transitionDuration = '0s';
  43. this.root.classList.add(cssClasses.OUTLINE_UPGRADED);
  44. requestAnimationFrame(function () {
  45. label.style.transitionDuration = '';
  46. });
  47. }
  48. else {
  49. this.root.classList.add(cssClasses.NO_LABEL);
  50. }
  51. };
  52. /**
  53. * Updates classes and styles to open the notch to the specified width.
  54. * @param notchWidth The notch width in the outline.
  55. */
  56. MDCNotchedOutline.prototype.notch = function (notchWidth) {
  57. this.foundation.notch(notchWidth);
  58. };
  59. /**
  60. * Updates classes and styles to close the notch.
  61. */
  62. MDCNotchedOutline.prototype.closeNotch = function () {
  63. this.foundation.closeNotch();
  64. };
  65. MDCNotchedOutline.prototype.getDefaultFoundation = function () {
  66. var _this = this;
  67. // DO NOT INLINE this variable. For backward compatibility, foundations take
  68. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  69. // methods, we need a separate, strongly typed adapter variable.
  70. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  71. var adapter = {
  72. addClass: function (className) {
  73. _this.root.classList.add(className);
  74. },
  75. removeClass: function (className) {
  76. _this.root.classList.remove(className);
  77. },
  78. setNotchWidthProperty: function (width) {
  79. _this.notchElement.style.setProperty('width', width + 'px');
  80. },
  81. removeNotchWidthProperty: function () {
  82. _this.notchElement.style.removeProperty('width');
  83. },
  84. };
  85. // tslint:enable:object-literal-sort-keys
  86. return new MDCNotchedOutlineFoundation(adapter);
  87. };
  88. return MDCNotchedOutline;
  89. }(MDCComponent));
  90. export { MDCNotchedOutline };
  91. //# sourceMappingURL=component.js.map