Skip to content

Commit fc73ea8

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #100 from stanislavgeorgiev/AlertModalComponent
Add an AlertModalComponent
2 parents af756f6 + 419073b commit fc73ea8

File tree

14 files changed

+294
-19
lines changed

14 files changed

+294
-19
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/calendar/month-view/calendar-month.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {
22
Component,
33
Input,
4-
OnInit,
4+
OnInit
55
} from "@angular/core";
66
import { DateTimeModel } from "./../date-time-model.class";
77
import { range } from "../../common/utils";

‎src/calendar/months-view/calendar-months.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {
22
Component,
33
Input,
4-
OnInit,
4+
OnInit
55
} from "@angular/core";
66
import { DateTimeModel } from "./../date-time-model.class";
77
import { range } from "../../common/utils";

‎src/calendar/quarter-view/calendar-quarter.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { TranslateService } from "@ngx-translate/core";
22
import {
33
Component,
44
Input,
5-
OnInit,
5+
OnInit
66
} from "@angular/core";
77
import { DateTimeModel } from "./../date-time-model.class";
88
import { range } from "../../common/utils";

‎src/calendar/year-view/calendar-year.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {
22
Component,
33
Input,
4-
OnInit,
4+
OnInit
55
} from "@angular/core";
66
import { DateTimeModel } from "./../date-time-model.class";
77
import { range } from "../../common/utils";

‎src/dialog/tooltip/tooltip.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ storiesOf("Tooltip", module)
1313
imports: [
1414
DialogModule,
1515
TranslateModule.forRoot()
16-
],
16+
]
1717
})
1818
)
1919
.addDecorator(withKnobs)

‎src/modal/alert-modal.component.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import {
2+
Component,
3+
Injector,
4+
ElementRef
5+
} from "@angular/core";
6+
import {
7+
trigger,
8+
state,
9+
style,
10+
transition,
11+
animate
12+
} from "@angular/animations";
13+
import Modal from "./modal.decorator";
14+
15+
/**
16+
* Component to create standard modals for presenting content or asking for user's input.
17+
* It can show as a passive modal showing only text or show as a transactional modal with
18+
* multiple buttons for different actions for the user to choose from.
19+
*
20+
* Using a modal in your application requires `ibm-modal-placeholder` which would generally be
21+
* placed near the end of your app component template (app.component.ts or app.component.html) as:
22+
*
23+
* ```html
24+
* <ibm-modal-placeholder></ibm-modal-placeholder>
25+
* ```
26+
*
27+
* Example of opening the modal:
28+
*
29+
* ```typescript
30+
* \@Component({
31+
* selector: "app-modal-demo",
32+
* template: `
33+
* <button class="btn--primary" (click)="openModal()">Open modal</button>
34+
* <ibm-modal-placeholder></ibm-modal-placeholder>`
35+
* })
36+
* export class ModalDemo {
37+
* openModal() {
38+
* this.modalService.show({
39+
* modalType: "default",
40+
* modalLabel: "optional header text",
41+
* modalTitle: "Modal modalTitle",
42+
* text: "Modal text",
43+
* buttons: [{
44+
* text: "Button text",
45+
* type: "primary",
46+
* click: clickFunction
47+
* }]
48+
* });
49+
* }
50+
* }
51+
* ```
52+
*
53+
* @export
54+
* @class AlertModalComponent
55+
*/
56+
@Modal()
57+
@Component({
58+
selector: "ibm-alert-modal",
59+
template: `
60+
<ibm-modal [modalType]="modalType">
61+
<ibm-modal-header (closeSelect)="closeModal()">
62+
<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
63+
<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
64+
</ibm-modal-header>
65+
<div class="bx--modal-content">
66+
<p>{{modalContent}}</p>
67+
</div>
68+
<ibm-modal-footer *ngIf="buttons.length > 0">
69+
<ng-container *ngFor="let button of buttons; let i = index">
70+
<button
71+
ibmButton="{{button.type}}"
72+
(click)="buttonClicked(i)"
73+
[id]="button.id"
74+
[attr.modal-primary-focus]="button.type.indexOf('primary') !== -1 ? '' : null">
75+
{{button.text}}
76+
</button>
77+
</ng-container>
78+
</ibm-modal-footer>
79+
</ibm-modal>
80+
`
81+
})
82+
export class AlertModalComponent {
83+
modalType = "default";
84+
modalLabel: string;
85+
modalTitle: string;
86+
modalContent: string;
87+
buttons = [];
88+
89+
/**
90+
* Creates an instance of `AlertModalComponent`.
91+
* @param {ModalService} modalService
92+
* @memberof AlertModalComponent
93+
*/
94+
constructor(
95+
private injector: Injector,
96+
private elementRef: ElementRef
97+
) {
98+
this.modalType = this.injector.get("modalType");
99+
this.modalLabel = this.injector.get("modalLabel");
100+
this.modalTitle = this.injector.get("modalTitle");
101+
this.modalContent = this.injector.get("modalContent");
102+
103+
this.buttons = this.injector.get("buttons") || [];
104+
for (let i = 0; i < this.buttons.length; i++) {
105+
const button = this.buttons[i];
106+
if (!button.id) {
107+
button.id = `alert-modal-button-${i}`;
108+
}
109+
if (!button.type) {
110+
button.type = "secondary";
111+
}
112+
}
113+
}
114+
115+
buttonClicked(buttonIndex) {
116+
const button = this.buttons[buttonIndex];
117+
if (button.click) {
118+
button.click();
119+
}
120+
121+
this.closeModal();
122+
}
123+
124+
closeModal() {
125+
// let call the @Modal.destroy() explicitly or otherwise the modal won't close
126+
this["destroy"]();
127+
}
128+
}

‎src/modal/modal-header.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import { Component, Output, EventEmitter, Input } from "@angular/core";
1919
selector: "ibm-modal-header",
2020
template: `
2121
<header class="{{modalType}} bx--modal-header" role="banner">
22-
<h5 class="bx--modal-header__heading">
22+
<div class="bx--modal-header">
2323
<ng-content></ng-content>
24-
</h5>
24+
</div>
2525
<button
2626
class="bx--modal-close"
2727
attr.aria-label="{{'MODAL.CLOSE' | translate}}"
@@ -35,7 +35,7 @@ import { Component, Output, EventEmitter, Input } from "@angular/core";
3535
width="10"
3636
aria-label="close the modal"
3737
alt="close the modal">
38-
<title>close the modal</title>
38+
<title>{{'MODAL.CLOSE' | translate}}</title>
3939
<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"></path>
4040
</svg>
4141
</button>

‎src/modal/modal.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { cycleTabs } from "./../common/tab.service";
2424
/**
2525
* Component to create modals for presenting content.
2626
*
27-
* Using a modal in your application requires `n-modal-placeholder` which would generally be
27+
* Using a modal in your application requires `ibm-modal-placeholder` which would generally be
2828
* placed near the end of your app component template (app.component.ts or app.component.html) as:
2929
*
3030
* ```html
@@ -49,7 +49,7 @@ import { cycleTabs } from "./../common/tab.service";
4949
* </button>
5050
* {{modalText}}
5151
* </section>
52-
* <ibm-modal-footer><button class="btn--primary cancel-button" (click)="closeModal()">Close</button></ibm-modal-footer>
52+
* <ibm-modal-footer><button ibmButton="primary" (click)="closeModal()">Close</button></ibm-modal-footer>
5353
* </ibm-modal>`,
5454
* styleUrls: ["./sample-modal.component.scss"]
5555
* })
@@ -68,7 +68,7 @@ import { cycleTabs } from "./../common/tab.service";
6868
* \@Component({
6969
* selector: "app-modal-demo",
7070
* template: `
71-
* <button class="btn--primary" (click)="openModal('drill')">Drill-down modal</button>
71+
* <button ibmButton="primary" (click)="openModal('drill')">Drill-down modal</button>
7272
* <ibm-modal-placeholder></ibm-modal-placeholder>`
7373
* })
7474
* export class ModalDemo {
@@ -86,7 +86,7 @@ import { cycleTabs } from "./../common/tab.service";
8686
@Component({
8787
selector: "ibm-modal",
8888
template: `
89-
<ibm-overlay (overlaySelect)="overlaySelected.emit()">
89+
<ibm-overlay [modalType]="modalType" (overlaySelect)="overlaySelected.emit()">
9090
<div
9191
class="bx--modal-container"
9292
[@modalState]="modalState"
@@ -121,7 +121,7 @@ export class ModalComponent implements AfterViewInit, OnInit, OnDestroy {
121121
@Input() size = "default";
122122
/**
123123
* Classification of the modal.
124-
* @type {"default" | "warning" | "error"}
124+
* @type {"default" | "danger"}
125125
* @memberof ModalComponent
126126
*/
127127
@Input() modalType = "default";

‎src/modal/modal.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { ModalComponent } from "./modal.component";
1717
import { ModalFooterComponent } from "./modal-footer.component";
1818
import { OverlayComponent } from "./overlay.component";
1919
import { ModalHeaderComponent } from "./modal-header.component";
20+
import { AlertModalComponent } from "./alert-modal.component";
21+
import { ButtonModule } from "../forms/forms.module";
2022

2123
// exports
2224
export { default as Modal } from "./modal.decorator";
@@ -36,19 +38,22 @@ export const MODAL_PLACEHOLDER_SERVICE_PROVIDER = {
3638

3739
@NgModule({
3840
declarations: [
41+
AlertModalComponent,
3942
ModalPlaceholderComponent,
4043
ModalComponent,
4144
ModalHeaderComponent,
4245
ModalFooterComponent,
4346
OverlayComponent
4447
],
4548
exports: [
49+
AlertModalComponent,
4650
ModalPlaceholderComponent,
4751
ModalComponent,
4852
ModalHeaderComponent,
4953
ModalFooterComponent
5054
],
5155
entryComponents: [
56+
AlertModalComponent,
5257
ModalComponent,
5358
ModalFooterComponent,
5459
ModalHeaderComponent
@@ -61,6 +66,7 @@ export const MODAL_PLACEHOLDER_SERVICE_PROVIDER = {
6166
],
6267
imports: [
6368
CommonModule,
69+
ButtonModule,
6470
TranslateModule,
6571
StaticIconModule
6672
]

0 commit comments

Comments
 (0)