feat: move clipboard module into cdk (#17272)

Moves the `clipboard` module into CDK stable, sets up the API goldens, adjusts some APIs to be more consistent and sets up a live example.

.github/CODEOWNERS

@@ -66,6 +66,7 @@
 /src/cdk/a11y/**                                   @jelbourn @devversion
 /src/cdk/accordion/**                              @jelbourn
 /src/cdk/bidi/**                                   @jelbourn
+/src/cdk/clipboard/**                              @jelbourn @xkxx
 /src/cdk/coercion/**                               @jelbourn
 /src/cdk/collections/**                            @jelbourn @crisbeto @andrewseguin
 /src/cdk/drag-drop/**                              @crisbeto
@@ -114,7 +115,7 @@
 /src/material-experimental/select/**               @crisbeto
 
 # CDK experimental package
-/src/cdk-experimental/**                           @jelbourn
+/src/cdk-experimental/*                            @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @crisbeto
 /src/cdk-experimental/popover-edit/**              @kseamon @andrewseguin
 /src/cdk-experimental/scrolling/**                 @mmalerba
@@ -243,6 +244,7 @@
 /tools/public_api_guard/cdk/accordion.d.ts         @jelbourn
 /tools/public_api_guard/cdk/bidi.d.ts              @jelbourn
 /tools/public_api_guard/cdk/cdk.d.ts               @jelbourn
+/tools/public_api_guard/cdk/clipboard.d.ts         @jelbourn @xkxx
 /tools/public_api_guard/cdk/coercion.d.ts          @jelbourn
 /tools/public_api_guard/cdk/collections.d.ts       @jelbourn @crisbeto @andrewseguin
 /tools/public_api_guard/cdk/drag-drop.d.ts         @crisbeto

src/cdk-experimental/config.bzl

@@ -1,6 +1,5 @@
 # List of all entry-points of the Angular cdk-experimental package.
 CDK_EXPERIMENTAL_ENTRYPOINTS = [
-    "clipboard",
     "dialog",
     "popover-edit",
     "scrolling",

src/cdk-experimental/clipboard/BUILD.bazel → src/cdk/clipboard/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+load("//tools:defaults.bzl", "markdown_to_html", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
     name = "clipboard",
@@ -9,7 +9,7 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     assets = glob(["**/*.html"]),
-    module_name = "@angular/cdk-experimental/clipboard",
+    module_name = "@angular/cdk/clipboard",
     deps = [
         "@npm//@angular/common",
         "@npm//@angular/core",
@@ -35,3 +35,13 @@ ng_web_test_suite(
     name = "unit_tests",
     deps = [":unit_test_sources"],
 )
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":clipboard.md"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/cdk-experimental/clipboard/clipboard.md → src/cdk/clipboard/clipboard.md

@@ -1,8 +1,17 @@
-**Warning: this service is still experimental. It may have bugs and the API may change at any
-time**
-
 The clipboard package provides helpers for working with the system clipboard.
 
+## `cdkCopyToClipboard` directive
+
+The `cdkCopyToClipboard` directive can be used to easily add copy-on-click
+functionality to an existing element. The directive selector doubles as an
+`@Input()` for the text to be copied.
+
+```html
+<img src="avatar.jpg" alt="Hero avatar" [cdkCopyToClipboard]="getShortBio()">
+```
+
+<!-- example(cdk-clipboard-overview) -->
+
 ## `Clipboard` service
 
 The `Clipboard` service copies text to the
@@ -50,13 +59,3 @@ class HeroProfile {
   }
 }
 ```
-
-## `cdkCopyToClipboard` directive
-
-The `cdkCopyToClipboard` directive can be used to easily add copy-on-click
-functionality to an existing element. The directive selector doubles as an
-`@Input()` for the text to be copied.
-
-```html
-<img src="avatar.jpg" alt="Hero avatar" [cdkCopyToClipboard]="getShortBio()">
-```

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

@@ -21,18 +21,23 @@ import {Clipboard} from './clipboard';
 @Directive({
   selector: '[cdkCopyToClipboard]',
   host: {
-    '(click)': 'doCopy()',
+    '(click)': 'copy()',
   }
 })
 export class CdkCopyToClipboard {
   /** Content to be copied. */
   @Input('cdkCopyToClipboard') text = '';
 
+  /**
+   * Emits when some text is copied to the clipboard. The
+   * emitted value indicates whether copying was successful.
+   */
   @Output() copied = new EventEmitter<boolean>();
 
-  constructor(private readonly clipboard: Clipboard) {}
+  constructor(private readonly _clipboard: Clipboard) {}
 
-  doCopy() {
-    this.copied.emit(this.clipboard.copy(this.text));
+  /** Copies the current text to the clipboard. */
+  copy() {
+    this.copied.emit(this._clipboard.copy(this.text));
   }
 }

src/cdk-experimental/clipboard/tsconfig-build.json → src/cdk/clipboard/tsconfig-build.json

@@ -8,7 +8,7 @@
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
-    "flatModuleId": "@angular/cdk-experimental/clipboard",
+    "flatModuleId": "@angular/cdk/clipboard",
     "skipTemplateCodegen": true,
     "fullTemplateTypeCheck": true
   }

src/cdk/config.bzl

@@ -3,6 +3,7 @@ CDK_ENTRYPOINTS = [
     "a11y",
     "accordion",
     "bidi",
+    "clipboard",
     "coercion",
     "collections",
     "drag-drop",

src/dev-app/system-config.js

@@ -12,6 +12,7 @@ var CDK_PACKAGES = [
   'a11y',
   'accordion',
   'bidi',
+  'clipboard',
   'coercion',
   'collections',
   'drag-drop',

src/material-examples/BUILD.bazel

@@ -10,6 +10,7 @@ EXAMPLE_PACKAGES = [
     "//src/material-examples/cdk/a11y",
     "//src/material-examples/cdk/drag-drop",
     "//src/material-examples/cdk/platform",
+    "//src/material-examples/cdk/clipboard",
     "//src/material-examples/cdk-experimental/popover-edit",
     "//src/material-examples/cdk/portal",
     "//src/material-examples/cdk/scrolling",

src/material-examples/cdk/clipboard/BUILD.bazel

@@ -0,0 +1,26 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "clipboard",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    module_name = "@angular/material-examples/cdk/clipboard",
+    deps = [
+        "//src/cdk/clipboard",
+        "@npm//@angular/forms",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "*/*.html",
+        "*/*.css",
+        "*/*.ts",
+    ]),
+)

src/material-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.css

@@ -0,0 +1,4 @@
+textarea {
+  display: block;
+  margin: 4px 0 8px;
+}

src/material-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.html

@@ -0,0 +1,3 @@
+<label for="clipboard-example-textarea">Text to be copied</label>
+<textarea id="clipboard-example-textarea" cols="30" rows="10" [(ngModel)]="value"></textarea>
+<button [cdkCopyToClipboard]="value">Copy to clipboard</button>

src/material-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Clipboard overview
+ */
+@Component({
+  selector: 'cdk-clipboard-overview-example',
+  templateUrl: 'cdk-clipboard-overview-example.html',
+  styleUrls: ['cdk-clipboard-overview-example.css'],
+})
+export class CdkClipboardOverviewExample {
+  value = `Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It's not ` +
+          `a story the Jedi would tell you. It's a Sith legend. Darth Plagueis was a Dark Lord ` +
+          `of the Sith, so powerful and so wise he could use the Force to influence the ` +
+          `midichlorians to create life… He had such a knowledge of the dark side that he could ` +
+          `even keep the ones he cared about from dying. The dark side of the Force is a pathway ` +
+          `to many abilities some consider to be unnatural. He became so powerful… the only ` +
+          `thing he was afraid of was losing his power, which eventually, of course, he did. ` +
+          `Unfortunately, he taught his apprentice everything he knew, then his apprentice ` +
+          `killed him in his sleep. Ironic. He could save others from death, but not himself.`;
+}

src/material-examples/cdk/clipboard/module.ts

@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {CdkClipboardOverviewExample} from './cdk-clipboard-overview/cdk-clipboard-overview-example';
+
+export {CdkClipboardOverviewExample};
+
+const EXAMPLES = [CdkClipboardOverviewExample];
+
+@NgModule({
+  imports: [ClipboardModule, FormsModule],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class CdkClipboardExamplesModule {
+}

test/karma-system-config.js

@@ -72,6 +72,7 @@ System.config({
     '@angular/cdk/a11y': 'dist/packages/cdk/a11y/index.js',
     '@angular/cdk/accordion': 'dist/packages/cdk/accordion/index.js',
     '@angular/cdk/bidi': 'dist/packages/cdk/bidi/index.js',
+    '@angular/cdk/cliboard': 'dist/packages/cdk/cliboard/index.js',
     '@angular/cdk/coercion': 'dist/packages/cdk/coercion/index.js',
     '@angular/cdk/collections': 'dist/packages/cdk/collections/index.js',
     '@angular/cdk/drag-drop': 'dist/packages/cdk/drag-drop/index.js',

tools/public_api_guard/cdk/clipboard.d.ts

@@ -0,0 +1,21 @@
+export declare class CdkCopyToClipboard {
+    copied: EventEmitter<boolean>;
+    text: string;
+    constructor(_clipboard: Clipboard);
+    copy(): void;
+}
+
+export declare class Clipboard {
+    constructor(document: any);
+    beginCopy(text: string): PendingCopy;
+    copy(text: string): boolean;
+}
+
+export declare class ClipboardModule {
+}
+
+export declare class PendingCopy {
+    constructor(text: string, _document: Document);
+    copy(): boolean;
+    destroy(): void;
+}