Skip to content

Commit c1f46a9

Browse files
author
Danil Moroz
committed
Added component, service and types from develop. Updated package.json + tsconfig
1 parent 31b03b9 commit c1f46a9

File tree

11 files changed

+786
-15
lines changed

11 files changed

+786
-15
lines changed

‎package.json‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,38 @@
1515
"peerDependencies": {},
1616
"devDependencies": {
1717
"@types/node": "12.0.4",
18+
"@angular/animations": "~6.0.1",
19+
"@angular/common": "~6.0.1",
20+
"@angular/compiler": "~6.0.1",
21+
"@angular/compiler-cli": "~6.0.1",
22+
"@angular/core": "~6.0.1",
23+
"@angular/forms": "~6.0.1",
24+
"@angular/http": "~6.0.1",
25+
"@angular/platform-browser": "~6.0.1",
26+
"@angular/platform-browser-dynamic": "~6.0.1",
27+
"@angular/platform-server": "~6.0.1",
28+
"@angular/router": "6.0.1",
29+
"@types/core-js": "^0.9.43",
30+
"@types/node": "~8.9.4",
1831
"babel-core": "^6.21.0",
1932
"babel-loader": "^7.1.4",
2033
"babel-preset-env": "^1.6.1",
2134
"babel-preset-react": "^6.16.0",
2235
"babel-preset-stage-0": "^6.24.1",
36+
"codelyzer": "~4.0.2",
37+
"core-js": "^2.5.3",
2338
"css-loader": "^2.1.1",
2439
"node-sass": "^4.12.0",
40+
"rxjs": "^6.1.0",
2541
"sass-loader": "^7.1.0",
2642
"style-loader": "^0.23.1",
27-
"ts-loader": "^6.0.2",
28-
"tslint": "^5.17.0",
29-
"typescript": "^3.5.1",
43+
"ts-loader": "^3.2.0",
44+
"ts-node": "~4.0.1",
45+
"tslint": "~5.8.0",
46+
"typescript": "2.7.2",
3047
"webpack": "^4.5.0",
31-
"webpack-cli": "^3.2.1"
48+
"webpack-cli": "^3.2.1",
49+
"zone.js": "^0.8.26"
3250
},
3351
"keywords": [
3452
"Angular",

‎src/components/breadcrumbs/breadcrumbs.component.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<nav
2+
[class]="'AngularBreadcrumbsLight ' + (rootCustomClass ? ' ' + rootCustomClass : '')"
3+
aria-label="Breadcrumb"
4+
>
5+
<ul
6+
[class]="'AngularBreadcrumbsLight-List ' + (listCustomClass ? ' ' + listCustomClass : '')" *ngIf="crumbs.length"
7+
>
8+
<ng-container *ngFor="let item of crumbs; let i = index">
9+
<li>
10+
11+
<!---------------------------------------------------------------------->
12+
<!-- Link for prev routes
13+
<!---------------------------------------------------------------------->
14+
15+
<a
16+
[class]="'AngularBreadcrumbsLight-Link ' + (linkCustomClass ? ' ' + linkCustomClass : '')"
17+
*ngIf="i !== crumbs.length - 1"
18+
[routerLink]="item.link"
19+
>
20+
<span
21+
*ngIf="icons"
22+
[class]="'AngularBreadcrumbsLight-Icon ' + (item.iconClass ? ' ' + item.iconClass : '') + (iconCustomClass ? ' ' + iconCustomClass : '')"
23+
>
24+
{{ item.icon }}
25+
</span>
26+
<span
27+
*ngIf="titles"
28+
[class]="'AngularBreadcrumbsLight-Title ' + (titleCustomClass ? ' ' + titleCustomClass : '') + (!!noTitlesOnMobile ? ' AngularBreadcrumbsLight-Title_hideOnMobile' : '')"
29+
style="-webkit-box-orient: vertical"
30+
>
31+
{{ item.title }}
32+
</span>
33+
</a>
34+
35+
<!---------------------------------------------------------------------->
36+
<!-- Disabled link for current route
37+
<!---------------------------------------------------------------------->
38+
39+
<span
40+
[class]="'AngularBreadcrumbsLight-Link AngularBreadcrumbsLight-Link_current ' + (currentLinkCustomClass ? ' ' + currentLinkCustomClass : '')"
41+
*ngIf="i === crumbs.length - 1"
42+
>
43+
<span
44+
*ngIf="icons"
45+
[class]="'AngularBreadcrumbsLight-Icon ' + (item.iconClass ? ' ' + item.iconClass : '') + (iconCustomClass ? ' ' + iconCustomClass : '')"
46+
>
47+
{{ item.icon }}
48+
</span>
49+
<span
50+
*ngIf="titles"
51+
[class]="'AngularBreadcrumbsLight-Title ' + (titleCustomClass ? ' ' + titleCustomClass : '') + (!!noTitlesOnMobile ? ' AngularBreadcrumbsLight-Title_hideOnMobile' : '')"
52+
style="-webkit-box-orient: vertical"
53+
>
54+
{{ item.title }}
55+
</span>
56+
</span>
57+
</li>
58+
59+
<!---------------------------------------------------------------------->
60+
<!-- Separator
61+
<!---------------------------------------------------------------------->
62+
63+
<li
64+
[class]="'AngularBreadcrumbsLight-Separator ' + (separatorClass ? ' ' + separatorClass : '') + (separatorCustomClass ? ' ' + separatorCustomClass : '')"
65+
*ngIf="i !== crumbs.length - 1 && crumbs[i + 1].title"
66+
>
67+
{{ separator ? separator : '/' }}
68+
</li>
69+
</ng-container>
70+
</ul>
71+
</nav>

‎src/components/breadcrumbs/breadcrumbs.component.sass‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* ################################################################### */
2+
/*
3+
/* Breadcrumbs styles
4+
/*
5+
/* ################################################################### */
6+
7+
/* ------------------------------------------------------------------- */
8+
/* Variables
9+
/* ------------------------------------------------------------------- */
10+
11+
$spacing: 8px
12+
$mainBg: #323232
13+
$mainColor: #fcfaf9
14+
$currentColor: #ff4081
15+
16+
/* ------------------------------------------------------------------- */
17+
/* Component
18+
/* ------------------------------------------------------------------- */
19+
20+
\:host
21+
width: 100%
22+
23+
.AngularBreadcrumbsLight
24+
margin: 0
25+
padding: 0 $spacing * 3
26+
display: flex
27+
width: 100%
28+
height: $spacing * 5
29+
font-family: "Roboto", "Helvetica", "Arial", sans-serif
30+
-webkit-font-smoothing: antialiased
31+
font-weight: 500
32+
background-color: $mainBg
33+
color: $mainColor
34+
35+
*
36+
overflow: hidden
37+
38+
@media screen and (max-width: 600px)
39+
padding: 0 $spacing * 2
40+
font-size: 14px
41+
42+
@media screen and (max-width: 414px)
43+
font-size: 12px
44+
45+
&-List
46+
margin: 0
47+
padding: 0
48+
display: flex
49+
align-items: center
50+
width: 100%
51+
height: 100%
52+
list-style: none
53+
54+
&-Link
55+
margin: 0
56+
padding: 0
57+
display: flex
58+
justify-content: center
59+
align-items: center
60+
width: auto
61+
height: 100%
62+
color: $mainColor
63+
text-decoration: none
64+
65+
&_current
66+
color: $currentColor
67+
68+
svg
69+
fill: $currentColor
70+
71+
&-Icon
72+
margin-right: $spacing / 2
73+
display: flex
74+
justify-content: center
75+
align-items: center
76+
flex-shrink: 0
77+
width: auto
78+
height: 20px
79+
80+
@media screen and (max-width: 600px)
81+
margin-right: $spacing / 2
82+
height: 18px
83+
84+
@media screen and (max-width: 414px)
85+
height: 16px
86+
87+
*:first-child
88+
display: flex
89+
justify-content: center
90+
align-items: center
91+
width: auto
92+
height: 100%
93+
94+
&-Title
95+
display: -webkit-box
96+
-webkit-line-clamp: 1
97+
-webkit-box-orient: vertical
98+
overflow: hidden
99+
word-break: break-word
100+
101+
&_hideOnMobile
102+
103+
@media screen and (max-width: 600px)
104+
display: none
105+
106+
&-Separator
107+
margin: 0 $spacing
108+
display: flex
109+
justify-content: center
110+
align-items: center
111+
flex-shrink: 0
112+
width: auto
113+
height: auto
114+
115+
@media screen and (max-width: 600px)
116+
margin: 0 $spacing / 2
117+
118+
@media screen and (max-width: 414px)
119+
margin: 0 $spacing / 4
120+
121+
*:first-child
122+
margin-top: 2px
123+
display: flex
124+
justify-content: center
125+
align-items: center
126+
width: auto
127+
128+
@media screen and (max-width: 600px)
129+
max-height: 18px

‎src/components/breadcrumbs/breadcrumbs.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 { BreadcrumbsComponent } from './breadcrumbs.component';
4+
5+
describe('BreadcrumbsComponent', () => {
6+
let component: BreadcrumbsComponent;
7+
let fixture: ComponentFixture<BreadcrumbsComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ BreadcrumbsComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(BreadcrumbsComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)