adapter.d.ts 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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 { EventType, SpecificEventListener } from '@material/base/types';
  24. import { MDCTextFieldNativeInputElement } from './types';
  25. /**
  26. * Defines the shape of the adapter expected by the foundation.
  27. * Implement this adapter for your framework of choice to delegate updates to
  28. * the component in your framework of choice. See architecture documentation
  29. * for more details.
  30. * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  31. */
  32. export interface MDCTextFieldAdapter extends MDCTextFieldRootAdapter, MDCTextFieldInputAdapter, MDCTextFieldLabelAdapter, MDCTextFieldLineRippleAdapter, MDCTextFieldOutlineAdapter {
  33. }
  34. export interface MDCTextFieldRootAdapter {
  35. /**
  36. * Adds a class to the root Element.
  37. */
  38. addClass(className: string): void;
  39. /**
  40. * Removes a class from the root Element.
  41. */
  42. removeClass(className: string): void;
  43. /**
  44. * @return true if the root element contains the given class name.
  45. */
  46. hasClass(className: string): boolean;
  47. /**
  48. * Registers an event handler on the root element for a given event.
  49. */
  50. registerTextFieldInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
  51. /**
  52. * Deregisters an event handler on the root element for a given event.
  53. */
  54. deregisterTextFieldInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
  55. /**
  56. * Registers a validation attribute change listener on the input element.
  57. * Handler accepts list of attribute names.
  58. */
  59. registerValidationAttributeChangeHandler(handler: (attributeNames: string[]) => void): MutationObserver;
  60. /**
  61. * Disconnects a validation attribute observer on the input element.
  62. */
  63. deregisterValidationAttributeChangeHandler(observer: MutationObserver): void;
  64. }
  65. export interface MDCTextFieldInputAdapter {
  66. /**
  67. * @return The native `<input>` element, or an object with the same shape.
  68. * Note that this method can return null, which the foundation will handle
  69. * gracefully.
  70. */
  71. getNativeInput(): MDCTextFieldNativeInputElement | null;
  72. /**
  73. * Sets the specified attribute to the specified value on the input element.
  74. */
  75. setInputAttr(attr: string, value: string): void;
  76. /**
  77. * Removes the specified attribute from the input element.
  78. */
  79. removeInputAttr(attr: string): void;
  80. /**
  81. * @return true if the textfield is focused. We achieve this via
  82. * `document.activeElement === this.root`.
  83. */
  84. isFocused(): boolean;
  85. /**
  86. * Registers an event listener on the native input element for a given event.
  87. */
  88. registerInputInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
  89. /**
  90. * Deregisters an event listener on the native input element for a given
  91. * event.
  92. */
  93. deregisterInputInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
  94. }
  95. export interface MDCTextFieldLabelAdapter {
  96. /**
  97. * Only implement if label exists.
  98. * Shakes label if shouldShake is true.
  99. */
  100. shakeLabel(shouldShake: boolean): void;
  101. /**
  102. * Only implement if label exists.
  103. * Floats the label above the input element if shouldFloat is true.
  104. */
  105. floatLabel(shouldFloat: boolean): void;
  106. /**
  107. * @return true if label element exists, false if it doesn't.
  108. */
  109. hasLabel(): boolean;
  110. /**
  111. * Only implement if label exists.
  112. * @return width of label in pixels.
  113. */
  114. getLabelWidth(): number;
  115. /**
  116. * Only implement if label exists.
  117. * Styles the label as required.
  118. */
  119. setLabelRequired(isRequired: boolean): void;
  120. }
  121. export interface MDCTextFieldLineRippleAdapter {
  122. /**
  123. * Activates the line ripple.
  124. */
  125. activateLineRipple(): void;
  126. /**
  127. * Deactivates the line ripple.
  128. */
  129. deactivateLineRipple(): void;
  130. /**
  131. * Sets the transform origin of the line ripple.
  132. */
  133. setLineRippleTransformOrigin(normalizedX: number): void;
  134. }
  135. export interface MDCTextFieldOutlineAdapter {
  136. /**
  137. * @return true if outline element exists, false if it doesn't.
  138. */
  139. hasOutline(): boolean;
  140. /**
  141. * Only implement if outline element exists.
  142. */
  143. notchOutline(labelWidth: number): void;
  144. /**
  145. * Only implement if outline element exists.
  146. * Closes notch in outline element.
  147. */
  148. closeOutline(): void;
  149. }