form-field.d-CMA_QQ0R.d.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, OnDestroy, AfterViewInit, ElementRef, AfterContentInit, AfterContentChecked, QueryList } from '@angular/core';
  3. import { BooleanInput } from '@angular/cdk/coercion';
  4. import { AbstractControlDirective } from '@angular/forms';
  5. import { T as ThemePalette } from './palette.d-BSSFKjO6.js';
  6. import { M as MatFormFieldControl$1 } from './form-field-control.d-QxD-9xJ3.js';
  7. /**
  8. * Injection token that can be used to reference instances of `MatError`. It serves as
  9. * alternative token to the actual `MatError` class which could cause unnecessary
  10. * retention of the class and its directive metadata.
  11. */
  12. declare const MAT_ERROR: InjectionToken<MatError>;
  13. /** Single error message to be shown underneath the form-field. */
  14. declare class MatError {
  15. id: string;
  16. constructor(...args: unknown[]);
  17. static ɵfac: i0.ɵɵFactoryDeclaration<MatError, never>;
  18. static ɵdir: i0.ɵɵDirectiveDeclaration<MatError, "mat-error, [matError]", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
  19. }
  20. /** Hint text to be shown underneath the form field control. */
  21. declare class MatHint {
  22. /** Whether to align the hint label at the start or end of the line. */
  23. align: 'start' | 'end';
  24. /** Unique ID for the hint. Used for the aria-describedby on the form field control. */
  25. id: string;
  26. static ɵfac: i0.ɵɵFactoryDeclaration<MatHint, never>;
  27. static ɵdir: i0.ɵɵDirectiveDeclaration<MatHint, "mat-hint", never, { "align": { "alias": "align"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
  28. }
  29. /**
  30. * Injection token that can be used to reference instances of `MatPrefix`. It serves as
  31. * alternative token to the actual `MatPrefix` class which could cause unnecessary
  32. * retention of the class and its directive metadata.
  33. */
  34. declare const MAT_PREFIX: InjectionToken<MatPrefix>;
  35. /** Prefix to be placed in front of the form field. */
  36. declare class MatPrefix {
  37. set _isTextSelector(value: '');
  38. _isText: boolean;
  39. static ɵfac: i0.ɵɵFactoryDeclaration<MatPrefix, never>;
  40. static ɵdir: i0.ɵɵDirectiveDeclaration<MatPrefix, "[matPrefix], [matIconPrefix], [matTextPrefix]", never, { "_isTextSelector": { "alias": "matTextPrefix"; "required": false; }; }, {}, never, never, true, never>;
  41. }
  42. /**
  43. * Injection token that can be used to reference instances of `MatSuffix`. It serves as
  44. * alternative token to the actual `MatSuffix` class which could cause unnecessary
  45. * retention of the class and its directive metadata.
  46. */
  47. declare const MAT_SUFFIX: InjectionToken<MatSuffix>;
  48. /** Suffix to be placed at the end of the form field. */
  49. declare class MatSuffix {
  50. set _isTextSelector(value: '');
  51. _isText: boolean;
  52. static ɵfac: i0.ɵɵFactoryDeclaration<MatSuffix, never>;
  53. static ɵdir: i0.ɵɵDirectiveDeclaration<MatSuffix, "[matSuffix], [matIconSuffix], [matTextSuffix]", never, { "_isTextSelector": { "alias": "matTextSuffix"; "required": false; }; }, {}, never, never, true, never>;
  54. }
  55. /** An interface that the parent form-field should implement to receive resize events. */
  56. interface FloatingLabelParent {
  57. _handleLabelResized(): void;
  58. }
  59. /**
  60. * Internal directive that maintains a MDC floating label. This directive does not
  61. * use the `MDCFloatingLabelFoundation` class, as it is not worth the size cost of
  62. * including it just to measure the label width and toggle some classes.
  63. *
  64. * The use of a directive allows us to conditionally render a floating label in the
  65. * template without having to manually manage instantiation and destruction of the
  66. * floating label component based on.
  67. *
  68. * The component is responsible for setting up the floating label styles, measuring label
  69. * width for the outline notch, and providing inputs that can be used to toggle the
  70. * label's floating or required state.
  71. */
  72. declare class MatFormFieldFloatingLabel implements OnDestroy {
  73. private _elementRef;
  74. /** Whether the label is floating. */
  75. get floating(): boolean;
  76. set floating(value: boolean);
  77. private _floating;
  78. /** Whether to monitor for resize events on the floating label. */
  79. get monitorResize(): boolean;
  80. set monitorResize(value: boolean);
  81. private _monitorResize;
  82. /** The shared ResizeObserver. */
  83. private _resizeObserver;
  84. /** The Angular zone. */
  85. private _ngZone;
  86. /** The parent form-field. */
  87. private _parent;
  88. /** The current resize event subscription. */
  89. private _resizeSubscription;
  90. constructor(...args: unknown[]);
  91. ngOnDestroy(): void;
  92. /** Gets the width of the label. Used for the outline notch. */
  93. getWidth(): number;
  94. /** Gets the HTML element for the floating label. */
  95. get element(): HTMLElement;
  96. /** Handles resize events from the ResizeObserver. */
  97. private _handleResize;
  98. /** Subscribes to resize events. */
  99. private _subscribeToResize;
  100. static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldFloatingLabel, never>;
  101. static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldFloatingLabel, "label[matFormFieldFloatingLabel]", never, { "floating": { "alias": "floating"; "required": false; }; "monitorResize": { "alias": "monitorResize"; "required": false; }; }, {}, never, never, true, never>;
  102. }
  103. /**
  104. * Internal directive that creates an instance of the MDC line-ripple component. Using a
  105. * directive allows us to conditionally render a line-ripple in the template without having
  106. * to manually create and destroy the `MDCLineRipple` component whenever the condition changes.
  107. *
  108. * The directive sets up the styles for the line-ripple and provides an API for activating
  109. * and deactivating the line-ripple.
  110. */
  111. declare class MatFormFieldLineRipple implements OnDestroy {
  112. private _elementRef;
  113. private _cleanupTransitionEnd;
  114. constructor(...args: unknown[]);
  115. activate(): void;
  116. deactivate(): void;
  117. private _handleTransitionEnd;
  118. ngOnDestroy(): void;
  119. static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldLineRipple, never>;
  120. static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldLineRipple, "div[matFormFieldLineRipple]", never, {}, {}, never, never, true, never>;
  121. }
  122. /**
  123. * Internal component that creates an instance of the MDC notched-outline component.
  124. *
  125. * The component sets up the HTML structure and styles for the notched-outline. It provides
  126. * inputs to toggle the notch state and width.
  127. */
  128. declare class MatFormFieldNotchedOutline implements AfterViewInit {
  129. private _elementRef;
  130. private _ngZone;
  131. /** Whether the notch should be opened. */
  132. open: boolean;
  133. _notch: ElementRef;
  134. constructor(...args: unknown[]);
  135. ngAfterViewInit(): void;
  136. _setNotchWidth(labelWidth: number): void;
  137. static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldNotchedOutline, never>;
  138. static ɵcmp: i0.ɵɵComponentDeclaration<MatFormFieldNotchedOutline, "div[matFormFieldNotchedOutline]", never, { "open": { "alias": "matFormFieldNotchedOutlineOpen"; "required": false; }; }, {}, never, ["*"], true, never>;
  139. }
  140. /** Type for the available floatLabel values. */
  141. type FloatLabelType = 'always' | 'auto';
  142. /** Possible appearance styles for the form field. */
  143. type MatFormFieldAppearance = 'fill' | 'outline';
  144. /** Behaviors for how the subscript height is set. */
  145. type SubscriptSizing = 'fixed' | 'dynamic';
  146. /**
  147. * Represents the default options for the form field that can be configured
  148. * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
  149. */
  150. interface MatFormFieldDefaultOptions {
  151. /** Default form field appearance style. */
  152. appearance?: MatFormFieldAppearance;
  153. /**
  154. * Default theme color of the form field. This API is supported in M2 themes only, it has no
  155. * effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.
  156. *
  157. * For information on applying color variants in M3, see
  158. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  159. */
  160. color?: ThemePalette;
  161. /** Whether the required marker should be hidden by default. */
  162. hideRequiredMarker?: boolean;
  163. /**
  164. * Whether the label for form fields should by default float `always`,
  165. * `never`, or `auto` (only when necessary).
  166. */
  167. floatLabel?: FloatLabelType;
  168. /** Whether the form field should reserve space for one line by default. */
  169. subscriptSizing?: SubscriptSizing;
  170. }
  171. /**
  172. * Injection token that can be used to inject an instances of `MatFormField`. It serves
  173. * as alternative token to the actual `MatFormField` class which would cause unnecessary
  174. * retention of the `MatFormField` class and its component metadata.
  175. */
  176. declare const MAT_FORM_FIELD: InjectionToken<MatFormField>;
  177. /**
  178. * Injection token that can be used to configure the
  179. * default options for all form field within an app.
  180. */
  181. declare const MAT_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<MatFormFieldDefaultOptions>;
  182. /**
  183. * Despite `MatFormFieldControl` being an abstract class, most of our usages enforce its shape
  184. * using `implements` instead of `extends`. This appears to be problematic when Closure compiler
  185. * is configured to use type information to rename properties, because it can't figure out which
  186. * class properties are coming from. This interface seems to work around the issue while preserving
  187. * our type safety (alternative being using `any` everywhere).
  188. * @docs-private
  189. */
  190. interface MatFormFieldControl<T> extends MatFormFieldControl$1<T> {
  191. }
  192. /** Container for form controls that applies Material Design styling and behavior. */
  193. declare class MatFormField implements FloatingLabelParent, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
  194. _elementRef: ElementRef<any>;
  195. private _changeDetectorRef;
  196. private _dir;
  197. private _platform;
  198. private _idGenerator;
  199. private _ngZone;
  200. private _injector;
  201. private _defaults;
  202. _textField: ElementRef<HTMLElement>;
  203. _iconPrefixContainer: ElementRef<HTMLElement>;
  204. _textPrefixContainer: ElementRef<HTMLElement>;
  205. _iconSuffixContainer: ElementRef<HTMLElement>;
  206. _textSuffixContainer: ElementRef<HTMLElement>;
  207. _floatingLabel: MatFormFieldFloatingLabel | undefined;
  208. _notchedOutline: MatFormFieldNotchedOutline | undefined;
  209. _lineRipple: MatFormFieldLineRipple | undefined;
  210. _formFieldControl: MatFormFieldControl<any>;
  211. _prefixChildren: QueryList<MatPrefix>;
  212. _suffixChildren: QueryList<MatSuffix>;
  213. _errorChildren: QueryList<MatError>;
  214. _hintChildren: QueryList<MatHint>;
  215. private readonly _labelChild;
  216. /** Whether the required marker should be hidden. */
  217. get hideRequiredMarker(): boolean;
  218. set hideRequiredMarker(value: BooleanInput);
  219. private _hideRequiredMarker;
  220. /**
  221. * Theme color of the form field. This API is supported in M2 themes only, it
  222. * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.
  223. *
  224. * For information on applying color variants in M3, see
  225. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  226. */
  227. color: ThemePalette;
  228. /** Whether the label should always float or float as the user types. */
  229. get floatLabel(): FloatLabelType;
  230. set floatLabel(value: FloatLabelType);
  231. private _floatLabel;
  232. /** The form field appearance style. */
  233. get appearance(): MatFormFieldAppearance;
  234. set appearance(value: MatFormFieldAppearance);
  235. private _appearance;
  236. /**
  237. * Whether the form field should reserve space for one line of hint/error text (default)
  238. * or to have the spacing grow from 0px as needed based on the size of the hint/error content.
  239. * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.
  240. */
  241. get subscriptSizing(): SubscriptSizing;
  242. set subscriptSizing(value: SubscriptSizing);
  243. private _subscriptSizing;
  244. /** Text for the form field hint. */
  245. get hintLabel(): string;
  246. set hintLabel(value: string);
  247. private _hintLabel;
  248. _hasIconPrefix: boolean;
  249. _hasTextPrefix: boolean;
  250. _hasIconSuffix: boolean;
  251. _hasTextSuffix: boolean;
  252. readonly _labelId: string;
  253. readonly _hintLabelId: string;
  254. /** Gets the current form field control */
  255. get _control(): MatFormFieldControl<any>;
  256. set _control(value: MatFormFieldControl<any>);
  257. private _destroyed;
  258. private _isFocused;
  259. private _explicitFormFieldControl;
  260. private _needsOutlineLabelOffsetUpdate;
  261. private _previousControl;
  262. private _previousControlValidatorFn;
  263. private _stateChanges;
  264. private _valueChanges;
  265. private _describedByChanges;
  266. protected readonly _animationsDisabled: boolean;
  267. constructor(...args: unknown[]);
  268. ngAfterViewInit(): void;
  269. ngAfterContentInit(): void;
  270. ngAfterContentChecked(): void;
  271. ngOnDestroy(): void;
  272. /**
  273. * Gets the id of the label element. If no label is present, returns `null`.
  274. */
  275. getLabelId: i0.Signal<string | null>;
  276. /**
  277. * Gets an ElementRef for the element that a overlay attached to the form field
  278. * should be positioned relative to.
  279. */
  280. getConnectedOverlayOrigin(): ElementRef;
  281. /** Animates the placeholder up and locks it in position. */
  282. _animateAndLockLabel(): void;
  283. /** Initializes the registered form field control. */
  284. private _initializeControl;
  285. private _checkPrefixAndSuffixTypes;
  286. /** Initializes the prefix and suffix containers. */
  287. private _initializePrefixAndSuffix;
  288. /**
  289. * Initializes the subscript by validating hints and synchronizing "aria-describedby" ids
  290. * with the custom form field control. Also subscribes to hint and error changes in order
  291. * to be able to validate and synchronize ids on change.
  292. */
  293. private _initializeSubscript;
  294. /** Throws an error if the form field's control is missing. */
  295. private _assertFormFieldControl;
  296. private _updateFocusState;
  297. /**
  298. * The floating label in the docked state needs to account for prefixes. The horizontal offset
  299. * is calculated whenever the appearance changes to `outline`, the prefixes change, or when the
  300. * form field is added to the DOM. This method sets up all subscriptions which are needed to
  301. * trigger the label offset update.
  302. */
  303. private _initializeOutlineLabelOffsetSubscriptions;
  304. /** Whether the floating label should always float or not. */
  305. _shouldAlwaysFloat(): boolean;
  306. _hasOutline(): boolean;
  307. /**
  308. * Whether the label should display in the infix. Labels in the outline appearance are
  309. * displayed as part of the notched-outline and are horizontally offset to account for
  310. * form field prefix content. This won't work in server side rendering since we cannot
  311. * measure the width of the prefix container. To make the docked label appear as if the
  312. * right offset has been calculated, we forcibly render the label inside the infix. Since
  313. * the label is part of the infix, the label cannot overflow the prefix content.
  314. */
  315. _forceDisplayInfixLabel(): boolean | 0;
  316. _hasFloatingLabel: i0.Signal<boolean>;
  317. _shouldLabelFloat(): boolean;
  318. /**
  319. * Determines whether a class from the AbstractControlDirective
  320. * should be forwarded to the host element.
  321. */
  322. _shouldForward(prop: keyof AbstractControlDirective): boolean;
  323. /** Gets the type of subscript message to render (error or hint). */
  324. _getSubscriptMessageType(): 'error' | 'hint';
  325. /** Handle label resize events. */
  326. _handleLabelResized(): void;
  327. /** Refreshes the width of the outline-notch, if present. */
  328. _refreshOutlineNotchWidth(): void;
  329. /** Does any extra processing that is required when handling the hints. */
  330. private _processHints;
  331. /**
  332. * Ensure that there is a maximum of one of each "mat-hint" alignment specified. The hint
  333. * label specified set through the input is being considered as "start" aligned.
  334. *
  335. * This method is a noop if Angular runs in production mode.
  336. */
  337. private _validateHints;
  338. /**
  339. * Sets the list of element IDs that describe the child control. This allows the control to update
  340. * its `aria-describedby` attribute accordingly.
  341. */
  342. private _syncDescribedByIds;
  343. /**
  344. * Updates the horizontal offset of the label in the outline appearance. In the outline
  345. * appearance, the notched-outline and label are not relative to the infix container because
  346. * the outline intends to surround prefixes, suffixes and the infix. This means that the
  347. * floating label by default overlaps prefixes in the docked state. To avoid this, we need to
  348. * horizontally offset the label by the width of the prefix container. The MDC text-field does
  349. * not need to do this because they use a fixed width for prefixes. Hence, they can simply
  350. * incorporate the horizontal offset into their default text-field styles.
  351. */
  352. private _updateOutlineLabelOffset;
  353. /** Checks whether the form field is attached to the DOM. */
  354. private _isAttachedToDom;
  355. static ɵfac: i0.ɵɵFactoryDeclaration<MatFormField, never>;
  356. static ɵcmp: i0.ɵɵComponentDeclaration<MatFormField, "mat-form-field", ["matFormField"], { "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; }; "color": { "alias": "color"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; }, {}, ["_labelChild", "_formFieldControl", "_prefixChildren", "_suffixChildren", "_errorChildren", "_hintChildren"], ["mat-label", "[matPrefix], [matIconPrefix]", "[matTextPrefix]", "*", "[matTextSuffix]", "[matSuffix], [matIconSuffix]", "mat-error, [matError]", "mat-hint:not([align='end'])", "mat-hint[align='end']"], true, never>;
  357. }
  358. export { MatFormField as M, MatHint as a, MatError as b, MatPrefix as c, MatSuffix as d, MAT_ERROR as e, MAT_PREFIX as f, MAT_SUFFIX as g, MAT_FORM_FIELD as j, MAT_FORM_FIELD_DEFAULT_OPTIONS as k };
  359. export type { FloatLabelType as F, SubscriptSizing as S, MatFormFieldAppearance as h, MatFormFieldDefaultOptions as i };