fix(copy): renamed inputs for consistency, removed unlocalizable text…

…, etc. (#403)

Made BlockCopyComponent.uniqueID protected
Removed unlocalizable, default 'Copy' button label
Renamed copyBtnAriaLabel as buttonAriaLabel to match buttonLabel input
Renamed expandBtnAriaLabel as expandToggleAriaLabel to match other components
Simplified copyValue as value to match other components
Simplified copiedToClipboard event as onCopy

src/app/copy/block-copy/block-copy.component.html

@@ -2,11 +2,11 @@
   <label
     *ngIf="label"
     class="pfng-block-copy-label"
-    [attr.for]="copyBtnId">{{label}}</label>
+    [attr.for]="buttonId">{{label}}</label>
   <div class="pfng-block-copy-inner-container">
     <div class="pfng-block-copy-preview" [ngClass]="{'pf-is-open': expanded}">
       <button
-        [attr.aria-label]="expandBtnAriaLabel"
+        [attr.aria-label]="expandToggleAriaLabel"
         [attr.aria-expanded]="expanded"
         class="pfng-block-copy-preview-btn"
         (click)="togglePanel()">
@@ -19,15 +19,15 @@
         class="pfng-block-copy-preview-txt-cont"
         placement="{{tooltipPlacement ? tooltipPlacement : null}}"
         tooltip="{{tooltip ? tooltip : null}}">
-        <span class="pfng-block-copy-preview-txt">{{copyValue}}</span>
+        <span class="pfng-block-copy-preview-txt">{{value}}</span>
       </div>
       <button
-        [attr.id]="copyBtnId"
+        [attr.id]="buttonId"
         class="btn btn-lg btn-default pfng-block-copy-btn"
-        [attr.aria-label]="copyBtnAriaLabel"
-        (click)="copyToClipboard()">
+        [attr.aria-label]="buttonAriaLabel"
+        (click)="copy()">
         <span>
-          <ng-container *ngIf="!recentlyCopied">{{copyBtnLabel}}</ng-container>
+          <ng-container *ngIf="!recentlyCopied">{{buttonLabel}}</ng-container>
           <ng-container *ngIf="recentlyCopied">
             <i class="fa fa-check" aria-hidden="true"></i>
             Copied
@@ -36,7 +36,7 @@
         </button>
     </div>
     <div class="pfng-block-copy-body" *ngIf="expanded">
-      <span>{{copyValue}}</span>
+      <span>{{value}}</span>
     </div>
   </div>
 </div>

src/app/copy/block-copy/block-copy.component.spec.ts

@@ -31,9 +31,9 @@ describe('Block Copy Component - ', () => {
     .then(() => {
       componentConfig = {
         label: 'Block-level Foobar',
-        copyValue: 'Token',
-        expandBtnAriaLabel: 'Expand Block-level Foobar',
-        tooltip: 'Block Copy Tooltip'
+        expandToggleAriaLabel: 'Expand Block-level Foobar',
+        tooltip: 'Block Copy Tooltip',
+        value: 'Token'
       };
     })
     .then(() => {
@@ -59,8 +59,8 @@ describe('Block Copy Component - ', () => {
   });
 
   it('should ensure there is a single copy value container', () => {
-    const numCopyValueContainers = fixture.debugElement.queryAll(By.css('.pfng-block-copy-preview-txt-cont')).length;
-    expect(numCopyValueContainers).toBe(1);
+    const numValueContainers = fixture.debugElement.queryAll(By.css('.pfng-block-copy-preview-txt-cont')).length;
+    expect(numValueContainers).toBe(1);
   });
 
   it('should ensure there is a single copy button', () => {

src/app/copy/block-copy/block-copy.component.ts

@@ -26,29 +26,29 @@ import { CopyService } from '../copy-service/copy.service';
 })
 export class BlockCopyComponent extends CopyBase {
   /**
-   * Label naming the block copy component
+   * Label output above the block copy component
    */
   @Input('label') label: string;
 
   /**
-   * Copy button text
+   * Copy button label
    */
-  @Input('copyBtnLabel') copyBtnLabel: string = 'Copy';
+  @Input('buttonLabel') buttonLabel: string;
 
   /**
-   * Controls the expanded state of block copy
+   * Flag indicating the expanded state for the expansion panel
    */
   @Input('expanded') expanded: boolean = false;
 
   /**
-   * Expand/toggle button aria label (announced to screen readers)
+   * Aria label for the expansion toggle
    */
-  @Input('expandBtnAriaLabel') expandBtnAriaLabel: string;
+  @Input('expandToggleAriaLabel') expandToggleAriaLabel: string;
 
   /**
-   * Generates a unique value for an id
+   * Generates a unique prefix for element IDs
    */
-  public uniqueID: string = uniqueId('pfng-block-copy');
+  protected uniqueID: string = uniqueId('pfng-block-copy');
 
   /**
    * The default constructor
@@ -58,23 +58,16 @@ export class BlockCopyComponent extends CopyBase {
   }
 
   /**
-   * Used to uniquly relate label to copy button
+   * Generates a unique ID for the button
    */
-  get copyBtnId(): string {
+  get buttonId(): string {
     return `${this.uniqueID}-button`;
   }
 
   /**
-   * Toggle copyValue panel open and close
+   * Toggle expansion panel open and close
    */
   togglePanel(): void {
     this.expanded = !this.expanded;
   }
-
-  /**
-   * Copies the label value to the users clipboard
-   */
-  copyToClipboard(): void {
-    this.copyValueToClipboard();
-  }
 }

src/app/copy/block-copy/example/block-copy-basic-example.component.html

@@ -3,13 +3,13 @@
     <div class="col-sm-8 padding-bottom-15">
       <p>This basic example illustrates how you can control various bits of text within the component. Block copy is not intended for use with small strings of text.</p>
       <pfng-block-copy
-        [copyBtnLabel]="basicEx01.copyBtnLabel"
-        [copyBtnAriaLabel]="basicEx01.copyBtnAriaLabel"
-        [copyValue]="basicEx01.copyValue"
-        [expandBtnAriaLabel]="basicEx01.expandBtnAriaLabel"
+        [buttonAriaLabel]="basicEx01.buttonAriaLabel"
+        [buttonLabel]="basicEx01.buttonLabel"
+        [expandToggleAriaLabel]="basicEx01.expandToggleAriaLabel"
         [label]="basicEx01.label"
         [tooltip]="basicEx01.tooltip"
-        (onCopyToClipboard)="handleCopyToClipboard($event)"></pfng-block-copy>
+        [value]="basicEx01.value"
+        (onCopy)="handleCopy($event)"></pfng-block-copy>
     </div>
   </div>
   <div class="row padding-top-10">

src/app/copy/block-copy/example/block-copy-basic-example.component.ts

@@ -14,20 +14,20 @@ import {NotificationType} from '../../../notification/notification-type';
 export class BlockCopyBasicExampleComponent implements OnInit {
   actionsText: string = '';
   basicEx01 = {
-    // tslint:disable-next-line:max-line-length
-    copyValue: '{"swagger":"2.0","info":{"version":"1.0.0","title":"Swagger Petstore","description":"A sample API that uses a petstore as an example to demonstrate features in the swagger-2.0 specification","termsOfService":"http://swagger.io/terms/","contact":{"name":"Swagger API Team"},"license":{"name":"MIT"}},"host":"petstore.swagger.io","basePath":"/api","schemes":["http"],"consumes":["application/json"],"produces":["application/json"],"paths":{"/pets":{"get":{"description":"Returns all pets from the system that the user has access to","operationId":"findPets","produces":["application/json","application/xml","text/xml","text/html"],"parameters":[{"name":"tags","in":"query","description":"tags to filter by","required":false,"type":"array","items":{"type":"string"},"collectionFormat":"csv"},{"name":"limit","in":"query","description":"maximum number of results to return","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"pet response","schema":{"type":"array","items":{"$ref":"#/definitions/Pet"}}},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}},"post":{"description":"Creates a new pet in the store.  Duplicates are allowed","operationId":"addPet","produces":["application/json"],"parameters":[{"name":"pet","in":"body","description":"Pet to add to the store","required":true,"schema":{"$ref":"#/definitions/NewPet"}}],"responses":{"200":{"description":"pet response","schema":{"$ref":"#/definitions/Pet"}},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}}},"/pets/{id}":{"get":{"description":"Returns a user based on a single ID, if the user does not have access to the pet","operationId":"findPetById","produces":["application/json","application/xml","text/xml","text/html"],"parameters":[{"name":"id","in":"path","description":"ID of pet to fetch","required":true,"type":"integer","format":"int64"}],"responses":{"200":{"description":"pet response","schema":{"$ref":"#/definitions/Pet"}},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}},"delete":{"description":"deletes a single pet based on the ID supplied","operationId":"deletePet","parameters":[{"name":"id","in":"path","description":"ID of pet to delete","required":true,"type":"integer","format":"int64"}],"responses":{"204":{"description":"pet deleted"},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}}}},"definitions":{"Pet":{"type":"object","allOf":[{"$ref":"#/definitions/NewPet"},{"required":["id"],"properties":{"id":{"type":"integer","format":"int64"}}}]},"NewPet":{"type":"object","required":["name"],"properties":{"name":{"type":"string"},"tag":{"type":"string"}}},"ErrorModel":{"type":"object","required":["code","message"],"properties":{"code":{"type":"integer","format":"int32"},"message":{"type":"string"}}}}}',
-    copyBtnLabel: 'Copy JSON',
-    copyBtnAriaLabel: 'Copy Swagger JSON',
-    expandBtnAriaLabel: 'Toggle Swagger JSON',
+    buttonLabel: 'Copy JSON',
+    buttonAriaLabel: 'Copy Swagger JSON',
+    expandToggleAriaLabel: 'Toggle Swagger JSON',
     label: 'Swagger JSON',
-    tooltip: 'Example Swagger JSON Snippet'
+    tooltip: 'Example Swagger JSON Snippet',
+    // tslint:disable-next-line:max-line-length
+    value: '{"swagger":"2.0","info":{"version":"1.0.0","title":"Swagger Petstore","description":"A sample API that uses a petstore as an example to demonstrate features in the swagger-2.0 specification","termsOfService":"http://swagger.io/terms/","contact":{"name":"Swagger API Team"},"license":{"name":"MIT"}},"host":"petstore.swagger.io","basePath":"/api","schemes":["http"],"consumes":["application/json"],"produces":["application/json"],"paths":{"/pets":{"get":{"description":"Returns all pets from the system that the user has access to","operationId":"findPets","produces":["application/json","application/xml","text/xml","text/html"],"parameters":[{"name":"tags","in":"query","description":"tags to filter by","required":false,"type":"array","items":{"type":"string"},"collectionFormat":"csv"},{"name":"limit","in":"query","description":"maximum number of results to return","required":false,"type":"integer","format":"int32"}],"responses":{"200":{"description":"pet response","schema":{"type":"array","items":{"$ref":"#/definitions/Pet"}}},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}},"post":{"description":"Creates a new pet in the store.  Duplicates are allowed","operationId":"addPet","produces":["application/json"],"parameters":[{"name":"pet","in":"body","description":"Pet to add to the store","required":true,"schema":{"$ref":"#/definitions/NewPet"}}],"responses":{"200":{"description":"pet response","schema":{"$ref":"#/definitions/Pet"}},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}}},"/pets/{id}":{"get":{"description":"Returns a user based on a single ID, if the user does not have access to the pet","operationId":"findPetById","produces":["application/json","application/xml","text/xml","text/html"],"parameters":[{"name":"id","in":"path","description":"ID of pet to fetch","required":true,"type":"integer","format":"int64"}],"responses":{"200":{"description":"pet response","schema":{"$ref":"#/definitions/Pet"}},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}},"delete":{"description":"deletes a single pet based on the ID supplied","operationId":"deletePet","parameters":[{"name":"id","in":"path","description":"ID of pet to delete","required":true,"type":"integer","format":"int64"}],"responses":{"204":{"description":"pet deleted"},"default":{"description":"unexpected error","schema":{"$ref":"#/definitions/ErrorModel"}}}}}},"definitions":{"Pet":{"type":"object","allOf":[{"$ref":"#/definitions/NewPet"},{"required":["id"],"properties":{"id":{"type":"integer","format":"int64"}}}]},"NewPet":{"type":"object","required":["name"],"properties":{"name":{"type":"string"},"tag":{"type":"string"}}},"ErrorModel":{"type":"object","required":["code","message"],"properties":{"code":{"type":"integer","format":"int32"},"message":{"type":"string"}}}}}',
   };
 
   constructor() {}
 
   ngOnInit() {}
 
-  handleCopyToClipboard($event: CopyEvent): void {
+  handleCopy($event: CopyEvent): void {
     this.actionsText = 'Copied: ' + $event.value + '\r\n' + this.actionsText;
   }
 }

src/app/copy/block-copy/example/block-copy-expanded-example.component.html

@@ -3,13 +3,13 @@
       <div class="col-sm-8 padding-bottom-15">
         <p>Here the component is rendered open by default. Expanded state is properly announced to assistive technologies.</p>
         <pfng-block-copy
-          [copyBtnAriaLabel]="expandedEx01.copyBtnAriaLabel"
-          [copyBtnLabel]="expandedEx01.copyBtnLabel"
-          [copyValue]="expandedEx01.copyValue"
-          [expandBtnAriaLabel]="expandedEx01.expandBtnAriaLabel"
+          [buttonAriaLabel]="expandedEx01.buttonAriaLabel"
+          [buttonLabel]="expandedEx01.buttonLabel"
+          [expandToggleAriaLabel]="expandedEx01.expandToggleAriaLabel"
           [expanded]="expandedEx01.expanded"
           [label]="expandedEx01.label"
-          (onCopyToClipboard)="handleCopyToClipboard($event)"></pfng-block-copy>
+          [value]="expandedEx01.value"
+          (onCopy)="handleCopy($event)"></pfng-block-copy>
       </div>
   </div>
   <div class="row padding-top-10">

src/app/copy/block-copy/example/block-copy-expanded-example.component.ts

@@ -12,17 +12,17 @@ import {CopyEvent} from '../../copy-event';
 export class BlockCopyExpandedExampleComponent {
   actionsText: string = '';
   expandedEx01 = {
-    copyBtnAriaLabel: 'Copy GraphQl Query',
-    copyBtnLabel: 'Copy Query',
-    copyValue: 'query HeroNameAndFriends($episode: Episode) {hero(episode: $episode) {name friends {name}}}',
-    expandBtnAriaLabel: 'Toggle GraphQL Query',
+    buttonAriaLabel: 'Copy GraphQl Query',
+    buttonLabel: 'Copy Query',
+    expandToggleAriaLabel: 'Toggle GraphQL Query',
     expanded: true,
-    label: 'GraphQL Query'
+    label: 'GraphQL Query',
+    value: 'query HeroNameAndFriends($episode: Episode) {hero(episode: $episode) {name friends {name}}}'
   };
 
   constructor() {}
 
-  handleCopyToClipboard($event: CopyEvent): void {
+  handleCopy($event: CopyEvent): void {
     this.actionsText = 'Copied: ' + $event.value + '\r\n' + this.actionsText;
   }
 }

src/app/copy/block-copy/example/block-copy-notification-example.component.html

@@ -4,15 +4,15 @@
     <div class="col-sm-8 padding-bottom-15">
       <p>This example illustrates how copiedToClipboard event can be used to notify user of successful copy action.</p>
       <pfng-block-copy
-        [copyBtnAriaLabel]="cbExConfig.copyBtnAriaLabel"
-        [copyBtnLabel]="cbExConfig.copyBtnLabel"
-        [copyValue]="cbExConfig.copyValue"
-        [expandBtnAriaLabel]="cbExConfig.expandBtnAriaLabel"
+        [buttonAriaLabel]="cbExConfig.buttonAriaLabel"
+        [buttonLabel]="cbExConfig.buttonLabel"
+        [expandToggleAriaLabel]="cbExConfig.expandToggleAriaLabel"
         [label]="cbExConfig.label"
         [tooltip]="cbExConfig.tooltip"
-        (onCopyToClipboard)="handleCopyToClipboard($event, {
-            name: cbExConfig.expandBtnAriaLabel,
-            msg: cbExConfig.expandBtnAriaLabel + ' copied'
+        [value]="cbExConfig.value"
+        (onCopy)="handleCopy($event, {
+            name: cbExConfig.buttonAriaLabel,
+            msg: cbExConfig.buttonAriaLabel + ' copied'
           })"></pfng-block-copy>
     </div>
   </div>

src/app/copy/block-copy/example/block-copy-notification-example.component.ts

@@ -20,13 +20,13 @@ export class BlockCopyNotificationExampleComponent implements OnInit {
   notifications: Notification[];
 
   cbExConfig = {
-    copyBtnAriaLabel: 'Copy Personal Access Token',
-    copyBtnLabel: 'Copy and Notify',
-    // tslint:disable-next-line:max-line-length
-    copyValue: 'jvJhbGciOiJSUzI1NiIsImtpZCI6IjBsTDB2WHM5WVJWcVpNb3d5dzh1TkxSX3lyMGlGYW96ZFFrOXJ6cTJPVlUiLCJ0eXAiOiJKV1QifQmeyJhY3IiOiIwIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHBzOi8vYXV0aC5vcGVuc2hpZnQuaW8iLCJodHRwczovL29wZW5zaGlmdC5pbyJdLCJhcHByb3ZlZCI6dHJ1ZSwiYXVkIjoiZmFicmljOC1vbmxpbmUtcGxhdGZvcm0iLCJhdXRoX3RpbWUiOjE1MjU4MDE5MjgsImF6cCI6ImZhYnJpYzgtb25saW5lLXBsYXRmb3JtIiwiZW1haWwiOiJtc3BheG1hbkByZWRoYXQuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImV4cCI6MTUyODM5MzkyOCwiZmFtaWx5X25hbWUiOiJTcGF4bWFuIiwiZ2l2ZW5fbmFtZSI6Ik1pY2hhZWwiLCJpYXQiOjE1MjU4MDE5MjgsImlzcyI6Imh0dHBzOi8vc3NvLm9wZW5zaGlmdC5pby9hdXRoL3JlYWxtcy9mYWJyaWM4IiwianRpIjoiNGI2YTZkMjctZTM0Yi00YWRiLThhOTEtYTM4NWFjOGZhOGE0IiwibmFtZSI6Ik1pY2hhZWwgU3BheG1hbiIsIm5iZiI6MCwicHJlZmVycmVkX3VzZXJuYW1lIjoibXNwYXhtYW4iLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX0sImJyb2tlciI6eyJyb2xlcyI6WyJyZWFkLXRva2VuIl19fSwic2Vzc2lvbl9zdGF0ZSI6IjE4Zjg0MDRlLWY4NjQtNDdiZS1iNWNlLTQ3M2I1N2RmNzFjZiIsInN1YiI6IjIyYweJ9FhLTE0Y2QtNGIwYS1iZGVmLThmYjQyYjE4OGQ3NyIsInR5cCI6IkJlYXJlciJ9vMkquhF0PmHam8MnkMLnLnTtpcCK0vy1dESHxPXQdrn2vYSRFHgNPujI_pqhmCGu2ietHFKm5GtqjFUnbYMQZb1lOjxXwkxBxTfeli2C3Jc0aNEhYnDB__th2preo4XQT0DcdBo82gia41VLcwqmhr0yqbaudYjLkn0SLqJx8hg1FJt0QGLFLX9zeCUKWtujg2P5ZGqgYiwCWXdOpPc22PFi5WrbghorzCclOjCqaymGBiIELdJFVeRrLYWli5MKOQYpyFxJrsfogrCFUFin9wJjuqqBAQaHmtN2rYYpql8pq63S2Zh396jQbETU1wcHQ6R8uDm5GXHOkj61Grn4gBg',
-    expandBtnAriaLabel: 'Toggle Personal Access Token',
+    buttonAriaLabel: 'Copy Personal Access Token',
+    buttonLabel: 'Copy and Notify',
+    expandToggleAriaLabel: 'Toggle Personal Access Token',
     label: 'Personal Access Token',
-    tooltip: 'Example OpenShift.io Personal Access Token'
+    tooltip: 'Example OpenShift.io Personal Access Token',
+    // tslint:disable-next-line:max-line-length
+    value: 'jvJhbGciOiJSUzI1NiIsImtpZCI6IjBsTDB2WHM5WVJWcVpNb3d5dzh1TkxSX3lyMGlGYW96ZFFrOXJ6cTJPVlUiLCJ0eXAiOiJKV1QifQmeyJhY3IiOiIwIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHBzOi8vYXV0aC5vcGVuc2hpZnQuaW8iLCJodHRwczovL29wZW5zaGlmdC5pbyJdLCJhcHByb3ZlZCI6dHJ1ZSwiYXVkIjoiZmFicmljOC1vbmxpbmUtcGxhdGZvcm0iLCJhdXRoX3RpbWUiOjE1MjU4MDE5MjgsImF6cCI6ImZhYnJpYzgtb25saW5lLXBsYXRmb3JtIiwiZW1haWwiOiJtc3BheG1hbkByZWRoYXQuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImV4cCI6MTUyODM5MzkyOCwiZmFtaWx5X25hbWUiOiJTcGF4bWFuIiwiZ2l2ZW5fbmFtZSI6Ik1pY2hhZWwiLCJpYXQiOjE1MjU4MDE5MjgsImlzcyI6Imh0dHBzOi8vc3NvLm9wZW5zaGlmdC5pby9hdXRoL3JlYWxtcy9mYWJyaWM4IiwianRpIjoiNGI2YTZkMjctZTM0Yi00YWRiLThhOTEtYTM4NWFjOGZhOGE0IiwibmFtZSI6Ik1pY2hhZWwgU3BheG1hbiIsIm5iZiI6MCwicHJlZmVycmVkX3VzZXJuYW1lIjoibXNwYXhtYW4iLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX0sImJyb2tlciI6eyJyb2xlcyI6WyJyZWFkLXRva2VuIl19fSwic2Vzc2lvbl9zdGF0ZSI6IjE4Zjg0MDRlLWY4NjQtNDdiZS1iNWNlLTQ3M2I1N2RmNzFjZiIsInN1YiI6IjIyYweJ9FhLTE0Y2QtNGIwYS1iZGVmLThmYjQyYjE4OGQ3NyIsInR5cCI6IkJlYXJlciJ9vMkquhF0PmHam8MnkMLnLnTtpcCK0vy1dESHxPXQdrn2vYSRFHgNPujI_pqhmCGu2ietHFKm5GtqjFUnbYMQZb1lOjxXwkxBxTfeli2C3Jc0aNEhYnDB__th2preo4XQT0DcdBo82gia41VLcwqmhr0yqbaudYjLkn0SLqJx8hg1FJt0QGLFLX9zeCUKWtujg2P5ZGqgYiwCWXdOpPc22PFi5WrbghorzCclOjCqaymGBiIELdJFVeRrLYWli5MKOQYpyFxJrsfogrCFUFin9wJjuqqBAQaHmtN2rYYpql8pq63S2Zh396jQbETU1wcHQ6R8uDm5GXHOkj61Grn4gBg'
   };
 
   constructor(private notificationService: NotificationService) {}
@@ -35,7 +35,7 @@ export class BlockCopyNotificationExampleComponent implements OnInit {
     this.notifications = this.notificationService.getNotifications();
   }
 
-  handleCopyToClipboard($event: CopyEvent, result: any): void {
+  handleCopy($event: CopyEvent, result: any): void {
     this.actionsText = 'Copied: ' + $event.value + '\r\n' + this.actionsText;
     this.notify(result);
   }