Skip to content

Commit

Permalink
feat: form control support (#9)
Browse files Browse the repository at this point in the history 
* chore: add fa-brands

* feat: form control support

Fixes #8 Fixes #3
  • Loading branch information
@bobbyg603
bobbyg603 authored Feb 18, 2023
1 parent 427317c commit 8439965
Show file tree
Hide file tree
Showing 19 changed files with 2,509 additions and 1,847 deletions.
3,329 changes: 1,815 additions & 1,514 deletions package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,10 @@
"@angular/platform-browser-dynamic": "^15.1.5",
"@angular/router": "^15.1.5",
"@bugsplat/ngx-animated-counter": "^2.0.0",
"@fortawesome/angular-fontawesome": "^0.10.1",
"@fortawesome/fontawesome-svg-core": "~1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/angular-fontawesome": "^0.12.1",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@ng-bootstrap/ng-bootstrap": "^14.0.1",
"@popperjs/core": "^2.11.5",
"bootstrap": "^5.1.3",
Expand Down
151 changes: 41 additions & 110 deletions projects/ngx-toggle-example/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,43 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="https://github.com/bobbyg603/ngx-toggle" target="_blank">
ngx-toggle
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-label="Toggle navigation" [attr.aria-expanded]="!isNavbarCollapsed"
(click)="isNavbarCollapsed = !isNavbarCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isNavbarCollapsed">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" [routerLink]="['pricing']" [routerLinkActive]="['active']">Toggle</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['checkout']" [routerLinkActive]="['active']">Form Control</a>
</li>
</ul>

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="https://betterprogramming.pub/ci-cd-for-angular-developers-be9a1485d22b">
<fa-icon [icon]="faMedium" size="xl" aria-hidden="true"></fa-icon>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/bobbyg603/ngx-toggle">
<fa-icon [icon]="faGithub" size="xl" aria-hidden="true"></fa-icon>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/bobbyg603">
<fa-icon [icon]="faTwitter" size="xl" aria-hidden="true"></fa-icon>
</a>
</li>
</ul>
</div>
</div>
</nav>
<section>
<div class="container-fluid">
<div class="container">
Expand All @@ -6,116 +46,7 @@
<h1>ngx-toggle-example</h1>
</div>
</div>
<div class="row">
<div class="col-12 py-4 text-center">
Monthly
<ngx-toggle id="toggle-example" [(checked)]="checked" [disabled]="false"
(checkedChange)="onCheckedChange($event)">
</ngx-toggle>
Annually
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 my-4 my-md-0 my-4 my-md-0">
<div class="card text-center">
<div class="title">
<div class="icon mx-auto">
<fa-icon [icon]="faPaperPlane" aria-hidden="true"></fa-icon>
</div>
<h2>Basic</h2>
</div>
<div class="price">
<h4>
<sup>$</sup>
<ngx-animated-counter [params]="basicPriceParams"></ngx-animated-counter>
</h4>
</div>
<div class="option">
<ul>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #1
</li>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #2
</li>
<li>
<fa-icon [icon]="faTimes" aria-hidden="true"></fa-icon> Feature #3
</li>
<li>
<fa-icon [icon]="faTimes" aria-hidden="true"></fa-icon> Feature #4
</li>
</ul>
</div>
<a href="#">Order Now</a>
</div>
</div>
<div class="col-12 col-md-4 my-4 my-md-0">
<div class="card text-center">
<div class="title">
<div class="icon mx-auto">
<fa-icon [icon]="faPlane" aria-hidden="true"></fa-icon>
</div>
<h2>Standard</h2>
</div>
<div class="price">
<h4>
<sup>$</sup>
<ngx-animated-counter [params]="standardPriceParams"></ngx-animated-counter>
</h4>
</div>
<div class="option">
<ul>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #1
</li>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #2
</li>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #3
</li>
<li>
<fa-icon [icon]="faTimes" aria-hidden="true"></fa-icon> Feature #4
</li>
</ul>
</div>
<a href="#">Order Now</a>
</div>
</div>
<div class="col-12 col-md-4 my-4 my-md-0">
<div class="card text-center">
<div class="title">
<div class="icon mx-auto">
<fa-icon [icon]="faSpaceShuttle" aria-hidden="true"></fa-icon>
</div>
<h2>Premium</h2>
</div>
<div class="price">
<h4>
<sup>$</sup>
<ngx-animated-counter [params]="premiumPriceParams"></ngx-animated-counter>
</h4>
</div>
<div class="option">
<ul>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #1
</li>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #2
</li>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #3
</li>
<li>
<fa-icon [icon]="faCheck" aria-hidden="true"></fa-icon> Feature #4
</li>
</ul>
</div>
<a href="#">Order Now</a>
</div>
</div>
</div>
<router-outlet></router-outlet>
</div>
</div>
</section>
115 changes: 0 additions & 115 deletions projects/ngx-toggle-example/src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,119 +5,4 @@ section {
height: 100vh;
box-sizing: border-box;
padding: 50px 0;
}

.card {
position: relative;
max-width: 300px;
height: auto;
background: linear-gradient(-45deg, #fe0847, #feae3f);
border-radius: 15px;
margin: 0 auto;
padding: 40px 20px;
box-shadow: 0 10px 15px rgba(0, 0, 0, .3);
transition: .5s;
overflow: hidden;
}

.card:hover {
transform: scale(1.1);
}

.col-12.col-md-4:nth-child(1) .card,
.col-12.col-md-4:nth-child(1) .card .title .fa {
background: linear-gradient(-45deg, #f403d1, #64b5f6);
}

.col-12.col-md-4:nth-child(2) .card,
.col-12.col-md-4:nth-child(2) .card .title .fa {
background: linear-gradient(-45deg, #ffec61, #f321d7);
}

.col-12.col-md-4:nth-child(3) .card,
.col-12.col-md-4:nth-child(3) .card .title .fa {
background: linear-gradient(-45deg, #24ff72, #9a4eff);
}

.card:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: rgba(255, 255, 255, .1);
z-index: 1;
transform: skewY(-5deg) scale(1.2);
}

.title .icon {
color: #fff;
font-size: 60px;
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
box-shadow: 0 10px 10px rgba(0, 0, 0, .2)
}

.title h2 {
position: relative;
margin: 20px 0 0;
padding: 0;
color: #fff;
font-size: 28px;
z-index: 2;
}

.price {
position: relative;
z-index: 2;
}

.price h4 {
margin: 0;
padding: 20px 0;
color: #fff;
font-size: 60px;
}

.option {
position: relative;
z-index: 2;
}

.option ul {
margin: 0;
padding: 0;
}

.option ul li {
margin: 0 0 10px;
padding: 0;
list-style: none;
color: #fff;
font-size: 16px;
}

.card a {
position: relative;
z-index: 2;
background: #fff;
color: #2c3e50;
width: 150px;
height: 40px;
display: block;
line-height: 40px;
border-radius: 40px;
font-size: 16px;
text-align: center;
margin: 20px auto 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.card a:hover {
text-decoration: none;
background: #ecf0f1;
}
11 changes: 3 additions & 8 deletions projects/ngx-toggle-example/src/app/app.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { NgxAnimatedCounterModule } from '@bugsplat/ngx-animated-counter';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgxToggleComponent } from 'ngx-toggle';
Expand All @@ -9,7 +10,8 @@ describe('AppComponent', () => {
await TestBed.configureTestingModule({
imports: [
NgxAnimatedCounterModule,
FontAwesomeModule
FontAwesomeModule,
RouterTestingModule
],
declarations: [
AppComponent,
Expand All @@ -29,11 +31,4 @@ describe('AppComponent', () => {
const app = fixture.componentInstance;
expect(app.title).toEqual('ngx-toggle-example');
});

it('should render ngx-toggle', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('ngx-toggle i')).toBeTruthy();
});
});
34 changes: 5 additions & 29 deletions projects/ngx-toggle-example/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { faCheck, faPaperPlane, faPlane, faSpaceShuttle, faTimes } from '@fortawesome/free-solid-svg-icons';
import { faGithub, faMedium, faTwitter } from '@fortawesome/free-brands-svg-icons';

@Component({
selector: 'app-root',
Expand All @@ -9,34 +9,10 @@ import { faCheck, faPaperPlane, faPlane, faSpaceShuttle, faTimes } from '@fortaw
export class AppComponent {
title = 'ngx-toggle-example';

faCheck = faCheck;
faPaperPlane = faPaperPlane;
faPlane = faPlane;
faTimes = faTimes;
faSpaceShuttle = faSpaceShuttle;
faGithub = faGithub;
faMedium = faMedium;
faTwitter = faTwitter;

checked = false;

basicPriceParams = createNgAnimatedCounterParams(25, 25);
standardPriceParams = createNgAnimatedCounterParams(50, 50);
premiumPriceParams = createNgAnimatedCounterParams(100, 100);

onCheckedChange(checked: boolean): void {
console.log('checked:', checked);
if (checked) {
this.basicPriceParams = createNgAnimatedCounterParams(25, 12);
this.standardPriceParams = createNgAnimatedCounterParams(50, 25);
this.premiumPriceParams = createNgAnimatedCounterParams(100, 50);
} else {
this.basicPriceParams = createNgAnimatedCounterParams(12, 25);
this.standardPriceParams = createNgAnimatedCounterParams(25, 50);
this.premiumPriceParams = createNgAnimatedCounterParams(50, 100);
}
}
isNavbarCollapsed = true;
}

const createNgAnimatedCounterParams = (start: number, end: number) => ({
start,
end,
interval: 5
});
Loading

0 comments on commit 8439965

Please sign in to comment.