Updated headerText to headerLabel.

Renamed `elRef` to `elementRef`.

Author: stanislavgeorgiev

src/modal/alert-modal.component.ts

@@ -41,7 +41,7 @@ import { ModalService } from "./modal.service";
  * 	openModal() {
  * 		this.modalService.show({
  *			modalType: "default" | "danger",
- *			headerText: "optional header text",
+ *			headerLabel: "optional header text",
  *			title: "Modal title",
  *			text: "Modal text",
  *			buttons: [{
@@ -63,7 +63,7 @@ import { ModalService } from "./modal.service";
 	template: `
 		<ibm-modal [modalType]="modalType">
 			<ibm-modal-header (closeSelect)="closeModal()">
-				<p class="bx--modal-header__label bx--type-delta">{{headerText}}</p>
+				<p class="bx--modal-header__label bx--type-delta">{{headerLabel}}</p>
       			<p class="bx--modal-header__heading bx--type-beta">{{title}}</p>
 			</ibm-modal-header>
 			<div class="bx--modal-content">
@@ -79,7 +79,7 @@ import { ModalService } from "./modal.service";
 export class AlertModalComponent implements AfterViewInit {
 
 	modalType = "default";
-	headerText: string;
+	headerLabel: string;
 	title: string;
 	text: string;
 	buttons = [];
@@ -91,10 +91,10 @@ export class AlertModalComponent implements AfterViewInit {
 	 */
 	constructor(
 		private injector: Injector,
-		private elRef: ElementRef,
+		private elementRef: ElementRef,
 	) {
 		this.modalType = this.injector.get("modalType");
-		this.headerText = this.injector.get("headerText");
+		this.headerLabel = this.injector.get("headerLabel");
 		this.title = this.injector.get("title");
 		this.text = this.injector.get("text");
 
@@ -116,7 +116,7 @@ export class AlertModalComponent implements AfterViewInit {
 			const primaryButtonIndex = this.buttons.findIndex(
 				button => button.type.indexOf("primary") !== -1) || 0;
 			const primaryButton = this.buttons[primaryButtonIndex];
-			const buttonNode = this.elRef.nativeElement.querySelector(`#${primaryButton.id}`);
+			const buttonNode = this.elementRef.nativeElement.querySelector(`#${primaryButton.id}`);
 			if (buttonNode) {
 				buttonNode.focus();
 			}

src/modal/modal.service.ts

@@ -82,12 +82,12 @@ export class ModalService {
 	 * @returns {ComponentRef<any>}
 	 * @memberof ModalService
 	 */
-	show(data: {modalType?: string, headerText?: string, title: string, text: string, buttons?: null}) {
+	show(data: {modalType?: string, headerLabel?: string, title: string, text: string, buttons?: null}) {
 		return this.create({
 			component: AlertModalComponent,
 			inputs: {
 				modalType: data.modalType,
-				headerText: data.headerText,
+				headerLabel: data.headerLabel,
 				title: data.title,
 				text: data.text,
 				buttons: data.buttons || [],

src/modal/modal.stories.ts

@@ -13,7 +13,7 @@ import { Modal, ModalService } from "../";
 	selector: "app-sample-modal",
 	template: `
 		<ibm-modal>
-			<ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
+			<ibm-modal-header (closeSelect)="closeModal()">header label</ibm-modal-header>
 			<section class="bx--modal-content">
 				<h1>Sample modal works.</h1>
 				<p class="bx--modal-content__text">{{modalText}}</p>
@@ -65,7 +65,7 @@ class ModalStory {
 class AlertModalStory {
 
 	@Input() modalType: string;
-	@Input() headerText: string;
+	@Input() headerLabel: string;
 	@Input() title: string;
 	@Input() text: string;
 	@Input() buttons: any;
@@ -75,7 +75,7 @@ class AlertModalStory {
 	openModal() {
 		this.modalService.show({
 			modalType: this.modalType,
-			headerText: this.headerText,
+			headerLabel: this.headerLabel,
 			title: this.title,
 			text: this.text,
 			buttons: this.buttons
@@ -128,13 +128,13 @@ storiesOf("Modal", module)
 	.addDecorator(withKnobs)
 	.add("Transactional", () => ({
 		template: `
-		<app-alert-modal-story [modalType]="modalType" [headerText]="headerText" [title]="title" [text]="text"
+		<app-alert-modal-story [modalType]="modalType" [headerLabel]="headerLabel" [title]="title" [text]="text"
 			[buttons]="buttons"></app-alert-modal-story>
 		<ibm-modal-placeholder></ibm-modal-placeholder>
 		`,
 		props: {
 			modalType: select("modalType", ["default", "danger"], "default"),
-			headerText: text("headerText", "optional header text"),
+			headerLabel: text("headerLabel", "optional header label"),
 			title: text("title", "Delete service from application"),
 			text: text("text", `Are you sure you want to remove the Speech to Text service from the node-test app?`),
 			buttons: [{
@@ -165,13 +165,13 @@ storiesOf("Modal", module)
 	.addDecorator(withKnobs)
 	.add("Passive", () => ({
 		template: `
-		<app-alert-modal-story [modalType]="modalType" [headerText]="headerText" [title]="title" [text]="text"
+		<app-alert-modal-story [modalType]="modalType" [headerLabel]="headerLabel" [title]="title" [text]="text"
 			></app-alert-modal-story>
 		<ibm-modal-placeholder></ibm-modal-placeholder>
 		`,
 		props: {
 			modalType: select("modalType", ["default", "danger"], "default"),
-			headerText: text("headerText", "optional header text"),
+			headerLabel: text("headerLabel", "optional header label"),
 			title: text("title", "Passive modal title"),
 			text: text("text", "Passive modal notifications should only appear if there is an action " +
 								"the user needs to address immediately. Passive modal notifications are persistent on screen"),