ewandor/cht-lawfirm
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

removing CoreUi bloat

Browse Source
This commit is contained in:
ewandor
2023-02-06 18:53:06 +01:00
parent 920bb39ca1
commit 99124e1421
285 changed files with 2249 additions and 28730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
front/app/src/app/app-routing.module.ts
View File

@@ -1,128 +1,41 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DefaultLayoutComponent } from './containers';
import { Page404Component } from './views/pages/page404/page404.component';
import { Page500Component } from './views/pages/page500/page500.component';
import { LoginComponent } from './views/pages/login/login.component';
import { RegisterComponent } from './views/pages/register/register.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'Home'
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
children: [
{
path: 'dashboard',
loadChildren: () =>
import('./views/dashboard/dashboard.module').then((m) => m.DashboardModule)
},
{
path: 'entities',
loadChildren: () =>
import('./views/entities/entities.module').then((m) => m.EntitiesModule)
},
{
path: 'templates',
loadChildren: () =>
import('./views/templates/templates.module').then((m) => m.TemplatesModule)
},
{
path: 'theme',
loadChildren: () =>
import('./views/theme/theme.module').then((m) => m.ThemeModule)
},
{
path: 'base',
loadChildren: () =>
import('./views/base/base.module').then((m) => m.BaseModule)
},
{
path: 'buttons',
loadChildren: () =>
import('./views/buttons/buttons.module').then((m) => m.ButtonsModule)
},
{
path: 'forms',
loadChildren: () =>
import('./views/forms/forms.module').then((m) => m.CoreUIFormsModule)
},
{
path: 'charts',
loadChildren: () =>
import('./views/charts/charts.module').then((m) => m.ChartsModule)
},
{
path: 'icons',
loadChildren: () =>
import('./views/icons/icons.module').then((m) => m.IconsModule)
},
{
path: 'notifications',
loadChildren: () =>
import('./views/notifications/notifications.module').then((m) => m.NotificationsModule)
},
{
path: 'widgets',
loadChildren: () =>
import('./views/widgets/widgets.module').then((m) => m.WidgetsModule)
},
{
path: 'pages',
loadChildren: () =>
import('./views/pages/pages.module').then((m) => m.PagesModule)
},
]
},
{
path: '404',
component: Page404Component,
data: {
title: 'Page 404'
{
path: '',
//component: DefaultLayoutComponent,
data: {
title: 'Home'
},
children: [
// {
// path: 'dashboard',
// loadChildren: () =>
// import('./views/dashboard/dashboard.module').then((m) => m.DashboardModule)
// },
{
path: 'entities',
loadChildren: () =>
import('./views/entities/entities.module').then((m) => m.EntitiesModule)
},
{
path: 'templates',
loadChildren: () =>
import('./views/templates/templates.module').then((m) => m.TemplatesModule)
},
]
}
},
{
path: '500',
component: Page500Component,
data: {
title: 'Page 500'
}
},
{
path: 'login',
component: LoginComponent,
data: {
title: 'Login Page'
}
},
{
path: 'register',
component: RegisterComponent,
data: {
title: 'Register Page'
}
},
{path: '**', redirectTo: 'dashboard'}
];
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'top',
anchorScrolling: 'enabled',
initialNavigation: 'enabledBlocking'
// relativeLinkResolution: 'legacy'
})
],
exports: [RouterModule]
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
export class AppRoutingModule { }

0
front/app/src/app/containers/default-layout/default-footer/default-footer.component.scss → front/app/src/app/app.component.css
View File

368
front/app/src/app/app.component.html Normal file
View File

@@ -0,0 +1,368 @@
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 8px;
}
.toolbar #youtube-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover,
.toolbar #youtube-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 82px auto 32px;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
all: unset;
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
<a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
<svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<title>Rocket Ship</title>
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<title>Rocket Ship Smoke</title>
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<title>Gray Clouds Background</title>
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<router-outlet></router-outlet>

11
front/app/src/app/app.component.spec.ts
View File

@@ -20,9 +20,16 @@ describe('AppComponent', () => {
expect(app).toBeTruthy();
});
it(`should have as title 'CoreUI Free Angular Admin Template'`, () => {
it(`should have as title 'app'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('CoreUI Free Angular Admin Template');
expect(app.title).toEqual('app');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('app app is running!');
});
});

32
front/app/src/app/app.component.ts
View File

@@ -1,32 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from './icons/icon-subset';
import { Title } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'CoreUI Free Angular Admin Template';
constructor(
private router: Router,
private titleService: Title,
private iconSetService: IconSetService
) {
titleService.setTitle(this.title);
// iconSet singleton
iconSetService.icons = { ...iconSubset };
}
ngOnInit(): void {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
});
}
export class AppComponent {
title = 'app';
}

102
front/app/src/app/app.module.ts
View File

@@ -1,106 +1,20 @@
import { NgModule } from '@angular/core';
import { HashLocationStrategy, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { BrowserModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import {
PERFECT_SCROLLBAR_CONFIG,
PerfectScrollbarConfigInterface,
PerfectScrollbarModule,
} from 'ngx-perfect-scrollbar';
// Import routing module
import { AppRoutingModule } from './app-routing.module';
// Import app component
import { AppComponent } from './app.component';
// Import containers
import {
DefaultFooterComponent,
DefaultHeaderComponent,
DefaultLayoutComponent,
} from './containers';
import {
AvatarModule,
BadgeModule,
BreadcrumbModule,
ButtonGroupModule,
ButtonModule,
CardModule,
DropdownModule,
FooterModule,
FormModule,
GridModule,
HeaderModule,
ListGroupModule,
NavModule,
ProgressModule,
SharedModule,
SidebarModule,
TabsModule,
UtilitiesModule,
} from '@coreui/angular';
import { IconModule, IconSetService } from '@coreui/icons-angular';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true,
};
const APP_CONTAINERS = [
DefaultFooterComponent,
DefaultHeaderComponent,
DefaultLayoutComponent,
];
@NgModule({
declarations: [AppComponent, ...APP_CONTAINERS],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AvatarModule,
BreadcrumbModule,
FooterModule,
DropdownModule,
GridModule,
HeaderModule,
SidebarModule,
IconModule,
PerfectScrollbarModule,
NavModule,
ButtonModule,
FormModule,
UtilitiesModule,
ButtonGroupModule,
ReactiveFormsModule,
SidebarModule,
SharedModule,
TabsModule,
ListGroupModule,
ProgressModule,
BadgeModule,
ListGroupModule,
CardModule,
NgbModule,
NgbModule
],
providers: [
{
provide: LocationStrategy,
useClass: HashLocationStrategy,
},
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG,
},
IconSetService,
Title
],
bootstrap: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
export class AppModule { }

293
front/app/src/app/containers/default-layout/_nav.ts
View File

@@ -1,293 +0,0 @@
import { INavData } from '@coreui/angular';
export const navItems: INavData[] = [
{
name: 'Dashboard',
url: '/dashboard',
iconComponent: { name: 'cil-speedometer' },
badge: {
color: 'info',
text: 'NEW'
}
},
{
name: 'Entities',
url: '/entities',
iconComponent: { name: 'cil-cursor' },
children: [
{
name: 'List',
url: '/entities/list'
},
{
name: 'New',
url: '/entities/new'
},
]
},
{
name: 'Templates',
title: true
},
{
name: 'Contract Templates',
url: '/templates/contracts',
iconComponent: { name: 'cil-cursor' },
children: [
{
name: 'List',
url: '/templates/contracts/list'
},
{
name: 'New',
url: '/templates/contracts/new'
},
]
},
{
name: 'Provision Templates',
url: '/templates/provisions',
iconComponent: { name: 'cil-cursor' },
children: [
{
name: 'List',
url: '/templates/provisions/list'
},
{
name: 'New',
url: '/templates/provisions/new'
},
]
},
{
title: true,
name: 'Theme'
},
{
name: 'Colors',
url: '/theme/colors',
iconComponent: { name: 'cil-drop' }
},
{
name: 'Typography',
url: '/theme/typography',
linkProps: { fragment: 'someAnchor' },
iconComponent: { name: 'cil-pencil' }
},
{
name: 'Components',
title: true
},
{
name: 'Base',
url: '/base',
iconComponent: { name: 'cil-puzzle' },
children: [
{
name: 'Accordion',
url: '/base/accordion'
},
{
name: 'Breadcrumbs',
url: '/base/breadcrumbs'
},
{
name: 'Cards',
url: '/base/cards'
},
{
name: 'Carousel',
url: '/base/carousel'
},
{
name: 'Collapse',
url: '/base/collapse'
},
{
name: 'List Group',
url: '/base/list-group'
},
{
name: 'Navs & Tabs',
url: '/base/navs'
},
{
name: 'Pagination',
url: '/base/pagination'
},
{
name: 'Placeholder',
url: '/base/placeholder'
},
{
name: 'Popovers',
url: '/base/popovers'
},
{
name: 'Progress',
url: '/base/progress'
},
{
name: 'Spinners',
url: '/base/spinners'
},
{
name: 'Tables',
url: '/base/tables'
},
{
name: 'Tabs',
url: '/base/tabs'
},
{
name: 'Tooltips',
url: '/base/tooltips'
}
]
},
{
name: 'Buttons',
url: '/buttons',
iconComponent: { name: 'cil-cursor' },
children: [
{
name: 'Buttons',
url: '/buttons/buttons'
},
{
name: 'Button groups',
url: '/buttons/button-groups'
},
{
name: 'Dropdowns',
url: '/buttons/dropdowns'
},
]
},
{
name: 'Forms',
url: '/forms',
iconComponent: { name: 'cil-notes' },
children: [
{
name: 'Form Control',
url: '/forms/form-control'
},
{
name: 'Select',
url: '/forms/select'
},
{
name: 'Checks & Radios',
url: '/forms/checks-radios'
},
{
name: 'Range',
url: '/forms/range'
},
{
name: 'Input Group',
url: '/forms/input-group'
},
{
name: 'Floating Labels',
url: '/forms/floating-labels'
},
{
name: 'Layout',
url: '/forms/layout'
},
{
name: 'Validation',
url: '/forms/validation'
}
]
},
{
name: 'Charts',
url: '/charts',
iconComponent: { name: 'cil-chart-pie' }
},
{
name: 'Icons',
iconComponent: { name: 'cil-star' },
url: '/icons',
children: [
{
name: 'CoreUI Free',
url: '/icons/coreui-icons',
badge: {
color: 'success',
text: 'FREE'
}
},
{
name: 'CoreUI Flags',
url: '/icons/flags'
},
{
name: 'CoreUI Brands',
url: '/icons/brands'
}
]
},
{
name: 'Notifications',
url: '/notifications',
iconComponent: { name: 'cil-bell' },
children: [
{
name: 'Alerts',
url: '/notifications/alerts'
},
{
name: 'Badges',
url: '/notifications/badges'
},
{
name: 'Modal',
url: '/notifications/modal'
},
{
name: 'Toast',
url: '/notifications/toasts'
}
]
},
{
name: 'Widgets',
url: '/widgets',
iconComponent: { name: 'cil-calculator' },
badge: {
color: 'info',
text: 'NEW'
}
},
{
title: true,
name: 'Extras'
},
{
name: 'Pages',
url: '/login',
iconComponent: { name: 'cil-star' },
children: [
{
name: 'Login',
url: '/login'
},
{
name: 'Register',
url: '/register'
},
{
name: 'Error 404',
url: '/404'
},
{
name: 'Error 500',
url: '/500'
}
]
},
];

12
front/app/src/app/containers/default-layout/default-footer/default-footer.component.html
View File

@@ -1,12 +0,0 @@
<!--<c-footer>-->
<div>
<a href="https://coreui.io/pro/angular/" target="_blank">CoreUI</a>
<span> &copy; 2022 creativeLabs</span>
</div>
<div class="ms-auto">
Powered by
<a href="https://coreui.io/pro/angular" target="_blank">
<span> CoreUI v4 for Angular</span>
</a>
</div>
<!--</c-footer>-->

25
front/app/src/app/containers/default-layout/default-footer/default-footer.component.spec.ts
View File

@@ -1,25 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DefaultFooterComponent } from './default-footer.component';
describe('DefaultFooterComponent', () => {
let component: DefaultFooterComponent;
let fixture: ComponentFixture<DefaultFooterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DefaultFooterComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(DefaultFooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

13
front/app/src/app/containers/default-layout/default-footer/default-footer.component.ts
View File

@@ -1,13 +0,0 @@
import { Component } from '@angular/core';
import { FooterComponent } from '@coreui/angular';
@Component({
selector: 'app-default-footer',
templateUrl: './default-footer.component.html',
styleUrls: ['./default-footer.component.scss'],
})
export class DefaultFooterComponent extends FooterComponent {
constructor() {
super();
}
}

165
front/app/src/app/containers/default-layout/default-header/default-header.component.html
View File

@@ -1,165 +0,0 @@
<!--<c-header class="mb-4 d-print-none" position="sticky">-->
<ng-container>
<c-container [fluid]="true">
<button
toggle="visible"
cHeaderToggler
[cSidebarToggle]="sidebarId"
class="ps-1"
>
<svg cIcon
name="cilMenu"
size="lg"
></svg>
</button>
<c-header-nav class="d-none d-lg-flex me-auto">
<c-nav-item>
<a cNavLink routerLink="/dashboard" routerLinkActive="active">
Dashboard
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="/users" routerLinkActive="active">Users</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="/settings" routerLinkActive="active">
Settings
</a>
</c-nav-item>
</c-header-nav>
<c-header-nav class="d-none d-lg-flex">
<c-nav-item>
<a routerLink="./" cNavLink>
<svg cIcon name="cilBell" size="lg"></svg>
</a>
</c-nav-item>
<c-nav-item>
<a routerLink="./" cNavLink>
<svg cIcon name="cilList" size="lg"></svg>
</a>
</c-nav-item>
<c-nav-item>
<a routerLink="./" cNavLink>
<svg cIcon name="cilEnvelopeOpen" size="lg"></svg>
</a>
</c-nav-item>
</c-header-nav>
<c-header-nav class="ms-3">
<ng-container *ngTemplateOutlet="userDropdown"></ng-container>
</c-header-nav>
</c-container>
<c-header-divider></c-header-divider>
<c-container [fluid]="true">
<c-breadcrumb-router class="ms-2"></c-breadcrumb-router>
</c-container>
</ng-container>
<!--</c-header>-->
<ng-template #userDropdown>
<c-dropdown alignment="end" variant="nav-item">
<button
cButton
color=""
[caret]="false"
cDropdownToggle
class="py-0"
>
<c-avatar
cTextColor="primary"
shape="rounded-1"
size="md"
src="./assets/img/avatars/8.jpg"
status="success"
>
</c-avatar>
</button>
<ul cDropdownMenu class="pt-0 pr-5 w-auto">
<li>
<h6 cDropdownHeader class="bg-light fw-semibold py-2">Account</h6>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilBell"></svg>
Updates
<c-badge class="ms-2 float-end" color="info">
42
</c-badge>
</a>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilEnvelopeOpen"></svg>
Messages
<c-badge class="ms-2 float-end" color="success">
42
</c-badge>
</a>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilTask"></svg>
Tasks
<c-badge class="ms-2 float-end" color="danger">
42
</c-badge>
</a>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name='cilCommentSquare'></svg>
Comments
<c-badge class="ms-auto" color="warning">
42
</c-badge>
</a>
</li>
<li>
<h6 cDropdownHeader class="bg-light fw-semibold py-2">Settings</h6>
</li>
<li></li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilUser"></svg>
Profile
</a>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilSettings"></svg>
Settings
</a>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilCreditCard"></svg>
Payments
<c-badge class="ms-2 float-end" color="secondary">
42
</c-badge>
</a>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilFile"></svg>
Projects
<c-badge class="ms-2 float-end" color="primary">
42
</c-badge>
</a>
</li>
<li>
<hr cDropdownDivider/>
</li>
<li>
<a routerLink="./" cDropdownItem>
<svg cIcon class="me-2" name="cilLockLocked"></svg>
Lock Account
</a>
</li>
<li></li>
</ul>
</c-dropdown>
</ng-template>

0
front/app/src/app/containers/default-layout/default-header/default-header.component.scss
View File

43
front/app/src/app/containers/default-layout/default-header/default-header.component.spec.ts
View File

@@ -1,43 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import {
AvatarModule,
BadgeModule,
BreadcrumbModule,
DropdownModule,
GridModule,
HeaderModule,
NavModule, SidebarModule
} from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DefaultHeaderComponent } from './default-header.component';
import { RouterTestingModule } from '@angular/router/testing';
describe('DefaultHeaderComponent', () => {
let component: DefaultHeaderComponent;
let fixture: ComponentFixture<DefaultHeaderComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [DefaultHeaderComponent],
imports: [GridModule, HeaderModule, NavModule, BadgeModule, AvatarModule, DropdownModule, BreadcrumbModule, RouterTestingModule, SidebarModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(DefaultHeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

21
front/app/src/app/containers/default-layout/default-header/default-header.component.ts
View File

@@ -1,21 +0,0 @@
import { Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ClassToggleService, HeaderComponent } from '@coreui/angular';
@Component({
selector: 'app-default-header',
templateUrl: './default-header.component.html',
})
export class DefaultHeaderComponent extends HeaderComponent {
@Input() sidebarId: string = "sidebar";
public newMessages = new Array(4)
public newTasks = new Array(5)
public newNotifications = new Array(5)
constructor(private classToggler: ClassToggleService) {
super();
}
}

51
front/app/src/app/containers/default-layout/default-layout.component.html
View File

@@ -1,51 +0,0 @@
<!--sidebar-->
<c-sidebar
#sidebar="cSidebar"
class="d-print-none sidebar sidebar-fixed"
id="sidebar"
visible
>
<c-sidebar-brand
[brandFull]="{
src: 'assets/img/brand/coreui-angular.svg',
width: 200,
height: 46,
alt: 'CoreUI Logo'
}"
[brandNarrow]="{
src: 'assets/img/brand/coreui-signet-white.svg',
width: 46,
height: 46,
alt: 'CoreUI Logo'
}"
routerLink="./"
>
</c-sidebar-brand>
<perfect-scrollbar [config]="perfectScrollbarConfig">
<!-- [perfectScrollbar]="perfectScrollbarConfig"-->
<c-sidebar-nav
[navItems]="navItems"
dropdownMode="close"
>
</c-sidebar-nav>
</perfect-scrollbar>
<c-sidebar-toggler
*ngIf="!sidebar.narrow"
toggle="unfoldable"
cSidebarToggle="sidebar"
></c-sidebar-toggler>
</c-sidebar>
<!--main-->
<div class="wrapper d-flex flex-column min-vh-100 bg-light dark:bg-transparent">
<!--app-header-->
<app-default-header class="mb-4 d-print-none header header-sticky" position="sticky" sidebarId="sidebar"></app-default-header>
<!--app-body-->
<div class="body flex-grow-1 px-3">
<c-container breakpoint="lg" class="h-auto">
<router-outlet></router-outlet>
</c-container>
</div>
<!--app footer-->
<app-default-footer></app-default-footer>
</div>

18
front/app/src/app/containers/default-layout/default-layout.component.ts
View File

@@ -1,18 +0,0 @@
import { Component } from '@angular/core';
import { navItems } from './_nav';
@Component({
selector: 'app-dashboard',
templateUrl: './default-layout.component.html',
})
export class DefaultLayoutComponent {
public navItems = navItems;
public perfectScrollbarConfig = {
suppressScrollX: true,
};
constructor() {}
}

3
front/app/src/app/containers/default-layout/index.ts
View File

@@ -1,3 +0,0 @@
export * from './default-footer/default-footer.component';
export * from './default-header/default-header.component';
export * from './default-layout.component';

1
front/app/src/app/containers/index.ts
View File

@@ -1 +0,0 @@
export * from './default-layout';

275
front/app/src/app/icons/icon-subset.ts
View File

@@ -1,275 +0,0 @@
import {
cibCcAmex,
cibCcApplePay,
cibCcMastercard,
cibCcPaypal,
cibCcStripe,
cibCcVisa,
cibFacebook,
cibGoogle,
cibLinkedin,
cibSkype,
cibTwitter,
cifBr,
cifEs,
cifFr,
cifIn,
cifPl,
cifUs,
cilAlignCenter,
cilAlignLeft,
cilAlignRight,
cilApplicationsSettings,
cilArrowBottom,
cilArrowRight,
cilArrowTop,
cilBasket,
cilBell,
cilBold,
cilBookmark,
cilCalculator,
cilCalendar,
cilChart,
cilChartPie,
cilCheck,
cilChevronLeft,
cilChevronRight,
cilCloudDownload,
cilCode,
cilCommentSquare,
cilCreditCard,
cilCursor,
cilDollar,
cilDrop,
cilEnvelopeClosed,
cilEnvelopeOpen,
cilFile,
cilHome,
cilInbox,
cilIndentDecrease,
cilIndentIncrease,
cilItalic,
cilJustifyCenter,
cilLayers,
cilList,
cilListNumbered,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMap,
cilMediaPlay,
cilMenu,
cilMoon,
cilNotes,
cilOptions,
cilPaperclip,
cilPaperPlane,
cilPen,
cilPencil,
cilPeople,
cilPrint,
cilPuzzle,
cilReportSlash,
cilSave,
cilSettings,
cilShare,
cilShareAll,
cilShareBoxed,
cilSpeech,
cilSpeedometer,
cilSpreadsheet,
cilStar,
cilSun,
cilTags,
cilTask,
cilTrash,
cilUnderline,
cilUser,
cilUserFemale,
cilUserFollow,
cilUserUnfollow,
} from '@coreui/icons';
export const iconSubset = {
cibCcAmex,
cibCcApplePay,
cibCcMastercard,
cibCcPaypal,
cibCcStripe,
cibCcVisa,
cibFacebook,
cibGoogle,
cibLinkedin,
cibSkype,
cibTwitter,
cifBr,
cifEs,
cifFr,
cifIn,
cifPl,
cifUs,
cilAlignCenter,
cilAlignLeft,
cilAlignRight,
cilApplicationsSettings,
cilArrowBottom,
cilArrowRight,
cilArrowTop,
cilBasket,
cilBell,
cilBold,
cilBookmark,
cilCalculator,
cilCalendar,
cilChart,
cilChartPie,
cilCheck,
cilChevronLeft,
cilChevronRight,
cilCloudDownload,
cilCode,
cilCommentSquare,
cilCreditCard,
cilCursor,
cilDollar,
cilDrop,
cilEnvelopeClosed,
cilEnvelopeOpen,
cilFile,
cilHome,
cilInbox,
cilIndentDecrease,
cilIndentIncrease,
cilItalic,
cilJustifyCenter,
cilLayers,
cilList,
cilListNumbered,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMap,
cilMediaPlay,
cilMenu,
cilMoon,
cilNotes,
cilOptions,
cilPaperclip,
cilPaperPlane,
cilPen,
cilPencil,
cilPeople,
cilPrint,
cilPuzzle,
cilReportSlash,
cilSave,
cilSettings,
cilShare,
cilShareAll,
cilShareBoxed,
cilSpeech,
cilSpeedometer,
cilSpreadsheet,
cilStar,
cilSun,
cilTags,
cilTask,
cilTrash,
cilUnderline,
cilUser,
cilUserFemale,
cilUserFollow,
cilUserUnfollow,
};
export enum IconSubset {
cibCcAmex = 'cibCcAmex',
cibCcApplePay = 'cibCcApplePay',
cibCcMastercard = 'cibCcMastercard',
cibCcPaypal = 'cibCcPaypal',
cibCcStripe = 'cibCcStripe',
cibCcVisa = 'cibCcVisa',
cibFacebook = 'cibFacebook',
cibGoogle = 'cibGoogle',
cibLinkedin = 'cibLinkedin',
cibSkype = 'cibSkype',
cibTwitter = 'cibTwitter',
cifBr = 'cifBr',
cifEs = 'cifEs',
cifFr = 'cifFr',
cifIn = 'cifIn',
cifPl = 'cifPl',
cifUs = 'cifUs',
cilAlignCenter = 'cilAlignCenter',
cilAlignLeft = 'cilAlignLeft',
cilAlignRight = 'cilAlignRight',
cilApplicationsSettings = 'cilApplicationsSettings',
cilArrowBottom = 'cilArrowBottom',
cilArrowRight = 'cilArrowRight',
cilArrowTop = 'cilArrowTop',
cilBasket = 'cilBasket',
cilBell = 'cilBell',
cilBold = 'cilBold',
cilBookmark = 'cilBookmark',
cilCalculator = 'cilCalculator',
cilCalendar = 'cilCalendar',
cilChart = 'cilChart',
cilChartPie = 'cilChartPie',
cilCheck='cilCheck',
cilChevronLeft = 'cilChevronLeft',
cilChevronRight = 'cilChevronRight',
cilCloudDownload = 'cilCloudDownload',
cilCode = 'cilCode',
cilCommentSquare = 'cilCommentSquare',
cilCreditCard = 'cilCreditCard',
cilCursor = 'cilCursor',
cilDollar = 'cilDollar',
cilDrop = 'cilDrop',
cilEnvelopeClosed = 'cilEnvelopeClosed',
cilEnvelopeOpen = 'cilEnvelopeOpen',
cilFile = 'cilFile',
cilHome = 'cilHome',
cilInbox = 'cilInbox',
cilIndentDecrease = 'cilIndentDecrease',
cilIndentIncrease = 'cilIndentIncrease',
cilItalic = 'cilItalic',
cilJustifyCenter = 'cilJustifyCenter',
cilLayers = 'cilLayers',
cilList = 'cilList',
cilListNumbered = 'cilListNumbered',
cilLocationPin = 'cilLocationPin',
cilLockLocked = 'cilLockLocked',
cilMagnifyingGlass = 'cilMagnifyingGlass',
cilMap = 'cilMap',
cilMediaPlay = 'cilMediaPlay',
cilMenu = 'cilMenu',
cilMoon = 'cilMoon',
cilNotes = 'cilNotes',
cilOptions = 'cilOptions',
cilPaperclip = 'cilPaperclip',
cilPaperPlane = 'cilPaperPlane',
cilPen = 'cilPen',
cilPencil = 'cilPencil',
cilPeople = 'cilPeople',
cilPrint = 'cilPrint',
cilPuzzle = 'cilPuzzle',
cilReportSlash = 'cilReportSlash',
cilSave = 'cilSave',
cilSettings = 'cilSettings',
cilShare = 'cilShare',
cilShareAll = 'cilShareAll',
cilShareBoxed = 'cilShareBoxed',
cilSpeech = 'cilSpeech',
cilSpeedometer = 'cilSpeedometer',
cilSpreadsheet = 'cilSpreadsheet',
cilStar = 'cilStar',
cilSun = 'cilSun',
cilTags = 'cilTags',
cilTask = 'cilTask',
cilTrash = 'cilTrash',
cilUnderline = 'cilUnderline',
cilUser = 'cilUser',
cilUserFemale = 'cilUserFemale',
cilUserFollow = 'cilUserFollow',
cilUserUnfollow = 'cilUserUnfollow',
}

121
front/app/src/app/views/base/accordion/accordions.component.html
View File

@@ -1,121 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/accordion" name="Accordion"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Accordion</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<app-docs-example href="components/accordion">
<c-accordion [alwaysOpen]="false" [flush]="false" class="shadow rounded-2">
<c-accordion-item #item0="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton cBgColor="info">
Accordion item #0
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div [innerHTML]="getAccordionBodyText('first')" cBgColor="info" class="accordion-body"></div>
</ng-template>
</c-accordion-item>
<c-accordion-item #item1="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
Accordion item #1
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div class="accordion-body">
<strong>This is the
<mark>#second</mark>
item accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</ng-template>
</c-accordion-item>
<c-accordion-item #item2="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
Accordion item #2
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div class="accordion-body">
<span [innerHTML]="getAccordionBodyText('third')"></span>
</div>
</ng-template>
</c-accordion-item>
</c-accordion>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Accordion</strong> flush
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<app-docs-example href="components/accordion#flush">
<c-accordion [flush]="true">
<c-accordion-item visible>
<ng-template cTemplateId="accordionHeader">
Accordion item #0
</ng-template>
<ng-template cTemplateId="accordionBody">
<span [innerHTML]="getAccordionBodyText('first')"></span>
</ng-template>
</c-accordion-item>
<c-accordion-item [visible]="false">
<ng-template cTemplateId="accordionHeader">
Accordion item #1
</ng-template>
<ng-template cTemplateId="accordionBody">
<span [innerHTML]="getAccordionBodyText('second')"></span>
</ng-template>
</c-accordion-item>
<c-accordion-item [visible]="false">
<ng-template cTemplateId="accordionHeader">
Accordion item #2
</ng-template>
<ng-template cTemplateId="accordionBody">
<span [innerHTML]="getAccordionBodyText('third')"></span>
</ng-template>
</c-accordion-item>
</c-accordion>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Accordion</strong> alwaysOpen
</c-card-header>
<c-card-body>
<app-docs-example href="components/accordion#always-open">
<c-accordion [alwaysOpen]="true" class="shadow accordion-custom rounded-2">
<c-accordion-item *ngFor="let item of items; let i = index;" [visible]="i===1">
<ng-template cTemplateId="accordionHeader">
Custom Accordion item #{{i}}
</ng-template>
<ng-template cTemplateId="accordionBody">
<small><i>{{i}}.</i></small>
<span [innerHTML]="getAccordionBodyText(i.toString())"></span>
</ng-template>
</c-accordion-item>
</c-accordion>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

6
front/app/src/app/views/base/accordion/accordions.component.scss
View File

@@ -1,6 +0,0 @@
:host ::ng-deep .accordion-custom {
.accordion-button {
background-color: var(--cui-dark);
color: var(--cui-white);
}
}

37
front/app/src/app/views/base/accordion/accordions.component.spec.ts
View File

@@ -1,37 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { AccordionModule, CardModule, GridModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { AccordionsComponent } from './accordions.component';
describe('AccordionsComponent', () => {
let component: AccordionsComponent;
let fixture: ComponentFixture<AccordionsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AccordionsComponent],
imports: [AccordionModule, NoopAnimationsModule, CardModule, GridModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(AccordionsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

29
front/app/src/app/views/base/accordion/accordions.component.ts
View File

@@ -1,29 +0,0 @@
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-accordions',
templateUrl: './accordions.component.html',
styleUrls: ['./accordions.component.scss']
})
export class AccordionsComponent {
items = [1, 2, 3, 4];
constructor(
private sanitizer: DomSanitizer
) { }
getAccordionBodyText(value: string) {
const textSample = `
<strong>This is the <mark>#${value}</mark> item accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
`;
return this.sanitizer.bypassSecurityTrustHtml(textSample);
}
}

146
front/app/src/app/views/base/base-routing.module.ts
View File

@@ -1,146 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccordionsComponent } from './accordion/accordions.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { CardsComponent } from './cards/cards.component';
import { CarouselsComponent } from './carousels/carousels.component';
import { CollapsesComponent } from './collapses/collapses.component';
import { ListGroupsComponent } from './list-groups/list-groups.component';
import { NavsComponent } from './navs/navs.component';
import { PaginationsComponent } from './paginations/paginations.component';
import { PopoversComponent } from './popovers/popovers.component';
import { ProgressComponent } from './progress/progress.component';
import { SpinnersComponent } from './spinners/spinners.component';
import { TablesComponent } from './tables/tables.component';
import { TooltipsComponent } from './tooltips/tooltips.component';
import { TabsComponent } from './tabs/tabs.component';
import { PlaceholdersComponent } from './placeholders/placeholders.component';
const routes: Routes = [
{
path: '',
data: {
title: 'Base',
},
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'cards',
},
{
path: 'accordion',
component: AccordionsComponent,
data: {
title: 'Accordion',
},
},
{
path: 'breadcrumbs',
component: BreadcrumbsComponent,
data: {
title: 'Breadcrumbs',
},
},
{
path: 'cards',
component: CardsComponent,
data: {
title: 'Cards',
},
},
{
path: 'carousel',
component: CarouselsComponent,
data: {
title: 'Carousel',
},
},
{
path: 'collapse',
component: CollapsesComponent,
data: {
title: 'Collapse',
},
},
{
path: 'list-group',
component: ListGroupsComponent,
data: {
title: 'List Group',
},
},
{
path: 'navs',
component: NavsComponent,
data: {
title: 'Navs & Tabs',
},
},
{
path: 'pagination',
component: PaginationsComponent,
data: {
title: 'Pagination',
},
},
{
path: 'placeholder',
component: PlaceholdersComponent,
data: {
title: 'Placeholder',
},
},
{
path: 'popovers',
component: PopoversComponent,
data: {
title: 'Popovers',
},
},
{
path: 'progress',
component: ProgressComponent,
data: {
title: 'Progress',
},
},
{
path: 'spinners',
component: SpinnersComponent,
data: {
title: 'Spinners',
},
},
{
path: 'tables',
component: TablesComponent,
data: {
title: 'Tables',
},
},
{
path: 'tabs',
component: TabsComponent,
data: {
title: 'Tabs',
},
},
{
path: 'tooltips',
component: TooltipsComponent,
data: {
title: 'Tooltips',
},
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class BaseRoutingModule {}

105
front/app/src/app/views/base/base.module.ts
View File

@@ -1,105 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
// CoreUI Modules
import {
AccordionModule,
BadgeModule,
BreadcrumbModule,
ButtonModule,
CardModule,
CarouselModule,
CollapseModule,
DropdownModule,
FormModule,
GridModule,
ListGroupModule,
NavModule,
PaginationModule,
PlaceholderModule,
PopoverModule,
ProgressModule,
SharedModule,
SpinnerModule,
TableModule,
TabsModule,
TooltipModule,
UtilitiesModule
} from '@coreui/angular';
import { IconModule } from '@coreui/icons-angular';
// utils
import { DocsComponentsModule } from '@docs-components/docs-components.module';
// views
import { AccordionsComponent } from './accordion/accordions.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { CardsComponent } from './cards/cards.component';
import { CarouselsComponent } from './carousels/carousels.component';
import { CollapsesComponent } from './collapses/collapses.component';
import { ListGroupsComponent } from './list-groups/list-groups.component';
import { NavsComponent } from './navs/navs.component';
import { PaginationsComponent } from './paginations/paginations.component';
import { PlaceholdersComponent } from './placeholders/placeholders.component';
import { PopoversComponent } from './popovers/popovers.component';
import { ProgressComponent } from './progress/progress.component';
import { SpinnersComponent } from './spinners/spinners.component';
import { TablesComponent } from './tables/tables.component';
import { TooltipsComponent } from './tooltips/tooltips.component';
import { TabsComponent } from './tabs/tabs.component';
// Components Routing
import { BaseRoutingModule } from './base-routing.module';
@NgModule({
imports: [
CommonModule,
BaseRoutingModule,
AccordionModule,
BadgeModule,
BreadcrumbModule,
ButtonModule,
CardModule,
CollapseModule,
GridModule,
UtilitiesModule,
SharedModule,
ListGroupModule,
IconModule,
ListGroupModule,
PlaceholderModule,
ProgressModule,
SpinnerModule,
TabsModule,
NavModule,
TooltipModule,
CarouselModule,
FormModule,
ReactiveFormsModule,
DropdownModule,
PaginationModule,
PopoverModule,
TableModule,
DocsComponentsModule,
],
declarations: [
AccordionsComponent,
BreadcrumbsComponent,
CardsComponent,
CarouselsComponent,
CollapsesComponent,
ListGroupsComponent,
NavsComponent,
PaginationsComponent,
PopoversComponent,
ProgressComponent,
SpinnersComponent,
TablesComponent,
TooltipsComponent,
TabsComponent,
PlaceholdersComponent,
],
})
export class BaseModule {}

95
front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.html
View File

@@ -1,95 +0,0 @@
<div class="fade-in">
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/breadcrumb" name="Breadcrumb"></app-docs-callout>
</c-col>
<c-col class="mb-4" xs="12">
<c-card>
<c-card-header>
<strong>Angular Breadcrumbs</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The breadcrumb navigation provides links back to each previous page the user navigated
through and shows the current location in a website or an application. You don’t have
to add separators, because they automatically added in CSS through
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
<code>::before</code>
</a>
and
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
<code>content</code>
</a>
.
</p>
<app-docs-example href="components/breadcrumb">
<c-breadcrumb class="mb-2">
<c-breadcrumb-item *ngFor="let item of items; index as i; last as isLast"
[active]="isLast"
[url]="item.url">
{{item.label}}
</c-breadcrumb-item>
</c-breadcrumb>
<hr>
<c-breadcrumb class="mb-2">
<c-breadcrumb-item *ngFor="let item of items.slice(0,1); index as i; last as isLast"
[active]="isLast"
[url]="item.url">
{{item.label}}
</c-breadcrumb-item>
</c-breadcrumb>
<c-breadcrumb class="mb-2">
<c-breadcrumb-item *ngFor="let item of items.slice(0,2); index as i; last as isLast"
[active]="isLast"
[url]="item.url">
{{item.label}}
</c-breadcrumb-item>
</c-breadcrumb>
<c-breadcrumb class="mb-2">
<c-breadcrumb-item *ngFor="let item of items.slice(0,3); index as i; last as isLast"
[active]="isLast"
[url]="item.url">
{{item.label}}
</c-breadcrumb-item>
</c-breadcrumb>
<c-breadcrumb class="mb-2">
<c-breadcrumb-item *ngFor="let item of items.slice(0,4); index as i; last as isLast"
[active]="isLast"
[url]="item.url">
<span [ngClass]="{'mark': isLast}">{{item.label}}</span>
</c-breadcrumb-item>
</c-breadcrumb>
<hr>
<c-breadcrumb class="mb-0">
<c-breadcrumb-item url="/">
Home
</c-breadcrumb-item>
<c-breadcrumb-item url="/">
Library
</c-breadcrumb-item>
<c-breadcrumb-item url="/">
Data
</c-breadcrumb-item>
<c-breadcrumb-item [active]="true">
Bootstrap
</c-breadcrumb-item>
</c-breadcrumb>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card>
<c-card-header>
<strong>Angular Breadcrumbs</strong> <small>router</small>
</c-card-header>
<c-card-body>
<app-docs-example href="components/breadcrumb#router">
<c-breadcrumb-router></c-breadcrumb-router>
<c-breadcrumb-router [items]="items"></c-breadcrumb-router>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>
</div>

0
front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.scss
View File

35
front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.spec.ts
View File

@@ -1,35 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { BreadcrumbModule, CardModule, GridModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { BreadcrumbsComponent } from './breadcrumbs.component';
describe('BreadcrumbsComponent', () => {
let component: BreadcrumbsComponent;
let fixture: ComponentFixture<BreadcrumbsComponent>;
let iconSetService: IconSetService;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [BreadcrumbsComponent],
imports: [CardModule, GridModule, BreadcrumbModule, RouterTestingModule, DocsComponentsModule],
providers: [IconSetService]
}).compileComponents();
}));
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(BreadcrumbsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

29
front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.ts
View File

@@ -1,29 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
templateUrl: './breadcrumbs.component.html',
styleUrls: ['./breadcrumbs.component.scss']
})
export class BreadcrumbsComponent implements OnInit {
public items = <any>[];
constructor() {}
ngOnInit(): void {
this.items = [
{ label: 'Home', url: '/', attributes: { title: 'Home' } },
{ label: 'Library', url: '/' },
{ label: 'Data', url: '/dashboard/' },
{ label: 'CoreUI', url: '/' }
];
setTimeout(() => {
this.items = [
{ label: 'CoreUI', url: '/' },
{ label: 'Data', url: '/dashboard/' },
{ label: 'Library', url: '/' },
{ label: 'Home', url: '/', attributes: { title: 'Home' } }
];
}, 5000);
}
}

864
front/app/src/app/views/base/cards/cards.component.html
View File

@@ -1,864 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/card" name="Card"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Cards are built with as little markup and styles as possible but still
manage to deliver a bunch of control and customization. Built with
flexbox, they offer easy alignment and mix well with other CoreUI
components. Cards have no top, left, and right margins by default, so
use
<a href="https://coreui.io/docs/utilities/spacing"
>spacing utilities</a
>
as needed. They have no fixed width to start, so they&#39;ll fill the
full width of its parent.
</p>
<p class="text-medium-emphasis small">
Below is an example of a basic card with mixed content and a fixed
width. Cards have no fixed width to start, so they&#39;ll naturally
fill the full width of its parent element.
</p>
<app-docs-example href="components/card">
<c-card style="width: 18rem;">
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<button cButton color="primary">Go somewhere</button>
</c-card-body>
</c-card>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong> <small>Body</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The main block of a card is the <code>&lt;c-card-body&gt;</code>. Use
it whenever you need a padded section within a card.
</p>
<app-docs-example href="components/card/#body">
<c-card style="width: 18rem;">
<c-card-body>This is some text within a card body.</c-card-body>
</c-card>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong> <small>Titles, text, and links</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Card titles are managed by <code>cCardTitle</code> directive for
<code>&lt;h*&gt;</code>. Identically, links are attached and collected
next to each other by <code>cCardLink</code> directive for
<code>&lt;a&gt;</code> tag. Subtitles are handled by
<code>cCardSubtitle</code> directive.
</p>
<p class="text-medium-emphasis small">
Store <code>cCardTitle</code> and the <code>cCardSubtitle</code> items
in a <code>&lt;c-card-body&gt;</code>. The card title, and subtitle
are arranged properly.
</p>
<app-docs-example href="components/card/#body">
<c-card style="width: 18rem;">
<c-card-body>
<h5 cCardTitle>Card title</h5>
<h6 cCardSubtitle class="mb-2 text-medium-emphasis">
Card subtitle
</h6>
<p cCardText>
Some quick example text to build on the card title and make up the
bulk of the card content.
</p>
<a cCardLink>Card link</a>
<a cCardLink>Another link</a>
</c-card-body>
</c-card>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong> <small>Images</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
<code>cCardImg="top"</code> places a picture to the top of the card.
With <code>cCardText</code>, text can be added to the card. Text
within <code>cCardText</code> can additionally be styled with the
regular HTML tags.
</p>
<app-docs-example href="components/card/#images">
<c-card style="width: 18rem;">
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<p cCardText>
Some quick example <strong>text</strong> to build on the card
title and make up the bulk of the card content.
</p>
</c-card-body>
</c-card>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong> <small>list groups</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Create lists of content in a card with a flush list group.
</p>
<app-docs-example href="components/card/#list-groups">
<c-row>
<c-col lg="4">
<c-card>
<ul [flush]="true" cListGroup>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
</c-card>
</c-col>
<c-col lg="4">
<c-card>
<c-card-header>Header</c-card-header>
<ul [flush]="true" cListGroup>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
</c-card>
</c-col>
<c-col lg="4">
<c-card>
<ul [flush]="true" cListGroup>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
<c-card-footer>Footer</c-card-footer>
</c-card>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong> <small>kitchen sink</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Combine and match many content types to build the card you need, or
throw everything in there. Shown below are image styles, blocks, text
styles, and a list group—all wrapped in a fixed-width card.
</p>
<app-docs-example href="components/card/#kitchen-sink">
<c-card style="width: 18rem;">
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the
bulk of the card content.
</p>
</c-card-body>
<ul [flush]="true" cListGroup>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
<c-card-body>
<a cCardLink>Card link</a>
<a cCardLink>Another link</a>
</c-card-body>
</c-card>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Header and footer</small>
</c-card-header>
<c-card-body>
<c-row>
<c-col>
<p class="text-medium-emphasis small">
Add an optional header and/or footer within a card.
</p>
<app-docs-example href="components/card/#header-and-footer">
<c-card class="mb-4">
<c-card-header>Header</c-card-header>
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</app-docs-example>
</c-col>
<c-col>
<p class="text-medium-emphasis small">
Card headers can be styled by adding ex.
<code>&#34;h5&#34;</code>.
</p>
<app-docs-example href="components/card/#header-and-footer">
<c-card class="mb-4">
<c-card-header>
<h5>Header</h5>
</c-card-header>
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</app-docs-example>
</c-col>
</c-row>
<c-row>
<c-col>
<app-docs-example href="components/card/#header-and-footer">
<c-card class="mb-4">
<c-card-header>Quote</c-card-header>
<c-card-body>
<blockquote class="blockquote mb-0">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a ante.
</p>
<footer class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</c-card-body>
</c-card>
</app-docs-example>
</c-col>
<c-col>
<app-docs-example href="components/card/#header-and-footer">
<c-card class="text-center mb-4">
<c-card-header>Header</c-card-header>
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
<c-card-footer class="text-medium-emphasis"
>2 days ago
</c-card-footer
>
</c-card>
</app-docs-example>
</c-col>
</c-row>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Card</strong> <small>Sizing</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Cards assume no specific <code>width</code> to start, so they&#39;ll
be 100% wide unless otherwise stated. You can adjust this as required
with custom CSS, grid classes, grid Sass mixins, or services.
</p>
<h3>Using grid markup</h3>
<p class="text-medium-emphasis small">
Using the grid, wrap cards in columns and rows as needed.
</p>
<app-docs-example href="components/card/#sizing">
<c-row>
<c-col sm="6">
<c-card class="mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</c-col>
<c-col sm="6">
<c-card class="mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</c-col>
</c-row>
</app-docs-example>
<h3>Using utilities</h3>
<p class="text-medium-emphasis small">
Use some of
<a href="https://coreui.io/docs/utilities/sizing/"
>available sizing utilities</a
>
to rapidly set a card width.
</p>
<app-docs-example href="components/card/#sizing">
<c-card class="w-75 mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
<c-card class="w-50 mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</app-docs-example>
<strong>Using custom CSS</strong>
<p class="text-medium-emphasis small">
Use custom CSS in your stylesheets or as inline styles to set a width.
</p>
<app-docs-example href="components/card/#sizing">
<c-card class="mb-4" style="width: 18rem;">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Text alignment</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
You can instantly change the text arrangement of any card—in its whole
or specific parts—with
<a href="https://coreui.io/docs/utilities/text/#text-alignment"
>text align</a
>
classes.
</p>
<app-docs-example href="components/card/#text-alignment">
<c-row>
<c-col>
<c-card class="mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</c-col>
<c-col>
<c-card class="text-center mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</c-col>
<c-col>
<c-card class="text-end mb-4">
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Navigation</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add some navigation to a <code>&lt;c-card-header&gt;</code> with our
<code>&lt;c-nav&gt;</code> component.
</p>
<c-row>
<c-col>
<app-docs-example href="components/card/##navigation">
<c-card class="text-center mb-4">
<c-card-header>
<c-nav class="card-header-tabs" variant="tabs">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink disabled routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</c-card-header>
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</app-docs-example>
</c-col>
<c-col>
<app-docs-example href="components/card/##navigation">
<c-card class="text-center mb-4">
<c-card-header>
<c-nav class="card-header-pills" variant="pills">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink disabled routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</c-card-header>
<c-card-body>
<ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
</c-card-body>
</c-card>
</app-docs-example>
</c-col>
</c-row>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Image caps</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Similar to headers and footers, cards can include top and bottom &#34;image
caps&#34;—images at the top or bottom of a card.
</p>
<app-docs-example href="components/card/#image-caps">
<c-row>
<c-col lg="6">
<c-card class="mb-3">
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p cCardText>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</p>
</c-card-body>
</c-card>
</c-col>
<c-col lg="6">
<c-card class="mb-3">
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p cCardText>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</p>
</c-card-body>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate; context: {$implicit: 'bottom'}"></ng-container>
</c-card>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Styles</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Cards include various options for customizing their backgrounds, borders, and color.
</p>
<h3>Background and color</h3>
<p class="text-medium-emphasis small">
Use <code>color</code> property to change the appearance of a card.
</p>
<app-docs-example href="components/card/#background-and-color">
<c-row>
<c-col *ngFor="let item of colors; index as i" lg="4">
<c-card [color]="item.color"
[textColor]="item.color === 'warning' || item.color === 'light' ? '' : 'white'"
class="mb-3">
<c-card-header>Header</c-card-header>
<c-card-body class="bg">
<h5 cCardTitle>{{item.color}} card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the bulk of
the card&#39;s content.
</p>
<button [color]="item.color" cButton class="shadow">Go somewhere</button>
</c-card-body>
</c-card>
</c-col>
</c-row>
</app-docs-example>
<h3>Border</h3>
<p class="text-medium-emphasis small">
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
just the <code>border-color</code> of a card. Note that you can set
<code>textColor</code> property on the <code>&lt;c-card&gt;</code> or a subset of the
card&#39;s contents as shown below.
</p>
<app-docs-example href="components/card/#border">
<c-row>
<c-col *ngFor="let item of colors; index as i" lg="4">
<c-card [cBorder]="item.color" [textColor]="item.textColor" class="mb-3">
<c-card-header>Header</c-card-header>
<c-card-body>
<h5 cCardTitle>{{item.color}} card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the bulk of
the card&#39;s content.
</p>
<button [color]="item.color" cButton>Go somewhere</button>
</c-card-body>
</c-card>
</c-col>
</c-row>
</app-docs-example>
<h3>Top border</h3>
<p class="text-medium-emphasis small">
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
just the <code>border-color</code> of a card. Note that you can set
<code>textColor</code> property on the <code>&lt;c-card&gt;</code> or a subset of the
card&#39;s contents as shown below.
</p>
<app-docs-example href="components/card/#top-border">
<c-row>
<c-col *ngFor="let item of colors; index as i" lg="4">
<c-card [cBorder]="{top: {color: item.color, width: 3}}" [textColor]="item.textColor" class="mb-3">
<c-card-header>Header</c-card-header>
<c-card-body>
<h5 cCardTitle>{{item.color}} card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the bulk of
the card&#39;s content.
</p>
<button [color]="item.color" cButton>Go somewhere</button>
</c-card-body>
</c-card>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<!--***-->
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Card groups</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use card groups to render cards as a single, attached element with equal width and
height columns. Card groups start off stacked and use <code>display: flex;</code> to
become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
</p>
<app-docs-example href="components/card/#card-groups">
<c-card-group class="mb-4">
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<p cCardText>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</p>
</c-card-body>
</c-card>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This card has supporting text below as a natural lead-in to additional
content.
</p>
<p cCardText>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</p>
</c-card-body>
</c-card>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to show
that equal height action.
</p>
<p cCardText>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</p>
</c-card-body>
</c-card>
</c-card-group>
</app-docs-example>
<p class="text-medium-emphasis small">
When using card groups with footers, their content will automatically line up.
</p>
<app-docs-example href="components/card/#card-groups">
<c-card-group class="mb-4">
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This card has supporting text below as a natural lead-in to additional
content.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to show
that equal height action.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-card-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Card</strong> <small>Grid cards</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use the <code>c-row</code> component and set <code>xs|sm|md|lg|xl|xxl</code> property
to control how many grid columns (wrapped around your cards) you show per row. For
example <code>xs="1"</code> laying out the cards on one column, and <code>md="1"</code> splitting
four cards to equal width across multiple rows, from the medium breakpoint up.
</p>
<app-docs-example href="components/card/#grid-cards">
<c-row [gutter]="{g: 4}" class="mb-3" [md]="2" [xs]="1">
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
</c-row>
</app-docs-example>
<p class="text-medium-emphasis small">
Change it to <code>md="3"</code> and you'll see the fourth card wraps.
</p>
<app-docs-example href="components/card/#grid-cards">
<c-row [gutter]="{g: 4}" [md]="3" [xs]="1">
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
<c-col>
<c-card>
<ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
</c-card-body>
<c-card-footer>
<small class="text-medium-emphasis">Last updated 3 mins ago</small>
</c-card-footer>
</c-card>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>
<ng-template #imgPlaceholderTemplate let-orientation>
<svg
[cCardImg]="orientation ?? 'top'"
aria-label="Placeholder: Image cap"
class="docs-placeholder-img"
focusable="false"
height="180"
preserveAspectRatio="xMidYMid slice"
role="img"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<title>Placeholder</title>
<rect fill="#868e96" height="100%" width="100%"></rect>
<text dominant-baseline="middle" dy=".3em" fill="#dee2e6" text-anchor="middle" x="50%" y="50%">Image cap</text>
</svg>
</ng-template>
<ng-template #cardBodyTemplate>
<h5 cCardTitle>Card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<button cButton color="primary">Go somewhere</button>
</ng-template>

0
front/app/src/app/views/base/cards/cards.component.scss
View File

36
front/app/src/app/views/base/cards/cards.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, GridModule, ListGroupModule, NavModule, UtilitiesModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { CardsComponent } from './cards.component';
describe('CardsComponent', () => {
let component: CardsComponent;
let fixture: ComponentFixture<CardsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CardsComponent],
imports: [CardModule, NavModule, GridModule, ListGroupModule, UtilitiesModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(CardsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

25
front/app/src/app/views/base/cards/cards.component.ts
View File

@@ -1,25 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-cards',
templateUrl: './cards.component.html',
styleUrls: ['./cards.component.scss']
})
export class CardsComponent {
colors = [
{ color: 'primary', textColor: 'primary' },
{ color: 'secondary', textColor: 'secondary' },
{ color: 'success', textColor: 'success' },
{ color: 'danger', textColor: 'danger' },
{ color: 'warning', textColor: 'warning' },
{ color: 'info', textColor: 'info' },
{ color: 'light' },
{ color: 'dark' }
];
imgContext = { $implicit: 'top', bottom: 'bottom' };
constructor() { }
}

227
front/app/src/app/views/base/carousels/carousels.component.html
View File

@@ -1,227 +0,0 @@
<div class="fade-in">
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/carousel" name="Carousel"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Carousel</strong> <small>Slide only</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">Here’s a carousel with slides</p>
<app-docs-example href="components/carousel">
<c-carousel (itemChange)="onItemChange($event)" [interval]="7000" transition="slide">
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[0]">
<img
[src]="slide.src"
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
/>
</c-carousel-item>
</c-carousel-inner>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Carousel</strong> <small>with controls</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Adding in the previous and next controls with <code>c-carousel-controls</code> component.
</p>
<app-docs-example href="components/carousel/#with-controls">
<c-carousel (itemChange)="onItemChange($event)" [interval]="0">
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[0]">
<img
[src]="slide.src"
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
/>
</c-carousel-item>
</c-carousel-inner>
<c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
<c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Carousel</strong> <small>with custom controls</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Adding in the previous and next controls with custom content of <code>c-carousel-controls</code> component.
<app-docs-example href="components/carousel/#with-controls">
<c-carousel (itemChange)="onItemChange($event)" [interval]="0">
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[0]">
<img
[src]="slide.src"
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
/>
</c-carousel-item>
</c-carousel-inner>
<c-carousel-control [tabIndex]="0" direction="prev">
<svg cIcon name="cil-chevron-left" size="3xl"></svg>
<span class="visually-hidden">Previous</span>
</c-carousel-control>
<c-carousel-control [tabIndex]="0" direction="next">
<svg cIcon name="cil-chevron-right" size="3xl"></svg>
<span class="visually-hidden">Next</span>
</c-carousel-control>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Carousel</strong> <small>with indicators</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
You can attach the indicators to the carousel, lengthwise the controls, too.
</p>
<app-docs-example href="components/carousel/#with-indicators">
<c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000"
direction="prev">
<c-carousel-indicators></c-carousel-indicators>
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[0]">
<img
[src]="slide.src"
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
/>
</c-carousel-item>
</c-carousel-inner>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
Carousel with captions, controls and indicators
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
You can add captions to slides with the <code>&lt;c-carousel-caption&gt;</code> element
within any <code>&lt;c-carousel-item&gt;</code>. They can be immediately hidden on
smaller viewports, as shown below, with optional <a href="https://coreui.io/4.0/utilities/display">display
utilities</a>.
We hide them with <code>.d-none</code> and draw them back on medium-sized devices with
<code>.d-md-block</code>.
</p>
<app-docs-example href="components/carousel/#with-captions">
<c-carousel (itemChange)="onItemChange($event)" [interval]="3000" transition="slide" [wrap]="false">
<c-carousel-indicators></c-carousel-indicators>
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[1]">
<img
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
src="{{slide.src}}"
/>
<c-carousel-caption class="d-none d-md-block">
<h3>{{slide.title}}</h3>
<p>{{slide.subtitle}}</p>
</c-carousel-caption>
</c-carousel-item>
</c-carousel-inner>
<c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
<c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Carousel</strong> <small>Crossfade</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>transition="crossfade"</code> to your carousel to animate slides
with a fade transition instead of a slide.
</p>
<app-docs-example href="components/carousel/#crossfade">
<c-carousel (itemChange)="onItemChange($event)" [animate]="false" [interval]="5000" transition="crossfade">
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[0]">
<img
[src]="slide.src"
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
/>
<c-carousel-caption class="d-none d-md-block">
<h3>{{slide.title}}</h3>
<p>{{slide.subtitle}}</p>
</c-carousel-caption>
</c-carousel-item>
</c-carousel-inner>
<c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
<c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Carousel</strong> <small>Dark variant</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>dark</code> property to the <code>c-carousel</code> for darker controls,
indicators, and captions. Controls have been inverted from their default white fill
with the <code>filter</code> CSS property. Captions and controls have additional Sass
variables that customize the <code>color</code> and <code>background-color</code>.
</p>
<app-docs-example href="components/carousel/#dark-variant">
<c-carousel (itemChange)="onItemChange($event)" [dark]="true" [interval]="3000" transition="slide">
<c-carousel-indicators></c-carousel-indicators>
<c-carousel-inner>
<c-carousel-item *ngFor="let slide of slides[2]; index as i;">
<img
[src]="slide.src"
alt="{{slide.title}}"
class="d-block w-100"
loading="lazy"
/>
<c-carousel-caption class="d-none d-md-block">
<h3>{{slide.title}}</h3>
<p>{{slide.subtitle}}</p>
</c-carousel-caption>
</c-carousel-item>
</c-carousel-inner>
<c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
<c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
</c-carousel>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>
</div>

0
front/app/src/app/views/base/carousels/carousels.component.scss
View File

38
front/app/src/app/views/base/carousels/carousels.component.spec.ts
View File

@@ -1,38 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { CardModule, CarouselModule, GridModule } from '@coreui/angular';
import { IconModule } from '@coreui/icons-angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { CarouselsComponent } from './carousels.component';
describe('CarouselsComponent', () => {
let component: CarouselsComponent;
let fixture: ComponentFixture<CarouselsComponent>;
let iconSetService: IconSetService
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ CarouselsComponent ],
imports: [CarouselModule, NoopAnimationsModule, CardModule, GridModule, IconModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
}));
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(CarouselsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

100
front/app/src/app/views/base/carousels/carousels.component.ts
View File

@@ -1,100 +0,0 @@
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-carousels',
templateUrl: './carousels.component.html',
styleUrls: ['./carousels.component.scss']
})
export class CarouselsComponent {
imageSrc = [
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
'https://picsum.photos/id/1/800/400',
'https://picsum.photos/id/1026/800/400',
'https://picsum.photos/id/1031/800/400'
];
slidesLight = [
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
];
slides: any[] = [];
constructor(
private domSanitizer: DomSanitizer
) {
this.slides[0] = [
{
id: 0,
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[0]),
title: 'First slide',
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
},
{
id: 1,
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[1]),
title: 'Second slide',
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 2,
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[2]),
title: 'Third slide',
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
}
];
this.slides[1] = [
{
id: 0,
src: this.imageSrc[3],
title: 'First slide',
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
},
{
id: 1,
src: this.imageSrc[4],
title: 'Second slide',
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 2,
src: this.imageSrc[5],
title: 'Third slide',
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
}
];
this.slides[2] = [
{
id: 0,
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[0]),
title: 'First slide',
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
},
{
id: 1,
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[1]),
title: 'Second slide',
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 2,
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[2]),
title: 'Third slide',
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
}
];
}
onItemChange($event: any): void {
console.log('Carousel onItemChange', $event);
}
}

134
front/app/src/app/views/base/collapses/collapses.component.html
View File

@@ -1,134 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/collapse" name="Collapse"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Collapse</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">You can use a link or a button component.</p>
<app-docs-example href="components/collapse">
<a (click)="toggleCollapse(0)" cButton class="me-1" color="primary">Link</a>
<button (click)="toggleCollapse(0)" cButton class="me-1" color="primary">
Button
</button>
<div [visible]="collapses[0]" cCollapse>
<c-card class="shadow mt-3">
<c-card-body>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident.
</c-card-body>
</c-card>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Collapse</strong> <small>horizontal</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add the <code>horizontal</code> property to transition the width
instead of height and set a width on the immediate child element.
</p>
<app-docs-example href="components/collapse">
<button
(click)="toggleCollapse(1)"
cButton
class="me-1 mb-3"
color="primary"
[attr.aria-expanded]="collapses[1]"
>
Button
</button>
<div style="min-height: 130px">
<div
[visible]="collapses[1]"
cCollapse
horizontal
style="max-width: 260px"
>
<c-card class="shadow">
<c-card-body style="width: 260px">
This is some placeholder content for a horizontal collapse.
It's hidden by default and shown when triggered.
</c-card-body>
</c-card>
</div>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Collapse</strong> <small> multi target</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
A <code>&lt;c-button&gt;</code> can show and hide multiple elements.
</p>
<app-docs-example href="components/collapse#multiple-targets">
<button
(click)="toggleCollapse(2)"
cButton
class="me-1"
color="primary"
>
Toggle first element
</button>
<button
(click)="toggleCollapse(3)"
cButton
class="me-1"
color="primary"
>
Toggle second element
</button>
<button
(click)="toggleCollapse(2); toggleCollapse(3)"
cButton
class="me-1"
color="primary"
>
Toggle both
</button>
<c-row style="min-height: 130px">
<c-col xs="6">
<div [visible]="collapses[2]" cCollapse>
<c-card class="mt-3">
<c-card-body>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</c-card-body>
</c-card>
</div>
</c-col>
<c-col xs="6">
<div [visible]="collapses[3]" cCollapse>
<c-card class="mt-3">
<c-card-body>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</c-card-body>
</c-card>
</div>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/collapses/collapses.component.scss
View File

37
front/app/src/app/views/base/collapses/collapses.component.spec.ts
View File

@@ -1,37 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, CollapseModule, GridModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { CollapsesComponent } from './collapses.component';
describe('CollapsesComponent', () => {
let component: CollapsesComponent;
let fixture: ComponentFixture<CollapsesComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CollapsesComponent],
imports: [CardModule, CollapseModule, NoopAnimationsModule, GridModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(CollapsesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

19
front/app/src/app/views/base/collapses/collapses.component.ts
View File

@@ -1,19 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-collapses',
templateUrl: './collapses.component.html',
styleUrls: ['./collapses.component.scss']
})
export class CollapsesComponent {
collapses = [false, false, false, false];
constructor() { }
toggleCollapse(id: number): void {
// @ts-ignore
this.collapses[id] = !this.collapses[id];
}
}

364
front/app/src/app/views/base/list-groups/list-groups.component.html
View File

@@ -1,364 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/list-group" name="List Group"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Basic example</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The default list group is an unordered list with items and the proper
CSS classes. Build upon it with the options that follow, or with your
CSS as required.
</p>
<app-docs-example href="components/list-group">
<ul cListGroup>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Morbi leo risus</li>
<li cListGroupItem>Porta ac consectetur ac</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Active items</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>active</code> boolean property to a
<code>cListGroupItem</code> to show the current active selection.
</p>
<app-docs-example href="components/list-group/#active-items">
<ul cListGroup>
<li [active]="true" cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Morbi leo risus</li>
<li cListGroupItem>Porta ac consectetur ac</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Disabled items</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>disabled</code> boolean property to a
<code>cListGroupItem</code> to make it appear disabled.
</p>
<app-docs-example href="components/list-group/#disabled-items">
<div cListGroup>
<button cListGroupItem disabled>Cras justo odio</button>
<button cListGroupItem>Dapibus ac facilisis in</button>
<button cListGroupItem>Morbi leo risus</button>
<button cListGroupItem>Porta ac consectetur ac</button>
<button cListGroupItem>Vestibulum at eros</button>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Links and buttons</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create
<em>actionable</em> list group items with hover, disabled, and active
states by adding <code>component=&#34;a|button&#34;</code>. We
separate these pseudo-classes to ensure list groups made of
non-interactive elements (like <code>&lt;li&gt;</code> or
<code>&lt;div&gt;</code>) don't provide a click or tap affordance.
</p>
<app-docs-example href="components/list-group/#links-and-buttons">
<div cListGroup>
<a [active]="true" cListGroupItem href>
Cras justo odio
</a>
<a cListGroupItem href>
Dapibus ac facilisis in
</a>
<a cListGroupItem href>
Morbi leo risus
</a>
<a cListGroupItem href>
Porta ac consectetur ac
</a>
<a cListGroupItem disabled href>
Vestibulum at eros
</a>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Flush</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>flush</code> boolean property to remove some borders and
rounded corners to render list group items edge-to-edge in a parent
container (e.g., cards).
</p>
<app-docs-example href="components/list-group/#flush">
<ul [flush]="true" cListGroup>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Morbi leo risus</li>
<li cListGroupItem>Porta ac consectetur ac</li>
<li cListGroupItem>Vestibulum at eros</li>
</ul>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Horizontal</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
list group items from vertical to horizontal across all breakpoints.
Alternatively, choose a responsive variant
<code
>.layout=&#34;horizontal-&#123;sm | md | lg | xl |
xxl&#125;&#34;</code
>
to make a list group horizontal starting at that breakpoint's
<code>min-width</code>. Currently
<strong
>horizontal list groups cannot be combined with flush list
groups.</strong
>
</p>
<app-docs-example href="components/list-group/#flush">
<ul
*ngFor="let breakpoint of breakpoints; index as i"
[horizontal]="breakpoint"
cListGroup
class="mb-2"
>
<li cListGroupItem>Cras justo odio</li>
<li cListGroupItem>Dapibus ac facilisis in</li>
<li cListGroupItem>Morbi leo risus</li>
</ul>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Contextual classes</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use contextual classes to style list items with a stateful background
and color.
</p>
<app-docs-example href="components/list-group/#contextual-classes">
<ul cListGroup class="mb-3">
<li *ngFor="let color of colors" [color]="color" cListGroupItem>
A simple {{ color }} list group item
</li>
</ul>
</app-docs-example>
<p class="text-medium-emphasis small mt-1">
Contextual classes also work with <code>&lt;a&gt;</code> or
<code>&lt;button&gt;</code>. Note the addition of the hover styles
here not present in the previous example. Also supported is the
<code>active</code> state; apply it to indicate an active selection on
a contextual list group item.
</p>
<app-docs-example href="components/list-group/#contextual-classes">
<div cListGroup>
<a
*ngFor="let color of colors; index as i"
[color]="color"
cListGroupItem
href
>A simple {{ color }} list group item</a
>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>With badges</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add badges to any list group item to show unread counts, activity, and
more.
</p>
<app-docs-example href="components/list-group/#with-badges">
<div cListGroup>
<button
cListGroupItem
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<c-badge color="primary" shape="rounded-pill">14</c-badge>
</button>
<button
cListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<c-badge color="primary" shape="rounded-pill">2</c-badge>
</button>
<button
cListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<c-badge color="primary" shape="rounded-pill">1</c-badge>
</button>
<button
cListGroupItem
class="d-flex justify-content-between align-items-center"
>
Porta ac consectetur
<c-badge color="primary" shape="rounded-pill">1</c-badge>
</button>
<button
cListGroupItem
class="d-flex justify-content-between align-items-center"
disabled
>
Vestibulum at eros
<c-badge color="secondary" shape="rounded-pill">42</c-badge>
</button>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Custom content</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add nearly any HTML within, even for linked list groups like the one
below, with the help of
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a
>.
</p>
<app-docs-example href="components/list-group/#custom-content">
<div cListGroup>
<a [active]="true" cListGroupItem href>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</a>
<a cListGroupItem href>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-medium-emphasis">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small class="text-medium-emphasis"
>Donec id elit non mi porta.</small
>
</a>
<a cListGroupItem href>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-medium-emphasis">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small class="text-medium-emphasis"
>Donec id elit non mi porta.</small
>
</a>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular List Group</strong> <small>Checkboxes and radios</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Place CoreUI&#39;s checkboxes and radios within list group items and
customize as needed.
</p>
<app-docs-example href="components/list-group/#checkboxes-and-radios">
<form [formGroup]="checkBoxes" (ngSubmit)="logValue()" cForm>
<ul [flush]="true" cListGroup>
<button (click)="setValue('one');" cListGroupItem type="button">
<c-form-check>
<input cFormCheckInput formControlName="one" type="checkbox"/>
<label cFormCheckLabel>Cras justo odio</label>
</c-form-check>
</button>
<label cListGroupItem style="cursor: pointer;">
<c-form-check>
<input cFormCheckInput formControlName="two" type="checkbox"/>
Dapibus ac facilisis in
</c-form-check>
</label>
<li cListGroupItem>
<c-form-check>
<input cFormCheckInput formControlName="three" type="checkbox"/>
<label cFormCheckLabel>Morbi leo risus</label>
</c-form-check>
</li>
<li cListGroupItem>
<c-form-check>
<input cFormCheckInput formControlName="four" type="checkbox"/>
<label cFormCheckLabel>Orta ac consectetur ac</label>
</c-form-check>
</li>
<li cListGroupItem>
<c-form-check>
<input cFormCheckInput formControlName="five" type="checkbox"/>
<label cFormCheckLabel>Vestibulum at eros</label>
</c-form-check>
</li>
</ul>
<button cButton class="mt-3" type="submit">Submit</button>
</form>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/list-groups/list-groups.component.scss
View File

37
front/app/src/app/views/base/list-groups/list-groups.component.spec.ts
View File

@@ -1,37 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { BadgeModule, ButtonModule, CardModule, FormModule, GridModule, ListGroupModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { ListGroupsComponent } from './list-groups.component';
describe('ListGroupsComponent', () => {
let component: ListGroupsComponent;
let fixture: ComponentFixture<ListGroupsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ListGroupsComponent],
imports: [ListGroupModule, ButtonModule, ReactiveFormsModule, BadgeModule, FormModule, GridModule, CardModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(ListGroupsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

41
front/app/src/app/views/base/list-groups/list-groups.component.ts
View File

@@ -1,41 +0,0 @@
import { Component } from '@angular/core';
import { UntypedFormBuilder } from '@angular/forms';
@Component({
selector: 'app-list-groups',
templateUrl: './list-groups.component.html',
styleUrls: ['./list-groups.component.scss']
})
export class ListGroupsComponent {
breakpoints = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
checkBoxes = this.formBuilder.group({
one: false,
two: false,
three: true,
four: true,
five: {value: false, disabled: true}
});
constructor(
private formBuilder: UntypedFormBuilder
) { }
setValue(controlName: string) {
const prevValue = this.checkBoxes.get(controlName)?.value;
const value = this.checkBoxes.getRawValue();
value[controlName] = !prevValue;
this.checkBoxes.setValue(value);
}
logValue() {
console.log(this.checkBoxes.value);
this.checkBoxes.reset();
}
getValue(controlName: string) {
return this.checkBoxes.get(controlName);
}
}

380
front/app/src/app/views/base/navs/navs.component.html
View File

@@ -1,380 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/nav" name="Nav"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Base navs</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The base <code>c-nav</code> component is built with flexbox and provide a strong
foundation for building all types of navigation components. It includes some style
overrides (for working with lists), some link padding for larger hit areas, and basic
[disabled]="true" styling.
</p>
<app-docs-example href="components/nav#base-nav">
<c-nav>
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
<p class="text-medium-emphasis small mt-3">
Classes are used throughout, so your markup can be super flexible. Use
<code>c-nav-item</code> like above, or roll your own with a <code>&lt;c-nav&gt;</code> element. Because
the <code>.nav</code> uses <code>display: flex</code>, the <code>cNavLink</code> behaves the same as <code>c-nav-item</code> would, but
without the extra markup.
</p>
<app-docs-example href="components/nav#base-nav">
<c-nav role="navigation">
<a [active]="true" cNavLink routerLink="./">
Active
</a>
<a cNavLink routerLink="./">Link</a>
<a cNavLink routerLink="./">Link</a>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Horizontal alignment</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Change the horizontal alignment of your nav with
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities
</a>
. By default, navs are left-aligned, but you can easily change them to center or right
aligned.
</p>
<p class="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<app-docs-example href="components/nav#horizontal-alignment">
<c-nav class="justify-content-center">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
<p class="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<app-docs-example href="components/nav#base-nav">
<c-nav class="justify-content-end">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Vertical</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Stack your navigation by changing the flex item direction with the
<code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p>
<app-docs-example href="components/nav#vertical">
<c-nav class="flex-column">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Tabs</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Take the basic nav from above and add the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
</p>
<app-docs-example href="components/nav#tabs">
<c-nav variant="tabs">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Pills</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<app-docs-example href="components/nav#pills">
<c-nav variant="pills">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Fill and justify</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Force your <code>.nav</code>&#39;s contents to extend the full available width one of
two modifier classes. To proportionately fill all available space with your
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width.
</p>
<app-docs-example href="components/nav#fill-and-justify">
<c-nav layout="fill" variant="pills">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
<p class="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
</p>
<app-docs-example href="components/nav#fill-and-justify">
<c-nav layout="justified" variant="pills">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Working with flex utilities</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
verbose, these utilities offer greater customization across responsive breakpoints. In
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
</p>
<app-docs-example href="components/nav#working-with-flex-utilities">
<c-nav class="flex-column flex-sm-row" role="navigation" variant="pills">
<a [active]="true" cNavLink routerLink="./">
Active
</a>
<a cNavLink routerLink="./">Link</a>
<a cNavLink routerLink="./">Link</a>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Tabs with dropdowns</small>
</c-card-header>
<c-card-body>
<app-docs-example href="components/nav#tabs-with-dropdowns">
<c-nav variant="tabs">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-dropdown variant="nav-item">
<a cDropdownToggle href>
Dropdown button
</a>
<ul cDropdownMenu>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
</ul>
</c-dropdown>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Navs</strong> <small>Pills with dropdowns</small>
</c-card-header>
<c-card-body>
<app-docs-example href="components/nav#pills-with-dropdowns">
<c-nav variant="pills">
<c-nav-item>
<a [active]="true" cNavLink routerLink="./">
Active
</a>
</c-nav-item>
<c-dropdown variant="nav-item">
<a cDropdownToggle href>
Dropdown button
</a>
<ul cDropdownMenu>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
</ul>
</c-dropdown>
<c-nav-item>
<a cNavLink routerLink="./">Link</a>
</c-nav-item>
<c-nav-item>
<a [disabled]="true" cNavLink routerLink="./">
Disabled
</a>
</c-nav-item>
</c-nav>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/navs/navs.component.scss
View File

36
front/app/src/app/views/base/navs/navs.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CardModule, DropdownModule, GridModule, NavModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { NavsComponent } from './navs.component';
import { DocsComponentsModule } from '../../../../components';
describe('NavsComponent', () => {
let component: NavsComponent;
let fixture: ComponentFixture<NavsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [NavsComponent],
imports: [GridModule, CardModule, RouterTestingModule, NavModule, DropdownModule, DocsComponentsModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(NavsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
front/app/src/app/views/base/navs/navs.component.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-navs',
templateUrl: './navs.component.html',
styleUrls: ['./navs.component.scss']
})
export class NavsComponent {
constructor() { }
}

221
front/app/src/app/views/base/paginations/paginations.component.html
View File

@@ -1,221 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/pagination" name="Pagination"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Pagination</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
We use a large block of connected links for our pagination, making links hard to miss
and easily scalable—all while providing large hit areas. Pagination is built with list
HTML elements so screen readers can announce the number of available links. Use a
wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to
screen readers and other assistive technologies.
</p>
<p class="text-medium-emphasis small">
In addition, as pages likely have more than one such navigation section, it&#39;s
advisable to provide a descriptive <code>aria-label</code> for the
<code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination
component is used to navigate between a set of search results, an appropriate label
could be <code>aria-label=&#34;Search results pages&#34;</code>.
</p>
<app-docs-example href="components/pagination">
<c-pagination aria-label="Page navigation example">
<c-page-item>
<a cPageLink routerLink="./">Previous</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">3</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">Next</a>
</c-page-item>
</c-pagination>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Pagination</strong> <small>Working with icons</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Looking to use an icon or symbol in place of text for some pagination links? Be sure
to provide proper screen reader support with <code>aria</code> attributes.
</p>
<app-docs-example href="components/pagination#working-with-icons">
<c-pagination aria-label="Page navigation example">
<c-page-item aria-label="Previous">
<a cPageLink routerLink="./"><span aria-hidden="true">&laquo;</span></a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item aria-label="Next">
<a cPageLink routerLink="./"><span aria-hidden="true">&raquo;</span></a>
</c-page-item>
</c-pagination>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Pagination</strong> <small>Disabled and active states</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Pagination links are customizable for different circumstances. Use
<code>disabled</code> for links that appear un-clickable and <code>.active</code> to
indicate the current page.
</p>
<p class="text-medium-emphasis small">
While the <code>disabled</code> prop uses <code>pointer-events: none</code> to
<em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS
property is not yet standardized and doesn&#39;taccount for keyboard navigation. As
such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use
custom JavaScript to fully disable their functionality.
</p>
<app-docs-example href="components/pagination#disabled-and-active-states">
<c-pagination aria-label="Page navigation example">
<c-page-item [disabled]="true" aria-label="Previous">
<a cPageLink routerLink="./"><span aria-hidden="true">&laquo;</span></a>
</c-page-item>
<c-page-item [active]="true">
<a routerLink="./" cPageLink>1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">3</a>
</c-page-item>
<c-page-item aria-label="Next">
<a cPageLink routerLink="./"><span aria-hidden="true">&raquo;</span></a>
</c-page-item>
</c-pagination>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Pagination</strong> <small>Sizing</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Fancy larger or smaller pagination? Add <code>sizing=&#34;lg&#34;</code> or
<code>sizing=&#34;sm&#34;</code> for additional sizes.
</p>
<app-docs-example href="components/pagination#sizing">
<c-pagination aria-label="Page navigation example" size="lg">
<c-page-item>
<a cPageLink routerLink="./">Previous</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">3</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">Next</a>
</c-page-item>
</c-pagination>
</app-docs-example>
<app-docs-example href="components/pagination#sizing">
<c-pagination aria-label="Page navigation example" size="sm">
<c-page-item>
<a cPageLink routerLink="./">Previous</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">3</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">Next</a>
</c-page-item>
</c-pagination>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Pagination</strong> <small>Alignment</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Change the alignment of pagination components with
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p>
<app-docs-example href="components/pagination#aligment">
<c-pagination align="center" aria-label="Page navigation example">
<c-page-item [disabled]="true">
<a cPageLink routerLink="./">Previous</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">3</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">Next</a>
</c-page-item>
</c-pagination>
</app-docs-example>
<app-docs-example href="components/pagination#aligment">
<c-pagination align="end" aria-label="Page navigation example">
<c-page-item [disabled]="true">
<a cPageLink routerLink="./">Previous</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">1</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">2</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">3</a>
</c-page-item>
<c-page-item>
<a cPageLink routerLink="./">Next</a>
</c-page-item>
</c-pagination>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/paginations/paginations.component.scss
View File

36
front/app/src/app/views/base/paginations/paginations.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CardModule, GridModule, PaginationModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { PaginationsComponent } from './paginations.component';
describe('PaginationsComponent', () => {
let component: PaginationsComponent;
let fixture: ComponentFixture<PaginationsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [PaginationsComponent],
imports: [PaginationModule, CardModule, GridModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(PaginationsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
front/app/src/app/views/base/paginations/paginations.component.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-paginations',
templateUrl: './paginations.component.html',
styleUrls: ['./paginations.component.scss']
})
export class PaginationsComponent {
constructor() { }
}

160
front/app/src/app/views/base/placeholders/placeholders.component.html
View File

@@ -1,160 +0,0 @@
<c-row>
<c-col xs="12">
<app-docs-callout href="components/placeholder" name="Placeholder"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Placeholder</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
In the example below, we take a typical card component and recreate it with
placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
same between the two.
</p>
<app-docs-example href="components/placeholder">
<div class="d-flex justify-content-around p-3">
<c-card style="width: 18rem;">
<img cCardImg="top" loading="lazy" src="./assets/images/angular.jpg" />
<c-card-body>
<h5 cCardTitle>Card title</h5>
<p cCardText>
Some quick example text to build on the card title and make up the bulk of the
card&#39;s content.
</p>
<a cButton cCol="7" routerLink="./">Go somewhere</a>
</c-card-body>
</c-card>
<c-card style="width: 18rem;">
<svg aria-label="Placeholder"
cCardImg="top"
focusable="false"
height="162"
preserveAspectRatio="xMidYMid slice"
role="img"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<title>Placeholder</title>
<rect fill="#868e96" height="100%" width="100%"></rect>
</svg>
<c-card-body>
<h5 cCardTitle cPlaceholderAnimation="glow">
<span cCol="6" cPlaceholder></span>
</h5>
<p cCardText cPlaceholderAnimation="glow">
<span cCol xs="7" cPlaceholder class="me-1"></span>
<span cCol="4" cPlaceholder class="me-1"></span>
<span cCol="4" cPlaceholder class="me-1"></span>
<span cCol="6" cPlaceholder class="me-1"></span>
<span cCol="8" cPlaceholder class="me-1"></span>
</p>
<p cPlaceholderAnimation="glow">
<a cButton cCol="7" cPlaceholder color="primary" disabled routerLink="./"></a>
</p>
</c-card-body>
</c-card>
</div>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Placeholder</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Create placeholders with the <code>cPlaceholder</code> directive and a grid
column cCol directive (e.g., <code>cCol="6"</code>) to set the <code>width</code>. They can
replace the text inside an element or be added as a modifier to an existing
component.
</p>
<app-docs-example href="components/placeholder">
<p aria-hidden="true">
<span cCol="6" cPlaceholder></span>
</p>
<button cButton cCol="4" cPlaceholder disabled></button>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Placeholder</strong> <small> Width</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
You can change the <code>width</code> through grid column classes, width utilities, or
inline styles.
</p>
<app-docs-example href="components/placeholder#width">
<span cCol="6" cPlaceholder></span>
<span cPlaceholder class="w-75"></span>
<span cPlaceholder style="width: 30%;"></span>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Placeholder</strong> <small> Color</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
By default, the <code>cPlaceholder</code> uses <code>currentColor</code>. This
can be overridden with a custom color or utility class.
</p>
<app-docs-example href="components/placeholder#color">
<span cCol="12" cPlaceholder></span>
<span cBgColor="primary" cCol="12" cPlaceholder></span>
<span cBgColor="secondary" cCol="12" cPlaceholder></span>
<span cBgColor="success" cCol="12" cPlaceholder></span>
<span cBgColor="danger" cCol="12" cPlaceholder></span>
<span cBgColor="warning" cCol="12" cPlaceholder></span>
<span cBgColor="info" cCol="12" cPlaceholder></span>
<span cBgColor="light" cCol="12" cPlaceholder></span>
<span cBgColor="dark" cCol="12" cPlaceholder></span>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Placeholder</strong> <small> Sizing</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
the parent element. Customize them with <code>size</code> prop: <code>lg</code>
<code>sm</code>, or <code>xs</code>.
</p>
<app-docs-example href="components/placeholder#sizing">
<span cCol="12" cPlaceholder cPlaceholderSize="lg"></span>
<span cCol="12" cPlaceholder></span>
<span cCol="12" cPlaceholder cPlaceholderSize="sm"></span>
<span cCol="12" cPlaceholder cPlaceholderSize="xs"></span>
</app-docs-example>
</c-card-body>
</c-card>
<c-card class="mb-4">
<c-card-header>
<strong>Angular Placeholder</strong> <small> Animation</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Animate placeholders with <code>cPlaceholderAnimation=&#34;glow&#34;</code> or
<code>cPlaceholderAnimation=&#34;wave&#34;</code> to better convey the perception of something
being <em>actively</em> loaded.
</p>
<app-docs-example href="components/placeholder#animation">
<p cPlaceholderAnimation="glow">
<span cCol="12" cPlaceholder></span>
</p>
<p cPlaceholderAnimation="wave">
<span cCol="12" cPlaceholder></span>
</p>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/placeholders/placeholders.component.scss
View File

36
front/app/src/app/views/base/placeholders/placeholders.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, GridModule, UtilitiesModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { PlaceholdersComponent } from './placeholders.component';
describe('PlaceholdersComponent', () => {
let component: PlaceholdersComponent;
let fixture: ComponentFixture<PlaceholdersComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [PlaceholdersComponent],
imports: [CardModule, GridModule, UtilitiesModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(PlaceholdersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
front/app/src/app/views/base/placeholders/placeholders.component.ts
View File

@@ -1,15 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-placeholders',
templateUrl: './placeholders.component.html',
styleUrls: ['./placeholders.component.scss']
})
export class PlaceholdersComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

69
front/app/src/app/views/base/popovers/popovers.component.html
View File

@@ -1,69 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/popover" name="Popover"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Popover</strong> <small>Basic example</small>
</c-card-header>
<c-card-body>
<app-docs-example href="components/popover">
<button [cPopover]="popoverHtml"
cPopoverPlacement="right"
[cPopoverTrigger]="'click'"
[cPopoverVisible]="visible"
cButton
class="m-1"
color="danger"
size="lg">
Click to toggle popover
<ng-template #popoverHtml>
<h3 class="popover-header">
Popover Title
</h3>
<div class="popover-body">
And here’s some amazing content. It’s very engaging. Right?
</div>
</ng-template>
</button>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Popover</strong> <small>Four directions</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Four options are available: top, right, bottom, and left aligned.
</p>
<app-docs-example href="components/popover#four-directions">
<button [cPopoverTrigger]="'hover'" cButton [cPopover]="tooltipHtml"
cPopoverPlacement="top" class="me-1"
color="secondary">Popover on top
<ng-template #tooltipHtml>
<div class="popover-body">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Top!
</div>
</ng-template>
</button>
<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Right!"
cPopoverPlacement="right"
class="me-1" color="secondary">Popover on right
</button>
<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Bottom!"
cPopoverPlacement="bottom"
class="me-1" color="secondary">Popover on bottom
</button>
<button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Left!"
cPopoverPlacement="left" class="me-1"
color="secondary">Popover on left
</button>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/popovers/popovers.component.scss
View File

36
front/app/src/app/views/base/popovers/popovers.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, GridModule, PopoverModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { PopoversComponent } from './popovers.component';
describe('PopoversComponent', () => {
let component: PopoversComponent;
let fixture: ComponentFixture<PopoversComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [PopoversComponent],
imports: [CardModule, GridModule, PopoverModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(PopoversComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

20
front/app/src/app/views/base/popovers/popovers.component.ts
View File

@@ -1,20 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-popovers',
templateUrl: './popovers.component.html',
styleUrls: ['./popovers.component.scss']
})
export class PopoversComponent implements OnInit {
visible = true;
constructor() { }
ngOnInit(): void {
setTimeout(() => {
this.visible = !this.visible;
}, 3000);
}
}

197
front/app/src/app/views/base/progress/progress.component.html
View File

@@ -1,197 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/progress" name="Progress"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Basic example</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Progress components are built with two HTML elements, some CSS to set the width, and a
few attributes. We don't use
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
the HTML5 <code>&lt;progress&gt;</code> element
</a>
, ensuring you can stack progress bars, animate them, and place text labels over them.
</p>
<app-docs-example href="components/progress">
<c-progress class="mb-3">
<c-progress-bar [value]="0"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="50"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="75"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="100"></c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Labels</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add labels to your progress bars by placing text within the
<code>&lt;c-progress-bar&gt;</code>.
</p>
<app-docs-example href="components/progress#labels">
<c-progress class="mb-3">
<c-progress-bar [value]="25">25%</c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Height</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
We only set a <code>height</code> [value] on the <code>&lt;c-progress&gt;</code>, so if
you change that [value] the inner <code>&lt;c-progress-bar&gt;</code> will automatically
resize accordingly.
</p>
<app-docs-example href="components/progress#height">
<c-progress class="mb-3" height="1">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="3">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="5">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="7">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="11">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="13">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="17">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
<c-progress class="mb-3" height="19">
<c-progress-bar [value]="25"></c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Backgrounds</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use <code>color</code> prop to change the appearance of individual progress bars.
</p>
<app-docs-example href="components/progress#backgrounds">
<c-progress class="mb-3">
<c-progress-bar [value]="25" color="success"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="50" color="info"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="75" color="warning"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="100" color="danger"></c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Multiple bars</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<app-docs-example href="components/progress#multiple-bars">
<c-progress class="mb-3">
<c-progress-bar [value]="15">15</c-progress-bar>
<c-progress-bar [value]="30" color="success">30</c-progress-bar>
<c-progress-bar [value]="20" color="info">20</c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Striped</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;c-progress-bar&gt;</code> to
apply a stripe via CSS gradient over the progress bar&#39;s background color.
</p>
<app-docs-example href="components/progress#striped">
<c-progress class="mb-3">
<c-progress-bar [value]="25" color="success" variant="striped"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="50" color="info" variant="striped"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="75" color="warning" variant="striped"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [value]="100" color="danger" variant="striped"></c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Progress</strong> <small>Animated stripes</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The striped gradient can also be animated. Add <code>[animated]="true"</code> property to
<code>&lt;c-progress-bar&gt;</code> to animate the stripes right to left via CSS3
animations.
</p>
<app-docs-example href="components/progress#animated-stripes">
<c-progress class="mb-3">
<c-progress-bar [animated]="true" [value]="25" color="success" variant="striped"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [animated]="true" [value]="50" color="info" variant="striped"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [animated]="true" [value]="75" color="warning" variant="striped"></c-progress-bar>
</c-progress>
<c-progress class="mb-3">
<c-progress-bar [animated]="true" [value]="100" color="danger" variant="striped"></c-progress-bar>
</c-progress>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/progress/progress.component.scss
View File

36
front/app/src/app/views/base/progress/progress.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CardModule, GridModule, ProgressModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { ProgressComponent } from './progress.component';
describe('ProgressComponent', () => {
let component: ProgressComponent;
let fixture: ComponentFixture<ProgressComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ProgressComponent],
imports: [ProgressModule, CardModule, GridModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(ProgressComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
front/app/src/app/views/base/progress/progress.component.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-progress',
templateUrl: './progress.component.html',
styleUrls: ['./progress.component.scss']
})
export class ProgressComponent {
constructor() { }
}

114
front/app/src/app/views/base/spinners/spinners.component.html
View File

@@ -1,114 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/spinner" name="Spinner"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Spinner</strong> <small>Border</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<app-docs-example href="components/spinner">
<c-spinner></c-spinner>
</app-docs-example>
<p class="text-medium-emphasis small">
The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
You can use any of our text color utilities on the standard spinner.
</p>
<app-docs-example href="components/spinner#colors">
<c-spinner color="primary"></c-spinner>
<c-spinner color="secondary"></c-spinner>
<c-spinner color="success"></c-spinner>
<c-spinner color="danger"></c-spinner>
<c-spinner color="warning"></c-spinner>
<c-spinner color="info"></c-spinner>
<c-spinner color="light"></c-spinner>
<c-spinner color="dark"></c-spinner>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Spinner</strong> <small>Growing</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
doesn&#39;t technically spin, it does repeatedly grow!
</p>
<app-docs-example href="components/spinner#growing-spinner">
<c-spinner variant="grow"></c-spinner>
</app-docs-example>
<p class="text-medium-emphasis small">
Once again, this spinner is built with <code>currentColor</code>, so you can easily
change its appearance. Here it is in blue, along with the supported variants.
</p>
<app-docs-example href="components/spinner#growing-spinner">
<c-spinner color="primary" variant="grow"></c-spinner>
<c-spinner color="secondary" variant="grow"></c-spinner>
<c-spinner color="success" variant="grow"></c-spinner>
<c-spinner color="danger" variant="grow"></c-spinner>
<c-spinner color="warning" variant="grow"></c-spinner>
<c-spinner color="info" variant="grow"></c-spinner>
<c-spinner color="light" variant="grow"></c-spinner>
<c-spinner color="dark" variant="grow"></c-spinner>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Spinner</strong> <small>Size</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
be used within other components.
</p>
<app-docs-example href="components/spinner#size">
<c-spinner size="sm"></c-spinner>
<c-spinner size="sm" variant="grow"></c-spinner>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Spinner</strong> <small>Buttons</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Use spinners within buttons to indicate an action is currently processing or taking
place. You may also swap the text out of the spinner element and utilize button text
as needed.
</p>
<app-docs-example href="components/spinner#buttons">
<button cButton class="m-1" disabled>
<c-spinner aria-hidden="true" size="sm"></c-spinner>
</button>
<button cButton class="m-1" disabled>
<c-spinner aria-hidden="true" size="sm"></c-spinner>
Loading...
</button>
</app-docs-example>
<app-docs-example href="components/spinner#buttons">
<br>
<button cButton class="m-1" disabled>
<c-spinner aria-hidden="true" size="sm" variant="grow"></c-spinner>
</button>
<button cButton class="m-1" disabled>
<c-spinner aria-hidden="true" size="sm" variant="grow"></c-spinner>
Loading...
</button>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/spinners/spinners.component.scss
View File

36
front/app/src/app/views/base/spinners/spinners.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, GridModule, SpinnerModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { SpinnersComponent } from './spinners.component';
describe('SpinnersComponent', () => {
let component: SpinnersComponent;
let fixture: ComponentFixture<SpinnersComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SpinnersComponent],
imports: [SpinnerModule, CardModule, GridModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(SpinnersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
front/app/src/app/views/base/spinners/spinners.component.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-spinners',
templateUrl: './spinners.component.html',
styleUrls: ['./spinners.component.scss']
})
export class SpinnersComponent {
constructor() { }
}

1007
front/app/src/app/views/base/tables/tables.component.html
View File

File diff suppressed because it is too large Load Diff

0
front/app/src/app/views/base/tables/tables.component.scss
View File

36
front/app/src/app/views/base/tables/tables.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CardModule, GridModule, TableModule, UtilitiesModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { TablesComponent } from './tables.component';
import { DocsComponentsModule } from '../../../../components';
describe('TablesComponent', () => {
let component: TablesComponent;
let fixture: ComponentFixture<TablesComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TablesComponent ],
imports: [GridModule, CardModule, TableModule, GridModule, UtilitiesModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(TablesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
front/app/src/app/views/base/tables/tables.component.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-tables',
templateUrl: './tables.component.html',
styleUrls: ['./tables.component.scss']
})
export class TablesComponent {
constructor() { }
}

123
front/app/src/app/views/base/tabs/tabs.component.html
View File

@@ -1,123 +0,0 @@
<c-row>
<c-col xs="12">
<app-docs-callout href="components/tabs" name="Tabs"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-3">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Tabs</strong> <small>underline</small>
</c-card-header>
<c-card-body>
<c-nav variant="tabs">
<c-nav-item>
<a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="0" cNavLink>
<svg cIcon class="me-2" name="cilHome"></svg>
Home
</a>
</c-nav-item>
<c-nav-item>
<a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="1" cNavLink>
<svg cIcon class="me-2" name="cilUser"></svg>
Profile
</a>
</c-nav-item>
<c-nav-item>
<a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="2" cNavLink [disabled]="tabContent1.activeTabPaneIdx < 1">
<svg cIcon class="me-2" name="cilCode"></svg>
Contact
</a>
</c-nav-item>
</c-nav>
<c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
<c-tab-pane class="p-3 preview" role="tabpanel">
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane class="p-3 preview" role="tabpanel">
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane class="p-3 preview" role="tabpanel" *ngIf="tabContent1.activeTabPaneIdx > 0">
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
</c-tab-content>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-3">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Tabs</strong> <small>tabs</small>
</c-card-header>
<c-card-body>
<c-nav variant="tabs">
<c-nav-item *ngFor="let nav of panes; index as i; first as isFirst; last as isLast">
<a [cTabContent]="tabContent2" [disabled]="isLast" [routerLink] [tabPaneIdx]="i"
cNavLink>
<svg cIcon class="me-2" name="cilHome"></svg>
{{nav.name}}
</a>
</c-nav-item>
</c-nav>
<c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
<c-tab-pane *ngFor="let pane of panes; index as i;" class="p-3 preview">
This is some placeholder content the <strong>{{pane.name}}</strong> tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
</c-tab-pane>
</c-tab-content>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-3">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Tabs</strong> <small>pills</small>
</c-card-header>
<c-card-body>
<c-nav variant="pills">
<c-nav-item>
<a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="0" cNavLink>
<svg cIcon class="me-2" name="cilHome"></svg>
Home
</a>
</c-nav-item>
<c-nav-item>
<a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="1" cNavLink>
<svg cIcon class="me-2" name="cilUser"></svg>
Profile
</a>
</c-nav-item>
<c-nav-item>
<a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="2" cNavLink>
<svg cIcon class="me-2" name="cilCode"></svg>
Contact
</a>
</c-nav-item>
</c-nav>
<c-tab-content #tabContent3="cTabContent" cRounded="bottom" [activeTabPaneIdx]="0">
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
</c-tab-content>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/tabs/tabs.component.scss
View File

36
front/app/src/app/views/base/tabs/tabs.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CardModule, GridModule, NavModule, TabsModule } from '@coreui/angular';
import { IconModule, IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { TabsComponent } from './tabs.component';
describe('TabsComponent', () => {
let component: TabsComponent;
let fixture: ComponentFixture<TabsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [TabsComponent],
imports: [TabsModule, GridModule, CardModule, IconModule, RouterTestingModule, NavModule, DocsComponentsModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(TabsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

18
front/app/src/app/views/base/tabs/tabs.component.ts
View File

@@ -1,18 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.scss']
})
export class TabsComponent {
public panes = [
{ name: 'Home 01', id: 'tab-01' },
{ name: 'Profile 02', id: 'tab-02' },
{ name: 'Contact 03', id: 'tab-03' }
];
constructor() { }
}

59
front/app/src/app/views/base/tooltips/tooltips.component.html
View File

@@ -1,59 +0,0 @@
<c-row>
<c-col xs="12">
<app-docs-callout href="components/tooltip" name="Tooltip"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Tooltip</strong> <small>Basic example</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<app-docs-example href="components/tooltip">
<p class="text-medium-emphasis">
Tight pants next level keffiyeh
<a cTooltip="Tooltip text" routerLink="./" [cTooltipVisible]="true"> you probably </a>
haven&#39;theard of them. Photo booth beard raw denim letterpress vegan messenger
bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit
american apparel
<a cTooltip="Tooltip text" routerLink="./"> have a </a>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;&#39;s
cleanse vegan chambray. A really ironic artisan
<a cTooltip="Tooltip text" href> whatever keytar </a>
scenester farm-to-table banksy Austin
<a cTooltip="Tooltip text" href> twitter handle </a>
freegan cred raw denim single-origin coffee viral.
</p>
</app-docs-example>
<p class="text-medium-emphasis small">
Hover over the buttons below to see the four tooltips directions: top, right, bottom,
and left.
</p>
<app-docs-example href="components/tooltip">
<button cButton cTooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." cTooltipPlacement="top"
class="me-1" color="secondary">Tooltip on
top
</button>
<button cButton cTooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." cTooltipPlacement="right"
class="me-1" color="secondary">Tooltip
on right
</button>
<button cButton cTooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
cTooltipPlacement="bottom"
class="me-1" color="secondary">Tooltip
on bottom
</button>
<button cButton [cTooltip]="tooltipContent" cTooltipPlacement="left"
class="me-1" color="secondary">Tooltip on left
<ng-template #tooltipContent>
Vivamus sagittis lacus vel augue laoreet rutrum <i cTextColor="warning">faucibus</i>.
</ng-template>
</button>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/base/tooltips/tooltips.component.scss
View File

36
front/app/src/app/views/base/tooltips/tooltips.component.spec.ts
View File

@@ -1,36 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, GridModule, TooltipModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { TooltipsComponent } from './tooltips.component';
describe('TooltipsComponent', () => {
let component: TooltipsComponent;
let fixture: ComponentFixture<TooltipsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TooltipsComponent ],
imports: [CardModule, GridModule, TooltipModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(TooltipsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
front/app/src/app/views/base/tooltips/tooltips.component.ts
View File

@@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-tooltips',
templateUrl: './tooltips.component.html',
styleUrls: ['./tooltips.component.scss']
})
export class TooltipsComponent {
constructor() { }
}

397
front/app/src/app/views/buttons/button-groups/button-groups.component.html
View File

@@ -1,397 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/button-group" name="Button Group"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Basic example</span>
</c-card-header>
<c-card-body>
<p>
Wrap a series of <code>&lt;CButton&gt;</code> components in
<code>&lt;c-button-group&gt;</code>.
</p>
<app-docs-example href="components/button-group">
<c-button-group aria-label="Basic example" role="group">
<button cButton color="primary">Left</button>
<button cButton color="primary">Middle</button>
<button cButton color="primary">Right</button>
</c-button-group>
</app-docs-example>
<p>
These classes can also be added to groups of links, as an alternative to the
<code>&lt;CNav&gt;</code> components.
</p>
<app-docs-example href="components/button-group">
<c-button-group>
<a [active]="true" cButton color="primary" routerLink="./">
Active link
</a>
<a cButton color="primary" routerLink="./">
Link
</a>
<a cButton color="primary" routerLink="./">
Link
</a>
</c-button-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Mixed styles</span>
</c-card-header>
<c-card-body>
<app-docs-example href="components/button-group#mixed-styles">
<c-button-group aria-label="Basic mixed styles example" role="group">
<button cButton color="danger">Left</button>
<button cButton color="warning">Middle</button>
<button cButton color="success">Right</button>
</c-button-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Outlined styles</span>
</c-card-header>
<c-card-body>
<app-docs-example href="components/button-group#outlined-styles">
<c-button-group aria-label="Basic outlined example" role="group">
<button cButton color="primary" variant="outline">
Left
</button>
<button cButton color="primary" variant="outline">
Middle
</button>
<button cButton color="primary" variant="outline">
Right
</button>
</c-button-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Checkbox and radio button groups</span>
</c-card-header>
<c-card-body>
<p>
Combine button-like checkbox and radio toggle buttons into a seamless looking button
group.
</p>
<app-docs-example href="components/button-group#checkbox-and-radio-button-groups">
<form [formGroup]="formCheck1">
<c-button-group aria-label="Basic checkbox toggle button group" role="group">
<input class="btn-check" formControlName="checkbox1" type="checkbox"/>
<label (click)="setCheckBoxValue('checkbox1')" cButton cFormCheckLabel
variant="outline">Checkbox 1</label>
<input class="btn-check" formControlName="checkbox2" type="checkbox"/>
<label (click)="setCheckBoxValue('checkbox2')" cButton cFormCheckLabel
variant="outline">Checkbox 2</label>
<input class="btn-check" formControlName="checkbox3" type="checkbox"/>
<label (click)="setCheckBoxValue('checkbox3')" cButton cFormCheckLabel variant="outline">Checkbox
3</label>
</c-button-group>
</form>
<br class="mb-3">
</app-docs-example>
<app-docs-example href="components/button-group#checkbox-and-radio-button-groups">
<form [formGroup]="formRadio1">
<c-button-group aria-label="Basic radio toggle button group" role="group">
<input class="btn-check" formControlName="radio1" type="radio" value="Radio1"/>
<label (click)="setRadioValue('Radio1')" cButton cFormCheckLabel
variant="outline">Radio 1</label>
<input class="btn-check" formControlName="radio1" type="radio" value="Radio2"/>
<label (click)="setRadioValue('Radio2')" cButton cFormCheckLabel
variant="outline">Radio 2</label>
<input class="btn-check" formControlName="radio1" type="radio" value="Radio3"/>
<label (click)="setRadioValue('Radio3')" cButton cFormCheckLabel variant="outline">Radio 3</label>
</c-button-group>
</form>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Button toolbar</span>
</c-card-header>
<c-card-body>
<p>
Join sets of button groups into button toolbars for more complicated components. Use
utility classes as needed to space out groups, buttons, and more.
</p>
<app-docs-example href="components/button-group#button-toolbar">
<c-button-toolbar aria-label="Toolbar with button groups" role="group">
<c-button-group aria-label="First group" class="me-2" role="group">
<button cButton color="primary">1</button>
<button cButton color="primary">2</button>
<button cButton color="primary">3</button>
<button cButton color="primary">4</button>
</c-button-group>
<c-button-group aria-label="Second group" class="me-2" role="group">
<button cButton color="secondary">5</button>
<button cButton color="secondary">6</button>
<button cButton color="secondary">7</button>
</c-button-group>
<c-button-group aria-label="Third group" class="me-2" role="group">
<button cButton color="info">8</button>
</c-button-group>
</c-button-toolbar>
</app-docs-example>
<p>
Feel free to combine input groups with button groups in your toolbars. Similar to the
example above, you’ll likely need some utilities through to space items correctly.
</p>
<app-docs-example href="components/button-group#button-toolbar">
<c-button-toolbar aria-label="Toolbar with button groups" class="mb-3" role="group">
<c-button-group aria-label="First group" class="me-2" role="group">
<button cButton color="secondary" variant="outline">
1
</button>
<button cButton color="secondary" variant="outline">
2
</button>
<button cButton color="secondary" variant="outline">
3
</button>
<button cButton color="secondary" variant="outline">
4
</button>
</c-button-group>
<c-input-group>
<span cInputGroupText>@</span>
<input aria-describedby="btnGroupAddon"
aria-label="Input group example"
cFormControl
placeholder="Input group example"
/>
</c-input-group>
</c-button-toolbar>
<c-button-toolbar
aria-label="Toolbar with button groups"
class="justify-content-between"
role="group"
>
<c-button-group aria-label="First group" class="me-2" role="group">
<button cButton color="secondary" variant="outline">
1
</button>
<button cButton color="secondary" variant="outline">
2
</button>
<button cButton color="secondary" variant="outline">
3
</button>
<button cButton color="secondary" variant="outline">
4
</button>
</c-button-group>
<c-input-group>
<span cInputGroupText>@</span>
<input aria-describedby="btnGroupAddon"
aria-label="Input group example"
cFormControl
placeholder="Input group example"
/>
</c-input-group>
</c-button-toolbar>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Sizing</span>
</c-card-header>
<c-card-body>
<p>
Alternatively, of implementing button sizing classes to each button in a group, set
<code>size</code> property to all <code>&lt;c-button-group&gt;</code>&#39;s, including
each one when nesting multiple groups.
</p>
<app-docs-example href="components/button-group#sizing">
<c-button-group aria-label="Large button group" class="m-1" role="group" size="lg">
<button cButton color="dark" variant="outline">
Left
</button>
<button cButton color="dark" variant="outline">
Middle
</button>
<button cButton color="dark" variant="outline">
Right
</button>
</c-button-group>
<br/>
<c-button-group aria-label="Default button group" class="m-1" role="group">
<button cButton color="dark" variant="outline">
Left
</button>
<button cButton color="dark" variant="outline">
Middle
</button>
<button cButton color="dark" variant="outline">
Right
</button>
</c-button-group>
<br/>
<c-button-group aria-label="Small button group" class="m-1" role="group" size="sm">
<button cButton color="dark" variant="outline">
Left
</button>
<button cButton color="dark" variant="outline">
Middle
</button>
<button cButton color="dark" variant="outline">
Right
</button>
</c-button-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Nesting</span>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Put a <code>&lt;c-button-group&gt;</code> inside another
<code>&lt;c-button-group&gt;</code> when you need dropdown menus combined with a series
of buttons.
</p>
<app-docs-example href="components/button-group#nesting">
<c-button-group aria-label="Button group with nested dropdown" role="group">
<button cButton color="primary">1</button>
<button cButton color="primary">2</button>
<c-dropdown variant="btn-group">
<button cButton cDropdownToggle>
Dropdown
</button>
<ul cDropdownMenu>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
<li cDropdownDivider></li>
<li><a cDropdownItem routerLink="./">Separated link</a></li>
</ul>
</c-dropdown>
</c-button-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button Group</strong> <span>Vertical variation</span>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Create a set of buttons that appear vertically stacked rather than horizontally.
<strong>Split button dropdowns are not supported here.</strong>
</p>
<app-docs-example href="components/button-group/#vertical-variation">
<c-button-group [vertical]="true" aria-label="Vertical button group" role="group">
<button cButton color="dark">Button</button>
<button cButton color="dark">Button</button>
<button cButton color="dark">Button</button>
<button cButton color="dark">Button</button>
<button cButton color="dark">Button</button>
<button cButton color="dark">Button</button>
<button cButton color="dark">Button</button>
</c-button-group>
<br>
</app-docs-example>
<app-docs-example href="components/button-group/#vertical-variation">
<c-button-group [vertical]="true" aria-label="Vertical button group" role="group">
<button cButton color="primary">Button</button>
<button cButton color="primary">Button</button>
<c-dropdown variant="btn-group">
<button cButton cDropdownToggle>
Dropdown
</button>
<ul cDropdownMenu>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
<li cDropdownDivider></li>
<li><a cDropdownItem routerLink="./">Separated link</a></li>
</ul>
</c-dropdown>
<button cButton color="primary">Button</button>
<button cButton color="primary">Button</button>
<c-dropdown variant="btn-group">
<button cButton cDropdownToggle>
Dropdown
</button>
<ul cDropdownMenu>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
<li cDropdownDivider></li>
<li><a cDropdownItem routerLink="./">Separated link</a></li>
</ul>
</c-dropdown>
<c-dropdown placement="right-start" variant="btn-group">
<button cButton cDropdownToggle>
Dropdown
</button>
<ul cDropdownMenu dark>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
<li cDropdownDivider></li>
<li><a cDropdownItem routerLink="./">Separated link</a></li>
</ul>
</c-dropdown>
<c-dropdown variant="btn-group">
<button cButton cDropdownToggle>
Dropdown
</button>
<ul cDropdownMenu>
<li><a cDropdownItem routerLink="./">Action</a></li>
<li><a cDropdownItem routerLink="./">Another action</a></li>
<li><a cDropdownItem routerLink="./">Something else here</a></li>
<li cDropdownDivider></li>
<li><a cDropdownItem routerLink="./">Separated link</a></li>
</ul>
</c-dropdown>
</c-button-group>
</app-docs-example>
<app-docs-example href="components/button-group/#vertical-variation">
<form [formGroup]="formRadio1">
<c-button-group [vertical]="true" aria-label="Vertical button group" role="group">
<input class="btn-check" formControlName="radio1" type="radio" value="Radio1"/>
<label (click)="setRadioValue('Radio1')" cButton cFormCheckLabel color="danger"
variant="outline">Radio 1</label>
<input class="btn-check" formControlName="radio1" type="radio" value="Radio2"/>
<label (click)="setRadioValue('Radio2')" cButton cFormCheckLabel color="danger"
variant="outline">Radio 2</label>
<input class="btn-check" formControlName="radio1" type="radio" value="Radio3"/>
<label (click)="setRadioValue('Radio3')" cButton cFormCheckLabel color="danger" variant="outline">Radio
3</label>
</c-button-group>
</form>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/buttons/button-groups/button-groups.component.scss
View File

37
front/app/src/app/views/buttons/button-groups/button-groups.component.spec.ts
View File

@@ -1,37 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { ButtonGroupModule, ButtonModule, CardModule, DropdownModule, FormModule, GridModule } from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { ButtonGroupsComponent } from './button-groups.component';
describe('ButtonGroupsComponent', () => {
let component: ButtonGroupsComponent;
let fixture: ComponentFixture<ButtonGroupsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ButtonGroupsComponent],
imports: [ReactiveFormsModule, ButtonModule, DropdownModule, FormModule, DocsComponentsModule, GridModule, CardModule, RouterTestingModule, ButtonModule, ButtonGroupModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(ButtonGroupsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

34
front/app/src/app/views/buttons/button-groups/button-groups.component.ts
View File

@@ -1,34 +0,0 @@
import { Component } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@Component({
selector: 'app-button-groups',
templateUrl: './button-groups.component.html',
styleUrls: ['./button-groups.component.scss']
})
export class ButtonGroupsComponent {
formCheck1 = this.formBuilder.group({
checkbox1: false,
checkbox2: false,
checkbox3: false
});
formRadio1 = new UntypedFormGroup({
radio1: new UntypedFormControl('Radio1')
});
constructor(
private formBuilder: UntypedFormBuilder
) { }
setCheckBoxValue(controlName: string) {
const prevValue = this.formCheck1.get(controlName)?.value;
const value = this.formCheck1.value;
value[controlName] = !prevValue;
this.formCheck1.setValue(value);
}
setRadioValue(value: string): void {
this.formRadio1.setValue({ radio1: value });
}
}

51
front/app/src/app/views/buttons/buttons-routing.module.ts
View File

@@ -1,51 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ButtonsComponent } from './buttons/buttons.component';
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
import { DropdownsComponent } from './dropdowns/dropdowns.component';
const routes: Routes = [
{
path: '',
data: {
title: 'Buttons'
},
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'buttons'
},
{
path: 'buttons',
component: ButtonsComponent,
data: {
title: 'Buttons'
}
},
{
path: 'button-groups',
component: ButtonGroupsComponent,
data: {
title: 'Button groups'
}
},
{
path: 'dropdowns',
component: DropdownsComponent,
data: {
title: 'Dropdowns'
}
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ButtonsRoutingModule {
}

55
front/app/src/app/views/buttons/buttons.module.ts
View File

@@ -1,55 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { DocsComponentsModule } from '@docs-components/docs-components.module';
import { ButtonsComponent } from './buttons/buttons.component';
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
import { DropdownsComponent } from './dropdowns/dropdowns.component';
import { ButtonsRoutingModule } from './buttons-routing.module';
import {
ButtonGroupModule,
ButtonModule,
CardModule,
CollapseModule,
DropdownModule,
FormModule,
GridModule,
NavbarModule,
NavModule,
SharedModule,
UtilitiesModule
} from '@coreui/angular';
import { IconModule } from '@coreui/icons-angular';
@NgModule({
declarations: [
ButtonsComponent,
ButtonGroupsComponent,
DropdownsComponent,
],
imports: [
CommonModule,
ButtonsRoutingModule,
ButtonModule,
ButtonGroupModule,
GridModule,
IconModule,
CardModule,
UtilitiesModule,
DropdownModule,
SharedModule,
FormModule,
ReactiveFormsModule,
DocsComponentsModule,
NavbarModule,
CollapseModule,
NavModule,
NavbarModule
]
})
export class ButtonsModule {
}

340
front/app/src/app/views/buttons/buttons/buttons.component.html
View File

@@ -1,340 +0,0 @@
<c-row ngPreserveWhitespaces>
<c-col xs="12">
<app-docs-callout href="components/button" name="Button"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4" id="AngularButton">
<c-card-header>
<strong>Angular Button</strong>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
CoreUI includes a bunch of predefined buttons components, each serving its own
semantic purpose. Buttons show what action will happen when the user clicks or touches
it. CoreUI buttons are used to initialize operations, both in the background or
foreground of an experience.
</p>
<app-docs-example fragment="AngularButton" href="components/button">
<c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
<c-col class="mb-3 mb-xl-0" xl="2" xs="12">
{{state.charAt(0).toUpperCase() + state.slice(1)}}
</c-col>
<c-col>
<button *ngFor="let color of colors; index as i"
[active]="state === 'active'"
[color]="color"
[disabled]="state === 'disabled'"
cButton
class="me-1"
>
{{color.charAt(0).toUpperCase() + color.slice(1)}}
</button>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4" id="AngularButtonWithIcons">
<c-card-header>
<strong>Angular Button</strong> <small>with icons</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<app-docs-example fragment="AngularButtonWithIcons" href="components/button">
<c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
<c-col class="mb-3 mb-xl-0" xl="2" xs="12">
{{state.charAt(0).toUpperCase() + state.slice(1)}}
</c-col>
<c-col>
<button *ngFor="let color of colors; index as i"
[active]="state === 'active'"
[color]="color"
[disabled]="state === 'disabled'"
cButton
class="me-1"
>
<svg cIcon class="me-2" name="cil-bell"></svg>
{{color.charAt(0).toUpperCase() + color.slice(1)}}
</button>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Button</strong> <small>Button components</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
The <code>&lt;button&gt;</code> component are designed for
<code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code>
elements (though some browsers may apply a slightly different rendering).
</p>
<p class="text-medium-emphasis small">
If you&#39;re using <code>&lt;button&gt;</code> component as <code>&lt;a&gt;</code>
elements that are used to trigger functionality ex. collapsing content, these links
should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers.
</p>
<app-docs-example href="components/button#button-components">
<a cButton class="me-1" color="primary" routerLink="./">
Link
</a>
<button cButton class="me-1" color="primary" type="submit">
Button
</button>
<input cButton class="me-1" color="primary" type="button" value="Input">
<input cButton class="me-1" color="primary" type="submit" value="Submit">
<input cButton class="me-1" color="primary" type="reset" value="Reset">
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>outline</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
If you need a button, but without the strong background colors. Set
<code>variant=&#34;outline&#34;</code> prop to remove all background colors.
</p>
<app-docs-example href="components/button#outline-buttons">
<c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
<c-col class="mb-3 mb-xl-0" xl="2" xs="12">
{{state.charAt(0).toUpperCase() + state.slice(1)}}
</c-col>
<c-col>
<ng-container *ngFor="let color of colors; index as i; last as isLast">
<button
*ngIf="!isLast"
[active]="state === 'active'"
[color]="color"
[disabled]="state === 'disabled'"
cButton
class="me-1"
variant="outline"
>
{{color.charAt(0).toUpperCase() + color.slice(1)}}
</button>
</ng-container>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>ghost</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
to remove all background colors.
</p>
<app-docs-example href="components/button#ghost-buttons">
<c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
<c-col class="mb-3 mb-xl-0" xl="2" xs="12">
{{state.charAt(0).toUpperCase() + state.slice(1)}}
</c-col>
<c-col>
<ng-container *ngFor="let color of colors; index as i; last as isLast">
<button
*ngIf="!isLast"
[active]="state === 'active'"
[color]="color"
[disabled]="state === 'disabled'"
cButton
class="me-1"
variant="ghost"
>
{{color.charAt(0).toUpperCase() + color.slice(1)}}
</button>
</ng-container>
</c-col>
</c-row>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>Sizes</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code>
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<app-docs-example href="components/button#sizes">
<button cButton class="mb-3" color="primary" size="lg">
Large button
</button>
<button cButton class="mb-3" color="secondary" size="lg">
Large button
</button>
</app-docs-example>
<app-docs-example href="components/button#sizes">
<br>
<button cButton class="mb-3" color="primary" size="sm">
Small button
</button>
<button cButton class="mb-3" color="secondary" size="sm">
Small button
</button>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>Pill</small>
</c-card-header>
<c-card-body>
<app-docs-example href="components/button#pill-buttons">
<ng-container *ngFor="let color of colors; index as i; last as isLast">
<button
*ngIf="!isLast"
[color]="color"
cButton
class="me-1"
shape="rounded-pill"
>
{{color.charAt(0).toUpperCase() + color.slice(1)}}
</button>
</ng-container>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>Square</small>
</c-card-header>
<c-card-body>
<app-docs-example href="components/button#square">
<ng-container *ngFor="let color of colors; index as i; last as isLast">
<button
*ngIf="!isLast"
[color]="color"
cButton
class="me-1"
shape="rounded-0"
>
{{color.charAt(0).toUpperCase() + color.slice(1)}}
</button>
</ng-container>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>Disabled state</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> boolean prop to any <code>&lt;button&gt;</code>
component to make buttons look inactive. Disabled button has
<code>pointer-events: none</code> applied to, disabling hover and active states from
triggering.
</p>
<app-docs-example href="components/button#disabled-state">
<button cButton color="primary" disabled size="lg">
Primary button
</button>
<button cButton color="secondary" disabled size="lg">
Button
</button>
</app-docs-example>
<p class="text-medium-emphasis small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
</p>
<p class="text-medium-emphasis small">
<code>&lt;a&gt;</code>s don&#39;tsupport the <code>disabled</code> attribute, so
CoreUI has to add <code>.disabled</code> class to make buttons look inactive.
CoreUI also has to add to the disabled button component
<code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
to assistive technologies.
</p>
<app-docs-example href="components/button#disabled-state">
<a cButton color="primary" disabled [routerLink]="[]" size="lg">
Primary link
</a>
<a cButton color="secondary" disabled [routerLink]="[]" size="lg">
Link
</a>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header>
<strong>Angular Button</strong> <small>Block buttons</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Create buttons that span the full width of a parent—by using utilities.
</p>
<app-docs-example href="components/button#block-buttons">
<div class="d-grid gap-2">
<button cButton color="primary">Button</button>
<button cButton color="primary">Button</button>
</div>
</app-docs-example>
<p class="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically stacked buttons until
the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the
<code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
your browser to see them change.
</p>
<app-docs-example href="components/button#block-buttons">
<div class="d-grid gap-2 d-md-block">
<button cButton color="primary">Button</button>
<button cButton color="primary">Button</button>
</div>
</app-docs-example>
<p class="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column width classes. For
example, for a half-width &#34;block button&#34;, use <code>.col-6</code>. Center it
horizontally with <code>.mx-auto</code>, too.
</p>
<app-docs-example href="components/button#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto">
<button cButton color="primary">Button</button>
<button cButton color="primary">Button</button>
</div>
</app-docs-example>
<p class="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons when horizontal.
Here we&#39;ve taken our previous responsive example and added some flex utilities and
a margin utility on the button to right align the buttons when they&#39;re no longer
stacked.
</p>
<app-docs-example href="components/button#block-buttons">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button cButton class="me-md-2" color="primary">
Button
</button>
<button cButton color="primary">Button</button>
</div>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/buttons/buttons/buttons.component.scss
View File

37
front/app/src/app/views/buttons/buttons/buttons.component.spec.ts
View File

@@ -1,37 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonModule, CardModule, GridModule } from '@coreui/angular';
import { IconModule } from '@coreui/icons-angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { ButtonsComponent } from './buttons.component';
describe('ButtonsComponent', () => {
let component: ButtonsComponent;
let fixture: ComponentFixture<ButtonsComponent>;
let iconSetService: IconSetService
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ButtonsComponent ],
imports: [CardModule, GridModule, ButtonModule, RouterTestingModule, IconModule, DocsComponentsModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(ButtonsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
front/app/src/app/views/buttons/buttons/buttons.component.ts
View File

@@ -1,14 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-buttons',
templateUrl: './buttons.component.html',
styleUrls: ['./buttons.component.scss']
})
export class ButtonsComponent {
states = ['normal', 'active', 'disabled'];
colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
constructor() { }
}

510
front/app/src/app/views/buttons/dropdowns/dropdowns.component.html
View File

@@ -1,510 +0,0 @@
<c-row>
<c-col xs="12">
<app-docs-callout href="components/dropdown" name="Dropdown"></app-docs-callout>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Single button</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>
elements:
</p>
<app-docs-example href="components/dropdown#single-button">
<c-dropdown>
<button cButton cDropdownToggle color="secondary">
Dropdown button
</button>
<ul cDropdownMenu>
<li><h6 cDropdownHeader>Header</h6></li>
<li><a routerLink="./" cDropdownItem>Action</a></li>
<li><a routerLink="./" cDropdownItem>Another action</a></li>
<li><a routerLink="./" cDropdownItem>Something else here</a></li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button [routerLink]="'/buttons'" cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
<p class="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<app-docs-example href="components/dropdown#single-button">
<c-dropdown *ngFor="let color of colors; index as i;" variant="btn-group">
<button [color]="color" cButton cDropdownToggle>
{{color}}
</button>
<ul cDropdownMenu>
<li>
<button routerLink="./" cDropdownItem>Action</button>
</li>
<li>
<button routerLink="./" cDropdownItem>Another action</button>
</li>
<li>
<button routerLink="./" cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Split button</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Similarly, create split button dropdowns with virtually the same markup as single
button dropdowns, but with the addition of boolean prop <code>split</code> for proper
spacing around the dropdown caret.
</p>
<p class="text-medium-emphasis small">
We use this extra class to reduce the horizontal <code>padding</code> on either side
of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
normal button dropdowns. Those additional changes hold the caret centered in the split
button and implement a more properly sized hit area next to the main button.
</p>
<app-docs-example href="components/dropdown#split-button">
<c-dropdown *ngFor="let color of colors; index as i;" placement="bottom-start" variant="btn-group">
<button [color]="color" cButton>
{{color}}
</button>
<button [color]="color" cButton cDropdownToggle split>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul cDropdownMenu>
<li>
<button routerLink="./" cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Sizing</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Button dropdowns work with buttons of all sizes, including default and split dropdown
buttons.
</p>
<app-docs-example href="components/dropdown#sizing">
<c-dropdown variant="btn-group">
<button cButton cDropdownToggle color="secondary" size="lg">
Large button
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
<c-dropdown variant="btn-group">
<button cButton color="secondary" size="lg">
Large split button
</button>
<button cButton cDropdownToggle color="secondary" size="lg" split>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul cDropdownMenu>
<li>
<button routerLink="./" cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
<app-docs-example href="components/dropdown#sizing">
<c-dropdown variant="btn-group">
<button cButton cDropdownToggle color="secondary" size="sm">
Small button
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
<c-dropdown variant="btn-group">
<button cButton color="secondary" size="sm">
Small split button
</button>
<button cButton cDropdownToggle color="secondary" size="sm" split>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul cDropdownMenu>
<li>
<button routerLink="./" cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>dark</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Opt into darker dropdowns to match a dark navbar or custom style by set
<code>dark</code> property. No changes are required to the dropdown items.
</p>
<app-docs-example href="components/dropdown#dark-dropdowns">
<c-dropdown>
<button cButton cDropdownToggle color="secondary">
Dropdown button
</button>
<ul cDropdownMenu dark>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
<p class="text-medium-emphasis small">And putting it to use in a navbar:</p>
<app-docs-example href="components/dropdown#dark-dropdowns">
<c-navbar class="bg-dark" colorScheme="dark" expand="lg">
<c-container [fluid]="true">
<a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
Navbar
</a>
<button [cNavbarToggler]="collapseRef"></button>
<div #collapseRef="cCollapse" [navbar]="true" cCollapse>
<c-navbar-nav class="me-auto mb-2 mb-lg-0">
<c-nav-item>
<a [active]="true" routerLink="./" cNavLink>Home</a>
</c-nav-item>
<c-nav-item>
<a routerLink="./" cNavLink>Link</a>
</c-nav-item>
<c-nav-item>
<c-dropdown variant="nav-item" [popper]="false">
<a routerLink="./" cDropdownToggle>
Dropdown
</a>
<ul cDropdownMenu dark>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</c-nav-item>
<c-nav-item>
<a cNavLink disabled>Disabled</a>
</c-nav-item>
</c-navbar-nav>
<form cForm class="d-flex">
<input aria-label="Search" cFormControl class="me-2" placeholder="Search" type="search">
<button cButton color="success" type="submit" variant="outline">Search</button>
</form>
</div>
</c-container>
</c-navbar>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Dropup</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Trigger dropdown menus above elements by adding
<code>direction=&#34;dropup&#34;</code> to the <code>&lt;c-dropdown&gt;</code>
component.
</p>
<app-docs-example href="components/dropdown#dropup">
<c-dropdown direction="dropup" variant="btn-group">
<button cButton cDropdownToggle color="secondary">
Dropup
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
<c-dropdown direction="dropup" variant="btn-group">
<button cButton color="secondary">
Split Dropup
</button>
<button [split]="true" cButton cDropdownToggle color="secondary">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Dropright</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Trigger dropdown menus at the right of the elements by adding
<code>direction=&#34;dropend&#34;</code> to the <code>&lt;c-dropdown&gt;</code>
component.
</p>
<app-docs-example href="components/dropdown#dropright">
<c-dropdown direction="dropend" variant="btn-group">
<button cButton cDropdownToggle color="secondary">
Dropend
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
<c-dropdown direction="dropend" variant="btn-group">
<button cButton color="secondary">
Split Right
</button>
<button [split]="true" cButton cDropdownToggle color="secondary">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
</c-dropdown>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Dropleft</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Trigger dropdown menus at the left of the elements by adding
<code>direction=&#34;dropstart&#34;</code> to the <code>&lt;c-dropdown&gt;</code>
component.
</p>
<app-docs-example href="components/dropdown#dropleft">
<c-button-group>
<c-dropdown direction="dropstart" variant="input-group">
<button [split]="true" cButton cDropdownToggle color="secondary">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul cDropdownMenu>
<li>
<button cDropdownItem>Action</button>
</li>
<li>
<button cDropdownItem>Another action</button>
</li>
<li>
<button cDropdownItem>Something else here</button>
</li>
<li>
<hr cDropdownDivider>
</li>
<li>
<button cDropdownItem>Separated link</button>
</li>
</ul>
<button cButton color="secondary">
Split Left
</button>
</c-dropdown>
</c-button-group>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12">
<c-card class="mb-4">
<c-card-header ngPreserveWhitespaces>
<strong>Angular Dropdown</strong> <small>Centered</small>
</c-card-header>
<c-card-body>
<p class="text-medium-emphasis small">
Trigger dropdown menus centered below the toggle by adding <code>direction="center"</code> to the <code>c-dropdown</code> component.
</p>
<app-docs-example href="components/dropdown#centered">
<c-dropdown direction="center" variant="btn-group">
<button cButton cDropdownToggle color="secondary">Centered dropdown</button>
<ul cDropdownMenu>
<li><button cDropdownItem>Action one</button></li>
<li><button cDropdownItem>Action two</button></li>
<li><button cDropdownItem>Action three</button></li>
</ul>
</c-dropdown>
<c-dropdown direction="dropup-center" class="dropup" variant="btn-group">
<button cButton cDropdownToggle color="secondary">Centered dropdup</button>
<ul cDropdownMenu>
<li><button cDropdownItem>Action one</button></li>
<li><button cDropdownItem>Action two</button></li>
<li><button cDropdownItem>Action three</button></li>
</ul>
</c-dropdown>
</app-docs-example>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/buttons/dropdowns/dropdowns.component.scss
View File

46
front/app/src/app/views/buttons/dropdowns/dropdowns.component.spec.ts
View File

@@ -1,46 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import {
ButtonGroupModule,
ButtonModule,
CardModule,
CollapseModule,
DropdownModule,
GridModule,
NavbarModule,
NavModule
} from '@coreui/angular';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../../icons/icon-subset';
import { DocsComponentsModule } from '../../../../components';
import { DropdownsComponent } from './dropdowns.component';
describe('DropdownsComponent', () => {
let component: DropdownsComponent;
let fixture: ComponentFixture<DropdownsComponent>;
let iconSetService: IconSetService;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [DropdownsComponent],
imports: [ButtonModule, DropdownModule, CollapseModule, NoopAnimationsModule, GridModule, CardModule, DocsComponentsModule, RouterTestingModule, NavModule, NavbarModule, ButtonGroupModule],
providers: [IconSetService]
})
.compileComponents();
});
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(DropdownsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
front/app/src/app/views/buttons/dropdowns/dropdowns.component.ts
View File

@@ -1,14 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdowns',
templateUrl: './dropdowns.component.html',
styleUrls: ['./dropdowns.component.scss']
})
export class DropdownsComponent {
public colors = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
constructor() { }
}

21
front/app/src/app/views/charts/charts-routing.module.ts
View File

@@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartsComponent } from './charts.component';
const routes: Routes = [
{
path: '',
component: ChartsComponent,
data: {
title: 'Charts',
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ChartsRoutingModule {}

73
front/app/src/app/views/charts/charts.component.html
View File

@@ -1,73 +0,0 @@
<c-row>
<c-col xs="12">
<app-docs-callout href="charts">
Angular wrapper component for Chart.js 3.6, the most popular charting library.
<br>
</app-docs-callout>
</c-col>
<c-col xs="12" lg="6">
<c-card class="mb-4">
<c-card-header>
Bar Chart
</c-card-header>
<c-card-body>
<c-chart type="bar" [data]="chartBarData"></c-chart>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12" lg="6">
<c-card class="mb-4">
<c-card-header>
Line Chart
</c-card-header>
<c-card-body>
<c-chart type="line" [data]="chartLineData"></c-chart>
</c-card-body>
</c-card>
</c-col>
</c-row>
<c-row>
<c-col xs="12" lg="6">
<c-card class="mb-4">
<c-card-header>
Doughnut Chart
</c-card-header>
<c-card-body>
<c-chart type="doughnut" [data]="chartDoughnutData"></c-chart>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12" lg="6">
<c-card class="mb-4">
<c-card-header>
Pie Chart
</c-card-header>
<c-card-body>
<c-chart type="pie" [data]="chartPieData"></c-chart>
</c-card-body>
</c-card>
</c-col>
</c-row>
<c-row>
<c-col xs="12" lg="6">
<c-card class="mb-4">
<c-card-header>
Polar Area Chart
</c-card-header>
<c-card-body>
<c-chart type="polarArea" [data]="chartPolarAreaData"></c-chart>
</c-card-body>
</c-card>
</c-col>
<c-col xs="12" lg="6">
<c-card class="mb-4">
<c-card-header>
Radar Chart
</c-card-header>
<c-card-body>
<c-chart type="radar" [data]="chartRadarData"></c-chart>
</c-card-body>
</c-card>
</c-col>
</c-row>

0
front/app/src/app/views/charts/charts.component.scss
View File

35
front/app/src/app/views/charts/charts.component.spec.ts
View File

@@ -1,35 +0,0 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { CardModule, GridModule } from '@coreui/angular';
import { ChartjsModule } from '@coreui/angular-chartjs';
import { IconSetService } from '@coreui/icons-angular';
import { iconSubset } from '../../icons/icon-subset';
import { DocsComponentsModule } from '../../../components';
import { ChartsComponent } from './charts.component';
describe('ChartsComponent', () => {
let component: ChartsComponent;
let fixture: ComponentFixture<ChartsComponent>;
let iconSetService: IconSetService;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ChartsComponent],
imports: [GridModule, CardModule, DocsComponentsModule, ChartjsModule],
providers: [IconSetService]
}).compileComponents();
}));
beforeEach(() => {
iconSetService = TestBed.inject(IconSetService);
iconSetService.icons = { ...iconSubset };
fixture = TestBed.createComponent(ChartsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

136
front/app/src/app/views/charts/charts.component.ts
View File

@@ -1,136 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-charts',
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.scss']
})
export class ChartsComponent {
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
chartBarData = {
labels: [...this.months].slice(0, 7),
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 17, 42, 79]
}
]
};
// chartBarOptions = {
// maintainAspectRatio: false,
// };
chartLineData = {
labels: [...this.months].slice(0, 7),
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(220, 220, 220, 0.2)',
borderColor: 'rgba(220, 220, 220, 1)',
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
pointBorderColor: '#fff',
data: [this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(151, 187, 205, 0.2)',
borderColor: 'rgba(151, 187, 205, 1)',
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
pointBorderColor: '#fff',
data: [this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData]
}
]
};
chartLineOptions = {
maintainAspectRatio: false,
};
chartDoughnutData = {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'Angular'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10]
}
]
};
// chartDoughnutOptions = {
// aspectRatio: 1,
// responsive: true,
// maintainAspectRatio: false,
// radius: '100%'
// };
chartPieData = {
labels: ['Red', 'Green', 'Yellow'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}
]
};
// chartPieOptions = {
// aspectRatio: 1,
// responsive: true,
// maintainAspectRatio: false,
// radius: '100%'
// };
chartPolarAreaData = {
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [
{
data: [11, 16, 7, 3, 14],
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
}
]
};
chartRadarData = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: '2020',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: '2021',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData]
}
]
};
// chartRadarOptions = {
// aspectRatio: 1.5,
// responsive: true,
// maintainAspectRatio: false,
// };
get randomData() {
return Math.round(Math.random() * 100);
}
}

Some files were not shown because too many files have changed in this diff Show More