Skip to content

Commit a64186a

Browse files
committed
fix(material/schematics): add handling for invert and vertical (#25922)
(cherry picked from commit 0bc9b48)
1 parent 8643c9c commit a64186a

File tree

2 files changed

+76
-0
lines changed

2 files changed

+76
-0
lines changed

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,38 @@ describe('slider template migrator', () => {
7979
);
8080
});
8181
});
82+
83+
it('should add a comment if a binding has no new mapping', async () => {
84+
await runMigrationTest(
85+
`
86+
<mat-slider invert></mat-slider>`,
87+
`
88+
<!-- TODO: The 'invert' property no longer exists -->
89+
<mat-slider><input matSliderThumb /></mat-slider>`,
90+
);
91+
await runMigrationTest(
92+
`
93+
<mat-slider vertical></mat-slider>`,
94+
`
95+
<!-- TODO: The 'vertical' property no longer exists -->
96+
<mat-slider><input matSliderThumb /></mat-slider>`,
97+
);
98+
await runMigrationTest(
99+
`
100+
<mat-slider vertical invert></mat-slider>`,
101+
`
102+
<!-- TODO: The 'vertical' property no longer exists -->
103+
<!-- TODO: The 'invert' property no longer exists -->
104+
<mat-slider><input matSliderThumb /></mat-slider>`,
105+
);
106+
await runMigrationTest(
107+
`
108+
<button>Click Me</button><mat-slider vertical invert></mat-slider>`,
109+
`
110+
<button>Click Me</button>
111+
<!-- TODO: The 'vertical' property no longer exists -->
112+
<!-- TODO: The 'invert' property no longer exists -->
113+
<mat-slider><input matSliderThumb /></mat-slider>`,
114+
);
115+
});
82116
});

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export class SliderTemplateMigrator extends TemplateMigrator {
4040
const originalHtml = node.sourceSpan.start.file.content;
4141
const bindings = this._getBindings(node);
4242
const inputBindings: string[] = [];
43+
const comments: string[] = [];
4344

4445
for (let i = 0; i < bindings.length; i++) {
4546
const binding = bindings[i];
@@ -51,9 +52,19 @@ export class SliderTemplateMigrator extends TemplateMigrator {
5152
updates.push(this._removeBinding(originalHtml, binding.node));
5253
}
5354

55+
if (binding.name === 'invert' || binding.name === 'vertical') {
56+
// Remove the binding and leave a comment.
57+
comments.push(`<!-- TODO: The '${binding.name}' property no longer exists -->`);
58+
updates.push(this._removeBinding(originalHtml, binding.node));
59+
}
60+
5461
// TODO(wagnermaciel): Finish the remapping of other bindings.
5562
}
5663

64+
if (comments.length) {
65+
updates.push(this._addComments(node, comments));
66+
}
67+
5768
const matSliderThumb = inputBindings.length
5869
? `<input matSliderThumb ${inputBindings.join(' ')} />`
5970
: '<input matSliderThumb />';
@@ -70,6 +81,37 @@ export class SliderTemplateMigrator extends TemplateMigrator {
7081
return updates;
7182
}
7283

84+
/** Returns an update the adds the given comments before the given template ast element. */
85+
private _addComments(node: compiler.TmplAstElement, comments: string[]): Update {
86+
const whitespace = this._parseIndentation(node);
87+
const indentation = '\n' + this._parseIndentation(node);
88+
89+
// If everything leading up to the mat-slider start tag
90+
// was whitespace, we don't need to start on a new line.
91+
const commentStr =
92+
whitespace.length === node.sourceSpan.start.col
93+
? comments.join(indentation)
94+
: indentation + comments.join(indentation);
95+
96+
return {
97+
offset: node.sourceSpan.start.offset,
98+
updateFn: (html: string) =>
99+
html.slice(0, node.sourceSpan.start.offset) +
100+
commentStr +
101+
`${indentation}${html.slice(node.sourceSpan.start.offset)}`,
102+
};
103+
}
104+
105+
/** Returns the whitespace at the start of the given node's line. */
106+
private _parseIndentation(node: compiler.TmplAstElement): string {
107+
const html = node.sourceSpan.start.file.content;
108+
const before = html.slice(
109+
node.sourceSpan.start.offset - node.sourceSpan.start.col,
110+
node.sourceSpan.start.offset,
111+
);
112+
return before.slice(0, before.length - before.trimStart().length);
113+
}
114+
73115
/** Returns an update that removes the given binding from the given template ast element. */
74116
private _removeBinding(originalHtml: string, binding: compiler.TmplAstNode): Update {
75117
let charIndex = binding.sourceSpan.start.offset - 1;

0 commit comments

Comments
 (0)