Refactor HTML and configuration files for improved structure and consistency
- Updated videos.html to enhance readability and maintainability. - Refactored webpack.config.js for better organization and clarity. - Cleaned up TypeScript configuration files (tsconfig.app.json, tsconfig.json, tsconfig.spec.json) for consistency in formatting. - Adjusted docker-compose.yaml for improved formatting and readability.
This commit is contained in:
Marek Lesko
@@ -1,20 +1,20 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AppSideLoginComponent } from './side-login/side-login.component';
|
||||
import { AppSideRegisterComponent } from './side-register/side-register.component';
|
||||
|
||||
export const AuthenticationRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'login',
|
||||
component: AppSideLoginComponent,
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
component: AppSideRegisterComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AppSideLoginComponent } from './side-login/side-login.component';
|
||||
import { AppSideRegisterComponent } from './side-register/side-register.component';
|
||||
|
||||
export const AuthenticationRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'login',
|
||||
component: AppSideLoginComponent,
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
component: AppSideRegisterComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,64 +1,64 @@
|
||||
<div class="blank-layout-container justify-content-center align-items-center bg-light">
|
||||
<div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<a [routerLink]="['/dashboard']">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
|
||||
<span>
|
||||
Sign in with Google
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100 d-flex align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Username</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" />
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary">Remember this Device</mat-checkbox>
|
||||
<a [routerLink]="['/']" class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14">Forgot Password
|
||||
?</a>
|
||||
</div>
|
||||
<a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
|
||||
Sign In
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24">New to Modernize?
|
||||
<a [routerLink]="['/authentication/register']" class="text-decoration-none text-primary f-w-500 f-s-14">
|
||||
Create an account</a>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center align-items-center bg-light">
|
||||
<div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<a [routerLink]="['/dashboard']">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
|
||||
<span>
|
||||
Sign in with Google
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100 d-flex align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign in with</div>
|
||||
|
||||
<form class="m-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Username</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" />
|
||||
</mat-form-field>
|
||||
|
||||
<div class="d-flex align-items-center m-b-12">
|
||||
<mat-checkbox color="primary">Remember this Device</mat-checkbox>
|
||||
<a [routerLink]="['/']" class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14">Forgot Password
|
||||
?</a>
|
||||
</div>
|
||||
<a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
|
||||
Sign In
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24">New to Modernize?
|
||||
<a [routerLink]="['/authentication/register']" class="text-decoration-none text-primary f-w-500 f-s-14">
|
||||
Create an account</a>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,31 +1,31 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormGroup, FormControl, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-login',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
|
||||
templateUrl: './side-login.component.html',
|
||||
})
|
||||
export class AppSideLoginComponent {
|
||||
|
||||
constructor( private router: Router) {}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { FormGroup, FormControl, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-login',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
|
||||
templateUrl: './side-login.component.html',
|
||||
})
|
||||
export class AppSideLoginComponent {
|
||||
|
||||
constructor( private router: Router) {}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
<div class="blank-layout-container justify-content-center align-items-center bg-light">
|
||||
<div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<a [routerLink]="['/dashboard']">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100 d-flex align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign up with</div>
|
||||
|
||||
<form class="m-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Email Adddress</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" />
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" />
|
||||
</mat-form-field>
|
||||
|
||||
<a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
|
||||
Sign Up
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24">Already have an Account?
|
||||
|
||||
<a [routerLink]="['/authentication/login']" class="text-decoration-none text-primary f-w-500 f-s-14">
|
||||
Sign In</a>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blank-layout-container justify-content-center align-items-center bg-light">
|
||||
<div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
|
||||
<div class="col-lg-4 d-flex align-items-center">
|
||||
<mat-card class="cardWithShadow boxed-auth">
|
||||
<mat-card-content class="p-32">
|
||||
<div class="text-center">
|
||||
<a [routerLink]="['/dashboard']">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-24 custom-row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
|
||||
Sign in with Google
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<button mat-stroked-button class="w-100 d-flex align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
|
||||
Sign in with FB
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="or-border m-t-30">or sign up with</div>
|
||||
|
||||
<form class="m-t-30">
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput />
|
||||
</mat-form-field>
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Email Adddress</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" />
|
||||
</mat-form-field>
|
||||
<!-- password -->
|
||||
<mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" />
|
||||
</mat-form-field>
|
||||
|
||||
<a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
|
||||
Sign Up
|
||||
</a>
|
||||
<!-- input -->
|
||||
</form>
|
||||
<span class="d-block f-w-500 text-center m-t-24">Already have an Account?
|
||||
|
||||
<a [routerLink]="['/authentication/login']" class="text-decoration-none text-primary f-w-500 f-s-14">
|
||||
Sign In</a>
|
||||
</span>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +1,33 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from 'src/app/services/core.service';
|
||||
import { FormGroup, FormControl, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-register',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
|
||||
templateUrl: './side-register.component.html',
|
||||
})
|
||||
export class AppSideRegisterComponent {
|
||||
options = this.settings.getOptions();
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreService } from 'src/app/services/core.service';
|
||||
import { FormGroup, FormControl, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-register',
|
||||
imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
|
||||
templateUrl: './side-register.component.html',
|
||||
})
|
||||
export class AppSideRegisterComponent {
|
||||
options = this.settings.getOptions();
|
||||
|
||||
constructor(private settings: CoreService, private router: Router) {}
|
||||
|
||||
form = new FormGroup({
|
||||
uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
email: new FormControl('', [Validators.required]),
|
||||
password: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
get f() {
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
submit() {
|
||||
// console.log(this.form.value);
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
|
||||
// pages
|
||||
import { AppIconsComponent } from './icons/icons.component';
|
||||
import { AppSamplePageComponent } from './sample-page/sample-page.component';
|
||||
|
||||
export const ExtraRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'icons',
|
||||
component: AppIconsComponent,
|
||||
},
|
||||
{
|
||||
path: 'sample-page',
|
||||
component: AppSamplePageComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
|
||||
// pages
|
||||
import { AppIconsComponent } from './icons/icons.component';
|
||||
import { AppSamplePageComponent } from './sample-page/sample-page.component';
|
||||
|
||||
export const ExtraRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'icons',
|
||||
component: AppIconsComponent,
|
||||
},
|
||||
{
|
||||
path: 'sample-page',
|
||||
component: AppSamplePageComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<!-- ============================================================== -->
|
||||
<!-- Simple four boxes Row -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<mat-card-title>Icons</mat-card-title>
|
||||
<mat-card-subtitle class="m-b-24">Tabler Icons</mat-card-subtitle>
|
||||
<iframe src="https://tabler.io/icons" title="Tabler Icons" width="100%" height="630px"
|
||||
allowfullscreen frameBorder="0">
|
||||
</iframe>
|
||||
</mat-card-content>
|
||||
<!-- ============================================================== -->
|
||||
<!-- Simple four boxes Row -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<mat-card-title>Icons</mat-card-title>
|
||||
<mat-card-subtitle class="m-b-24">Tabler Icons</mat-card-subtitle>
|
||||
<iframe src="https://tabler.io/icons" title="Tabler Icons" width="100%" height="630px"
|
||||
allowfullscreen frameBorder="0">
|
||||
</iframe>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-icons',
|
||||
imports: [MaterialModule],
|
||||
templateUrl: './icons.component.html',
|
||||
})
|
||||
export class AppIconsComponent { }
|
||||
import { Component } from '@angular/core';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-icons',
|
||||
imports: [MaterialModule],
|
||||
templateUrl: './icons.component.html',
|
||||
})
|
||||
export class AppIconsComponent { }
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<!-- ============================================================== -->
|
||||
<!-- Simple four boxes Row -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<mat-card-title>Sample Page</mat-card-title>
|
||||
<mat-card-subtitle>This is test page</mat-card-subtitle>
|
||||
</mat-card-content>
|
||||
<!-- ============================================================== -->
|
||||
<!-- Simple four boxes Row -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<mat-card-title>Sample Page</mat-card-title>
|
||||
<mat-card-subtitle>This is test page</mat-card-subtitle>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sample-page',
|
||||
imports: [MaterialModule],
|
||||
templateUrl: './sample-page.component.html',
|
||||
})
|
||||
|
||||
export class AppSamplePageComponent { }
|
||||
import { Component } from '@angular/core';
|
||||
import { MaterialModule } from '../../../material.module';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sample-page',
|
||||
imports: [MaterialModule],
|
||||
templateUrl: './sample-page.component.html',
|
||||
})
|
||||
|
||||
export class AppSamplePageComponent { }
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { StarterComponent } from './starter/starter.component';
|
||||
|
||||
export const PagesRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: StarterComponent,
|
||||
data: {
|
||||
title: 'Starter Page',
|
||||
urls: [
|
||||
{ title: 'Dashboard', url: '/dashboards/dashboard1' },
|
||||
{ title: 'Starter Page' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
import { Routes } from '@angular/router';
|
||||
import { StarterComponent } from './starter/starter.component';
|
||||
|
||||
export const PagesRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: StarterComponent,
|
||||
data: {
|
||||
title: 'Starter Page',
|
||||
urls: [
|
||||
{ title: 'Dashboard', url: '/dashboards/dashboard1' },
|
||||
{ title: 'Starter Page' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<app-sales-overview></app-sales-overview>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<app-yearly-breakup></app-yearly-breakup>
|
||||
<app-monthly-earnings></app-monthly-earnings>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<app-recent-transactions></app-recent-transactions>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<app-product-performance></app-product-performance>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<app-blog-card></app-blog-card>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<app-sales-overview></app-sales-overview>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<app-yearly-breakup></app-yearly-breakup>
|
||||
<app-monthly-earnings></app-monthly-earnings>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<app-recent-transactions></app-recent-transactions>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<app-product-performance></app-product-performance>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<app-blog-card></app-blog-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
import { AppSalesOverviewComponent } from 'src/app/components/sales-overview/sales-overview.component';
|
||||
import { AppYearlyBreakupComponent } from 'src/app/components/yearly-breakup/yearly-breakup.component';
|
||||
import { AppMonthlyEarningsComponent } from 'src/app/components/monthly-earnings/monthly-earnings.component';
|
||||
import { AppRecentTransactionsComponent } from 'src/app/components/recent-transactions/recent-transactions.component';
|
||||
import { AppProductPerformanceComponent } from 'src/app/components/product-performance/product-performance.component';
|
||||
import { AppBlogCardsComponent } from 'src/app/components/blog-card/blog-card.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-starter',
|
||||
imports: [
|
||||
MaterialModule,
|
||||
AppSalesOverviewComponent,
|
||||
AppYearlyBreakupComponent,
|
||||
AppMonthlyEarningsComponent,
|
||||
AppRecentTransactionsComponent,
|
||||
AppProductPerformanceComponent,
|
||||
AppBlogCardsComponent
|
||||
],
|
||||
templateUrl: './starter.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { MaterialModule } from '../../material.module';
|
||||
import { AppSalesOverviewComponent } from 'src/app/components/sales-overview/sales-overview.component';
|
||||
import { AppYearlyBreakupComponent } from 'src/app/components/yearly-breakup/yearly-breakup.component';
|
||||
import { AppMonthlyEarningsComponent } from 'src/app/components/monthly-earnings/monthly-earnings.component';
|
||||
import { AppRecentTransactionsComponent } from 'src/app/components/recent-transactions/recent-transactions.component';
|
||||
import { AppProductPerformanceComponent } from 'src/app/components/product-performance/product-performance.component';
|
||||
import { AppBlogCardsComponent } from 'src/app/components/blog-card/blog-card.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-starter',
|
||||
imports: [
|
||||
MaterialModule,
|
||||
AppSalesOverviewComponent,
|
||||
AppYearlyBreakupComponent,
|
||||
AppMonthlyEarningsComponent,
|
||||
AppRecentTransactionsComponent,
|
||||
AppProductPerformanceComponent,
|
||||
AppBlogCardsComponent
|
||||
],
|
||||
templateUrl: './starter.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class StarterComponent { }
|
||||
@@ -1,51 +1,51 @@
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Badges</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<div matBadge="4" matBadgeOverlap="false" class="d-inline">Text with a badge</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<div matBadge="1" matBadgeSize="small" class="d-inline">Text with small badge</div><br /><br />
|
||||
<div matBadge="1" matBadgeSize="large" class="d-inline">Text with large badge</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<p class="f-w-500 text-muted">
|
||||
Button with a badge on the left
|
||||
<button mat-flat-button color="primary" matBadge="8" matBadgePosition="before" matBadgeColor="accent">
|
||||
Action
|
||||
</button>
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<p class="f-w-500 text-muted">
|
||||
Icon with a badge
|
||||
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<p>
|
||||
Button toggles badge visibility
|
||||
<button mat-flat-button color="primary" matBadge="7" [matBadgeHidden]="hidden"
|
||||
(click)="toggleBadgeVisibility()">
|
||||
Hide
|
||||
</button>
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Badges</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<div matBadge="4" matBadgeOverlap="false" class="d-inline">Text with a badge</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<div matBadge="1" matBadgeSize="small" class="d-inline">Text with small badge</div><br /><br />
|
||||
<div matBadge="1" matBadgeSize="large" class="d-inline">Text with large badge</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<p class="f-w-500 text-muted">
|
||||
Button with a badge on the left
|
||||
<button mat-flat-button color="primary" matBadge="8" matBadgePosition="before" matBadgeColor="accent">
|
||||
Action
|
||||
</button>
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<p class="f-w-500 text-muted">
|
||||
Icon with a badge
|
||||
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-content>
|
||||
<p>
|
||||
Button toggles badge visibility
|
||||
<button mat-flat-button color="primary" matBadge="7" [matBadgeHidden]="hidden"
|
||||
(click)="toggleBadgeVisibility()">
|
||||
Hide
|
||||
</button>
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,22 +1,22 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
|
||||
@Component({
|
||||
selector: 'app-badge',
|
||||
templateUrl: './badge.component.html',
|
||||
imports: [MatBadgeModule, MatButtonModule, MatIconModule, MatCardModule],
|
||||
})
|
||||
export class AppBadgeComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
hidden = false;
|
||||
|
||||
toggleBadgeVisibility() {
|
||||
this.hidden = !this.hidden;
|
||||
}
|
||||
}
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
|
||||
@Component({
|
||||
selector: 'app-badge',
|
||||
templateUrl: './badge.component.html',
|
||||
imports: [MatBadgeModule, MatButtonModule, MatIconModule, MatCardModule],
|
||||
})
|
||||
export class AppBadgeComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
hidden = false;
|
||||
|
||||
toggleBadgeVisibility() {
|
||||
this.hidden = !this.hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,172 +1,172 @@
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Chips</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- basic -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-listbox aria-label="Fish selection">
|
||||
<mat-chip-option class="f-s-14" color="primary">One fish</mat-chip-option>
|
||||
<mat-chip-option class="f-s-14">Two fish</mat-chip-option>
|
||||
<mat-chip-option class="f-s-14" color="accent" selected>Accent fish</mat-chip-option>
|
||||
<mat-chip-option class="f-s-14" color="warn">Warn fish</mat-chip-option>
|
||||
</mat-chip-listbox>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- avatar -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Avatar</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-set aria-label="Dog selection">
|
||||
<mat-chip class="f-s-14">
|
||||
<img matChipAvatar src="/assets/images/profile/user-1.jpg" alt="Photo of a Shiba Inu" />
|
||||
Anderson
|
||||
</mat-chip>
|
||||
<mat-chip class="f-s-14" color="primary">
|
||||
<img matChipAvatar src="/assets/images/profile/user-2.jpg" alt="Photo of a Shiba Inu" />
|
||||
Monty
|
||||
</mat-chip>
|
||||
<mat-chip class="f-s-14" color="accent">
|
||||
<img matChipAvatar src="/assets/images/profile/user-3.jpg" alt="Photo of a Shiba Inu" />
|
||||
Mathew
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Drag n Drop -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Drag n Drop</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-set class="example-chip" cdkDropList cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
@for (vegetable of vegetables(); track vegetable.name) {
|
||||
<mat-chip class="example-box" cdkDrag>{{
|
||||
vegetable.name
|
||||
}}</mat-chip>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Stacked -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Stacked </mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-label="Color selection">
|
||||
@for(chip of availableColors; track chip.color) {
|
||||
<mat-chip-option selected [color]="chip.color">
|
||||
{{ chip.name }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-listbox>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Input -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Input</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-label>Favorite Fruits</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Enter fruits">
|
||||
@for(fruit of fruits; track fruit.name) {
|
||||
<mat-chip-row (removed)="remove(fruit)" [editable]="true" (edited)="edit(fruit, $event)"
|
||||
[aria-description]="'press enter to edit ' + fruit.name" class="f-s-14">
|
||||
{{ fruit.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
|
||||
<input placeholder="New fruit..." [matChipInputFor]="chipGrid"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
|
||||
(matChipInputTokenEnd)="add($event)" />
|
||||
</mat-chip-grid>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Form Control -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Form Control</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="d-flex gap-8">
|
||||
<button mat-stroked-button color="primary" (click)="formControl.disable()">
|
||||
Disable form control
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="formControl.enable()">
|
||||
Enable form control
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field appearance="outline" class="w-100 m-t-20">
|
||||
<mat-label>Video keywords</mat-label>
|
||||
<mat-chip-grid #formChip aria-label="Enter keywords" [formControl]="formControl">
|
||||
@for (keyword of keywords(); track keyword) {
|
||||
<mat-chip-row (removed)="removeKeyword(keyword)">
|
||||
{{ keyword }}
|
||||
<button matChipRemove aria-label="'remove ' + keyword">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input placeholder="New keyword..." [matChipInputFor]="formChip"
|
||||
(matChipInputTokenEnd)="addForm($event)" />
|
||||
</mat-form-field>
|
||||
|
||||
<p>
|
||||
<span class="f-w-600">The following keywords are entered:</span>
|
||||
{{ formControl.value }}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Chips</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- basic -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-listbox aria-label="Fish selection">
|
||||
<mat-chip-option class="f-s-14" color="primary">One fish</mat-chip-option>
|
||||
<mat-chip-option class="f-s-14">Two fish</mat-chip-option>
|
||||
<mat-chip-option class="f-s-14" color="accent" selected>Accent fish</mat-chip-option>
|
||||
<mat-chip-option class="f-s-14" color="warn">Warn fish</mat-chip-option>
|
||||
</mat-chip-listbox>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- avatar -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Avatar</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-set aria-label="Dog selection">
|
||||
<mat-chip class="f-s-14">
|
||||
<img matChipAvatar src="/assets/images/profile/user-1.jpg" alt="Photo of a Shiba Inu" />
|
||||
Anderson
|
||||
</mat-chip>
|
||||
<mat-chip class="f-s-14" color="primary">
|
||||
<img matChipAvatar src="/assets/images/profile/user-2.jpg" alt="Photo of a Shiba Inu" />
|
||||
Monty
|
||||
</mat-chip>
|
||||
<mat-chip class="f-s-14" color="accent">
|
||||
<img matChipAvatar src="/assets/images/profile/user-3.jpg" alt="Photo of a Shiba Inu" />
|
||||
Mathew
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Drag n Drop -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Drag n Drop</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-set class="example-chip" cdkDropList cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)">
|
||||
@for (vegetable of vegetables(); track vegetable.name) {
|
||||
<mat-chip class="example-box" cdkDrag>{{
|
||||
vegetable.name
|
||||
}}</mat-chip>
|
||||
}
|
||||
</mat-chip-set>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Stacked -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Stacked </mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-label="Color selection">
|
||||
@for(chip of availableColors; track chip.color) {
|
||||
<mat-chip-option selected [color]="chip.color">
|
||||
{{ chip.name }}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-listbox>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Input -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Input</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-label>Favorite Fruits</mat-label>
|
||||
<mat-chip-grid #chipGrid aria-label="Enter fruits">
|
||||
@for(fruit of fruits; track fruit.name) {
|
||||
<mat-chip-row (removed)="remove(fruit)" [editable]="true" (edited)="edit(fruit, $event)"
|
||||
[aria-description]="'press enter to edit ' + fruit.name" class="f-s-14">
|
||||
{{ fruit.name }}
|
||||
<button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
|
||||
<input placeholder="New fruit..." [matChipInputFor]="chipGrid"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
|
||||
(matChipInputTokenEnd)="add($event)" />
|
||||
</mat-chip-grid>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
<!-- Form Control -->
|
||||
<!-- ------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Form Control</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="d-flex gap-8">
|
||||
<button mat-stroked-button color="primary" (click)="formControl.disable()">
|
||||
Disable form control
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="formControl.enable()">
|
||||
Enable form control
|
||||
</button>
|
||||
</div>
|
||||
<mat-form-field appearance="outline" class="w-100 m-t-20">
|
||||
<mat-label>Video keywords</mat-label>
|
||||
<mat-chip-grid #formChip aria-label="Enter keywords" [formControl]="formControl">
|
||||
@for (keyword of keywords(); track keyword) {
|
||||
<mat-chip-row (removed)="removeKeyword(keyword)">
|
||||
{{ keyword }}
|
||||
<button matChipRemove aria-label="'remove ' + keyword">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
}
|
||||
</mat-chip-grid>
|
||||
<input placeholder="New keyword..." [matChipInputFor]="formChip"
|
||||
(matChipInputTokenEnd)="addForm($event)" />
|
||||
</mat-form-field>
|
||||
|
||||
<p>
|
||||
<span class="f-w-600">The following keywords are entered:</span>
|
||||
{{ formControl.value }}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,7 +1,7 @@
|
||||
.example-box.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.example-chip .cdk-drop-list-dragging {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
.example-box.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.example-chip .cdk-drop-list-dragging {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
@@ -1,161 +1,161 @@
|
||||
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
||||
import { ThemePalette } from '@angular/material/core';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
CdkDrag,
|
||||
CdkDragDrop,
|
||||
CdkDropList,
|
||||
moveItemInArray,
|
||||
} from '@angular/cdk/drag-drop';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import {
|
||||
MatChipEditedEvent,
|
||||
MatChipInputEvent,
|
||||
MatChipsModule,
|
||||
} from '@angular/material/chips';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
export interface ChipColor {
|
||||
name: string;
|
||||
color: ThemePalette;
|
||||
}
|
||||
|
||||
export interface Fruit {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Vegetable {
|
||||
name: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chips',
|
||||
templateUrl: './chips.component.html',
|
||||
styleUrls: ['./chips.component.scss'],
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatChipsModule,
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
CdkDropList,
|
||||
CdkDrag,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AppChipsComponent {
|
||||
// drag n drop
|
||||
readonly vegetables = signal<Vegetable[]>([
|
||||
{ name: 'apple' },
|
||||
{ name: 'banana' },
|
||||
{ name: 'strawberry' },
|
||||
{ name: 'orange' },
|
||||
{ name: 'kiwi' },
|
||||
{ name: 'cherry' },
|
||||
]);
|
||||
|
||||
drop(event: CdkDragDrop<Vegetable[]>) {
|
||||
this.vegetables.update((vegetables) => {
|
||||
moveItemInArray(vegetables, event.previousIndex, event.currentIndex);
|
||||
return [...vegetables];
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// Stacked
|
||||
//
|
||||
availableColors: ChipColor[] = [
|
||||
{ name: 'Primary', color: 'primary' },
|
||||
{ name: 'Accent', color: 'accent' },
|
||||
{ name: 'Warn', color: 'warn' },
|
||||
];
|
||||
|
||||
//
|
||||
// chips with input
|
||||
//
|
||||
addOnBlur = true;
|
||||
readonly separatorKeysCodes = [ENTER, COMMA] as const;
|
||||
fruits: Fruit[] = [{ name: 'Lemon' }, { name: 'Lime' }, { name: 'Apple' }];
|
||||
|
||||
add(event: MatChipInputEvent): void {
|
||||
const value = (event.value || '').trim();
|
||||
|
||||
// Add our fruit
|
||||
if (value) {
|
||||
this.fruits.push({ name: value });
|
||||
}
|
||||
|
||||
// Clear the input value
|
||||
event.chipInput!.clear();
|
||||
}
|
||||
|
||||
remove(fruit: Fruit): void {
|
||||
const index = this.fruits.indexOf(fruit);
|
||||
|
||||
if (index >= 0) {
|
||||
this.fruits.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
edit(fruit: Fruit, event: MatChipEditedEvent) {
|
||||
const value = event.value.trim();
|
||||
|
||||
// Remove fruit if it no longer has a name
|
||||
if (!value) {
|
||||
this.remove(fruit);
|
||||
return;
|
||||
}
|
||||
|
||||
// Edit existing fruit
|
||||
const index = this.fruits.indexOf(fruit);
|
||||
if (index >= 0) {
|
||||
this.fruits[index].name = value;
|
||||
}
|
||||
}
|
||||
|
||||
// form control
|
||||
|
||||
readonly keywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
|
||||
readonly formControl = new FormControl(['angular']);
|
||||
|
||||
announcer = inject(LiveAnnouncer);
|
||||
|
||||
removeKeyword(keyword: string) {
|
||||
this.keywords.update(keywords => {
|
||||
const index = keywords.indexOf(keyword);
|
||||
if (index < 0) {
|
||||
return keywords;
|
||||
}
|
||||
|
||||
keywords.splice(index, 1);
|
||||
this.announcer.announce(`removed ${keyword}`);
|
||||
return [...keywords];
|
||||
});
|
||||
}
|
||||
|
||||
addForm(event: MatChipInputEvent): void {
|
||||
const value = (event.value || '').trim();
|
||||
|
||||
// Add our keyword
|
||||
if (value) {
|
||||
this.keywords.update(keywords => [...keywords, value]);
|
||||
}
|
||||
|
||||
// Clear the input value
|
||||
event.chipInput!.clear();
|
||||
}
|
||||
}
|
||||
function isDragDrop(object: any): object is CdkDragDrop<string[]> {
|
||||
return 'previousIndex' in object;
|
||||
}
|
||||
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
||||
import { ThemePalette } from '@angular/material/core';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
CdkDrag,
|
||||
CdkDragDrop,
|
||||
CdkDropList,
|
||||
moveItemInArray,
|
||||
} from '@angular/cdk/drag-drop';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import {
|
||||
MatChipEditedEvent,
|
||||
MatChipInputEvent,
|
||||
MatChipsModule,
|
||||
} from '@angular/material/chips';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
export interface ChipColor {
|
||||
name: string;
|
||||
color: ThemePalette;
|
||||
}
|
||||
|
||||
export interface Fruit {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Vegetable {
|
||||
name: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chips',
|
||||
templateUrl: './chips.component.html',
|
||||
styleUrls: ['./chips.component.scss'],
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatChipsModule,
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
CdkDropList,
|
||||
CdkDrag,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule
|
||||
],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AppChipsComponent {
|
||||
// drag n drop
|
||||
readonly vegetables = signal<Vegetable[]>([
|
||||
{ name: 'apple' },
|
||||
{ name: 'banana' },
|
||||
{ name: 'strawberry' },
|
||||
{ name: 'orange' },
|
||||
{ name: 'kiwi' },
|
||||
{ name: 'cherry' },
|
||||
]);
|
||||
|
||||
drop(event: CdkDragDrop<Vegetable[]>) {
|
||||
this.vegetables.update((vegetables) => {
|
||||
moveItemInArray(vegetables, event.previousIndex, event.currentIndex);
|
||||
return [...vegetables];
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// Stacked
|
||||
//
|
||||
availableColors: ChipColor[] = [
|
||||
{ name: 'Primary', color: 'primary' },
|
||||
{ name: 'Accent', color: 'accent' },
|
||||
{ name: 'Warn', color: 'warn' },
|
||||
];
|
||||
|
||||
//
|
||||
// chips with input
|
||||
//
|
||||
addOnBlur = true;
|
||||
readonly separatorKeysCodes = [ENTER, COMMA] as const;
|
||||
fruits: Fruit[] = [{ name: 'Lemon' }, { name: 'Lime' }, { name: 'Apple' }];
|
||||
|
||||
add(event: MatChipInputEvent): void {
|
||||
const value = (event.value || '').trim();
|
||||
|
||||
// Add our fruit
|
||||
if (value) {
|
||||
this.fruits.push({ name: value });
|
||||
}
|
||||
|
||||
// Clear the input value
|
||||
event.chipInput!.clear();
|
||||
}
|
||||
|
||||
remove(fruit: Fruit): void {
|
||||
const index = this.fruits.indexOf(fruit);
|
||||
|
||||
if (index >= 0) {
|
||||
this.fruits.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
edit(fruit: Fruit, event: MatChipEditedEvent) {
|
||||
const value = event.value.trim();
|
||||
|
||||
// Remove fruit if it no longer has a name
|
||||
if (!value) {
|
||||
this.remove(fruit);
|
||||
return;
|
||||
}
|
||||
|
||||
// Edit existing fruit
|
||||
const index = this.fruits.indexOf(fruit);
|
||||
if (index >= 0) {
|
||||
this.fruits[index].name = value;
|
||||
}
|
||||
}
|
||||
|
||||
// form control
|
||||
|
||||
readonly keywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
|
||||
readonly formControl = new FormControl(['angular']);
|
||||
|
||||
announcer = inject(LiveAnnouncer);
|
||||
|
||||
removeKeyword(keyword: string) {
|
||||
this.keywords.update(keywords => {
|
||||
const index = keywords.indexOf(keyword);
|
||||
if (index < 0) {
|
||||
return keywords;
|
||||
}
|
||||
|
||||
keywords.splice(index, 1);
|
||||
this.announcer.announce(`removed ${keyword}`);
|
||||
return [...keywords];
|
||||
});
|
||||
}
|
||||
|
||||
addForm(event: MatChipInputEvent): void {
|
||||
const value = (event.value || '').trim();
|
||||
|
||||
// Add our keyword
|
||||
if (value) {
|
||||
this.keywords.update(keywords => [...keywords, value]);
|
||||
}
|
||||
|
||||
// Clear the input value
|
||||
event.chipInput!.clear();
|
||||
}
|
||||
}
|
||||
function isDragDrop(object: any): object is CdkDragDrop<string[]> {
|
||||
return 'previousIndex' in object;
|
||||
}
|
||||
|
||||
@@ -1,73 +1,73 @@
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Form</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Your Name</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput placeholder="your name " />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Country</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select [(value)]="selectedCountry">
|
||||
@for(option of country; track option.value) {
|
||||
<mat-option [value]="option.value">{{
|
||||
option.viewValue
|
||||
}}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Email</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" placeholder="your email" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<mat-label class="f-w-600 m-b-8 d-block">State</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select [(value)]="selectedState">
|
||||
@for(option of state; track option.value) {
|
||||
<mat-option [value]="option.value">{{
|
||||
option.viewValue
|
||||
}}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" placeholder="your password" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<mat-label class="f-w-600 m-b-8 d-block">City</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select [(value)]="selectedCity">
|
||||
@for(option of city; track option.value) {
|
||||
<mat-option [value]="option.value">{{
|
||||
option.viewValue
|
||||
}}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-12">
|
||||
<button mat-flat-button color="primary" class="m-r-8">Submit</button>
|
||||
<button mat-stroked-button color="warn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Form</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Your Name</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput placeholder="your name " />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Country</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select [(value)]="selectedCountry">
|
||||
@for(option of country; track option.value) {
|
||||
<mat-option [value]="option.value">{{
|
||||
option.viewValue
|
||||
}}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Email</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="email" placeholder="your email" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<mat-label class="f-w-600 m-b-8 d-block">State</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select [(value)]="selectedState">
|
||||
@for(option of state; track option.value) {
|
||||
<mat-option [value]="option.value">{{
|
||||
option.viewValue
|
||||
}}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<!-- input -->
|
||||
<mat-label class="f-w-600 m-b-8 d-block">Password</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100" color="primary">
|
||||
<input matInput type="password" placeholder="your password" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<mat-label class="f-w-600 m-b-8 d-block">City</mat-label>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-select [(value)]="selectedCity">
|
||||
@for(option of city; track option.value) {
|
||||
<mat-option [value]="option.value">{{
|
||||
option.viewValue
|
||||
}}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-12">
|
||||
<button mat-flat-button color="primary" class="m-r-8">Submit</button>
|
||||
<button mat-stroked-button color="warn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,58 +1,58 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
|
||||
interface Food {
|
||||
value: string;
|
||||
viewValue: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-forms',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatRadioModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatInputModule,
|
||||
MatCheckboxModule,
|
||||
],
|
||||
templateUrl: './forms.component.html',
|
||||
})
|
||||
export class AppFormsComponent {
|
||||
country: Food[] = [
|
||||
{ value: 'steak-0', viewValue: 'USA' },
|
||||
{ value: 'pizza-1', viewValue: 'India' },
|
||||
{ value: 'tacos-2', viewValue: 'France' },
|
||||
{ value: 'tacos-3', viewValue: 'UK' },
|
||||
];
|
||||
|
||||
selectedCountry = this.country[2].value;
|
||||
|
||||
city: Food[] = [
|
||||
{ value: 'steak-0', viewValue: 'Mexico' },
|
||||
{ value: 'pizza-1', viewValue: 'Mumbai' },
|
||||
{ value: 'tacos-2', viewValue: 'Tokyo' },
|
||||
{ value: 'tacos-3', viewValue: 'New York' },
|
||||
];
|
||||
|
||||
selectedCity = this.city[1].value;
|
||||
|
||||
state: Food[] = [
|
||||
{ value: 'steak-0', viewValue: 'Cuba' },
|
||||
{ value: 'pizza-1', viewValue: 'Djibouti' },
|
||||
{ value: 'tacos-2', viewValue: 'Bulgaria' },
|
||||
{ value: 'tacos-3', viewValue: 'Cabo Verde' },
|
||||
];
|
||||
|
||||
selectedState = this.state[3].value;
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
|
||||
interface Food {
|
||||
value: string;
|
||||
viewValue: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-forms',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatRadioModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatInputModule,
|
||||
MatCheckboxModule,
|
||||
],
|
||||
templateUrl: './forms.component.html',
|
||||
})
|
||||
export class AppFormsComponent {
|
||||
country: Food[] = [
|
||||
{ value: 'steak-0', viewValue: 'USA' },
|
||||
{ value: 'pizza-1', viewValue: 'India' },
|
||||
{ value: 'tacos-2', viewValue: 'France' },
|
||||
{ value: 'tacos-3', viewValue: 'UK' },
|
||||
];
|
||||
|
||||
selectedCountry = this.country[2].value;
|
||||
|
||||
city: Food[] = [
|
||||
{ value: 'steak-0', viewValue: 'Mexico' },
|
||||
{ value: 'pizza-1', viewValue: 'Mumbai' },
|
||||
{ value: 'tacos-2', viewValue: 'Tokyo' },
|
||||
{ value: 'tacos-3', viewValue: 'New York' },
|
||||
];
|
||||
|
||||
selectedCity = this.city[1].value;
|
||||
|
||||
state: Food[] = [
|
||||
{ value: 'steak-0', viewValue: 'Cuba' },
|
||||
{ value: 'pizza-1', viewValue: 'Djibouti' },
|
||||
{ value: 'tacos-2', viewValue: 'Bulgaria' },
|
||||
{ value: 'tacos-3', viewValue: 'Cabo Verde' },
|
||||
];
|
||||
|
||||
selectedState = this.state[3].value;
|
||||
}
|
||||
|
||||
@@ -1,197 +1,197 @@
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Lists</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- basic -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list role="list">
|
||||
<mat-list-item role="listitem">Item 1</mat-list-item>
|
||||
<mat-list-item role="listitem">Item 2</mat-list-item>
|
||||
<mat-list-item role="listitem">Item 3</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- two line -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Two Line</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- two line -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Three Line</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line</span>
|
||||
<span matListItemLine>Third line</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line. This line will truncate.</span>
|
||||
<span>Third line</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- two line -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Three Line with Text wrapping</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list style="max-width: 500px">
|
||||
<mat-list-item lines="3">
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span>Secondary line that will wrap because the list lines is
|
||||
explicitly set to 3 lines. Text inside of a `matListItemTitle`
|
||||
or `matListItemLine` will never wrap.
|
||||
</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item lines="3">
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span>Secondary line that will wrap because the list lines is
|
||||
explicitly set to 3 lines. Text inside of a `matListItemTitle`
|
||||
or `matListItemLine` will never wrap.
|
||||
</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- List with Selection -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>List with Selection</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-selection-list #shoes>
|
||||
@for(shoe of typesOfShoes; track shoe) {
|
||||
<mat-list-option>
|
||||
{{ shoe }}
|
||||
</mat-list-option>
|
||||
}
|
||||
</mat-selection-list>
|
||||
|
||||
<p class="f-w-600 p-16 bg-light-primary rounded">
|
||||
Options selected: {{ shoes.selectedOptions.selected.length }}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- List with single Selection -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>List with single Selection</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-selection-list #shoes2 [multiple]="false">
|
||||
@for(shoe of typesOfShoes; track shoe) {
|
||||
<mat-list-option [value]="shoe">
|
||||
{{ shoe }}
|
||||
</mat-list-option>
|
||||
}
|
||||
</mat-selection-list>
|
||||
|
||||
<p class="f-w-600 p-16 bg-light-primary rounded">
|
||||
Option selected:
|
||||
{{
|
||||
shoes2.selectedOptions.hasValue()
|
||||
? shoes2.selectedOptions.selected[0].value
|
||||
: "None"
|
||||
}}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- List with sections -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>List with sections</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list>
|
||||
<div mat-subheader class="m-b-16 f-w-600">Folders</div>
|
||||
@for(folder of folders; track folder.name) {
|
||||
<mat-list-item>
|
||||
<mat-icon matListItemIcon>folder</mat-icon>
|
||||
<div matListItemTitle class="f-w-600">
|
||||
{{ folder.name }}
|
||||
</div>
|
||||
<div matListItemLine class="f-s-14 ">
|
||||
{{ folder.updated | date }}
|
||||
</div>
|
||||
</mat-list-item>
|
||||
}
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<div mat-subheader class="m-y-16 f-w-600">Notes</div>
|
||||
@for(note of notes; track note.name) {
|
||||
<mat-list-item>
|
||||
<mat-icon matListItemIcon>note</mat-icon>
|
||||
<div matListItemTitle class="f-w-600">
|
||||
{{ note.name }}
|
||||
</div>
|
||||
<div matListItemLine class="f-s-14 ">
|
||||
{{ note.updated | date }}
|
||||
</div>
|
||||
</mat-list-item>
|
||||
}
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Lists</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- basic -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list role="list">
|
||||
<mat-list-item role="listitem">Item 1</mat-list-item>
|
||||
<mat-list-item role="listitem">Item 2</mat-list-item>
|
||||
<mat-list-item role="listitem">Item 3</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- two line -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Two Line</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- two line -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Three Line</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line</span>
|
||||
<span matListItemLine>Third line</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span matListItemLine>Second line. This line will truncate.</span>
|
||||
<span>Third line</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- two line -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Three Line with Text wrapping</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list style="max-width: 500px">
|
||||
<mat-list-item lines="3">
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span>Secondary line that will wrap because the list lines is
|
||||
explicitly set to 3 lines. Text inside of a `matListItemTitle`
|
||||
or `matListItemLine` will never wrap.
|
||||
</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item lines="3">
|
||||
<span matListItemTitle class="f-s-16 f-w-600">Title</span>
|
||||
<span>Secondary line that will wrap because the list lines is
|
||||
explicitly set to 3 lines. Text inside of a `matListItemTitle`
|
||||
or `matListItemLine` will never wrap.
|
||||
</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- List with Selection -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>List with Selection</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-selection-list #shoes>
|
||||
@for(shoe of typesOfShoes; track shoe) {
|
||||
<mat-list-option>
|
||||
{{ shoe }}
|
||||
</mat-list-option>
|
||||
}
|
||||
</mat-selection-list>
|
||||
|
||||
<p class="f-w-600 p-16 bg-light-primary rounded">
|
||||
Options selected: {{ shoes.selectedOptions.selected.length }}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- List with single Selection -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>List with single Selection</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-selection-list #shoes2 [multiple]="false">
|
||||
@for(shoe of typesOfShoes; track shoe) {
|
||||
<mat-list-option [value]="shoe">
|
||||
{{ shoe }}
|
||||
</mat-list-option>
|
||||
}
|
||||
</mat-selection-list>
|
||||
|
||||
<p class="f-w-600 p-16 bg-light-primary rounded">
|
||||
Option selected:
|
||||
{{
|
||||
shoes2.selectedOptions.hasValue()
|
||||
? shoes2.selectedOptions.selected[0].value
|
||||
: "None"
|
||||
}}
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- --------------------------------------------------- -->
|
||||
<!-- List with sections -->
|
||||
<!-- --------------------------------------------------- -->
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>List with sections</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-list>
|
||||
<div mat-subheader class="m-b-16 f-w-600">Folders</div>
|
||||
@for(folder of folders; track folder.name) {
|
||||
<mat-list-item>
|
||||
<mat-icon matListItemIcon>folder</mat-icon>
|
||||
<div matListItemTitle class="f-w-600">
|
||||
{{ folder.name }}
|
||||
</div>
|
||||
<div matListItemLine class="f-s-14 ">
|
||||
{{ folder.updated | date }}
|
||||
</div>
|
||||
</mat-list-item>
|
||||
}
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<div mat-subheader class="m-y-16 f-w-600">Notes</div>
|
||||
@for(note of notes; track note.name) {
|
||||
<mat-list-item>
|
||||
<mat-icon matListItemIcon>note</mat-icon>
|
||||
<div matListItemTitle class="f-w-600">
|
||||
{{ note.name }}
|
||||
</div>
|
||||
<div matListItemLine class="f-s-14 ">
|
||||
{{ note.updated | date }}
|
||||
</div>
|
||||
</mat-list-item>
|
||||
}
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,48 +1,48 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {DatePipe} from '@angular/common';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
|
||||
|
||||
export interface Section {
|
||||
name: string;
|
||||
updated: Date;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-lists',
|
||||
imports: [MatListModule, MatCardModule, DatePipe,MatIconModule, MaterialModule ],
|
||||
templateUrl: './lists.component.html',
|
||||
})
|
||||
export class AppListsComponent {
|
||||
constructor() {}
|
||||
|
||||
typesOfShoes: string[] = ['Loafers', 'Sneakers'];
|
||||
|
||||
folders: Section[] = [
|
||||
{
|
||||
name: 'Photos',
|
||||
updated: new Date('1/1/25'),
|
||||
},
|
||||
{
|
||||
name: 'Recipes',
|
||||
updated: new Date('1/17/25'),
|
||||
},
|
||||
{
|
||||
name: 'Work',
|
||||
updated: new Date('1/28/25'),
|
||||
},
|
||||
];
|
||||
notes: Section[] = [
|
||||
{
|
||||
name: 'Vacation Itinerary',
|
||||
updated: new Date('2/20/25'),
|
||||
},
|
||||
{
|
||||
name: 'Kitchen Remodel',
|
||||
updated: new Date('1/18/25'),
|
||||
},
|
||||
];
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {DatePipe} from '@angular/common';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
|
||||
|
||||
export interface Section {
|
||||
name: string;
|
||||
updated: Date;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-lists',
|
||||
imports: [MatListModule, MatCardModule, DatePipe,MatIconModule, MaterialModule ],
|
||||
templateUrl: './lists.component.html',
|
||||
})
|
||||
export class AppListsComponent {
|
||||
constructor() {}
|
||||
|
||||
typesOfShoes: string[] = ['Loafers', 'Sneakers'];
|
||||
|
||||
folders: Section[] = [
|
||||
{
|
||||
name: 'Photos',
|
||||
updated: new Date('1/1/25'),
|
||||
},
|
||||
{
|
||||
name: 'Recipes',
|
||||
updated: new Date('1/17/25'),
|
||||
},
|
||||
{
|
||||
name: 'Work',
|
||||
updated: new Date('1/28/25'),
|
||||
},
|
||||
];
|
||||
notes: Section[] = [
|
||||
{
|
||||
name: 'Vacation Itinerary',
|
||||
updated: new Date('2/20/25'),
|
||||
},
|
||||
{
|
||||
name: 'Kitchen Remodel',
|
||||
updated: new Date('1/18/25'),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -1,166 +1,166 @@
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Menu</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" class="m-t-8" [matMenuTriggerFor]="menu">
|
||||
Menu
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" class="cardWithShadow">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>with Icons</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
|
||||
<mat-icon>
|
||||
<i-tabler name="dots" class="icon-20"></i-tabler>
|
||||
</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" class="cardWithShadow">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>dialpad</mat-icon>
|
||||
<span>Redial</span>
|
||||
</button>
|
||||
<button mat-menu-item disabled>
|
||||
<mat-icon>voicemail</mat-icon>
|
||||
<span>Check voice mail</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
<span>Disable alerts</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Nested Menu</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" [matMenuTriggerFor]="animals" class="m-t-8">
|
||||
Animal index
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #animals="matMenu">
|
||||
<button mat-menu-item [matMenuTriggerFor]="vertebrates">
|
||||
Vertebrates
|
||||
</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="invertebrates">
|
||||
Invertebrates
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #vertebrates="matMenu">
|
||||
<button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="amphibians">
|
||||
Amphibians
|
||||
</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="reptiles">
|
||||
Reptiles
|
||||
</button>
|
||||
<button mat-menu-item>Birds</button>
|
||||
<button mat-menu-item>Mammals</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #invertebrates="matMenu">
|
||||
<button mat-menu-item>Insects</button>
|
||||
<button mat-menu-item>Molluscs</button>
|
||||
<button mat-menu-item>Crustaceans</button>
|
||||
<button mat-menu-item>Corals</button>
|
||||
<button mat-menu-item>Arachnids</button>
|
||||
<button mat-menu-item>Velvet worms</button>
|
||||
<button mat-menu-item>Horseshoe crabs</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #fish="matMenu">
|
||||
<button mat-menu-item>Baikal oilfish</button>
|
||||
<button mat-menu-item>Bala shark</button>
|
||||
<button mat-menu-item>Ballan wrasse</button>
|
||||
<button mat-menu-item>Bamboo shark</button>
|
||||
<button mat-menu-item>Banded killifish</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #amphibians="matMenu">
|
||||
<button mat-menu-item>Sonoran desert toad</button>
|
||||
<button mat-menu-item>Western toad</button>
|
||||
<button mat-menu-item>Arroyo toad</button>
|
||||
<button mat-menu-item>Yosemite toad</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #reptiles="matMenu">
|
||||
<button mat-menu-item>Banded Day Gecko</button>
|
||||
<button mat-menu-item>Banded Gila Monster</button>
|
||||
<button mat-menu-item>Black Tree Monitor</button>
|
||||
<button mat-menu-item>Blue Spiny Lizard</button>
|
||||
<button mat-menu-item disabled>Velociraptor</button>
|
||||
</mat-menu>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Positions</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="aboveMenu">
|
||||
Above
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #aboveMenu="matMenu" yPosition="above">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="accent" class="w-100" [matMenuTriggerFor]="belowMenu">
|
||||
Below
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #belowMenu="matMenu" yPosition="below">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="warn" class="w-100" [matMenuTriggerFor]="beforeMenu">
|
||||
Before
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #beforeMenu="matMenu" xPosition="before">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="afterMenu">
|
||||
After
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #afterMenu="matMenu" xPosition="after">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Menu</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" class="m-t-8" [matMenuTriggerFor]="menu">
|
||||
Menu
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" class="cardWithShadow">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>with Icons</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
|
||||
<mat-icon>
|
||||
<i-tabler name="dots" class="icon-20"></i-tabler>
|
||||
</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu" class="cardWithShadow">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>dialpad</mat-icon>
|
||||
<span>Redial</span>
|
||||
</button>
|
||||
<button mat-menu-item disabled>
|
||||
<mat-icon>voicemail</mat-icon>
|
||||
<span>Check voice mail</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
<span>Disable alerts</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Nested Menu</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" [matMenuTriggerFor]="animals" class="m-t-8">
|
||||
Animal index
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #animals="matMenu">
|
||||
<button mat-menu-item [matMenuTriggerFor]="vertebrates">
|
||||
Vertebrates
|
||||
</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="invertebrates">
|
||||
Invertebrates
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #vertebrates="matMenu">
|
||||
<button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="amphibians">
|
||||
Amphibians
|
||||
</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="reptiles">
|
||||
Reptiles
|
||||
</button>
|
||||
<button mat-menu-item>Birds</button>
|
||||
<button mat-menu-item>Mammals</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #invertebrates="matMenu">
|
||||
<button mat-menu-item>Insects</button>
|
||||
<button mat-menu-item>Molluscs</button>
|
||||
<button mat-menu-item>Crustaceans</button>
|
||||
<button mat-menu-item>Corals</button>
|
||||
<button mat-menu-item>Arachnids</button>
|
||||
<button mat-menu-item>Velvet worms</button>
|
||||
<button mat-menu-item>Horseshoe crabs</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #fish="matMenu">
|
||||
<button mat-menu-item>Baikal oilfish</button>
|
||||
<button mat-menu-item>Bala shark</button>
|
||||
<button mat-menu-item>Ballan wrasse</button>
|
||||
<button mat-menu-item>Bamboo shark</button>
|
||||
<button mat-menu-item>Banded killifish</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #amphibians="matMenu">
|
||||
<button mat-menu-item>Sonoran desert toad</button>
|
||||
<button mat-menu-item>Western toad</button>
|
||||
<button mat-menu-item>Arroyo toad</button>
|
||||
<button mat-menu-item>Yosemite toad</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-menu class="cardWithShadow" #reptiles="matMenu">
|
||||
<button mat-menu-item>Banded Day Gecko</button>
|
||||
<button mat-menu-item>Banded Gila Monster</button>
|
||||
<button mat-menu-item>Black Tree Monitor</button>
|
||||
<button mat-menu-item>Blue Spiny Lizard</button>
|
||||
<button mat-menu-item disabled>Velociraptor</button>
|
||||
</mat-menu>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Positions</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="aboveMenu">
|
||||
Above
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #aboveMenu="matMenu" yPosition="above">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="accent" class="w-100" [matMenuTriggerFor]="belowMenu">
|
||||
Below
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #belowMenu="matMenu" yPosition="below">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="warn" class="w-100" [matMenuTriggerFor]="beforeMenu">
|
||||
Before
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #beforeMenu="matMenu" xPosition="before">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="afterMenu">
|
||||
After
|
||||
</button>
|
||||
<mat-menu class="cardWithShadow" #afterMenu="matMenu" xPosition="after">
|
||||
<button mat-menu-item>Item 1</button>
|
||||
<button mat-menu-item>Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
imports: [MatCardModule, MatMenuModule, MatIconModule, TablerIconsModule, MatButtonModule],
|
||||
templateUrl: './menu.component.html',
|
||||
})
|
||||
export class AppMenuComponent {
|
||||
constructor() {}
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
imports: [MatCardModule, MatMenuModule, MatIconModule, TablerIconsModule, MatButtonModule],
|
||||
templateUrl: './menu.component.html',
|
||||
})
|
||||
export class AppMenuComponent {
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<mat-card-title>Table</mat-card-title>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table mat-table [dataSource]="dataSource1" class="w-100">
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="assigned">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14 p-l-0">
|
||||
Product
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="p-l-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="element.imagePath" alt="users" width="60" class="rounded" />
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600">
|
||||
{{ element.uname }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
|
||||
Payment
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
@if(element.budget >= 160) {
|
||||
<h6 class=" f-s-16 m-b-4">
|
||||
<span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
|
||||
</h6>
|
||||
<span class="f-s-14 f-w-500 d-block m-b-4">Full paid</span>
|
||||
<mat-progress-bar mode="determinate" value="80" color="primary"></mat-progress-bar>
|
||||
} @else if(element.budget > 119) {
|
||||
<h6 class=" f-s-16 m-b-4">
|
||||
<span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
|
||||
</h6>
|
||||
<span class="f-s-14 f-w-500 d-block m-b-4">Partially paid</span>
|
||||
<mat-progress-bar mode="determinate" class="mat-error" value="35" color="accent"></mat-progress-bar>
|
||||
} @else if(element.budget < 100) { <h6 class=" f-s-16 m-b-4">
|
||||
<span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
|
||||
</h6>
|
||||
<span class="f-s-14 f-w-500 d-block m-b-4">Cancelled</span>
|
||||
<mat-progress-bar mode="determinate" class="mat-warning" value="50" color="warn"></mat-progress-bar>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="priority">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
|
||||
Status
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
@if(element.priority == 'cancelled') {
|
||||
<span class="bg-light-warning text-warning rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
{{ element.priority | titlecase }}
|
||||
</span>
|
||||
} @if(element.priority == 'rejected') {
|
||||
<span class="bg-light-error text-error rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
{{ element.priority | titlecase }}
|
||||
</span>
|
||||
} @if(element.priority == 'confirmed') {
|
||||
<span class="bg-light-success text-success rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
{{ element.priority | titlecase }}
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Symbol Column -->
|
||||
<ng-container matColumnDef="budget">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14"></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>Add</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns1"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns1"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow">
|
||||
<mat-card-content>
|
||||
<mat-card-title>Table</mat-card-title>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table mat-table [dataSource]="dataSource1" class="w-100">
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="assigned">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14 p-l-0">
|
||||
Product
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element" class="p-l-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="element.imagePath" alt="users" width="60" class="rounded" />
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600">
|
||||
{{ element.uname }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
|
||||
Payment
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
@if(element.budget >= 160) {
|
||||
<h6 class=" f-s-16 m-b-4">
|
||||
<span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
|
||||
</h6>
|
||||
<span class="f-s-14 f-w-500 d-block m-b-4">Full paid</span>
|
||||
<mat-progress-bar mode="determinate" value="80" color="primary"></mat-progress-bar>
|
||||
} @else if(element.budget > 119) {
|
||||
<h6 class=" f-s-16 m-b-4">
|
||||
<span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
|
||||
</h6>
|
||||
<span class="f-s-14 f-w-500 d-block m-b-4">Partially paid</span>
|
||||
<mat-progress-bar mode="determinate" class="mat-error" value="35" color="accent"></mat-progress-bar>
|
||||
} @else if(element.budget < 100) { <h6 class=" f-s-16 m-b-4">
|
||||
<span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
|
||||
</h6>
|
||||
<span class="f-s-14 f-w-500 d-block m-b-4">Cancelled</span>
|
||||
<mat-progress-bar mode="determinate" class="mat-warning" value="50" color="warn"></mat-progress-bar>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="priority">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
|
||||
Status
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
@if(element.priority == 'cancelled') {
|
||||
<span class="bg-light-warning text-warning rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
{{ element.priority | titlecase }}
|
||||
</span>
|
||||
} @if(element.priority == 'rejected') {
|
||||
<span class="bg-light-error text-error rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
{{ element.priority | titlecase }}
|
||||
</span>
|
||||
} @if(element.priority == 'confirmed') {
|
||||
<span class="bg-light-success text-success rounded f-w-600 p-6 p-y-4 f-s-12">
|
||||
{{ element.priority | titlecase }}
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Symbol Column -->
|
||||
<ng-container matColumnDef="budget">
|
||||
<th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14"></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>Add</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns1"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns1"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,67 +1,67 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
// table 1
|
||||
export interface productsData {
|
||||
id: number;
|
||||
imagePath: string;
|
||||
uname: string;
|
||||
budget: number;
|
||||
priority: string;
|
||||
}
|
||||
|
||||
const PRODUCT_DATA: productsData[] = [
|
||||
{
|
||||
id: 1,
|
||||
imagePath: 'assets/images/products/product-1.png',
|
||||
uname: 'iPhone 13 pro max-Pacific Blue-128GB storage',
|
||||
budget: 180,
|
||||
priority: 'confirmed',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imagePath: 'assets/images/products/product-2.png',
|
||||
uname: 'Apple MacBook Pro 13 inch-M1-8/256GB-space',
|
||||
budget: 90,
|
||||
priority: 'cancelled',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imagePath: 'assets/images/products/product-3.png',
|
||||
uname: 'PlayStation 5 DualSense Wireless Controller',
|
||||
budget: 120,
|
||||
priority: 'rejected',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imagePath: 'assets/images/products/product-4.png',
|
||||
uname: 'Amazon Basics Mesh, Mid-Back, Swivel Office',
|
||||
budget: 160,
|
||||
priority: 'confirmed',
|
||||
},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-tables',
|
||||
imports: [
|
||||
MatTableModule,
|
||||
CommonModule,
|
||||
MatCardModule,
|
||||
MaterialModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatButtonModule,
|
||||
],
|
||||
templateUrl: './tables.component.html',
|
||||
})
|
||||
export class AppTablesComponent {
|
||||
// table 1
|
||||
displayedColumns1: string[] = ['assigned', 'name', 'priority', 'budget'];
|
||||
dataSource1 = PRODUCT_DATA;
|
||||
}
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
// table 1
|
||||
export interface productsData {
|
||||
id: number;
|
||||
imagePath: string;
|
||||
uname: string;
|
||||
budget: number;
|
||||
priority: string;
|
||||
}
|
||||
|
||||
const PRODUCT_DATA: productsData[] = [
|
||||
{
|
||||
id: 1,
|
||||
imagePath: 'assets/images/products/product-1.png',
|
||||
uname: 'iPhone 13 pro max-Pacific Blue-128GB storage',
|
||||
budget: 180,
|
||||
priority: 'confirmed',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imagePath: 'assets/images/products/product-2.png',
|
||||
uname: 'Apple MacBook Pro 13 inch-M1-8/256GB-space',
|
||||
budget: 90,
|
||||
priority: 'cancelled',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imagePath: 'assets/images/products/product-3.png',
|
||||
uname: 'PlayStation 5 DualSense Wireless Controller',
|
||||
budget: 120,
|
||||
priority: 'rejected',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imagePath: 'assets/images/products/product-4.png',
|
||||
uname: 'Amazon Basics Mesh, Mid-Back, Swivel Office',
|
||||
budget: 160,
|
||||
priority: 'confirmed',
|
||||
},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-tables',
|
||||
imports: [
|
||||
MatTableModule,
|
||||
CommonModule,
|
||||
MatCardModule,
|
||||
MaterialModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatButtonModule,
|
||||
],
|
||||
templateUrl: './tables.component.html',
|
||||
})
|
||||
export class AppTablesComponent {
|
||||
// table 1
|
||||
displayedColumns1: string[] = ['assigned', 'name', 'priority', 'budget'];
|
||||
dataSource1 = PRODUCT_DATA;
|
||||
}
|
||||
|
||||
@@ -1,128 +1,128 @@
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Tooltips</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action">
|
||||
Button
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Uppercase</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipClass="text-uppercase">
|
||||
Button
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Disabled on click</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action"
|
||||
[matTooltipDisabled]="disabled.value" class="m-r-8">
|
||||
Action
|
||||
</button>
|
||||
|
||||
<mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
|
||||
Tooltip disabled
|
||||
</mat-checkbox>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Position</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="below" matTooltipHideDelay="100000">
|
||||
Below
|
||||
</button>
|
||||
<button mat-flat-button color="accent" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="above" class="m-l-8" matTooltipHideDelay="100000">
|
||||
Above
|
||||
</button>
|
||||
<button mat-flat-button color="warn" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="left" class="m-l-8" matTooltipHideDelay="100000">
|
||||
Left
|
||||
</button>
|
||||
<button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="right" class="m-l-8" matTooltipHideDelay="100000">
|
||||
Right
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Show and Hide</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<mat-form-field class="w-100" appearance="outline">
|
||||
<mat-label>Show delay</mat-label>
|
||||
<input matInput type="number" [formControl]="showDelay" />
|
||||
<mat-hint>milliseconds</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<mat-form-field class="w-100" appearance="outline">
|
||||
<mat-label>Hide delay</mat-label>
|
||||
<input matInput type="number" [formControl]="hideDelay2" />
|
||||
<mat-hint>milliseconds</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action"
|
||||
[matTooltipShowDelay]="showDelay.value" [matTooltipHideDelay]="hideDelay2.value">
|
||||
Action
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Change Message</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-form-field class="w-100" appearance="outline">
|
||||
<mat-label>Tooltip message</mat-label>
|
||||
<input matInput [formControl]="message" />
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-flat-button color="primary" [matTooltip]="message.value || ''"
|
||||
aria-label="Button that displays a tooltip with a custom message">
|
||||
Action
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card class="cardWithShadow theme-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="m-b-0">Tooltips</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Basic</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action">
|
||||
Button
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Uppercase</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipClass="text-uppercase">
|
||||
Button
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Disabled on click</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action"
|
||||
[matTooltipDisabled]="disabled.value" class="m-r-8">
|
||||
Action
|
||||
</button>
|
||||
|
||||
<mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
|
||||
Tooltip disabled
|
||||
</mat-checkbox>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Position</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="below" matTooltipHideDelay="100000">
|
||||
Below
|
||||
</button>
|
||||
<button mat-flat-button color="accent" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="above" class="m-l-8" matTooltipHideDelay="100000">
|
||||
Above
|
||||
</button>
|
||||
<button mat-flat-button color="warn" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="left" class="m-l-8" matTooltipHideDelay="100000">
|
||||
Left
|
||||
</button>
|
||||
<button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
|
||||
matTooltipPosition="right" class="m-l-8" matTooltipHideDelay="100000">
|
||||
Right
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Show and Hide</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<mat-form-field class="w-100" appearance="outline">
|
||||
<mat-label>Show delay</mat-label>
|
||||
<input matInput type="number" [formControl]="showDelay" />
|
||||
<mat-hint>milliseconds</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<mat-form-field class="w-100" appearance="outline">
|
||||
<mat-label>Hide delay</mat-label>
|
||||
<input matInput type="number" [formControl]="hideDelay2" />
|
||||
<mat-hint>milliseconds</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button mat-flat-button color="primary" matTooltip="Info about the action"
|
||||
[matTooltipShowDelay]="showDelay.value" [matTooltipHideDelay]="hideDelay2.value">
|
||||
Action
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<mat-card class="b-1 shadow-none">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Change Message</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="b-t-1">
|
||||
<mat-form-field class="w-100" appearance="outline">
|
||||
<mat-label>Tooltip message</mat-label>
|
||||
<input matInput [formControl]="message" />
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-flat-button color="primary" [matTooltip]="message.value || ''"
|
||||
aria-label="Button that displays a tooltip with a custom message">
|
||||
Action
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -1,33 +1,33 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tooltips',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule,
|
||||
MatTooltipModule, MatCardModule, MatInputModule, MatCheckboxModule
|
||||
],
|
||||
templateUrl: './tooltips.component.html',
|
||||
})
|
||||
export class AppTooltipsComponent {
|
||||
// disabled
|
||||
disabled = new FormControl(false);
|
||||
|
||||
// show and hide
|
||||
showDelay = new FormControl(1000);
|
||||
hideDelay2 = new FormControl(2000);
|
||||
|
||||
// change message
|
||||
message = new FormControl('Info about the action');
|
||||
}
|
||||
import { Component } from '@angular/core';
|
||||
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tooltips',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule,
|
||||
MatTooltipModule, MatCardModule, MatInputModule, MatCheckboxModule
|
||||
],
|
||||
templateUrl: './tooltips.component.html',
|
||||
})
|
||||
export class AppTooltipsComponent {
|
||||
// disabled
|
||||
disabled = new FormControl(false);
|
||||
|
||||
// show and hide
|
||||
showDelay = new FormControl(1000);
|
||||
hideDelay2 = new FormControl(2000);
|
||||
|
||||
// change message
|
||||
message = new FormControl('Info about the action');
|
||||
}
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
// ui
|
||||
import { AppBadgeComponent } from './badge/badge.component';
|
||||
import { AppChipsComponent } from './chips/chips.component';
|
||||
import { AppListsComponent } from './lists/lists.component';
|
||||
import { AppMenuComponent } from './menu/menu.component';
|
||||
import { AppTooltipsComponent } from './tooltips/tooltips.component';
|
||||
import { AppFormsComponent } from './forms/forms.component';
|
||||
import { AppTablesComponent } from './tables/tables.component';
|
||||
|
||||
export const UiComponentsRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'badge',
|
||||
component: AppBadgeComponent,
|
||||
},
|
||||
{
|
||||
path: 'chips',
|
||||
component: AppChipsComponent,
|
||||
},
|
||||
{
|
||||
path: 'lists',
|
||||
component: AppListsComponent,
|
||||
},
|
||||
{
|
||||
path: 'menu',
|
||||
component: AppMenuComponent,
|
||||
},
|
||||
{
|
||||
path: 'tooltips',
|
||||
component: AppTooltipsComponent,
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: AppFormsComponent,
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: AppTablesComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
// ui
|
||||
import { AppBadgeComponent } from './badge/badge.component';
|
||||
import { AppChipsComponent } from './chips/chips.component';
|
||||
import { AppListsComponent } from './lists/lists.component';
|
||||
import { AppMenuComponent } from './menu/menu.component';
|
||||
import { AppTooltipsComponent } from './tooltips/tooltips.component';
|
||||
import { AppFormsComponent } from './forms/forms.component';
|
||||
import { AppTablesComponent } from './tables/tables.component';
|
||||
|
||||
export const UiComponentsRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{
|
||||
path: 'badge',
|
||||
component: AppBadgeComponent,
|
||||
},
|
||||
{
|
||||
path: 'chips',
|
||||
component: AppChipsComponent,
|
||||
},
|
||||
{
|
||||
path: 'lists',
|
||||
component: AppListsComponent,
|
||||
},
|
||||
{
|
||||
path: 'menu',
|
||||
component: AppMenuComponent,
|
||||
},
|
||||
{
|
||||
path: 'tooltips',
|
||||
component: AppTooltipsComponent,
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: AppFormsComponent,
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: AppTablesComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user