",
"homepage": "https://www.proangular.com",
@@ -15,11 +15,13 @@
"lint": "ng lint",
"lint-staged": "lint-staged",
"npm-build-package": "ng-packagr -p ng-package.json",
+ "ng": "ng",
"postinstall": "is-ci || husky install",
"prepare": "husky install",
"prettier": "prettier --write .",
"prettier:check": "prettier --check .",
"start": "ng serve --open",
+ "test": "ng test",
"start:prod": "ng serve --configuration production --open"
},
"peerDependencies": {
@@ -41,7 +43,6 @@
"@angular/forms": "^14.1.0",
"@angular/platform-browser-dynamic": "^14.1.0",
"@angular/router": "^14.1.0",
- "@types/fs-extra": "^9.0.13",
"@types/jasmine": "~4.0.0",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",
@@ -53,7 +54,6 @@
"eslint-plugin-rxjs": "^5.0.2",
"eslint-plugin-rxjs-angular": "^2.0.0",
"eslint-plugin-unicorn": "^43.0.1",
- "fs-extra": "^10.1.0",
"husky": "^8.0.1",
"is-ci": "^3.0.1",
"jasmine-core": "~4.2.0",
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
new file mode 100644
index 0000000..059bb54
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [AppComponent],
+ }).compileComponents();
+ });
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index acf081c..7cfabd0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,40 +3,27 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-app',
template: `
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimssy
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip expir
- ea commodo consequat. Duis aute irure dolor in reprehenderit in esselpa
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteury
- sint occaecat cupidatat non proident, sunt in culpa qui officia luretzo
- deserunt mollit anim id est laborum.
-
-
-
+
+ @proangular/ngx-scroll-top
+ Scroll down to demo
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimssy
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip expir
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in esselpa
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteury
+ sint occaecat cupidatat non proident, sunt in culpa qui officia luretzo
+ deserunt mollit anim id est laborum.
+
+
+ `,
+ styles: [
+ `
+ section {
+ padding: 1rem;
+ }
+ `,
+ ],
+})
+export class BodyComponent {
+ public readonly Array = Array;
+}
diff --git a/src/app/layout/footer.component.ts b/src/app/layout/footer.component.ts
new file mode 100644
index 0000000..1f60d58
--- /dev/null
+++ b/src/app/layout/footer.component.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-footer',
+ template: `
+
+
+
+
+ Copyright © Pro Angular 2022
+ {{ currentYear > 2022 ? ' - ' + currentYear : '' }}
+
+
+ Pro Angular is not affiliated, associated, authorized, endorsed by, or
+ in any way officially connected with Angular, or any of its subsidiaries
+ or its affiliates.
+ https://angular.io/ . The names Angular as well as related names, marks, emblems and images
+ are registered trademarks of their respective owners.
+
+
+ `,
+ styles: [
+ `
+ footer {
+ background-color: #1775d1;
+ text-align: center;
+ color: #ffffff;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-content: center;
+ justify-content: center;
+ align-items: center;
+ }
+ `,
+ ],
+})
+export class FooterComponent {
+ public readonly currentYear = new Date().getFullYear();
+ public readonly height = 420;
+}
diff --git a/src/app/layout/header.component.ts b/src/app/layout/header.component.ts
new file mode 100644
index 0000000..42f1791
--- /dev/null
+++ b/src/app/layout/header.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-header',
+ template: `
+
+ `,
+ styles: [
+ `
+ header {
+ background-color: #1775d1;
+ padding: 0.5rem 1rem;
+ }
+ `,
+ ],
+})
+export class HeaderComponent {}
diff --git a/src/app/layout/index.ts b/src/app/layout/index.ts
new file mode 100644
index 0000000..5109b14
--- /dev/null
+++ b/src/app/layout/index.ts
@@ -0,0 +1,3 @@
+export { BodyComponent } from './body.component';
+export { FooterComponent } from './footer.component';
+export { HeaderComponent } from './header.component';
diff --git a/src/app/public/ngx-scroll-top.component.ts b/src/app/public/ngx-scroll-top.component.ts
index 37a4135..fb8a286 100644
--- a/src/app/public/ngx-scroll-top.component.ts
+++ b/src/app/public/ngx-scroll-top.component.ts
@@ -16,11 +16,12 @@ import {
[style.background-color]="backgroundColor"
[@easeInOutAnimation]
>
-
+
* {
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ }
button {
+ font-size: inherit;
+ overflow: hidden;
display: inline-block;
position: relative;
transition: all 0.1s ease-in-out;
- color: white;
+ color: inherit;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
@@ -71,7 +93,6 @@ import {
vertical-align: baseline;
text-align: center;
margin: 0;
- /** line-height: 36px; */
border-radius: 50%;
padding: 0;
flex-shrink: 0;
@@ -81,6 +102,11 @@ import {
width: 100%;
height: 100%;
}
+ svg.default-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
`,
],
})
@@ -88,52 +114,76 @@ export class NgxScrollTopComponent implements OnInit {
/**
* Background color of the back to top button (hex string).
*
- * Default: `#1775d1` (blue)
+ * Default: `'#0D58C0'` (dark-blue)
+ *
+ * Example: `'#000'` or `'black'`
+ *
+ * Tip: Define any `'x'` css property available for `'background-color: x'`
*/
- @Input() public backgroundColor = '#1775d1';
+ @Input() public backgroundColor = '#0D58C0';
/**
* Offset `px` from bottom of page when scrolled to bottom. For example this
* can be used to make sure the back to top button never overlaps a footer.
*
- * Default: `0px`
+ * Default: `'0px'`
*
- * Example: `250px` or `250` because my footer is 250px in height
+ * Example: `'250px'` or `250` because my footer is 250px in height
*/
@Input() public bottomOffset: string | number = '0px';
/**
* The back to top button will not be displayed until the user scrolls to the
* provided Y (vertical `px`) coordinate on the page.
*
- * Default: `420px`
+ * Default: `'420px'`
*
- * Example: `100px` or `100`
+ * Example: `'100px'` or `100`
*/
@Input() public displayAtYPosition: string | number = '420px';
/**
- * Position on-screen where the back to top button is displayed.
+ * The font color for the nested content within the back to top button.
+ *
+ * Default: `'#FFFFFF'` (white)
+ *
+ * Example: `'#000'` or `'black'`
*
- * Default: `right`
+ * Tip: Define any `'x'` css property available for `'color: x'`
*/
- @Input() public position: 'left' | 'right' = 'right';
+ @Input() @HostBinding('style.color') public fontColor = '#FFFFFF';
+ /**
+ * The font size for the nested content within the back to top button.
+ *
+ * Default: `'16px'`
+ *
+ * Example: `'2rem'` or `'32px'`
+ *
+ * Tip: Define any `'x'` css property available for `'font-size: x'`
+ */
+ @Input() @HostBinding('style.font-size') public fontSize = '16px';
/**
* Height of back to top button in string px format.
*
- * Default: `25px`
+ * Default: `'25px'`
*/
- @Input() @HostBinding('style.height') public styleHeight = '40px';
+ @Input() @HostBinding('style.height') public height = '40px';
+ /**
+ * Position on-screen where the back to top button is displayed.
+ *
+ * Default: `'right'`
+ */
+ @Input() public position: 'left' | 'right' = 'right';
/**
* Width of back to top button in string px format.
*
- * Default: `25px`
+ * Default: `'25px'`
*/
- @Input() @HostBinding('style.width') public styleWidth = '40px';
+ @Input() @HostBinding('style.width') public width = '40px';
/**
* Style the `z-index` for the back to top button as needed for correct layer
* height adjustment. This can be useful when working with sticky headers.
*
* Default: `999`
*/
- @Input() @HostBinding('style.z-index') public styleZIndex = 999;
+ @Input() @HostBinding('style.z-index') public zIndex = 999;
public isHidden = true;
private readonly defaultPadding = '16px';
@@ -184,7 +234,7 @@ export class NgxScrollTopComponent implements OnInit {
const bottomY = docEl.scrollHeight - docEl.clientHeight;
const bottomOffset = parsePxStringToInt(this.bottomOffset);
const distanceFromBottom = bottomY - scrollY;
- const halfHeight = parsePxStringToInt(this.styleHeight) / 2;
+ const halfHeight = parsePxStringToInt(this.height) / 2;
const defaultPadding = parsePxStringToInt(this.defaultPadding);
if (distanceFromBottom + (halfHeight - defaultPadding) < bottomOffset) {
diff --git a/src/assets/images/pro-angular-logo-full.png b/src/assets/images/pro-angular-logo-full.png
new file mode 100644
index 0000000..0696eea
Binary files /dev/null and b/src/assets/images/pro-angular-logo-full.png differ
diff --git a/src/index.html b/src/index.html
index 54aa038..67d30f9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
ngx-scroll-top
+ ngx-scroll-top demo
-# Usage
+To run this demo:
+* `git clone https://github.com/ProAngular/ngx-scroll-top.git`
+* `cd ngx-scroll-top`
+* `npm install`
+* `npm run start`
-Install package
+# Installation and importing
+
+## Installation
+
+Angular
+```bash
+ng add @proangular/ngx-scroll-top@latest
+```
+
+Direct
```bash
npm install @proangular/ngx-scroll-top --save
```
-Import package
+## Import
+
+Import package into the module of your choice
```diff
...
+ import { NgxScrollTopModule } from '@proangular/ngx-scroll-top';
@@ -48,39 +63,42 @@ Import package
export class AppModule { }
```
-Use package
+# Usage and Examples
+
+Default use (blue button with white icon)
```html
+
+