Skip to content

Commit eef8f2c

Browse files
author
fbaldo31
committed
First commit
1 parent 4e64bae commit eef8f2c

Some content is hidden

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

49 files changed

+339877
-53
lines changed

.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"npm-scripts.showStartNotification": false
3+
}

README.md

+27-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,30 @@
1-
# MatCircleCounter
1+
# ngx-mat-circle-counter
2+
3+
An angular material circle counter using progress spinner.
4+
5+
## Installation
6+
7+
`ng add @angular/material @angular/cdk`
8+
9+
`yarn add ngx-mat-circle-counter`
10+
11+
## use
12+
13+
```html
14+
<ngx-circle-counter [color]="'primary'" [textColor]="'#69f0ae'" [size]="'xs'"></ngx-circle-counter>
15+
```
16+
17+
## Api
18+
19+
Attributes|Type|Default value|Description
20+
----------|----|-------------|-----------
21+
start|number|0|The value from the counter starts|
22+
size|'xs' - 's' - 'm' - 'l' - 'xl'|'m'|From 100px to 300px
23+
color|string|'primary'|Angular Material theme based color.
24+
textColor|string|'' (black)|As there is no way to inherit font color from theme, put directly the font color there.
25+
speed|number|10|Delay in millisecond to increase the counter.
26+
value|number|100|The value to the counter ends|
27+
mode|'viewport' or 'pageinit'|'viewport'|In viewport mode, counter won't start untill it is visible.
228

329
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.6.
430

angular.json

+40-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"build": {
1818
"builder": "@angular-devkit/build-angular:browser",
1919
"options": {
20-
"outputPath": "dist/mat-circle-counter",
20+
"outputPath": "docs",
2121
"index": "src/index.html",
2222
"main": "src/main.ts",
2323
"polyfills": "src/polyfills.ts",
@@ -28,6 +28,7 @@
2828
"src/assets"
2929
],
3030
"styles": [
31+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
3132
"src/styles.scss"
3233
],
3334
"scripts": []
@@ -88,6 +89,7 @@
8889
"src/assets"
8990
],
9091
"styles": [
92+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
9193
"src/styles.scss"
9294
],
9395
"scripts": []
@@ -119,6 +121,42 @@
119121
}
120122
}
121123
}
122-
}},
124+
},
125+
"ngx-mat-circle-counter": {
126+
"projectType": "library",
127+
"root": "projects/ngx-mat-circle-counter",
128+
"sourceRoot": "projects/ngx-mat-circle-counter/src",
129+
"prefix": "lib",
130+
"architect": {
131+
"build": {
132+
"builder": "@angular-devkit/build-ng-packagr:build",
133+
"options": {
134+
"tsConfig": "projects/ngx-mat-circle-counter/tsconfig.lib.json",
135+
"project": "projects/ngx-mat-circle-counter/ng-package.json"
136+
}
137+
},
138+
"test": {
139+
"builder": "@angular-devkit/build-angular:karma",
140+
"options": {
141+
"main": "projects/ngx-mat-circle-counter/src/test.ts",
142+
"tsConfig": "projects/ngx-mat-circle-counter/tsconfig.spec.json",
143+
"karmaConfig": "projects/ngx-mat-circle-counter/karma.conf.js"
144+
}
145+
},
146+
"lint": {
147+
"builder": "@angular-devkit/build-angular:tslint",
148+
"options": {
149+
"tsConfig": [
150+
"projects/ngx-mat-circle-counter/tsconfig.lib.json",
151+
"projects/ngx-mat-circle-counter/tsconfig.spec.json"
152+
],
153+
"exclude": [
154+
"**/node_modules/**"
155+
]
156+
}
157+
}
158+
}
159+
}
160+
},
123161
"defaultProject": "mat-circle-counter"
124162
}

docs/favicon.ico

5.3 KB
Binary file not shown.

docs/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>MatCircleCounter</title>
6+
<base href="/">
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="icon" type="image/x-icon" href="favicon.ico">
10+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css"></head>
13+
</head>
14+
<body>
15+
<app-root></app-root>
16+
<script src="runtime-es2015.js" type="module"></script><script src="polyfills-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule></script><script src="polyfills-es5.js" nomodule></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule></script><script src="vendor-es2015.js" type="module"></script><script src="main-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule></script><script src="main-es5.js" nomodule></script></body>
17+
</html>

docs/main-es2015.js

+392
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/main-es2015.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/main-es5.js

+405
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/main-es5.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)