Code format
This commit is contained in:
Çetin
@@ -2,13 +2,13 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
|
||||
import { Component, computed, inject, PLATFORM_ID } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes';
|
||||
import Aura from '@primeng/themes/aura';
|
||||
import Lara from '@primeng/themes/lara';
|
||||
import Material from '@primeng/themes/material';
|
||||
import Nora from '@primeng/themes/nora';
|
||||
import { PrimeNG } from 'primeng/config';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
import Aura from '@primeng/themes/aura';
|
||||
import Material from '@primeng/themes/material';
|
||||
import Lara from '@primeng/themes/lara';
|
||||
import Nora from '@primeng/themes/nora';
|
||||
|
||||
const presets = {
|
||||
Aura,
|
||||
|
||||
@@ -2,30 +2,20 @@ import { Component, computed, inject } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { AppConfigurator } from './app.configurator';
|
||||
import { LayoutService} from '../service/layout.service';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-floating-configurator',
|
||||
imports: [ButtonModule, StyleClassModule, AppConfigurator],
|
||||
template: `
|
||||
<div class="fixed flex gap-4 top-8 right-8">
|
||||
<p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
|
||||
<div class="relative">
|
||||
<p-button
|
||||
icon="pi pi-palette"
|
||||
pStyleClass="@next"
|
||||
enterFromClass="hidden"
|
||||
enterActiveClass="animate-scalein"
|
||||
leaveToClass="hidden"
|
||||
leaveActiveClass="animate-fadeout"
|
||||
[hideOnOutsideClick]="true"
|
||||
type="button"
|
||||
rounded
|
||||
/>
|
||||
<app-configurator />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
selector: 'app-floating-configurator',
|
||||
imports: [ButtonModule, StyleClassModule, AppConfigurator],
|
||||
template: `
|
||||
<div class="fixed flex gap-4 top-8 right-8">
|
||||
<p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
|
||||
<div class="relative">
|
||||
<p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
|
||||
<app-configurator />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class AppFloatingConfigurator {
|
||||
LayoutService = inject(LayoutService);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-footer',
|
||||
template: `<div class="layout-footer">
|
||||
SAKAI by
|
||||
<a href="https://primeng.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeNG</a>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class AppFooter {}
|
||||
|
||||
@@ -6,22 +6,16 @@ import { AppMenuitem } from './app.menuitem';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
standalone:true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
AppMenuitem,
|
||||
RouterModule
|
||||
],
|
||||
standalone: true,
|
||||
imports: [CommonModule, AppMenuitem, RouterModule],
|
||||
template: `<ul class="layout-menu">
|
||||
<ng-container *ngFor="let item of model; let i = index;">
|
||||
<ng-container *ngFor="let item of model; let i = index">
|
||||
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
|
||||
<li *ngIf="item.separator" class="menu-separator"></li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
`,
|
||||
</ul> `
|
||||
})
|
||||
export class AppMenu {
|
||||
|
||||
model: MenuItem[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
@@ -35,19 +29,19 @@ export class AppMenu {
|
||||
items: [
|
||||
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'] },
|
||||
{ label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input'] },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-mobile', class: 'rotated-icon', routerLink: ['/uikit/button'] },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-mobile', class: 'rotated-icon', routerLink: ['/uikit/button'] },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] },
|
||||
{ label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree'] },
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'] },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] },
|
||||
{ label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/uikit/timeline'] },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc'] }
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'] },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] },
|
||||
{ label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/uikit/timeline'] },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc'] }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Subscription } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { MenuItem} from 'primeng/api';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { LayoutService } from '../service/layout.service';
|
||||
|
||||
@Component({
|
||||
@@ -13,46 +13,63 @@ import { LayoutService } from '../service/layout.service';
|
||||
selector: '[app-menuitem]',
|
||||
imports: [CommonModule, RouterModule, RippleModule],
|
||||
template: `
|
||||
<ng-container>
|
||||
<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
|
||||
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)"
|
||||
[ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{item.label}}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.styleClass"
|
||||
[routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
|
||||
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
|
||||
[skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
|
||||
[attr.target]="item.target" tabindex="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{item.label}}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<ng-container>
|
||||
<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
|
||||
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)" [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{ item.label }}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<a
|
||||
*ngIf="item.routerLink && !item.items && item.visible !== false"
|
||||
(click)="itemClick($event)"
|
||||
[ngClass]="item.styleClass"
|
||||
[routerLink]="item.routerLink"
|
||||
routerLinkActive="active-route"
|
||||
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
|
||||
[fragment]="item.fragment"
|
||||
[queryParamsHandling]="item.queryParamsHandling"
|
||||
[preserveFragment]="item.preserveFragment"
|
||||
[skipLocationChange]="item.skipLocationChange"
|
||||
[replaceUrl]="item.replaceUrl"
|
||||
[state]="item.state"
|
||||
[queryParams]="item.queryParams"
|
||||
[attr.target]="item.target"
|
||||
tabindex="0"
|
||||
pRipple
|
||||
>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{ item.label }}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
|
||||
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
|
||||
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-container>
|
||||
<ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
|
||||
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
|
||||
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-container>
|
||||
`,
|
||||
animations: [
|
||||
trigger('children', [
|
||||
state('collapsed', style({
|
||||
height: '0'
|
||||
})),
|
||||
state('expanded', style({
|
||||
height: '*'
|
||||
})),
|
||||
state(
|
||||
'collapsed',
|
||||
style({
|
||||
height: '0'
|
||||
})
|
||||
),
|
||||
state(
|
||||
'expanded',
|
||||
style({
|
||||
height: '*'
|
||||
})
|
||||
),
|
||||
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||
])
|
||||
],
|
||||
providers: [LayoutService],
|
||||
providers: [LayoutService]
|
||||
})
|
||||
export class AppMenuitem {
|
||||
|
||||
@Input() item!: MenuItem;
|
||||
|
||||
@Input() index!: number;
|
||||
@@ -67,15 +84,17 @@ export class AppMenuitem {
|
||||
|
||||
menuResetSubscription: Subscription;
|
||||
|
||||
key: string = "";
|
||||
key: string = '';
|
||||
|
||||
constructor(public router: Router, private layoutService: LayoutService) {
|
||||
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe(value => {
|
||||
constructor(
|
||||
public router: Router,
|
||||
private layoutService: LayoutService
|
||||
) {
|
||||
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe((value) => {
|
||||
Promise.resolve(null).then(() => {
|
||||
if (value.routeEvent) {
|
||||
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
|
||||
}
|
||||
else {
|
||||
this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
|
||||
} else {
|
||||
if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
|
||||
this.active = false;
|
||||
}
|
||||
@@ -87,12 +106,11 @@ export class AppMenuitem {
|
||||
this.active = false;
|
||||
});
|
||||
|
||||
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||
.subscribe(params => {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
}
|
||||
});
|
||||
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
|
||||
if (this.item.routerLink) {
|
||||
this.updateActiveStateFromRoute();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -132,7 +150,7 @@ export class AppMenuitem {
|
||||
}
|
||||
|
||||
get submenuAnimation() {
|
||||
return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
|
||||
return this.root ? 'expanded' : this.active ? 'expanded' : 'collapsed';
|
||||
}
|
||||
|
||||
@HostBinding('class.active-menuitem')
|
||||
|
||||
@@ -3,14 +3,11 @@ import { AppMenu } from './app.menu';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
standalone:true,
|
||||
imports: [
|
||||
AppMenu
|
||||
],
|
||||
template: `
|
||||
<div class="layout-sidebar">
|
||||
standalone: true,
|
||||
imports: [AppMenu],
|
||||
template: ` <div class="layout-sidebar">
|
||||
<app-menu></app-menu>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class AppSidebar {
|
||||
constructor(public el: ElementRef) {}
|
||||
|
||||
@@ -58,15 +58,7 @@ import { LayoutService } from '../service/layout.service';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="layout-topbar-menu-button layout-topbar-action"
|
||||
pStyleClass="@next"
|
||||
enterFromClass="hidden"
|
||||
enterActiveClass="animate-scalein"
|
||||
leaveToClass="hidden"
|
||||
leaveActiveClass="animate-fadeout"
|
||||
[hideOnOutsideClick]="true"
|
||||
>
|
||||
<button class="layout-topbar-menu-button layout-topbar-action" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-ellipsis-v"></i>
|
||||
</button>
|
||||
|
||||
@@ -90,7 +82,6 @@ import { LayoutService } from '../service/layout.service';
|
||||
</div>`
|
||||
})
|
||||
export class AppTopbar {
|
||||
|
||||
items!: MenuItem[];
|
||||
|
||||
constructor(public layoutService: LayoutService) {}
|
||||
@@ -98,5 +89,4 @@ export class AppTopbar {
|
||||
toggleDarkMode() {
|
||||
this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,39 +1,32 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-access',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ButtonModule,
|
||||
RouterModule,
|
||||
RippleModule,
|
||||
AppFloatingConfigurator,
|
||||
ButtonModule,
|
||||
],
|
||||
template: `
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
|
||||
<i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
|
||||
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<p-button label="Go to Dashboard" routerLink="/" severity="warn" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
standalone: true,
|
||||
imports: [ButtonModule, RouterModule, RippleModule, AppFloatingConfigurator, ButtonModule],
|
||||
template: ` <app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
|
||||
<i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
|
||||
<span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
|
||||
<img src="/demo/images/access/asset-access.svg" alt="Access denied" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<p-button label="Go to Dashboard" routerLink="/" severity="warn" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
export class Access { }
|
||||
export class Access {}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Login } from './login';
|
||||
import { Error } from './error';
|
||||
|
||||
export default [
|
||||
{ path: 'access', component: Access},
|
||||
{ path: 'error', component: Error},
|
||||
{ path: 'login', component: Login},
|
||||
{ path: 'access', component: Access },
|
||||
{ path: 'error', component: Error },
|
||||
{ path: 'login', component: Login }
|
||||
] as Routes;
|
||||
|
||||
@@ -1,33 +1,32 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-error',
|
||||
imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
|
||||
standalone: true,
|
||||
template: `
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
|
||||
<i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-muted-color mb-8">Requested resource is not available.</span>
|
||||
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<p-button label="Go to Dashboard" routerLink="/" severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
|
||||
standalone: true,
|
||||
template: ` <app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<div class="gap-4 flex flex-col items-center">
|
||||
<div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
|
||||
<i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
|
||||
</div>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
|
||||
<span class="text-muted-color mb-8">Requested resource is not available.</span>
|
||||
<img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
|
||||
<div class="col-span-12 mt-8 text-center">
|
||||
<p-button label="Go to Dashboard" routerLink="/" severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
export class Error { }
|
||||
export class Error {}
|
||||
|
||||
@@ -1,76 +1,66 @@
|
||||
import {Component, inject} from '@angular/core';
|
||||
import { ButtonModule} from 'primeng/button';
|
||||
import { CheckboxModule} from 'primeng/checkbox';
|
||||
import { InputTextModule} from 'primeng/inputtext';
|
||||
import { PasswordModule} from 'primeng/password';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import { RippleModule} from 'primeng/ripple';
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ButtonModule,
|
||||
CheckboxModule,
|
||||
InputTextModule,
|
||||
PasswordModule,
|
||||
FormsModule,
|
||||
RouterModule,
|
||||
RippleModule,
|
||||
AppFloatingConfigurator
|
||||
],
|
||||
template: `
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
|
||||
<div class="text-center mb-8">
|
||||
<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-16 shrink-0 mx-auto">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path
|
||||
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome to PrimeLand!</div>
|
||||
<span class="text-muted-color font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
standalone: true,
|
||||
imports: [ButtonModule, CheckboxModule, InputTextModule, PasswordModule, FormsModule, RouterModule, RippleModule, AppFloatingConfigurator],
|
||||
template: `
|
||||
<app-floating-configurator />
|
||||
<div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
|
||||
<div class="text-center mb-8">
|
||||
<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-16 shrink-0 mx-auto">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path
|
||||
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome to PrimeLand!</div>
|
||||
<span class="text-muted-color font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
|
||||
<input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" [(ngModel)]="email" />
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
|
||||
<input pInputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" [(ngModel)]="email" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" class="mb-4" [fluid]="true" [feedback]="false"></p-password>
|
||||
|
||||
<div class="flex items-center justify-between mt-2 mb-8 gap-8">
|
||||
<div class="flex items-center">
|
||||
<p-checkbox [(ngModel)]="checked" id="rememberme1" binary class="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
|
||||
</div>
|
||||
<p-button label="Sign In" styleClass="w-full" routerLink="/"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" class="mb-4" [fluid]="true" [feedback]="false"></p-password>
|
||||
|
||||
<div class="flex items-center justify-between mt-2 mb-8 gap-8">
|
||||
<div class="flex items-center">
|
||||
<p-checkbox [(ngModel)]="checked" id="rememberme1" binary class="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
|
||||
</div>
|
||||
<p-button label="Sign In" styleClass="w-full" routerLink="/"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class Login {
|
||||
email: string = '';
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { Component, OnInit, signal, ViewChild } from '@angular/core';
|
||||
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||
import {Table, TableModule} from 'primeng/table';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {ButtonModule} from 'primeng/button';
|
||||
import {RippleModule} from 'primeng/ripple';
|
||||
import {ToastModule} from 'primeng/toast';
|
||||
import {ToolbarModule} from 'primeng/toolbar';
|
||||
import {RatingModule} from 'primeng/rating';
|
||||
import {InputTextModule} from 'primeng/inputtext';
|
||||
import {TextareaModule} from 'primeng/textarea';
|
||||
import {SelectModule} from 'primeng/select';
|
||||
import {RadioButtonModule} from 'primeng/radiobutton';
|
||||
import {InputNumberModule} from 'primeng/inputnumber';
|
||||
import {DialogModule} from 'primeng/dialog';
|
||||
import { Table, TableModule } from 'primeng/table';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { ToolbarModule } from 'primeng/toolbar';
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { TextareaModule } from 'primeng/textarea';
|
||||
import { SelectModule } from 'primeng/select';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { InputNumberModule } from 'primeng/inputnumber';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { InputIconModule } from 'primeng/inputicon';
|
||||
import { IconFieldModule } from 'primeng/iconfield';
|
||||
@@ -55,165 +55,165 @@ interface ExportColumn {
|
||||
ConfirmDialogModule
|
||||
],
|
||||
template: `
|
||||
<p-toolbar styleClass="mb-6">
|
||||
<ng-template #start>
|
||||
<p-button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" (onClick)="openNew()" />
|
||||
<p-button severity="secondary" label="Delete" icon="pi pi-trash" outlined (onClick)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length" />
|
||||
</ng-template>
|
||||
<p-toolbar styleClass="mb-6">
|
||||
<ng-template #start>
|
||||
<p-button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" (onClick)="openNew()" />
|
||||
<p-button severity="secondary" label="Delete" icon="pi pi-trash" outlined (onClick)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length" />
|
||||
</ng-template>
|
||||
|
||||
<ng-template #end>
|
||||
<p-button label="Export" icon="pi pi-upload" severity="secondary" (onClick)="exportCSV()" />
|
||||
</ng-template>
|
||||
</p-toolbar>
|
||||
<ng-template #end>
|
||||
<p-button label="Export" icon="pi pi-upload" severity="secondary" (onClick)="exportCSV()" />
|
||||
</ng-template>
|
||||
</p-toolbar>
|
||||
|
||||
<p-table
|
||||
#dt
|
||||
[value]="products()"
|
||||
[rows]="10"
|
||||
[columns]="cols"
|
||||
[paginator]="true"
|
||||
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
|
||||
[tableStyle]="{ 'min-width': '75rem' }"
|
||||
[(selection)]="selectedProducts"
|
||||
[rowHover]="true"
|
||||
dataKey="id"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
|
||||
[showCurrentPageReport]="true"
|
||||
[rowsPerPageOptions]="[10, 20, 30]"
|
||||
>
|
||||
<ng-template #caption>
|
||||
<div class="flex items-center justify-between">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<p-iconfield>
|
||||
<p-inputicon styleClass="pi pi-search" />
|
||||
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." />
|
||||
</p-iconfield>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox />
|
||||
</th>
|
||||
<th style="min-width: 16rem">Code</th>
|
||||
<th pSortableColumn="name" style="min-width:16rem">
|
||||
Name
|
||||
<p-sortIcon field="name" />
|
||||
</th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price" style="min-width: 8rem">
|
||||
Price
|
||||
<p-sortIcon field="price" />
|
||||
</th>
|
||||
<th pSortableColumn="category" style="min-width:10rem">
|
||||
Category
|
||||
<p-sortIcon field="category" />
|
||||
</th>
|
||||
<th pSortableColumn="rating" style="min-width: 12rem">
|
||||
Reviews
|
||||
<p-sortIcon field="rating" />
|
||||
</th>
|
||||
<th pSortableColumn="inventoryStatus" style="min-width: 12rem">
|
||||
Status
|
||||
<p-sortIcon field="inventoryStatus" />
|
||||
</th>
|
||||
<th style="min-width: 12rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td style="width: 3rem">
|
||||
<p-tableCheckbox [value]="product" />
|
||||
</td>
|
||||
<td style="min-width: 12rem">{{ product.code }}</td>
|
||||
<td style="min-width: 16rem">{{ product.name }}</td>
|
||||
<td>
|
||||
<img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" style="width: 64px" class="rounded" />
|
||||
</td>
|
||||
<td>{{ product.price | currency: 'USD' }}</td>
|
||||
<td>{{ product.category }}</td>
|
||||
<td>
|
||||
<p-rating [(ngModel)]="product.rating" [readonly]="true" />
|
||||
</td>
|
||||
<td>
|
||||
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" />
|
||||
</td>
|
||||
<td>
|
||||
<p-button icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" (click)="editProduct(product)" />
|
||||
<p-button icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" (click)="deleteProduct(product)" />
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-table
|
||||
#dt
|
||||
[value]="products()"
|
||||
[rows]="10"
|
||||
[columns]="cols"
|
||||
[paginator]="true"
|
||||
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
|
||||
[tableStyle]="{ 'min-width': '75rem' }"
|
||||
[(selection)]="selectedProducts"
|
||||
[rowHover]="true"
|
||||
dataKey="id"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
|
||||
[showCurrentPageReport]="true"
|
||||
[rowsPerPageOptions]="[10, 20, 30]"
|
||||
>
|
||||
<ng-template #caption>
|
||||
<div class="flex items-center justify-between">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<p-iconfield>
|
||||
<p-inputicon styleClass="pi pi-search" />
|
||||
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Search..." />
|
||||
</p-iconfield>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox />
|
||||
</th>
|
||||
<th style="min-width: 16rem">Code</th>
|
||||
<th pSortableColumn="name" style="min-width:16rem">
|
||||
Name
|
||||
<p-sortIcon field="name" />
|
||||
</th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price" style="min-width: 8rem">
|
||||
Price
|
||||
<p-sortIcon field="price" />
|
||||
</th>
|
||||
<th pSortableColumn="category" style="min-width:10rem">
|
||||
Category
|
||||
<p-sortIcon field="category" />
|
||||
</th>
|
||||
<th pSortableColumn="rating" style="min-width: 12rem">
|
||||
Reviews
|
||||
<p-sortIcon field="rating" />
|
||||
</th>
|
||||
<th pSortableColumn="inventoryStatus" style="min-width: 12rem">
|
||||
Status
|
||||
<p-sortIcon field="inventoryStatus" />
|
||||
</th>
|
||||
<th style="min-width: 12rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td style="width: 3rem">
|
||||
<p-tableCheckbox [value]="product" />
|
||||
</td>
|
||||
<td style="min-width: 12rem">{{ product.code }}</td>
|
||||
<td style="min-width: 16rem">{{ product.name }}</td>
|
||||
<td>
|
||||
<img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" style="width: 64px" class="rounded" />
|
||||
</td>
|
||||
<td>{{ product.price | currency: 'USD' }}</td>
|
||||
<td>{{ product.category }}</td>
|
||||
<td>
|
||||
<p-rating [(ngModel)]="product.rating" [readonly]="true" />
|
||||
</td>
|
||||
<td>
|
||||
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" />
|
||||
</td>
|
||||
<td>
|
||||
<p-button icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" (click)="editProduct(product)" />
|
||||
<p-button icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" (click)="deleteProduct(product)" />
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
|
||||
<p-dialog [(visible)]="productDialog" [style]="{ width: '450px' }" header="Product Details" [modal]="true">
|
||||
<ng-template #content>
|
||||
<div class="flex flex-col gap-6">
|
||||
<img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.image" class="block m-auto pb-4" *ngIf="product.image" />
|
||||
<div>
|
||||
<label for="name" class="block font-bold mb-3">Name</label>
|
||||
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus fluid />
|
||||
<small class="text-red-500" *ngIf="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block font-bold mb-3">Description</label>
|
||||
<textarea id="description" pTextarea [(ngModel)]="product.description" required rows="3" cols="20" fluid></textarea>
|
||||
</div>
|
||||
<p-dialog [(visible)]="productDialog" [style]="{ width: '450px' }" header="Product Details" [modal]="true">
|
||||
<ng-template #content>
|
||||
<div class="flex flex-col gap-6">
|
||||
<img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.image" class="block m-auto pb-4" *ngIf="product.image" />
|
||||
<div>
|
||||
<label for="name" class="block font-bold mb-3">Name</label>
|
||||
<input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus fluid />
|
||||
<small class="text-red-500" *ngIf="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block font-bold mb-3">Description</label>
|
||||
<textarea id="description" pTextarea [(ngModel)]="product.description" required rows="3" cols="20" fluid></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
|
||||
<p-select [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" [options]="statuses" optionLabel="label" placeholder="Select a Status" fluid />
|
||||
</div>
|
||||
<div>
|
||||
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
|
||||
<p-select [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" [options]="statuses" optionLabel="label" placeholder="Select a Status" fluid />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block font-bold mb-4">Category</span>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category1" name="category" value="Accessories" [(ngModel)]="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category2" name="category" value="Clothing" [(ngModel)]="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category3" name="category" value="Electronics" [(ngModel)]="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category4" name="category" value="Fitness" [(ngModel)]="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block font-bold mb-4">Category</span>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category1" name="category" value="Accessories" [(ngModel)]="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category2" name="category" value="Clothing" [(ngModel)]="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category3" name="category" value="Electronics" [(ngModel)]="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 col-span-6">
|
||||
<p-radiobutton id="category4" name="category" value="Fitness" [(ngModel)]="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="price" class="block font-bold mb-3">Price</label>
|
||||
<p-inputnumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="quantity" class="block font-bold mb-3">Quantity</label>
|
||||
<p-inputnumber id="quantity" [(ngModel)]="product.quantity" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="price" class="block font-bold mb-3">Price</label>
|
||||
<p-inputnumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="quantity" class="block font-bold mb-3">Quantity</label>
|
||||
<p-inputnumber id="quantity" [(ngModel)]="product.quantity" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #footer>
|
||||
<p-button label="Cancel" icon="pi pi-times" text (click)="hideDialog()" />
|
||||
<p-button label="Save" icon="pi pi-check" (click)="saveProduct()" />
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
<ng-template #footer>
|
||||
<p-button label="Cancel" icon="pi pi-times" text (click)="hideDialog()" />
|
||||
<p-button label="Save" icon="pi pi-check" (click)="saveProduct()" />
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
<p-confirmdialog [style]="{ width: '450px' }" />
|
||||
`,
|
||||
providers: [MessageService, ProductService, ConfirmationService],
|
||||
<p-confirmdialog [style]="{ width: '450px' }" />
|
||||
`,
|
||||
providers: [MessageService, ProductService, ConfirmationService]
|
||||
})
|
||||
export class Crud implements OnInit {
|
||||
productDialog: boolean = false;
|
||||
|
||||
products = signal<Product[]>([])
|
||||
products = signal<Product[]>([]);
|
||||
|
||||
product!: Product;
|
||||
|
||||
@@ -232,7 +232,7 @@ export class Crud implements OnInit {
|
||||
constructor(
|
||||
private productService: ProductService,
|
||||
private messageService: MessageService,
|
||||
private confirmationService: ConfirmationService,
|
||||
private confirmationService: ConfirmationService
|
||||
) {}
|
||||
|
||||
exportCSV() {
|
||||
@@ -294,8 +294,6 @@ export class Crud implements OnInit {
|
||||
detail: 'Products Deleted',
|
||||
life: 3000
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4,97 +4,92 @@ import { ButtonModule } from 'primeng/button';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-best-selling-widget',
|
||||
imports: [
|
||||
CommonModule,
|
||||
ButtonModule,
|
||||
MenuModule,
|
||||
],
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="font-semibold text-xl">Best Selling Products</div>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-orange-500 h-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-4 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-cyan-500 h-full" style="width: 16%"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-4 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-pink-500 h-full" style="width: 67%"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-4 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-muted-color">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-green-500 h-full" style="width: 35%"></div>
|
||||
</div>
|
||||
<span class="text-primary ml-4 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-purple-500 h-full" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-4 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-teal-500 h-full" style="width: 40%"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-4 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`,
|
||||
imports: [CommonModule, ButtonModule, MenuModule],
|
||||
template: ` <div class="card">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="font-semibold text-xl">Best Selling Products</div>
|
||||
<div>
|
||||
<button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
|
||||
<p-menu #menu [popup]="true" [model]="items"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-orange-500 h-full" style="width: 50%"></div>
|
||||
</div>
|
||||
<span class="text-orange-500 ml-4 font-medium">%50</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-cyan-500 h-full" style="width: 16%"></div>
|
||||
</div>
|
||||
<span class="text-cyan-500 ml-4 font-medium">%16</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-pink-500 h-full" style="width: 67%"></div>
|
||||
</div>
|
||||
<span class="text-pink-500 ml-4 font-medium">%67</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
|
||||
<div class="mt-1 text-muted-color">Office</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-green-500 h-full" style="width: 35%"></div>
|
||||
</div>
|
||||
<span class="text-primary ml-4 font-medium">%35</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
|
||||
<div class="mt-1 text-muted-color">Accessories</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-purple-500 h-full" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="text-purple-500 ml-4 font-medium">%75</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
|
||||
<div class="mt-1 text-muted-color">Clothing</div>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
|
||||
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
|
||||
<div class="bg-teal-500 h-full" style="width: 40%"></div>
|
||||
</div>
|
||||
<span class="text-teal-500 ml-4 font-medium">%40</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`
|
||||
})
|
||||
export class BestSellingWidget {
|
||||
menu = null;
|
||||
|
||||
@@ -3,12 +3,9 @@ import { ButtonModule } from 'primeng/button';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-notifications-widget',
|
||||
imports: [
|
||||
ButtonModule,
|
||||
MenuModule,
|
||||
],
|
||||
imports: [ButtonModule, MenuModule],
|
||||
template: `<div class="card">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="font-semibold text-xl">Notifications</div>
|
||||
@@ -25,7 +22,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<i class="pi pi-dollar !text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Richard Jones
|
||||
>Richard Jones
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-primary font-bold">$79.00</span></span>
|
||||
</span>
|
||||
</li>
|
||||
@@ -44,7 +41,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<i class="pi pi-dollar !text-xl text-blue-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Keyser Wick
|
||||
>Keyser Wick
|
||||
<span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-primary font-bold">$59.00</span></span>
|
||||
</span>
|
||||
</li>
|
||||
@@ -53,7 +50,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<i class="pi pi-question !text-xl text-pink-500"></i>
|
||||
</div>
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"
|
||||
>Jane Davis
|
||||
>Jane Davis
|
||||
<span class="text-surface-700 dark:text-surface-100">has posted a new questions about your product.</span>
|
||||
</span>
|
||||
</li>
|
||||
@@ -73,7 +70,7 @@ import { MenuModule } from 'primeng/menu';
|
||||
<span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class NotificationsWidget {
|
||||
items = [
|
||||
|
||||
@@ -6,14 +6,9 @@ import { CommonModule } from '@angular/common';
|
||||
import { Product, ProductService } from '../../service/product.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-recent-sales-widget',
|
||||
imports: [
|
||||
CommonModule,
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
],
|
||||
imports: [CommonModule, TableModule, ButtonModule, RippleModule],
|
||||
template: `<div class="card !mb-8">
|
||||
<div class="font-semibold text-xl mb-4">Recent Sales</div>
|
||||
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
|
||||
@@ -28,10 +23,10 @@ import { Product, ProductService } from '../../service/product.service';
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td style="width: 15%; min-width: 5rem;">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/{{product.image}}" class="shadow-lg" alt="{{product.name}}" width="50">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/{{ product.image }}" class="shadow-lg" alt="{{ product.name }}" width="50" />
|
||||
</td>
|
||||
<td style="width: 35%; min-width: 7rem;">{{product.name}}</td>
|
||||
<td style="width: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>
|
||||
<td style="width: 35%; min-width: 7rem;">{{ product.name }}</td>
|
||||
<td style="width: 35%; min-width: 8rem;">{{ product.price | currency: 'USD' }}</td>
|
||||
<td style="width: 15%;">
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
|
||||
</td>
|
||||
@@ -39,15 +34,14 @@ import { Product, ProductService } from '../../service/product.service';
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>`,
|
||||
providers: [ProductService],
|
||||
providers: [ProductService]
|
||||
})
|
||||
export class RecentSalesWidget {
|
||||
products!: Product[];
|
||||
|
||||
|
||||
constructor(private productService: ProductService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
this.productService.getProductsSmall().then((data) => (this.products = data));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,15 +4,13 @@ import { debounceTime, Subscription } from 'rxjs';
|
||||
import { LayoutService } from '../../../layout/service/layout.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-revenue-stream-widget',
|
||||
imports: [
|
||||
ChartModule,
|
||||
],
|
||||
imports: [ChartModule],
|
||||
template: `<div class="card !mb-8">
|
||||
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
|
||||
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class RevenueStreamWidget {
|
||||
chartData: any;
|
||||
@@ -22,11 +20,9 @@ export class RevenueStreamWidget {
|
||||
subscription!: Subscription;
|
||||
|
||||
constructor(public layoutService: LayoutService) {
|
||||
this.subscription = this.layoutService.configUpdate$
|
||||
.pipe(debounceTime(25))
|
||||
.subscribe(() => {
|
||||
this.initChart();
|
||||
});
|
||||
this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
|
||||
this.initChart();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -73,32 +69,32 @@ export class RevenueStreamWidget {
|
||||
};
|
||||
|
||||
this.chartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent',
|
||||
drawTicks: false
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent',
|
||||
drawTicks: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
||||
@@ -2,68 +2,68 @@ import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
selector: 'app-stats-widget',
|
||||
imports: [CommonModule],
|
||||
template: `<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Orders</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">24 new </span>
|
||||
<span class="text-muted-color">since last visit</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">24 new </span>
|
||||
<span class="text-muted-color">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-dollar text-orange-500 !text-xl"></i>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Revenue</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-dollar text-orange-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">%52+ </span>
|
||||
<span class="text-muted-color">since last week</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">%52+ </span>
|
||||
<span class="text-muted-color">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-users text-cyan-500 !text-xl"></i>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Customers</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-users text-cyan-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">520 </span>
|
||||
<span class="text-muted-color">newly registered</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">520 </span>
|
||||
<span class="text-muted-color">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 !text-xl"></i>
|
||||
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex justify-between mb-4">
|
||||
<div>
|
||||
<span class="block text-muted-color font-medium mb-4">Comments</span>
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 !text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-primary font-medium">85 </span>
|
||||
<span class="text-muted-color">responded</span>
|
||||
</div>
|
||||
<span class="text-primary font-medium">85 </span>
|
||||
<span class="text-muted-color">responded</span>
|
||||
</div>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class StatsWidget {}
|
||||
|
||||
@@ -6,20 +6,20 @@ import { BestSellingWidget } from './components/bestsellingwidget';
|
||||
import { RevenueStreamWidget } from './components/revenuestreamwidget';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
|
||||
template: `
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<app-stats-widget class="contents" />
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<app-recent-sales-widget />
|
||||
<app-best-selling-widget />
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<app-revenue-stream-widget />
|
||||
<app-notifications-widget />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
selector: 'app-dashboard',
|
||||
imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
|
||||
template: `
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<app-stats-widget class="contents" />
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<app-recent-sales-widget />
|
||||
<app-best-selling-widget />
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<app-revenue-stream-widget />
|
||||
<app-notifications-widget />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class Dashboard {}
|
||||
|
||||
@@ -3,33 +3,29 @@ import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-documentation',
|
||||
standalone: true,
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="card mb-4">
|
||||
<div>
|
||||
<h2>Documentation</h2>
|
||||
<h4>Getting Started</h4>
|
||||
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular
|
||||
v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
|
||||
template: `
|
||||
<div class="card mb-4">
|
||||
<div>
|
||||
<h2>Documentation</h2>
|
||||
<h4>Getting Started</h4>
|
||||
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v19 with PrimeNG v19. In case CLI is not installed already, use the command below to set it up.</p>
|
||||
|
||||
<pre class="app-code"><code>npm install -g @angular/cli</code></pre>
|
||||
<pre class="app-code"><code>npm install -g @angular/cli</code></pre>
|
||||
|
||||
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
|
||||
install the libraries from npm and then execute "ng serve" to run the application in your local
|
||||
environment.</p>
|
||||
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
|
||||
|
||||
<pre class="app-code"><code>cd sakai
|
||||
<pre class="app-code"><code>cd sakai
|
||||
npm install
|
||||
ng serve</code></pre>
|
||||
|
||||
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start
|
||||
with the development of your application.</p>
|
||||
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
|
||||
|
||||
<h5>Important CLI Commands</h5>
|
||||
<p>Following commands are derived from CLI.</p>
|
||||
<h5>Important CLI Commands</h5>
|
||||
<p>Following commands are derived from CLI.</p>
|
||||
|
||||
<pre class="app-code"><code>Run 'ng serve' for a dev server. Navigate to \`http://localhost:4200/\`. The app will automatically reload if you change any of the source files.
|
||||
<pre class="app-code"><code>Run 'ng serve' for a dev server. Navigate to \`http://localhost:4200/\`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
Run 'ng generate component component-name' to generate a new component. You can also use \`ng generate directive/pipe/service/class/module\`.
|
||||
|
||||
@@ -41,24 +37,21 @@ Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protrac
|
||||
|
||||
Run 'ng help' for more options.</code></pre>
|
||||
|
||||
<h4>Structure</h4>
|
||||
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets.
|
||||
Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
|
||||
and the assets are in the <span class="text-primary font-medium">src/assets/layout</span> folder.
|
||||
</p>
|
||||
<h4>Structure</h4>
|
||||
<p>
|
||||
Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder, and the assets are in the
|
||||
<span class="text-primary font-medium">src/assets/layout</span> folder.
|
||||
</p>
|
||||
|
||||
<h5>Default Configuration</h5>
|
||||
<p>Initial layout configuration can be defined at the main app component by injecting the <span
|
||||
class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when
|
||||
customizing the defaults. Note that <span class="text-primary font-medium">theme</span> and
|
||||
<span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of
|
||||
Angular at <strong class="font-semibold">index.html</strong> by default and
|
||||
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong
|
||||
class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially,
|
||||
it is required to configure the layout service with the matching values
|
||||
to avoid sync issues. </p>
|
||||
<h5>Default Configuration</h5>
|
||||
<p>
|
||||
Initial layout configuration can be defined at the main app component by injecting the <span class="text-primary font-medium">LayoutService</span>, this step is optional and only necessary when customizing the defaults. Note that
|
||||
<span class="text-primary font-medium">theme</span> and <span class="text-primary font-medium">scale</span> are not reactive since theme is configured outside of Angular at <strong class="font-semibold">index.html</strong> by
|
||||
default and initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is
|
||||
required to configure the layout service with the matching values to avoid sync issues.
|
||||
</p>
|
||||
|
||||
<pre class="app-code"><code>import { Component, OnInit } from '@angular/core';
|
||||
<pre class="app-code"><code>import { Component, OnInit } from '@angular/core';
|
||||
import { PrimeNGConfig } from 'primeng/api';
|
||||
import { LayoutService, AppConfig } from './layout/service/app.layout.service';
|
||||
|
||||
@@ -87,12 +80,13 @@ export class AppComponent implements OnInit {
|
||||
|
||||
}</code></pre>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span>
|
||||
file and based on PrimeNG MenuModel API. In order to define the menuitems,
|
||||
navigate to this file and define your own model as a nested structure.</p>
|
||||
<h5>Menu</h5>
|
||||
<p>
|
||||
Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems, navigate to this file and define
|
||||
your own model as a nested structure.
|
||||
</p>
|
||||
|
||||
<pre class="app-code"><code>import { OnInit } from '@angular/core';
|
||||
<pre class="app-code"><code>import { OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
@@ -120,43 +114,40 @@ export class AppMenuComponent implements OnInit {
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<h4>Integration with Existing Angular CLI Projects</h4>
|
||||
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing
|
||||
application. We've created a short tutorial with details.</p>
|
||||
<h4>Integration with Existing Angular CLI Projects</h4>
|
||||
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>
|
||||
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0"
|
||||
allowfullscreen></iframe>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/yl2f8KKY204" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h4>Theme</h4>
|
||||
<p>
|
||||
Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme to your bundle that are located inside <span class="text-primary font-medium">assets/layout/styles/theme/</span> folder such
|
||||
as <span class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.
|
||||
</p>
|
||||
|
||||
<p>Another alternative would be creating dynamic bundles, please see the <a href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video tutorial</a> for an example.</p>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: `
|
||||
@media screen and (max-width: 991px) {
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
|
||||
<h4>Theme</h4>
|
||||
<p>Sakai provides 34 PrimeNG themes out of the box. Setup of a theme is simple by including the css of theme
|
||||
to your bundle that are located inside <span
|
||||
class="text-primary font-medium">assets/layout/styles/theme/</span>
|
||||
folder such as <span
|
||||
class="text-primary font-medium">assets/layout/styles/theme/lara-light-indigo/theme.css</span>.</p>
|
||||
|
||||
<p>Another alternative would be creating dynamic bundles, please see the <a
|
||||
href="https://www.youtube.com/watch?v=5VOuUdDXRsE" class="font-medium text-primary hover:underline">video
|
||||
tutorial</a> for an example.</p>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: `@media screen and (max-width: 991px) {
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}`
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
})
|
||||
export class Documentation { }
|
||||
export class Documentation {}
|
||||
|
||||
@@ -2,11 +2,10 @@ import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-empty',
|
||||
standalone: true,
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Empty Page</div>
|
||||
<p>Use this page to start from scratch and place your custom content.</p>
|
||||
</div>`
|
||||
standalone: true,
|
||||
template: ` <div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Empty Page</div>
|
||||
<p>Use this page to start from scratch and place your custom content.</p>
|
||||
</div>`
|
||||
})
|
||||
export class Empty { }
|
||||
export class Empty {}
|
||||
|
||||
@@ -3,11 +3,9 @@ import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'features-widget',
|
||||
standalone:true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
],
|
||||
template: ` <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: ` <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4 justify-center">
|
||||
<div class="col-span-12 text-center mt-20 mb-6">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Marvelous Features</div>
|
||||
@@ -136,7 +134,6 @@ import { CommonModule } from '@angular/common';
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
</div>`
|
||||
})
|
||||
export class FeaturesWidget {
|
||||
}
|
||||
export class FeaturesWidget {}
|
||||
|
||||
@@ -2,72 +2,72 @@ import { Component } from '@angular/core';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'footer-widget',
|
||||
imports: [RouterModule],
|
||||
template: `
|
||||
<div class="py-12 px-12 mx-0 mt-20 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-2">
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-6 cursor-pointer">
|
||||
<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-14 mr-2">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path
|
||||
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
|
||||
</a>
|
||||
</div>
|
||||
selector: 'footer-widget',
|
||||
imports: [RouterModule],
|
||||
template: `
|
||||
<div class="py-12 px-12 mx-0 mt-20 lg:mx-20">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-2">
|
||||
<a (click)="router.navigate(['/pages/landing'], { fragment: 'home' })" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-6 cursor-pointer">
|
||||
<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-14 mr-2">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path
|
||||
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h4 class="font-medium text-3xl text-surface-900 dark:text-surface-0">SAKAI</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<div class="grid grid-cols-12 gap-8 text-center md:text-left">
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Company</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-10">
|
||||
<div class="grid grid-cols-12 gap-8 text-center md:text-left">
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Company</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">About Us</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">News</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Investor Relations</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Careers</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Resources</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Resources</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Get Started</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Learn</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Case Studies</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Community</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" alt="badge" class="ml-2" /></a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Community</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Discord</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Events<img src="/demo/images/landing/new-badge.svg" alt="badge" class="ml-2" /></a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">FAQ</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Blog</a>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Legal</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<h4 class="font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0">Legal</h4>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Brand Policy</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100">Privacy Policy</a>
|
||||
<a class="leading-normal text-xl block cursor-pointer text-surface-700 dark:text-surface-100">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class FooterWidget {
|
||||
constructor(public router: Router) { }
|
||||
constructor(public router: Router) {}
|
||||
}
|
||||
|
||||
@@ -3,25 +3,23 @@ import { RippleModule } from 'primeng/ripple';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-widget',
|
||||
imports: [ButtonModule, RippleModule],
|
||||
template: `
|
||||
<div
|
||||
id="hero"
|
||||
class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
|
||||
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
|
||||
>
|
||||
<div class="mx-6 md:mx-20 mt-0 md:mt-6">
|
||||
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||
<button pButton pRipple [rounded]="true" type="button" label="Get Started" class="!text-xl mt-8 !px-4"></button>
|
||||
</div>
|
||||
<div class="flex justify-center md:justify-end">
|
||||
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
selector: 'hero-widget',
|
||||
imports: [ButtonModule, RippleModule],
|
||||
template: `
|
||||
<div
|
||||
id="hero"
|
||||
class="flex flex-col pt-6 px-6 lg:px-20 overflow-hidden"
|
||||
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
|
||||
>
|
||||
<div class="mx-6 md:mx-20 mt-0 md:mt-6">
|
||||
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
|
||||
<button pButton pRipple [rounded]="true" type="button" label="Get Started" class="!text-xl mt-8 !px-4"></button>
|
||||
</div>
|
||||
<div class="flex justify-center md:justify-end">
|
||||
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class HeroWidget {
|
||||
|
||||
}
|
||||
export class HeroWidget {}
|
||||
|
||||
@@ -1,48 +1,46 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'highlights-widget',
|
||||
template: `
|
||||
<div id="highlights" class="py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20">
|
||||
<div class="text-center">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Powerful Everywhere</div>
|
||||
<span class="text-muted-color text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
selector: 'highlights-widget',
|
||||
template: `
|
||||
<div id="highlights" class="py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20">
|
||||
<div class="text-center">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Powerful Everywhere</div>
|
||||
<span class="text-muted-color text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
|
||||
<div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
|
||||
<img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-4 mt-20 pb-2 md:pb-20">
|
||||
<div class="flex justify-center col-span-12 lg:col-span-6 bg-purple-100 p-0 order-1 lg:order-none" style="border-radius: 8px">
|
||||
<img src="/demo/images/landing/mockup.svg" class="w-11/12" alt="mockup mobile" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4">
|
||||
<div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-mobile !text-4xl text-purple-700"></i>
|
||||
</div>
|
||||
<div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Congue Quisque Egestas</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
|
||||
>Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4">
|
||||
<div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-mobile !text-4xl text-purple-700"></i>
|
||||
</div>
|
||||
<div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Congue Quisque Egestas</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
|
||||
>Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4">
|
||||
<div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-desktop !text-3xl text-yellow-700"></i>
|
||||
</div>
|
||||
<div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Celerisque Eu Ultrices</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
|
||||
>Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
|
||||
>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
|
||||
<div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4">
|
||||
<div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
|
||||
<i class="pi pi-fw pi-desktop !text-3xl text-yellow-700"></i>
|
||||
</div>
|
||||
<div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Celerisque Eu Ultrices</div>
|
||||
<span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
|
||||
>Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0" style="border-radius: 8px">
|
||||
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
<div class="flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 bg-yellow-100 p-0" style="border-radius: 8px">
|
||||
<img src="/demo/images/landing/mockup-desktop.svg" class="w-11/12" alt="mockup" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class HighlightsWidget {
|
||||
|
||||
}
|
||||
export class HighlightsWidget {}
|
||||
|
||||
@@ -1,69 +1,68 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
|
||||
|
||||
@Component({
|
||||
selector: 'app-notfound',
|
||||
standalone: true,
|
||||
standalone: true,
|
||||
imports: [RouterModule, AppFloatingConfigurator, ButtonModule],
|
||||
template: `
|
||||
<app-floating-configurator />
|
||||
<div class="flex items-center justify-center min-h-screen overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path
|
||||
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<span class="text-primary font-bold text-3xl">404</span>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
|
||||
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
|
||||
<a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-table !text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
||||
</span>
|
||||
</a>
|
||||
<a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-question-circle !text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||
</span>
|
||||
</a>
|
||||
<a routerLink="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-unlock !text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
||||
</span>
|
||||
</a>
|
||||
<p-button label="Go to Dashboard" routerLink="/" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
template: ` <app-floating-configurator />
|
||||
<div class="flex items-center justify-center min-h-screen overflow-hidden">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<mask id="mask0_1413_1551" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="54" height="11">
|
||||
<path d="M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z" fill="var(--primary-color)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_1413_1551)">
|
||||
<path
|
||||
d="M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
|
||||
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
|
||||
<span class="text-primary font-bold text-3xl">404</span>
|
||||
<h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
|
||||
<div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
|
||||
<a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-table !text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
|
||||
</span>
|
||||
</a>
|
||||
<a routerLink="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-question-circle !text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
|
||||
</span>
|
||||
</a>
|
||||
<a routerLink="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
|
||||
<span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
|
||||
<i class="pi pi-fw pi-unlock !text-2xl"></i>
|
||||
</span>
|
||||
<span class="ml-6 flex flex-col">
|
||||
<span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
|
||||
<span class="text-surface-600 dark:text-surface-200 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
|
||||
</span>
|
||||
</a>
|
||||
<p-button label="Go to Dashboard" routerLink="/" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
export class Notfound { }
|
||||
export class Notfound {}
|
||||
|
||||
@@ -4,8 +4,7 @@ import { map } from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
export class IconService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
icons!: any[];
|
||||
|
||||
@@ -14,9 +13,11 @@ export class IconService {
|
||||
apiUrl = 'assets/demo/data/icons.json';
|
||||
|
||||
getIcons() {
|
||||
return this.http.get(this.apiUrl).pipe(map((response: any) => {
|
||||
this.icons = response.icons;
|
||||
return this.icons;
|
||||
}));
|
||||
return this.http.get(this.apiUrl).pipe(
|
||||
map((response: any) => {
|
||||
this.icons = response.icons;
|
||||
return this.icons;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,201 +1,192 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {ButtonModule} from "primeng/button";
|
||||
import {ButtonGroupModule} from "primeng/buttongroup";
|
||||
import {SplitButtonModule} from "primeng/splitbutton";
|
||||
import {MenuItem} from "primeng/api";
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { ButtonGroupModule } from 'primeng/buttongroup';
|
||||
import { SplitButtonModule } from 'primeng/splitbutton';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
selector: 'app-button-demo',
|
||||
standalone: true,
|
||||
imports: [ButtonModule, ButtonGroupModule, SplitButtonModule],
|
||||
template: `<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Default</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Submit"></p-button>
|
||||
<p-button label="Disabled" [disabled]="true"></p-button>
|
||||
<p-button label="Link" class="p-button-link" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Severities</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" />
|
||||
<p-button label="Secondary" severity="secondary" />
|
||||
<p-button label="Success" severity="success" />
|
||||
<p-button label="Info" severity="info" />
|
||||
<p-button label="Warn" severity="warn" />
|
||||
<p-button label="Help" severity="help" />
|
||||
<p-button label="Danger" severity="danger" />
|
||||
<p-button label="Contrast" severity="contrast" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Text</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" text />
|
||||
<p-button label="Secondary" severity="secondary" text />
|
||||
<p-button label="Success" severity="success" text />
|
||||
<p-button label="Info" severity="info" text />
|
||||
<p-button label="Warn" severity="warn" text />
|
||||
<p-button label="Help" severity="help" text />
|
||||
<p-button label="Danger" severity="danger" text />
|
||||
<p-button label="Plain" text />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Outlined</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" outlined />
|
||||
<p-button label="Secondary" severity="secondary" outlined />
|
||||
<p-button label="Success" severity="success" outlined />
|
||||
<p-button label="Info" severity="info" outlined />
|
||||
<p-button label="warn" severity="warn" outlined />
|
||||
<p-button label="Help" severity="help" outlined />
|
||||
<p-button label="Danger" severity="danger" outlined />
|
||||
<p-button label="Contrast" severity="contrast" outlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Group</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-buttongroup>
|
||||
<p-button label="Save" icon="pi pi-check" />
|
||||
<p-button label="Delete" icon="pi pi-trash" />
|
||||
<p-button label="Cancel" icon="pi pi-times" />
|
||||
</p-buttongroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">SplitButton</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-splitbutton label="Save" [model]="items"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="secondary"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="success"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="info"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="warn"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="help"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="danger"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="contrast"></p-splitbutton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Templating</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button type="button">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
|
||||
</p-button>
|
||||
<p-button type="button" outlined severity="success">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
|
||||
<span class="text-bold">PrimeNG</span>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Icons</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-star-fill"></p-button>
|
||||
<p-button label="Bookmark" icon="pi pi-bookmark"></p-button>
|
||||
<p-button label="Bookmark" icon="pi pi-bookmark" iconPos="right"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Raised</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" raised />
|
||||
<p-button label="Secondary" severity="secondary" raised />
|
||||
<p-button label="Success" severity="success" raised />
|
||||
<p-button label="Info" severity="info" raised />
|
||||
<p-button label="Warn" severity="warn" raised />
|
||||
<p-button label="Help" severity="help" raised />
|
||||
<p-button label="Danger" severity="danger" raised />
|
||||
<p-button label="Contrast" severity="contrast" raised />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" rounded />
|
||||
<p-button label="Secondary" severity="secondary" rounded />
|
||||
<p-button label="Success" severity="success" rounded />
|
||||
<p-button label="Info" severity="info" rounded />
|
||||
<p-button label="Warn" severity="warn" rounded />
|
||||
<p-button label="Help" severity="help" rounded />
|
||||
<p-button label="Danger" severity="danger" rounded />
|
||||
<p-button label="Contrast" severity="contrast" rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded Icons</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-check" rounded />
|
||||
<p-button icon="pi pi-bookmark" severity="secondary" rounded />
|
||||
<p-button icon="pi pi-search" severity="success" rounded />
|
||||
<p-button icon="pi pi-user" severity="info" rounded />
|
||||
<p-button icon="pi pi-bell" severity="warn" rounded />
|
||||
<p-button icon="pi pi-heart" severity="help" rounded />
|
||||
<p-button icon="pi pi-times" severity="danger" rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded Text</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-check" text raised rounded />
|
||||
<p-button icon="pi pi-bookmark" severity="secondary" text raised rounded />
|
||||
<p-button icon="pi pi-search" severity="success" text raised rounded />
|
||||
<p-button icon="pi pi-user" severity="info" text raised rounded />
|
||||
<p-button icon="pi pi-bell" severity="warn" text raised rounded />
|
||||
<p-button icon="pi pi-heart" severity="help" text raised rounded />
|
||||
<p-button icon="pi pi-times" severity="danger" text raised rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded Outlined</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-check" rounded outlined />
|
||||
<p-button icon="pi pi-bookmark" severity="secondary" rounded outlined />
|
||||
<p-button icon="pi pi-search" severity="success" rounded outlined />
|
||||
<p-button icon="pi pi-user" severity="info" rounded outlined />
|
||||
<p-button icon="pi pi-bell" severity="warn" rounded outlined />
|
||||
<p-button icon="pi pi-heart" severity="help" rounded outlined />
|
||||
<p-button icon="pi pi-times" severity="danger" rounded outlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Loading</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button type="button" label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" />
|
||||
<p-button type="button" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
|
||||
<p-button type="button" styleClass="h-full" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
|
||||
<p-button type="button" label="Search" [loading]="loading[3]" (click)="load(3)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
standalone: true,
|
||||
imports: [ButtonModule, ButtonGroupModule, SplitButtonModule],
|
||||
template: `<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Default</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Submit"></p-button>
|
||||
<p-button label="Disabled" [disabled]="true"></p-button>
|
||||
<p-button label="Link" class="p-button-link" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Severities</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" />
|
||||
<p-button label="Secondary" severity="secondary" />
|
||||
<p-button label="Success" severity="success" />
|
||||
<p-button label="Info" severity="info" />
|
||||
<p-button label="Warn" severity="warn" />
|
||||
<p-button label="Help" severity="help" />
|
||||
<p-button label="Danger" severity="danger" />
|
||||
<p-button label="Contrast" severity="contrast" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Text</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" text />
|
||||
<p-button label="Secondary" severity="secondary" text />
|
||||
<p-button label="Success" severity="success" text />
|
||||
<p-button label="Info" severity="info" text />
|
||||
<p-button label="Warn" severity="warn" text />
|
||||
<p-button label="Help" severity="help" text />
|
||||
<p-button label="Danger" severity="danger" text />
|
||||
<p-button label="Plain" text />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Outlined</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" outlined />
|
||||
<p-button label="Secondary" severity="secondary" outlined />
|
||||
<p-button label="Success" severity="success" outlined />
|
||||
<p-button label="Info" severity="info" outlined />
|
||||
<p-button label="warn" severity="warn" outlined />
|
||||
<p-button label="Help" severity="help" outlined />
|
||||
<p-button label="Danger" severity="danger" outlined />
|
||||
<p-button label="Contrast" severity="contrast" outlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Group</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-buttongroup>
|
||||
<p-button label="Save" icon="pi pi-check" />
|
||||
<p-button label="Delete" icon="pi pi-trash" />
|
||||
<p-button label="Cancel" icon="pi pi-times" />
|
||||
</p-buttongroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">SplitButton</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-splitbutton label="Save" [model]="items"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="secondary"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="success"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="info"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="warn"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="help"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="danger"></p-splitbutton>
|
||||
<p-splitbutton label="Save" [model]="items" severity="contrast"></p-splitbutton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Templating</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button type="button">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
|
||||
</p-button>
|
||||
<p-button type="button" outlined severity="success">
|
||||
<img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
|
||||
<span class="text-bold">PrimeNG</span>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Icons</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-star-fill"></p-button>
|
||||
<p-button label="Bookmark" icon="pi pi-bookmark"></p-button>
|
||||
<p-button label="Bookmark" icon="pi pi-bookmark" iconPos="right"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Raised</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" raised />
|
||||
<p-button label="Secondary" severity="secondary" raised />
|
||||
<p-button label="Success" severity="success" raised />
|
||||
<p-button label="Info" severity="info" raised />
|
||||
<p-button label="Warn" severity="warn" raised />
|
||||
<p-button label="Help" severity="help" raised />
|
||||
<p-button label="Danger" severity="danger" raised />
|
||||
<p-button label="Contrast" severity="contrast" raised />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Primary" rounded />
|
||||
<p-button label="Secondary" severity="secondary" rounded />
|
||||
<p-button label="Success" severity="success" rounded />
|
||||
<p-button label="Info" severity="info" rounded />
|
||||
<p-button label="Warn" severity="warn" rounded />
|
||||
<p-button label="Help" severity="help" rounded />
|
||||
<p-button label="Danger" severity="danger" rounded />
|
||||
<p-button label="Contrast" severity="contrast" rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded Icons</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-check" rounded />
|
||||
<p-button icon="pi pi-bookmark" severity="secondary" rounded />
|
||||
<p-button icon="pi pi-search" severity="success" rounded />
|
||||
<p-button icon="pi pi-user" severity="info" rounded />
|
||||
<p-button icon="pi pi-bell" severity="warn" rounded />
|
||||
<p-button icon="pi pi-heart" severity="help" rounded />
|
||||
<p-button icon="pi pi-times" severity="danger" rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded Text</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-check" text raised rounded />
|
||||
<p-button icon="pi pi-bookmark" severity="secondary" text raised rounded />
|
||||
<p-button icon="pi pi-search" severity="success" text raised rounded />
|
||||
<p-button icon="pi pi-user" severity="info" text raised rounded />
|
||||
<p-button icon="pi pi-bell" severity="warn" text raised rounded />
|
||||
<p-button icon="pi pi-heart" severity="help" text raised rounded />
|
||||
<p-button icon="pi pi-times" severity="danger" text raised rounded />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Rounded Outlined</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button icon="pi pi-check" rounded outlined />
|
||||
<p-button icon="pi pi-bookmark" severity="secondary" rounded outlined />
|
||||
<p-button icon="pi pi-search" severity="success" rounded outlined />
|
||||
<p-button icon="pi pi-user" severity="info" rounded outlined />
|
||||
<p-button icon="pi pi-bell" severity="warn" rounded outlined />
|
||||
<p-button icon="pi pi-heart" severity="help" rounded outlined />
|
||||
<p-button icon="pi pi-times" severity="danger" rounded outlined />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Loading</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button type="button" label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" />
|
||||
<p-button type="button" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
|
||||
<p-button type="button" styleClass="h-full" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
|
||||
<p-button type="button" label="Search" [loading]="loading[3]" (click)="load(3)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> `
|
||||
})
|
||||
export class ButtonDemo implements OnInit {
|
||||
items: MenuItem[] = [];
|
||||
|
||||
items: MenuItem[] = [];
|
||||
loading = [false, false, false, false];
|
||||
|
||||
loading = [false, false, false, false];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{ label: 'Update', icon: 'pi pi-refresh' },
|
||||
{ label: 'Delete', icon: 'pi pi-times' },
|
||||
{ label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' },
|
||||
{ separator: true },
|
||||
{ label: 'Setup', icon: 'pi pi-cog' }
|
||||
];
|
||||
}
|
||||
|
||||
load(index: number) {
|
||||
this.loading[index] = true;
|
||||
setTimeout(() => this.loading[index] = false, 1000);
|
||||
}
|
||||
ngOnInit() {
|
||||
this.items = [{ label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' }, { label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' }, { separator: true }, { label: 'Setup', icon: 'pi pi-cog' }];
|
||||
}
|
||||
|
||||
load(index: number) {
|
||||
this.loading[index] = true;
|
||||
setTimeout(() => (this.loading[index] = false), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,54 +7,50 @@ import { LayoutService } from '../../layout/service/layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-demo',
|
||||
standalone:true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ChartModule,
|
||||
FluidModule
|
||||
],
|
||||
template: ` <p-fluid class="grid grid-cols-12 gap-8">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Linear</div>
|
||||
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
|
||||
standalone: true,
|
||||
imports: [CommonModule, ChartModule, FluidModule],
|
||||
template: `
|
||||
<p-fluid class="grid grid-cols-12 gap-8">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Linear</div>
|
||||
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Bar</div>
|
||||
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Bar</div>
|
||||
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Pie</div>
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Pie</div>
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Doughnut</div>
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Doughnut</div>
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Polar Area</div>
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Polar Area</div>
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Radar</div>
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<div class="font-semibold text-xl mb-4">Radar</div>
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p-fluid>
|
||||
`,
|
||||
</p-fluid>
|
||||
`
|
||||
})
|
||||
export class ChartDemo {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
@@ -77,11 +73,9 @@ export class ChartDemo {
|
||||
|
||||
subscription: Subscription;
|
||||
constructor(private layoutService: LayoutService) {
|
||||
this.subscription = this.layoutService.configUpdate$
|
||||
.pipe(debounceTime(25))
|
||||
.subscribe(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -141,7 +135,7 @@ export class ChartDemo {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -150,17 +144,10 @@ export class ChartDemo {
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [
|
||||
documentStyle.getPropertyValue('--p-indigo-500'),
|
||||
documentStyle.getPropertyValue('--p-purple-500'),
|
||||
documentStyle.getPropertyValue('--p-teal-500')
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
documentStyle.getPropertyValue('--p-purple-400'),
|
||||
documentStyle.getPropertyValue('--p-teal-400')
|
||||
]
|
||||
}]
|
||||
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
@@ -183,7 +170,7 @@ export class ChartDemo {
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
tension: .4
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
@@ -191,7 +178,7 @@ export class ChartDemo {
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
tension: .4
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -222,32 +209,19 @@ export class ChartDemo {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarData = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
3
|
||||
],
|
||||
backgroundColor: [
|
||||
documentStyle.getPropertyValue('--p-indigo-500'),
|
||||
documentStyle.getPropertyValue('--p-purple-500'),
|
||||
documentStyle.getPropertyValue('--p-teal-500'),
|
||||
documentStyle.getPropertyValue('--p-orange-500')
|
||||
],
|
||||
label: 'My dataset'
|
||||
}],
|
||||
labels: [
|
||||
'Indigo',
|
||||
'Purple',
|
||||
'Teal',
|
||||
'Orange'
|
||||
]
|
||||
datasets: [
|
||||
{
|
||||
data: [11, 16, 7, 3],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
|
||||
label: 'My dataset'
|
||||
}
|
||||
],
|
||||
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
@@ -314,5 +288,4 @@ export class ChartDemo {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -7,8 +7,8 @@ import { ToastModule } from 'primeng/toast';
|
||||
|
||||
@Component({
|
||||
selector: 'app-file-demo',
|
||||
standalone:true,
|
||||
imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule],
|
||||
standalone: true,
|
||||
imports: [CommonModule, FileUploadModule, ToastModule, ButtonModule],
|
||||
template: `<div class="grid grid-cols-12 gap-8">
|
||||
<div class="col-span-full lg:col-span-6">
|
||||
<div class="card">
|
||||
@@ -39,7 +39,6 @@ import { ToastModule } from 'primeng/toast';
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileDemo {
|
||||
|
||||
uploadedFiles: any[] = [];
|
||||
|
||||
constructor(private messageService: MessageService) {}
|
||||
@@ -55,5 +54,4 @@ export class FileDemo {
|
||||
onBasicUpload() {
|
||||
this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {FluidModule} from "primeng/fluid";
|
||||
import {InputTextModule} from "primeng/inputtext";
|
||||
import {ButtonModule} from "primeng/button";
|
||||
import {SelectModule} from "primeng/select";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {TextareaModule} from "primeng/textarea";
|
||||
import { FluidModule } from 'primeng/fluid';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { SelectModule } from 'primeng/select';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TextareaModule } from 'primeng/textarea';
|
||||
|
||||
@Component({
|
||||
selector: 'app-formlayout-demo',
|
||||
standalone: true,
|
||||
imports: [InputTextModule, FluidModule, ButtonModule, SelectModule, FormsModule, TextareaModule],
|
||||
template:`<p-fluid>
|
||||
template: `<p-fluid>
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
@@ -116,7 +116,7 @@ import {TextareaModule} from "primeng/textarea";
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p-fluid>`,
|
||||
</p-fluid>`
|
||||
})
|
||||
export class FormLayoutDemo {
|
||||
dropdownItems = [
|
||||
@@ -126,5 +126,4 @@ export class FormLayoutDemo {
|
||||
];
|
||||
|
||||
dropdownItem = null;
|
||||
|
||||
}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {InputTextModule} from "primeng/inputtext";
|
||||
import {ButtonModule} from "primeng/button";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {CheckboxModule} from "primeng/checkbox";
|
||||
import {RadioButtonModule} from "primeng/radiobutton";
|
||||
import {SelectButtonModule} from "primeng/selectbutton";
|
||||
import {InputGroupModule} from "primeng/inputgroup";
|
||||
import {FluidModule} from "primeng/fluid";
|
||||
import {IconFieldModule} from "primeng/iconfield";
|
||||
import {InputIconModule} from "primeng/inputicon";
|
||||
import {FloatLabelModule} from "primeng/floatlabel";
|
||||
import {AutoCompleteModule} from "primeng/autocomplete";
|
||||
import {InputNumberModule} from "primeng/inputnumber";
|
||||
import {SliderModule} from "primeng/slider";
|
||||
import {RatingModule} from "primeng/rating";
|
||||
import {ColorPickerModule} from "primeng/colorpicker";
|
||||
import {KnobModule} from "primeng/knob";
|
||||
import {SelectModule} from "primeng/select";
|
||||
import {DatePickerModule} from "primeng/datepicker";
|
||||
import {ToggleSwitchModule} from "primeng/toggleswitch";
|
||||
import {TreeSelectModule} from "primeng/treeselect";
|
||||
import {MultiSelectModule} from "primeng/multiselect";
|
||||
import {ListboxModule} from "primeng/listbox";
|
||||
import {InputGroupAddonModule} from "primeng/inputgroupaddon";
|
||||
import {TextareaModule} from "primeng/textarea";
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { InputGroupModule } from 'primeng/inputgroup';
|
||||
import { FluidModule } from 'primeng/fluid';
|
||||
import { IconFieldModule } from 'primeng/iconfield';
|
||||
import { InputIconModule } from 'primeng/inputicon';
|
||||
import { FloatLabelModule } from 'primeng/floatlabel';
|
||||
import { AutoCompleteModule } from 'primeng/autocomplete';
|
||||
import { InputNumberModule } from 'primeng/inputnumber';
|
||||
import { SliderModule } from 'primeng/slider';
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { ColorPickerModule } from 'primeng/colorpicker';
|
||||
import { KnobModule } from 'primeng/knob';
|
||||
import { SelectModule } from 'primeng/select';
|
||||
import { DatePickerModule } from 'primeng/datepicker';
|
||||
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
||||
import { TreeSelectModule } from 'primeng/treeselect';
|
||||
import { MultiSelectModule } from 'primeng/multiselect';
|
||||
import { ListboxModule } from 'primeng/listbox';
|
||||
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
|
||||
import { TextareaModule } from 'primeng/textarea';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { CountryService } from '../service/country.service';
|
||||
import { NodeService } from '../service/node.service';
|
||||
@@ -62,30 +62,29 @@ import { TreeNode } from 'primeng/api';
|
||||
InputGroupAddonModule,
|
||||
TextareaModule
|
||||
],
|
||||
template: `
|
||||
<p-fluid class="flex flex-col md:flex-row gap-8">
|
||||
template: ` <p-fluid class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">InputText</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<input pInputText type="text" placeholder="Default"/>
|
||||
<input pInputText type="text" placeholder="Disabled" [disabled]="true"/>
|
||||
<input pInputText type="text" placeholder="Invalid" class="ng-dirty ng-invalid"/>
|
||||
<input pInputText type="text" placeholder="Default" />
|
||||
<input pInputText type="text" placeholder="Disabled" [disabled]="true" />
|
||||
<input pInputText type="text" placeholder="Invalid" class="ng-dirty ng-invalid" />
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">Icons</div>
|
||||
<p-iconfield>
|
||||
<p-inputicon class="pi pi-user"/>
|
||||
<input pInputText type="text" placeholder="Username"/>
|
||||
<p-inputicon class="pi pi-user" />
|
||||
<input pInputText type="text" placeholder="Username" />
|
||||
</p-iconfield>
|
||||
<p-iconfield iconPosition="left">
|
||||
<input pInputText type="text" placeholder="Search"/>
|
||||
<p-inputicon class="pi pi-search"/>
|
||||
<input pInputText type="text" placeholder="Search" />
|
||||
<p-inputicon class="pi pi-search" />
|
||||
</p-iconfield>
|
||||
|
||||
<div class="font-semibold text-xl">Float Label</div>
|
||||
<p-floatlabel>
|
||||
<input pInputText id="username" type="text" [(ngModel)]="floatValue"/>
|
||||
<input pInputText id="username" type="text" [(ngModel)]="floatValue" />
|
||||
<label for="username">Username</label>
|
||||
</p-floatlabel>
|
||||
|
||||
@@ -93,9 +92,7 @@ import { TreeNode } from 'primeng/api';
|
||||
<textarea pTextarea placeholder="Your Message" [autoResize]="true" rows="3" cols="30"></textarea>
|
||||
|
||||
<div class="font-semibold text-xl">AutoComplete</div>
|
||||
<p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name"
|
||||
placeholder="Search" dropdown multiple display="chip"
|
||||
(completeMethod)="searchCountry($event)"/>
|
||||
<p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name" placeholder="Search" dropdown multiple display="chip" (completeMethod)="searchCountry($event)" />
|
||||
|
||||
<div class="font-semibold text-xl">DatePicker</div>
|
||||
<p-datepicker [showIcon]="true" [showButtonBar]="true" [(ngModel)]="calendarValue"></p-datepicker>
|
||||
@@ -104,41 +101,40 @@ import { TreeNode } from 'primeng/api';
|
||||
<p-inputnumber [(ngModel)]="inputNumberValue" showButtons mode="decimal"></p-inputnumber>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Slider</div>
|
||||
<input pInputText [(ngModel)]="sliderValue" type="number"/>
|
||||
<p-slider [(ngModel)]="sliderValue"/>
|
||||
<input pInputText [(ngModel)]="sliderValue" type="number" />
|
||||
<p-slider [(ngModel)]="sliderValue" />
|
||||
|
||||
<div class="flex flex-row mt-6">
|
||||
|
||||
<div class="flex flex-col gap-4 w-1/2">
|
||||
<div class="font-semibold text-xl">Rating</div>
|
||||
<p-rating [(ngModel)]="ratingValue"/>
|
||||
<p-rating [(ngModel)]="ratingValue" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 w-1/2">
|
||||
<div class="font-semibold text-xl">ColorPicker</div>
|
||||
<p-colorpicker [style]="{width: '2rem'}" [(ngModel)]="colorValue"/>
|
||||
<p-colorpicker [style]="{ width: '2rem' }" [(ngModel)]="colorValue" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">Knob</div>
|
||||
<p-knob [(ngModel)]="knobValue" [step]="10" [min]="-50" [max]="50" valueTemplate="{value}%"/>
|
||||
<p-knob [(ngModel)]="knobValue" [step]="10" [min]="-50" [max]="50" valueTemplate="{value}%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">RadioButton</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex items-center">
|
||||
<p-radiobutton id="option1" name="option" value="Chicago" [(ngModel)]="radioValue"/>
|
||||
<p-radiobutton id="option1" name="option" value="Chicago" [(ngModel)]="radioValue" />
|
||||
<label for="option1" class="leading-none ml-2">Chicago</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-radiobutton id="option2" name="option" value="Los Angeles" [(ngModel)]="radioValue"/>
|
||||
<p-radiobutton id="option2" name="option" value="Los Angeles" [(ngModel)]="radioValue" />
|
||||
<label for="option2" class="leading-none ml-2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-radiobutton id="option3" name="option" value="New York" [(ngModel)]="radioValue"/>
|
||||
<p-radiobutton id="option3" name="option" value="New York" [(ngModel)]="radioValue" />
|
||||
<label for="option3" class="leading-none ml-2">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,31 +142,29 @@ import { TreeNode } from 'primeng/api';
|
||||
<div class="font-semibold text-xl">Checkbox</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex items-center">
|
||||
<p-checkbox id="checkOption1" name="option" value="Chicago" [(ngModel)]="checkboxValue"/>
|
||||
<p-checkbox id="checkOption1" name="option" value="Chicago" [(ngModel)]="checkboxValue" />
|
||||
<label for="checkOption1" class="ml-2">Chicago</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-checkbox id="checkOption2" name="option" value="Los Angeles"
|
||||
[(ngModel)]="checkboxValue"/>
|
||||
<p-checkbox id="checkOption2" name="option" value="Los Angeles" [(ngModel)]="checkboxValue" />
|
||||
<label for="checkOption2" class="ml-2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-checkbox id="checkOption3" name="option" value="New York" [(ngModel)]="checkboxValue"/>
|
||||
<p-checkbox id="checkOption3" name="option" value="New York" [(ngModel)]="checkboxValue" />
|
||||
<label for="checkOption3" class="ml-2">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">ToggleSwitch</div>
|
||||
<p-toggleswitch [(ngModel)]="switchValue"/>
|
||||
<p-toggleswitch [(ngModel)]="switchValue" />
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Listbox</div>
|
||||
<p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true"/>
|
||||
<p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true" />
|
||||
|
||||
<div class="font-semibold text-xl">Select</div>
|
||||
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name"
|
||||
placeholder="Select"/>
|
||||
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name" placeholder="Select" />
|
||||
|
||||
<div class="font-semibold text-xl">MultiSelect</div>
|
||||
<p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true">
|
||||
@@ -194,12 +188,12 @@ import { TreeNode } from 'primeng/api';
|
||||
<p-treeselect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeselect>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">ToggleButton</div>
|
||||
<p-togglebutton [(ngModel)]="toggleValue" onLabel="Yes" offLabel="No" [style]="{ width: '10em' }"/>
|
||||
<p-togglebutton [(ngModel)]="toggleValue" onLabel="Yes" offLabel="No" [style]="{ width: '10em' }" />
|
||||
|
||||
<div class="font-semibold text-xl">SelectButton</div>
|
||||
<p-selectbutton [(ngModel)]="selectButtonValue" [options]="selectButtonValues" optionLabel="name"/>
|
||||
<p-selectbutton [(ngModel)]="selectButtonValue" [options]="selectButtonValues" optionLabel="name" />
|
||||
</div>
|
||||
</div>
|
||||
</p-fluid>
|
||||
@@ -212,7 +206,7 @@ import { TreeNode } from 'primeng/api';
|
||||
<p-inputgroup-addon>
|
||||
<i class="pi pi-user"></i>
|
||||
</p-inputgroup-addon>
|
||||
<input pInputText placeholder="Username"/>
|
||||
<input pInputText placeholder="Username" />
|
||||
</p-inputgroup>
|
||||
<p-inputgroup>
|
||||
<p-inputgroup-addon>
|
||||
@@ -221,21 +215,21 @@ import { TreeNode } from 'primeng/api';
|
||||
<p-inputgroup-addon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</p-inputgroup-addon>
|
||||
<p-inputnumber placeholder="Price"/>
|
||||
<p-inputnumber placeholder="Price" />
|
||||
<p-inputgroup-addon>$</p-inputgroup-addon>
|
||||
<p-inputgroup-addon>.00</p-inputgroup-addon>
|
||||
</p-inputgroup>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<p-inputgroup>
|
||||
<p-button label="Search"/>
|
||||
<input pInputText placeholder="Keyword"/>
|
||||
<p-button label="Search" />
|
||||
<input pInputText placeholder="Keyword" />
|
||||
</p-inputgroup>
|
||||
<p-inputgroup>
|
||||
<p-inputgroup-addon>
|
||||
<p-checkbox [(ngModel)]="inputGroupValue" [binary]="true"/>
|
||||
<p-checkbox [(ngModel)]="inputGroupValue" [binary]="true" />
|
||||
</p-inputgroup-addon>
|
||||
<input pInputText placeholder="Confirm"/>
|
||||
<input pInputText placeholder="Confirm" />
|
||||
</p-inputgroup>
|
||||
</div>
|
||||
</div>
|
||||
@@ -304,7 +298,7 @@ export class InputDemo implements OnInit {
|
||||
|
||||
toggleValue: boolean = false;
|
||||
|
||||
selectButtonValue: any = null
|
||||
selectButtonValue: any = null;
|
||||
|
||||
selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }];
|
||||
|
||||
@@ -321,7 +315,7 @@ export class InputDemo implements OnInit {
|
||||
nodeService = inject(NodeService);
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countryService.getCountries().then((countries) => {
|
||||
this.autoValue = countries;
|
||||
});
|
||||
|
||||
|
||||
@@ -10,8 +10,8 @@ import { FormsModule } from '@angular/forms';
|
||||
@Component({
|
||||
selector: 'app-messages-demo',
|
||||
standalone: true,
|
||||
imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule],
|
||||
template:`
|
||||
imports: [CommonModule, ToastModule, ButtonModule, InputTextModule, MessageModule, FormsModule],
|
||||
template: `
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
@@ -25,7 +25,7 @@ import { FormsModule } from '@angular/forms';
|
||||
|
||||
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
|
||||
<div class="flex flex-wrap mb-4 gap-2">
|
||||
<input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid"/>
|
||||
<input pInputText [(ngModel)]="username" placeholder="Username" aria-label="username" class="ng-dirty ng-invalid" />
|
||||
<p-message severity="error">Username is required</p-message>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@@ -52,14 +52,13 @@ import { FormsModule } from '@angular/forms';
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesDemo {
|
||||
|
||||
msgs: ToastMessageOptions[] | null = [];
|
||||
|
||||
username: string | undefined
|
||||
username: string | undefined;
|
||||
|
||||
email: string | undefined
|
||||
email: string | undefined;
|
||||
|
||||
constructor(private service: MessageService) { }
|
||||
constructor(private service: MessageService) {}
|
||||
|
||||
showInfoViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
|
||||
@@ -96,5 +95,4 @@ export class MessagesDemo {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ import { InputIconModule } from 'primeng/inputicon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-panels-demo',
|
||||
standalone:true,
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
@@ -39,185 +39,181 @@ import { InputIconModule } from 'primeng/inputicon';
|
||||
InputIconModule
|
||||
],
|
||||
template: `
|
||||
<div class="flex flex-col">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Toolbar</div>
|
||||
<p-toolbar>
|
||||
<ng-template #start>
|
||||
<p-button icon="pi pi-plus" class="mr-2" severity="secondary" text />
|
||||
<p-button icon="pi pi-print" class="mr-2" severity="secondary" text />
|
||||
<p-button icon="pi pi-upload" severity="secondary" text />
|
||||
</ng-template>
|
||||
<div class="flex flex-col">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Toolbar</div>
|
||||
<p-toolbar>
|
||||
<ng-template #start>
|
||||
<p-button icon="pi pi-plus" class="mr-2" severity="secondary" text />
|
||||
<p-button icon="pi pi-print" class="mr-2" severity="secondary" text />
|
||||
<p-button icon="pi pi-upload" severity="secondary" text />
|
||||
</ng-template>
|
||||
|
||||
<ng-template #center>
|
||||
<p-iconfield>
|
||||
<p-inputicon>
|
||||
<i class="pi pi-search" ></i>
|
||||
</p-inputicon>
|
||||
<input pInputText placeholder="Search" />
|
||||
</p-iconfield>
|
||||
</ng-template>
|
||||
<ng-template #center>
|
||||
<p-iconfield>
|
||||
<p-inputicon>
|
||||
<i class="pi pi-search"></i>
|
||||
</p-inputicon>
|
||||
<input pInputText placeholder="Search" />
|
||||
</p-iconfield>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #end><p-splitbutton label="Save" [model]="items"></p-splitbutton></ng-template>
|
||||
</p-toolbar>
|
||||
</div>
|
||||
<ng-template #end><p-splitbutton label="Save" [model]="items"></p-splitbutton></ng-template>
|
||||
</p-toolbar>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Accordion</div>
|
||||
<p-accordion value="0">
|
||||
<p-accordion-panel value="0">
|
||||
<p-accordion-header>Header I</p-accordion-header>
|
||||
<p-accordion-content>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</p-accordion-content>
|
||||
</p-accordion-panel>
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Accordion</div>
|
||||
<p-accordion value="0">
|
||||
<p-accordion-panel value="0">
|
||||
<p-accordion-header>Header I</p-accordion-header>
|
||||
<p-accordion-content>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
</p-accordion-content>
|
||||
</p-accordion-panel>
|
||||
|
||||
<p-accordion-panel value="1">
|
||||
<p-accordion-header>Header II</p-accordion-header>
|
||||
<p-accordion-content>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</p-accordion-content>
|
||||
</p-accordion-panel>
|
||||
<p-accordion-panel value="1">
|
||||
<p-accordion-header>Header II</p-accordion-header>
|
||||
<p-accordion-content>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
|
||||
numquam eius modi.
|
||||
</p>
|
||||
</p-accordion-content>
|
||||
</p-accordion-panel>
|
||||
|
||||
<p-accordion-panel value="2">
|
||||
<p-accordion-header>Header III</p-accordion-header>
|
||||
<p-accordion-content>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</p-accordion-content>
|
||||
</p-accordion-panel>
|
||||
</p-accordion>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Tabs</div>
|
||||
<p-tabs value="0">
|
||||
<p-tablist>
|
||||
<p-tab value="0">Header I</p-tab>
|
||||
<p-tab value="1">Header II</p-tab>
|
||||
<p-tab value="2">Header III</p-tab>
|
||||
</p-tablist>
|
||||
<p-tabpanels>
|
||||
<p-tabpanel value="0">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p>
|
||||
</p-tabpanel>
|
||||
<p-tabpanel value="1">
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</p-tabpanel>
|
||||
<p-tabpanel value="2">
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
|
||||
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</p-tabpanel>
|
||||
</p-tabpanels>
|
||||
</p-tabs>
|
||||
</div>
|
||||
<p-accordion-panel value="2">
|
||||
<p-accordion-header>Header III</p-accordion-header>
|
||||
<p-accordion-content>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
|
||||
numquam eius modi.
|
||||
</p>
|
||||
</p-accordion-content>
|
||||
</p-accordion-panel>
|
||||
</p-accordion>
|
||||
</div>
|
||||
<div class="md:w-1/2 mt-6 md:mt-0">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Panel</div>
|
||||
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-panel>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Fieldset</div>
|
||||
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-fieldset>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Tabs</div>
|
||||
<p-tabs value="0">
|
||||
<p-tablist>
|
||||
<p-tab value="0">Header I</p-tab>
|
||||
<p-tab value="1">Header II</p-tab>
|
||||
<p-tab value="2">Header III</p-tab>
|
||||
</p-tablist>
|
||||
<p-tabpanels>
|
||||
<p-tabpanel value="0">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
|
||||
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
</p-tabpanel>
|
||||
<p-tabpanel value="1">
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
|
||||
numquam eius modi.
|
||||
</p>
|
||||
</p-tabpanel>
|
||||
<p-tabpanel value="2">
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
|
||||
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
|
||||
cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</p-tabpanel>
|
||||
</p-tabpanels>
|
||||
</p-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-8">
|
||||
<div class="font-semibold text-xl mb-4">Divider</div>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="username">Username</label>
|
||||
<input pInputText id="username" type="text"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="password">Password</label>
|
||||
<input pInputText id="password" type="password"/>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p-button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-2/12">
|
||||
<p-divider layout="vertical" class="!hidden md:!flex"><b>OR</b></p-divider>
|
||||
<p-divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></p-divider>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||
<p-button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full" styleClass="w-full max-w-[17.35rem] mx-auto"></p-button>
|
||||
</div>
|
||||
<div class="md:w-1/2 mt-6 md:mt-0">
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Panel</div>
|
||||
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-panel>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Fieldset</div>
|
||||
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Splitter</div>
|
||||
<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-8">
|
||||
<ng-template #panel>
|
||||
<div class="col flex items-center justify-center">Panel 1</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<p-splitter layout="vertical" [panelSizes]="[50, 50]">
|
||||
<ng-template #panel>
|
||||
<div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<p-splitter [panelSizes]="[20, 80]">
|
||||
<ng-template #panel>
|
||||
<div class="col flex items-center justify-center">Panel 3</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<div class="col flex items-center justify-center">Panel 4</div>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
<div class="card mt-8">
|
||||
<div class="font-semibold text-xl mb-4">Divider</div>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="username">Username</label>
|
||||
<input pInputText id="username" type="text" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="password">Password</label>
|
||||
<input pInputText id="password" type="password" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<p-button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-2/12">
|
||||
<p-divider layout="vertical" class="!hidden md:!flex"><b>OR</b></p-divider>
|
||||
<p-divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></p-divider>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||
<p-button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full" styleClass="w-full max-w-[17.35rem] mx-auto"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-xl mb-4">Splitter</div>
|
||||
<p-splitter [style]="{ height: '300px' }" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-8">
|
||||
<ng-template #panel>
|
||||
<div class="col flex items-center justify-center">Panel 1</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<p-splitter layout="vertical" [panelSizes]="[50, 50]">
|
||||
<ng-template #panel>
|
||||
<div style="flex-grow: 1;" class="flex items-center justify-center">Panel 2</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<p-splitter [panelSizes]="[20, 80]">
|
||||
<ng-template #panel>
|
||||
<div class="col flex items-center justify-center">Panel 3</div>
|
||||
</ng-template>
|
||||
<ng-template #panel>
|
||||
<div class="col flex items-center justify-center">Panel 4</div>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PanelsDemo {
|
||||
items: MenuItem[] = [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-check'
|
||||
label: 'Save',
|
||||
icon: 'pi pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
@@ -232,5 +228,4 @@ export class PanelsDemo {
|
||||
icon: 'pi pi-home'
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import { TreeNode} from 'primeng/api';
|
||||
import {TreeModule} from "primeng/tree";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {TreeTableModule} from "primeng/treetable";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { TreeNode } from 'primeng/api';
|
||||
import { TreeModule } from 'primeng/tree';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TreeTableModule } from 'primeng/treetable';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NodeService } from '../service/node.service';
|
||||
|
||||
@Component({
|
||||
@@ -51,11 +51,11 @@ export class TreeDemo implements OnInit {
|
||||
|
||||
cols: any[] = [];
|
||||
|
||||
nodeService = inject(NodeService)
|
||||
nodeService = inject(NodeService);
|
||||
|
||||
ngOnInit() {
|
||||
this.nodeService.getFiles().then(files => this.treeValue = files);
|
||||
this.nodeService.getFilesystem().then(files => this.treeTableValue = files);
|
||||
this.nodeService.getFiles().then((files) => (this.treeValue = files));
|
||||
this.nodeService.getFilesystem().then((files) => (this.treeTableValue = files));
|
||||
|
||||
this.cols = [
|
||||
{ field: 'name', header: 'Name' },
|
||||
|
||||
@@ -16,7 +16,7 @@ import { TreeDemo } from './treedemo';
|
||||
import { MenuDemo } from './menudemo';
|
||||
|
||||
export default [
|
||||
{ path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo},
|
||||
{ path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo },
|
||||
{ path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDemo },
|
||||
{ path: 'file', data: { breadcrumb: 'File' }, component: FileDemo },
|
||||
{ path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDemo },
|
||||
|
||||
Reference in New Issue
Block a user