fix(material/schematics): add slider input & change template updates (#…

…25952)

* fix(material/schematics): add slider input & change template updates

* fixup! fix(material/schematics): add slider input & change template updates

* fixup! fix(material/schematics): add slider input & change template updates

* fixup! fix(material/schematics): add slider input & change template updates

(cherry picked from commit cc9b530)

src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-template.spec.ts

@@ -134,4 +134,27 @@ describe('slider template migrator', () => {
       <mat-slider><input matSliderThumb /></mat-slider>`,
     );
   });
+
+  it('should remap input & output event handlers', async () => {
+    await runMigrationTest(
+      `
+      <mat-slider (input)="myInputHandler($event)"></mat-slider>`,
+      `
+      <mat-slider #ngSlider><input matSliderThumb (input)="myInputHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" /></mat-slider>`,
+    );
+    await runMigrationTest(
+      `
+      <mat-slider (change)="myChangeHandler($event)"></mat-slider>`,
+      `
+      <mat-slider #ngSlider><input matSliderThumb (change)="myChangeHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" /></mat-slider>`,
+    );
+    await runMigrationTest(
+      `
+      <mat-slider
+        (input)="myInputHandler($event)"
+        (change)="myChangeHandler($event)"></mat-slider>`,
+      `
+      <mat-slider #ngSlider><input matSliderThumb (input)="myInputHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" (change)="myChangeHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" /></mat-slider>`,
+    );
+  });
 });

src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-template.ts

@@ -42,6 +42,8 @@ export class SliderTemplateMigrator extends TemplateMigrator {
         const inputBindings: string[] = [];
         const comments: string[] = [];
 
+        let alreadyAppendedTemplateVars = false;
+
         for (let i = 0; i < bindings.length; i++) {
           const binding = bindings[i];
 
@@ -71,7 +73,29 @@ export class SliderTemplateMigrator extends TemplateMigrator {
             updates.push(this._removeBinding(originalHtml, binding.node));
           }
 
-          // TODO(wagnermaciel): Finish the remapping of other bindings.
+          if (binding.name === 'input' || binding.name === 'change') {
+            // Replace $event with a MatSliderChange object.
+            const sourceSpan = binding.node.sourceSpan;
+            const oldBindingStr = originalHtml.slice(
+              sourceSpan.start.offset,
+              sourceSpan.end.offset,
+            );
+            const newBindingStr = oldBindingStr.replace(
+              '$event',
+              '{source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}',
+            );
+
+            // Remove the old binding and add the new binding to the <input>.
+            inputBindings.push(newBindingStr);
+            updates.push(this._removeBinding(originalHtml, binding.node));
+
+            if (!alreadyAppendedTemplateVars) {
+              // Add the necessary template vars used in the MatSliderChange object.
+              inputBindings.push('#ngSliderThumb="matSliderThumb"');
+              updates.push(this._insertTemplateVar(node, 'ngSlider'));
+              alreadyAppendedTemplateVars = true;
+            }
+          }
         }
 
         if (comments.length) {
@@ -94,7 +118,18 @@ export class SliderTemplateMigrator extends TemplateMigrator {
     return updates;
   }
 
-  /** Returns an update the adds the given comments before the given template ast element. */
+  /** Returns an update that inserts a template var at the end of the given node. */
+  private _insertTemplateVar(node: compiler.TmplAstElement, varName: string): Update {
+    return {
+      offset: node.startSourceSpan.end.offset - 1,
+      updateFn: html =>
+        html.slice(0, node.startSourceSpan.end.offset - 1) + // -1 to stop before the closing '>'
+        ` #${varName}` +
+        html.slice(node.startSourceSpan.end.offset - 1),
+    };
+  }
+
+  /** Returns an update that adds the given comments before the given template ast element. */
   private _addComments(node: compiler.TmplAstElement, comments: string[]): Update {
     const whitespace = this._parseIndentation(node);
     const indentation = '\n' + this._parseIndentation(node);

src/material/slider/public-api.ts

@@ -9,5 +9,5 @@
 export {MatSlider} from './slider';
 export {MatSliderVisualThumb} from './slider-thumb';
 export {MatSliderThumb, MatSliderRangeThumb} from './slider-input';
-export {MatSliderDragEvent} from './slider-interface';
+export {MatSliderDragEvent, MatSliderChange} from './slider-interface';
 export {MatSliderModule} from './module';

src/material/slider/slider-interface.ts

@@ -65,6 +65,22 @@ export interface MatSliderDragEvent {
   value: number;
 }
 
+/**
+ * A simple change event emitted by the MatSlider component.
+ * @deprecated Use event bindings directly on the MatSliderThumbs for `change` and `input` events. See https://material.angular.io/guide/mdc-migration for information about migrating.
+ * @breaking-change 17.0.0
+ */
+export class MatSliderChange {
+  /** The MatSliderThumb that was interacted with. */
+  source: _MatSliderThumb;
+
+  /** The MatSlider that was interacted with. */
+  parent: _MatSlider;
+
+  /** The new value of the source slider. */
+  value: number;
+}
+
 export interface _MatSlider {
   /** Gets the slider thumb input of the given thumb position. */
   _getInput(thumbPosition: _MatThumb): _MatSliderThumb | _MatSliderRangeThumb | undefined;

tools/public_api_guard/material/slider.md

@@ -120,6 +120,13 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, Can
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
 }
 
+// @public @deprecated
+export class MatSliderChange {
+    parent: _MatSlider;
+    source: _MatSliderThumb;
+    value: number;
+}
+
 // @public
 export interface MatSliderDragEvent {
     parent: _MatSlider;