build: add clipboard to dev app

Currently we don't have an easy way of debugging the `cdk/clipboard` module locally. These changes add a page to the dev app.

Author: crisbeto

.github/CODEOWNERS

@@ -139,6 +139,7 @@
 /src/dev-app/card/**                               @jelbourn
 /src/dev-app/checkbox/**                           @jelbourn @devversion
 /src/dev-app/chips/**                              @jelbourn
+/src/dev-app/clipboard/**                          @jelbourn @xkxx
 /src/dev-app/column-resize/**                      @kseamon @andrewseguin
 /src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
 /src/dev-app/dataset/**                            @andrewseguin

src/dev-app/BUILD.bazel

@@ -25,6 +25,7 @@ ng_module(
         "//src/dev-app/card",
         "//src/dev-app/checkbox",
         "//src/dev-app/chips",
+        "//src/dev-app/clipboard",
         "//src/dev-app/column-resize",
         "//src/dev-app/connected-overlay",
         "//src/dev-app/datepicker",

src/dev-app/clipboard/BUILD.bazel

@@ -0,0 +1,22 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+ng_module(
+    name = "clipboard",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        ":clipboard_demo_scss",
+        "clipboard-demo.html",
+    ],
+    deps = [
+        "//src/cdk/clipboard",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "clipboard_demo_scss",
+    src = "clipboard-demo.scss",
+)

src/dev-app/clipboard/clipboard-demo-module.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {ClipboardDemo} from './clipboard-demo';
+
+@NgModule({
+  imports: [
+    ClipboardModule,
+    FormsModule,
+    RouterModule.forChild([{path: '', component: ClipboardDemo}]),
+  ],
+  declarations: [ClipboardDemo],
+})
+export class ClipboardDemoModule {
+}

src/dev-app/clipboard/clipboard-demo.html

@@ -0,0 +1,14 @@
+<section>
+  <label for="example-textarea">Text to be copied</label>
+  <textarea id="example-textarea" cols="30" rows="10" [(ngModel)]="value"></textarea>
+</section>
+
+<section>
+  <label for="example-attempts-input">Copy attempts</label>
+  <input id="example-attempts-input" type="number" [(ngModel)]="attempts"/>
+</section>
+
+<button (click)="copyViaService()">Copy to clipboard via service</button>
+<button
+  [cdkCopyToClipboard]="value"
+  [cdkCopyToClipboardAttempts]="attempts">Copy to clipboard via directive</button>

src/dev-app/clipboard/clipboard-demo.scss

@@ -0,0 +1,8 @@
+label {
+  display: block;
+}
+
+section {
+  margin: 8px 0;
+}
+

src/dev-app/clipboard/clipboard-demo.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import {Clipboard} from '@angular/cdk/clipboard';
+
+
+@Component({
+  selector: 'clipboard-demo',
+  styleUrls: ['clipboard-demo.css'],
+  templateUrl: 'clipboard-demo.html',
+})
+export class ClipboardDemo {
+  attempts = 3;
+
+  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.`;
+
+  constructor(private _clipboard: Clipboard) {}
+
+  copyViaService() {
+    this._clipboard.copy(this.value);
+  }
+}

src/dev-app/dev-app/dev-app-layout.ts

@@ -31,6 +31,7 @@ export class DevAppLayout {
     {name: 'Card', route: '/card'},
     {name: 'Checkbox', route: '/checkbox'},
     {name: 'Chips', route: '/chips'},
+    {name: 'Clipboard', route: '/clipboard'},
     {name: 'Column Resize', route: 'column-resize'},
     {name: 'Connected Overlay', route: '/connected-overlay'},
     {name: 'Datepicker', route: '/datepicker'},

src/dev-app/dev-app/routes.ts

@@ -30,6 +30,7 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'card', loadChildren: 'card/card-demo-module#CardDemoModule'},
   {path: 'checkbox', loadChildren: 'checkbox/checkbox-demo-module#CheckboxDemoModule'},
   {path: 'chips', loadChildren: 'chips/chips-demo-module#ChipsDemoModule'},
+  {path: 'clipboard', loadChildren: 'clipboard/clipboard-demo-module#ClipboardDemoModule'},
   {
     path: 'column-resize',
     loadChildren: 'column-resize/column-resize-demo-module#ColumnResizeDemoModule'