fix(clipboard): namespace copied output name (#17598)

Since the `cdkCopyToClipboard` is a directive that uses an element selector, the name of the `copied` output needs to be namespaced. Since the API is already released, these changes deprecate the unprefixed version and add a prefixed one.

Author: crisbeto

src/cdk/clipboard/copy-to-clipboard.spec.ts

@@ -8,7 +8,10 @@ const COPY_CONTENT = 'copy content';
 
 @Component({
   selector: 'copy-to-clipboard-host',
-  template: `<button [cdkCopyToClipboard]="content" (copied)="copied.emit($event)"></button>`,
+  template: `
+    <button
+    [cdkCopyToClipboard]="content"
+    (cdkCopyToClipboardCopied)="copied.emit($event)"></button>`,
 })
 class CopyToClipboardHost {
   @Input() content = '';

src/cdk/clipboard/copy-to-clipboard.ts

@@ -28,7 +28,15 @@ export class CdkCopyToClipboard {
    * Emits when some text is copied to the clipboard. The
    * emitted value indicates whether copying was successful.
    */
-  @Output() copied = new EventEmitter<boolean>();
+  @Output('cdkCopyToClipboardCopied') copied = new EventEmitter<boolean>();
+
+  /**
+   * Emits when some text is copied to the clipboard. The
+   * emitted value indicates whether copying was successful.
+   * @deprecated Use `cdkCopyToClipboardCopied` instead.
+   * @breaking-change 10.0.0
+   */
+  @Output('copied') _deprecatedCopied = this.copied;
 
   constructor(private readonly _clipboard: Clipboard) {}
 

tools/public_api_guard/cdk/clipboard.d.ts

@@ -1,4 +1,5 @@
 export declare class CdkCopyToClipboard {
+    _deprecatedCopied: EventEmitter<boolean>;
     copied: EventEmitter<boolean>;
     text: string;
     constructor(_clipboard: Clipboard);