Skip to content

Commit a5df717

Browse files
bootstrapdash-teambootstrapdash-team
committed
app module
1 parent 255cec5 commit a5df717

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+15335
-4
lines changed

‎package-lock.json‎

Lines changed: 11017 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app.module.ts‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { AppRoutingModule } from './app-routing.module';
44

55
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
7-
import { ChartsModule } from 'ng2-charts';
7+
import { ChartsModule, ThemeService } from 'ng2-charts';
88

99
import { AppComponent } from './app.component';
1010
import { NavbarComponent } from './shared/navbar/navbar.component';
@@ -17,6 +17,20 @@ import { SpinnerComponent } from './shared/spinner/spinner.component';
1717
import { ContentAnimateDirective } from './shared/directives/content-animate.directive';
1818
import { TodoListComponent } from './apps/todo-list/todo-list.component';
1919

20+
import { AccordionsComponent } from "./ui-elements/accordions/accordions.component";
21+
import { AlertsComponent } from "./ui-elements/alerts/alerts.component";
22+
import { BadgesComponent } from "./ui-elements/badges/badges.component";
23+
import { BreadcrumbsComponent } from "./ui-elements/breadcrumbs/breadcrumbs.component";
24+
import { ButtonsComponent } from "./ui-elements/buttons/buttons.component";
25+
import { CarouselComponent } from "./ui-elements/carousel/carousel.component";
26+
import { DropdownComponent } from "./ui-elements/dropdown/dropdown.component";
27+
import { PaginationComponent } from "./ui-elements/pagination/pagination.component";
28+
import { ProgressbarComponent } from "./ui-elements/progressbar/progressbar.component";
29+
import { TablesComponent } from "./ui-elements/tables/tables.component";
30+
import { TabsComponent } from "./ui-elements/tabs/tabs.component";
31+
import { TooltipsComponent } from "./ui-elements/tooltips/tooltips.component";
32+
import { TypographyComponent } from "./ui-elements/typography/typography.component";
33+
2034
@NgModule({
2135
declarations: [
2236
AppComponent,
@@ -27,7 +41,20 @@ import { TodoListComponent } from './apps/todo-list/todo-list.component';
2741
TodoListComponent,
2842
TodoComponent,
2943
SpinnerComponent,
30-
ContentAnimateDirective
44+
ContentAnimateDirective,
45+
TabsComponent,
46+
AccordionsComponent,
47+
AlertsComponent,
48+
BadgesComponent,
49+
BreadcrumbsComponent,
50+
ButtonsComponent,
51+
CarouselComponent,
52+
DropdownComponent,
53+
PaginationComponent,
54+
ProgressbarComponent,
55+
TablesComponent,
56+
TooltipsComponent,
57+
TypographyComponent
3158
],
3259
imports: [
3360
BrowserModule,
@@ -36,9 +63,10 @@ import { TodoListComponent } from './apps/todo-list/todo-list.component';
3663
BrowserAnimationsModule,
3764
FormsModule,
3865
ReactiveFormsModule,
39-
ChartsModule
66+
ChartsModule,
67+
4068
],
41-
providers: [],
69+
providers: [ThemeService],
4270
bootstrap: [AppComponent]
4371
})
4472
export class AppModule { }

‎src/app/ui-elements/accordions/accordions.component.html‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
<div class="row">
2+
<div class="col-lg-6 grid-margin stretch-card">
3+
<div class="card">
4+
<div class="card-body">
5+
<h4 class="card-title">Basic accordions</h4>
6+
<ngb-accordion [closeOthers]="true" activeIds="static-1">
7+
<ngb-panel id="static-1">
8+
<ng-template ngbPanelTitle>
9+
How can I pay for an order I placed?
10+
</ng-template>
11+
<ng-template ngbPanelContent>
12+
You can pay for the product you have purchased using credit cards, debit cards,
13+
or via online banking. We also provide cash-on-delivery services for most of our
14+
products. You can also use your account wallet for payment.
15+
</ng-template>
16+
</ngb-panel>
17+
<ngb-panel id="static-2">
18+
<ng-template ngbPanelTitle>
19+
I can’t sign in to my account
20+
</ng-template>
21+
<ng-template ngbPanelContent>
22+
If while signing in to your account you see an error message, you can do the following
23+
<ol class="pl-3 mt-4">
24+
<li>Check your network connection and try again</li>
25+
<li>Make sure your account credentials are correct while signing in</li>
26+
<li>Check whether your account is accessible in your region</li>
27+
</ol>
28+
<br>
29+
<p class="text-success">
30+
<i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
31+
</p>
32+
</ng-template>
33+
</ngb-panel>
34+
<ngb-panel id="static-3">
35+
<ng-template ngbPanelTitle>
36+
Can I add money to the wallet?
37+
</ng-template>
38+
<ng-template ngbPanelContent>
39+
You can add money to the wallet for any future transaction from your bank account using net-banking, or
40+
credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.
41+
</ng-template>
42+
</ngb-panel>
43+
</ngb-accordion>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="col-lg-6 grid-margin stretch-card">
48+
<div class="card">
49+
<div class="card-body">
50+
<h4 class="card-title">Bordered accordions</h4>
51+
<p class="card-description">Use class <code>.accordion-bordered</code> for bodered styling</p>
52+
<ngb-accordion [closeOthers]="true" activeIds="static-4" class="accordion-bordered">
53+
<ngb-panel id="static-4">
54+
<ng-template ngbPanelTitle>
55+
How can I pay for an order I placed?
56+
</ng-template>
57+
<ng-template ngbPanelContent>
58+
You can pay for the product you have purchased using credit cards, debit cards,
59+
or via online banking. We also provide cash-on-delivery services for most of our
60+
products. You can also use your account wallet for payment.
61+
</ng-template>
62+
</ngb-panel>
63+
<ngb-panel id="static-5">
64+
<ng-template ngbPanelTitle>
65+
I can’t sign in to my account
66+
</ng-template>
67+
<ng-template ngbPanelContent>
68+
If while signing in to your account you see an error message, you can do the following
69+
<ol class="pl-3 mt-4">
70+
<li>Check your network connection and try again</li>
71+
<li>Make sure your account credentials are correct while signing in</li>
72+
<li>Check whether your account is accessible in your region</li>
73+
</ol>
74+
<br>
75+
<p class="text-success">
76+
<i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
77+
</p>
78+
</ng-template>
79+
</ngb-panel>
80+
<ngb-panel id="static-6">
81+
<ng-template ngbPanelTitle>
82+
Can I add money to the wallet?
83+
</ng-template>
84+
<ng-template ngbPanelContent>
85+
You can add money to the wallet for any future transaction from your bank account using net-banking, or
86+
credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.
87+
</ng-template>
88+
</ngb-panel>
89+
</ngb-accordion>
90+
</div>
91+
</div>
92+
</div>
93+
<div class="col-6 grid-margin stretch-card">
94+
<div class="card">
95+
<div class="card-body">
96+
<h4 class="card-title">Basic accordions</h4>
97+
<p class="card-description">Use class <code>.bg-*</code> for <code>.card-header</code> element for filled
98+
header styling</p>
99+
<ngb-accordion [closeOthers]="true" activeIds="static-7" class="accordion-filled">
100+
<ngb-panel id="
101+
static-7">
102+
<ng-template ngbPanelTitle>
103+
How can I pay for an order I placed?
104+
</ng-template>
105+
<ng-template ngbPanelContent>
106+
You can pay for the product you have purchased using credit cards, debit cards,
107+
or via online banking. We also provide cash-on-delivery services for most of our
108+
products. You can also use your account wallet for payment.
109+
</ng-template>
110+
</ngb-panel>
111+
<ngb-panel id="static-8">
112+
<ng-template ngbPanelTitle>
113+
I can’t sign in to my account
114+
</ng-template>
115+
<ng-template ngbPanelContent>
116+
If while signing in to your account you see an error message, you can do the following
117+
<ol class="pl-3 mt-4">
118+
<li>Check your network connection and try again</li>
119+
<li>Make sure your account credentials are correct while signing in</li>
120+
<li>Check whether your account is accessible in your region</li>
121+
</ol>
122+
<br>
123+
<p class="text-success">
124+
<i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
125+
</p>
126+
</ng-template>
127+
</ngb-panel>
128+
<ngb-panel id="static-9">
129+
<ng-template ngbPanelTitle>
130+
Can I add money to the wallet?
131+
</ng-template>
132+
<ng-template ngbPanelContent>
133+
You can add money to the wallet for any future transaction from your bank account using net-banking, or
134+
credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.
135+
</ng-template>
136+
</ngb-panel>
137+
</ngb-accordion>
138+
</div>
139+
</div>
140+
</div>
141+
<div class="col-6 grid-margin stretch-card">
142+
<div class="card">
143+
<div class="card-body">
144+
<h4 class="card-title">Solid Header Accordion</h4>
145+
<p class="card-description">Use class <code>.accordion-solid-header</code> for filled header styling</p>
146+
<ngb-accordion [closeOthers]="true" activeIds="static-10" class="accordion-solid-header">
147+
<ngb-panel id="static-10">
148+
<ng-template ngbPanelTitle>
149+
How can I pay for an order I placed?
150+
</ng-template>
151+
<ng-template ngbPanelContent>
152+
You can pay for the product you have purchased using credit cards, debit cards,
153+
or via online banking. We also provide cash-on-delivery services for most of our
154+
products. You can also use your account wallet for payment.
155+
</ng-template>
156+
</ngb-panel>
157+
<ngb-panel id="static-11">
158+
<ng-template ngbPanelTitle>
159+
I can’t sign in to my account
160+
</ng-template>
161+
<ng-template ngbPanelContent>
162+
If while signing in to your account you see an error message, you can do the following
163+
<ol class="pl-3 mt-4">
164+
<li>Check your network connection and try again</li>
165+
<li>Make sure your account credentials are correct while signing in</li>
166+
<li>Check whether your account is accessible in your region</li>
167+
</ol>
168+
<br>
169+
<p class="text-success">
170+
<i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
171+
</p>
172+
</ng-template>
173+
</ngb-panel>
174+
<ngb-panel id="static-12">
175+
<ng-template ngbPanelTitle>
176+
Can I add money to the wallet?
177+
</ng-template>
178+
<ng-template ngbPanelContent>
179+
You can add money to the wallet for any future transaction from your bank account using net-banking, or
180+
credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.
181+
</ng-template>
182+
</ngb-panel>
183+
</ngb-accordion>
184+
</div>
185+
</div>
186+
</div>
187+
<div class="col-6 grid-margin stretch-card">
188+
<div class="card">
189+
<div class="card-body">
190+
<h4 class="card-title">Solid Content Accordion</h4>
191+
<p class="card-description">Use class <code>.accordion-solid-content</code> for filled styling</p>
192+
<ngb-accordion [closeOthers]="true" activeIds="static-13" class="accordion-solid-content">
193+
<ngb-panel id="static-13">
194+
<ng-template ngbPanelTitle>
195+
How can I pay for an order I placed?
196+
</ng-template>
197+
<ng-template ngbPanelContent>
198+
You can pay for the product you have purchased using credit cards, debit cards,
199+
or via online banking. We also provide cash-on-delivery services for most of our
200+
products. You can also use your account wallet for payment.
201+
</ng-template>
202+
</ngb-panel>
203+
<ngb-panel id="static-14">
204+
<ng-template ngbPanelTitle>
205+
I can’t sign in to my account
206+
</ng-template>
207+
<ng-template ngbPanelContent>
208+
If while signing in to your account you see an error message, you can do the following
209+
<ol class="pl-3 mt-4">
210+
<li>Check your network connection and try again</li>
211+
<li>Make sure your account credentials are correct while signing in</li>
212+
<li>Check whether your account is accessible in your region</li>
213+
</ol>
214+
<br>
215+
<p class="text-success">
216+
<i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
217+
</p>
218+
</ng-template>
219+
</ngb-panel>
220+
<ngb-panel id="static-15">
221+
<ng-template ngbPanelTitle>
222+
Can I add money to the wallet?
223+
</ng-template>
224+
<ng-template ngbPanelContent>
225+
You can add money to the wallet for any future transaction from your bank account using net-banking, or
226+
credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.
227+
</ng-template>
228+
</ngb-panel>
229+
</ngb-accordion>
230+
</div>
231+
</div>
232+
</div>
233+
<div class="col-6 grid-margin stretch-card">
234+
<div class="card">
235+
<div class="card-body">
236+
<h4 class="card-title">Multi Colored Accordion</h4>
237+
<p class="card-description">Use class <code>.accordion-multi-colored</code> for filled styling</p>
238+
<ngb-accordion [closeOthers]="true" activeIds="static-16" class="accordion-multi-colored">
239+
<ngb-panel id="static-16">
240+
<ng-template ngbPanelTitle>
241+
How can I pay for an order I placed?
242+
</ng-template>
243+
<ng-template ngbPanelContent>
244+
You can pay for the product you have purchased using credit cards, debit cards,
245+
or via online banking. We also provide cash-on-delivery services for most of our
246+
products. You can also use your account wallet for payment.
247+
</ng-template>
248+
</ngb-panel>
249+
<ngb-panel id="static-17">
250+
<ng-template ngbPanelTitle>
251+
I can’t sign in to my account
252+
</ng-template>
253+
<ng-template ngbPanelContent>
254+
If while signing in to your account you see an error message, you can do the following
255+
<ol class="pl-3 mt-4">
256+
<li>Check your network connection and try again</li>
257+
<li>Make sure your account credentials are correct while signing in</li>
258+
<li>Check whether your account is accessible in your region</li>
259+
</ol>
260+
<br>
261+
<p class="text-success">
262+
<i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
263+
</p>
264+
</ng-template>
265+
</ngb-panel>
266+
<ngb-panel id="static-18">
267+
<ng-template ngbPanelTitle>
268+
Can I add money to the wallet?
269+
</ng-template>
270+
<ng-template ngbPanelContent>
271+
You can add money to the wallet for any future transaction from your bank account using net-banking, or
272+
credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.
273+
</ng-template>
274+
</ngb-panel>
275+
</ngb-accordion>
276+
</div>
277+
</div>
278+
</div>
279+
</div>

‎src/app/ui-elements/accordions/accordions.component.scss‎

Whitespace-only changes.

‎src/app/ui-elements/accordions/accordions.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { AccordionsComponent } from './accordions.component';
4+
5+
describe('AccordionsComponent', () => {
6+
let component: AccordionsComponent;
7+
let fixture: ComponentFixture<AccordionsComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ AccordionsComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(AccordionsComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/ui-elements/accordions/accordions.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-accordions',
5+
templateUrl: './accordions.component.html',
6+
styleUrls: ['./accordions.component.scss']
7+
})
8+
export class AccordionsComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
15+
}

0 commit comments

Comments
 (0)