+
+
+
+
+
Component Scale
+
+
+
+
Input Style
+
+
+
Ripple Effect
+
+
+
Menu Type
+
+
+
+
\ No newline at end of file
diff --git a/src/app/app.config.component.ts b/src/app/app.config.component.ts
new file mode 100644
index 0000000..e3299fa
--- /dev/null
+++ b/src/app/app.config.component.ts
@@ -0,0 +1,81 @@
+import {Component, OnInit} from '@angular/core';
+import {AppComponent} from './app.component';
+import {AppMainComponent} from './app.main.component';
+
+@Component({
+ selector: 'app-config',
+ templateUrl:'./app.config.component.html'
+})
+export class AppConfigComponent implements OnInit{
+
+ topbarThemes: any[];
+
+ componentThemes: any[];
+
+ topbarColor = 'light';
+
+ componentColor = 'blue';
+
+ scale:number = 14;
+
+ scales:any[] = [12,13,14,15,16];
+
+ constructor(public app: AppComponent, public appMain: AppMainComponent) {}
+
+ ngOnInit() { }
+ // TODO: TO BE REMOVED
+ // changeComponentTheme(theme) {
+ // this.componentColor = theme;
+ // const element = document.getElementById('theme-css');
+ // const urlTokens = element.getAttribute('href').split('/');
+ // urlTokens[urlTokens.length - 1] = 'theme-' + theme + '.css';
+ // const newURL = urlTokens.join('/');
+
+ // this.replaceLink(element, newURL);
+ // }
+ // TODO: TO BE REMOVED (MAYBE)
+ replaceLink(linkElement, href) {
+ if (this.isIE()) {
+ linkElement.setAttribute('href', href);
+ }
+ else {
+ const id = linkElement.getAttribute('id');
+ const cloneLinkElement = linkElement.cloneNode(true);
+
+ cloneLinkElement.setAttribute('href', href);
+ cloneLinkElement.setAttribute('id', id + '-clone');
+
+ linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+ cloneLinkElement.addEventListener('load', () => {
+ linkElement.remove();
+ cloneLinkElement.setAttribute('id', id);
+ });
+ }
+ }
+
+ isIE() {
+ return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
+ }
+
+ onConfigButtonClick(event) {
+ this.appMain.configActive = !this.appMain.configActive;
+ this.appMain.configClick = true;
+ event.preventDefault();
+ }
+
+ incrementScale(){
+ this.scale++;
+ this.applyScale();
+ }
+
+ decrementScale(){
+ this.scale--;
+ this.applyScale();
+ }
+
+ applyScale(){
+ document.documentElement.style.fontSize = this.scale + 'px';
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/app.footer.component.html b/src/app/app.footer.component.html
new file mode 100644
index 0000000..34d29da
--- /dev/null
+++ b/src/app/app.footer.component.html
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/app/app.footer.component.ts b/src/app/app.footer.component.ts
new file mode 100644
index 0000000..5f8246e
--- /dev/null
+++ b/src/app/app.footer.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {AppComponent} from './app.component';
+
+@Component({
+ selector: 'app-footer',
+ templateUrl: './app.footer.component.html'
+})
+export class AppFooterComponent{
+ constructor(public app: AppComponent) {}
+}
diff --git a/src/app/app.main.component.html b/src/app/app.main.component.html
new file mode 100644
index 0000000..91ba382
--- /dev/null
+++ b/src/app/app.main.component.html
@@ -0,0 +1,21 @@
+
diff --git a/src/app/app.main.component.ts b/src/app/app.main.component.ts
new file mode 100644
index 0000000..c88712b
--- /dev/null
+++ b/src/app/app.main.component.ts
@@ -0,0 +1,173 @@
+import {Component, AfterViewInit, OnDestroy, ViewChild, Renderer2, OnInit} from '@angular/core';
+import {trigger, state, style, transition, animate} from '@angular/animations';
+import { PrimeNGConfig } from 'primeng/api';
+import { AppComponent } from './app.component';
+
+@Component({
+ selector: 'app-main',
+ templateUrl: './app.main.component.html',
+ animations: [
+ trigger('submenu', [
+ state('hidden', style({
+ height: '0px'
+ })),
+ state('visible', style({
+ height: '*'
+ })),
+ transition('visible => hidden', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+ transition('hidden => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+ ])
+ ]
+})
+export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit {
+
+ public menuInactiveDesktop: boolean;
+
+ public menuActiveMobile: boolean;
+
+ public overlayMenuActive: boolean;
+
+ public staticMenuInactive: boolean = false;
+
+ public profileActive: boolean;
+
+ public topMenuActive: boolean;
+
+ public topMenuLeaving: boolean;
+
+ public theme: string;
+
+ documentClickListener: () => void;
+
+ menuClick: boolean;
+
+ topMenuButtonClick: boolean;
+
+ configActive: boolean;
+
+ configClick: boolean;
+
+ constructor(public renderer: Renderer2, private primengConfig: PrimeNGConfig, public app: AppComponent) {}
+
+ ngOnInit() {
+ this.primengConfig.ripple = true;
+ }
+
+ ngAfterViewInit() {
+ // hides the overlay menu and top menu if outside is clicked
+ this.documentClickListener = this.renderer.listen('body', 'click', (event) => {
+ if (!this.isDesktop()) {
+ if (!this.menuClick) {
+ this.menuActiveMobile = false;
+ }
+
+ if (!this.topMenuButtonClick) {
+ this.hideTopMenu();
+ }
+ }
+ else {
+ if (!this.menuClick && this.isOverlay()) {
+ this.menuInactiveDesktop = true;
+ }
+ }
+
+ if (this.configActive && !this.configClick) {
+ this.configActive = false;
+ }
+
+ this.configClick = false;
+ this.menuClick = false;
+ this.topMenuButtonClick = false;
+ });
+ }
+
+ toggleMenu(event: Event) {
+ this.menuClick = true;
+
+ if (this.isDesktop()) {
+ if (this.app.menuMode === 'overlay') {
+ if(this.menuActiveMobile === true) {
+ this.overlayMenuActive = true;
+ }
+
+ this.overlayMenuActive = !this.overlayMenuActive;
+ this.menuActiveMobile = false;
+ }
+ else if (this.app.menuMode === 'static') {
+ this.staticMenuInactive = !this.staticMenuInactive;
+ }
+ }
+ else {
+ this.menuActiveMobile = !this.menuActiveMobile;
+ }
+
+ event.preventDefault();
+ }
+
+ toggleProfile(event: Event) {
+ this.profileActive = !this.profileActive;
+ event.preventDefault();
+ }
+
+ toggleTopMenu(event: Event) {
+ this.topMenuButtonClick = true;
+ this.menuActiveMobile = false;
+
+ if (this.topMenuActive) {
+ this.hideTopMenu();
+ } else {
+ this.topMenuActive = true;
+ }
+
+ event.preventDefault();
+ }
+
+ hideTopMenu() {
+ this.topMenuLeaving = true;
+ setTimeout(() => {
+ this.topMenuActive = false;
+ this.topMenuLeaving = false;
+ }, 500);
+ }
+
+ onMenuClick() {
+ this.menuClick = true;
+ }
+
+ onRippleChange(event) {
+ this.app.ripple = event.checked;
+ this.primengConfig.ripple = event.checked;
+ }
+
+ onConfigClick(event) {
+ this.configClick = true;
+ }
+
+ isStatic() {
+ return this.app.menuMode === 'static';
+ }
+
+ isOverlay() {
+ return this.app.menuMode === 'overlay';
+ }
+
+ isDesktop() {
+ return window.innerWidth > 1024;
+ }
+
+ onSearchClick() {
+ this.topMenuButtonClick = true;
+ }
+
+ ngOnDestroy() {
+ if (this.documentClickListener) {
+ this.documentClickListener();
+ }
+ }
+
+ toggleTheme(theme:string, darkMode:boolean){
+ let themeElement = document.getElementById('theme-css');
+ themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css');
+ this.app.darkMode = darkMode;
+ }
+}
diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
new file mode 100644
index 0000000..67ee72a
--- /dev/null
+++ b/src/app/app.menu.component.ts
@@ -0,0 +1,121 @@
+import {Component, OnInit } from '@angular/core';
+import {AppComponent} from './app.component';
+
+@Component({
+ selector: 'app-menu',
+ template: `
+
+ `
+})
+export class AppMenuComponent implements OnInit {
+
+ model: any[];
+
+ constructor(public app: AppComponent){}
+
+ ngOnInit() {
+
+ this.model = [
+ {
+ label: 'Home',
+ items:[{
+ label: 'Dashboard',
+ icon: 'pi pi-fw pi-home', routerLink: ['/']
+ }]
+ },
+ {
+ label: 'UI Kit',
+ 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: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']},
+ {label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
+ {label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
+ {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: '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: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']}
+ ]
+ },
+ {
+ label: 'Pages',
+ items: [
+ {label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']},
+ {label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
+ {label: 'Empty', icon: 'pi pi-fw pi-circle-off', routerLink: ['/pages/empty']}
+ ]
+ },
+ {
+ label: 'Hierarchy',
+ items: [
+ {
+ label: 'Submenu 1', icon: 'pi pi-fw pi-align-left',
+ items: [
+ {
+ label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',
+ items: [
+ {label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left'},
+ {label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left'},
+ {label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left'},
+ ]
+ },
+ {
+ label: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left',
+ items: [
+ {label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left'}
+ ]
+ },
+ ]
+ },
+ {
+ label: 'Submenu 2', icon: 'pi pi-fw pi-align-left',
+ items: [
+ {
+ label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',
+ items: [
+ {label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left'},
+ {label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left'},
+ ]
+ },
+ {
+ label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',
+ items: [
+ {label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left'},
+ ]
+ },
+ ]
+ }
+ ]
+ },
+ {
+ label:'Get Started',
+ items:[
+ {
+ label: 'Documentation', icon: 'pi pi-fw pi-question', routerLink: ['/documentation']
+ },
+ {
+ label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-angular']
+ }
+ ]
+ }
+ ];
+ }
+}
\ No newline at end of file
diff --git a/src/app/app.menu.service.ts b/src/app/app.menu.service.ts
new file mode 100644
index 0000000..d209192
--- /dev/null
+++ b/src/app/app.menu.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class MenuService {
+
+ private menuSource = new Subject
();
+ private resetSource = new Subject();
+
+ menuSource$ = this.menuSource.asObservable();
+ resetSource$ = this.resetSource.asObservable();
+
+ onMenuStateChange(key: string) {
+ this.menuSource.next(key);
+ }
+
+ reset() {
+ // this.resetSource.next();
+ }
+}
diff --git a/src/app/app.menuitem.component.ts b/src/app/app.menuitem.component.ts
new file mode 100644
index 0000000..31db832
--- /dev/null
+++ b/src/app/app.menuitem.component.ts
@@ -0,0 +1,152 @@
+import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+import {MenuService} from './app.menu.service';
+import {AppMainComponent} from './app.main.component';
+
+@Component({
+ /* tslint:disable:component-selector */
+ selector: '[app-menuitem]',
+ /* tslint:enable:component-selector */
+ template: `
+
+
+
+ {{item.label}}
+
+
+
+
+
+ {{item.label}}
+
+
+
+
+
+ `,
+ host: {
+ '[class.active-menuitem]': 'active'
+ },
+ animations: [
+ trigger('children', [
+ state('void', style({
+ height: '0px'
+ })),
+ state('hiddenAnimated', style({
+ height: '0px'
+ })),
+ state('visibleAnimated', style({
+ height: '*'
+ })),
+ transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+ transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+ transition('void => visibleAnimated, visibleAnimated => void',
+ animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+ ])
+ ]
+})
+export class AppMenuitemComponent implements OnInit, OnDestroy {
+
+ @Input() item: any;
+
+ @Input() index: number;
+
+ @Input() root: boolean;
+
+ @Input() parentKey: string;
+
+ active = false;
+
+ menuSourceSubscription: Subscription;
+
+ menuResetSubscription: Subscription;
+
+ key: string;
+
+ constructor(public app: AppMainComponent, public router: Router, private cd: ChangeDetectorRef, private menuService: MenuService) {
+ this.menuSourceSubscription = this.menuService.menuSource$.subscribe(key => {
+ // deactivate current active menu
+ if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
+ this.active = false;
+ }
+ });
+
+ this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+ this.active = false;
+ });
+
+ this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+ .subscribe(params => {
+ if (this.item.routerLink) {
+ this.updateActiveStateFromRoute();
+ } else {
+ this.active = false;
+ }
+ });
+ }
+
+ ngOnInit() {
+ if (this.item.routerLink) {
+ this.updateActiveStateFromRoute();
+ }
+
+ this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+ }
+
+ updateActiveStateFromRoute() {
+ this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
+ }
+
+ itemClick(event: Event) {
+ event.stopPropagation();
+ // avoid processing disabled items
+ if (this.item.disabled) {
+ event.preventDefault();
+ return;
+ }
+
+ // notify other items
+ this.menuService.onMenuStateChange(this.key);
+
+ // execute command
+ if (this.item.command) {
+ this.item.command({originalEvent: event, item: this.item});
+ }
+
+ // toggle active state
+ if (this.item.items) {
+ this.active = !this.active;
+ } else {
+ // activate item
+ this.active = true;
+
+ // hide overlay menus
+ this.app.menuActiveMobile = false;
+
+ if (this.app.isDesktop() && this.app.isOverlay()) {
+ this.app.menuInactiveDesktop = true;
+ }
+ }
+ }
+
+ ngOnDestroy() {
+ if (this.menuSourceSubscription) {
+ this.menuSourceSubscription.unsubscribe();
+ }
+
+ if (this.menuResetSubscription) {
+ this.menuResetSubscription.unsubscribe();
+ }
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b1c6c96..3ad95b0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,264 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {LocationStrategy, HashLocationStrategy} from '@angular/common';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {AppRoutingModule} from './app-routing.module';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AccordionModule} from 'primeng/accordion';
+import {AutoCompleteModule} from 'primeng/autocomplete';
+import {AvatarModule} from 'primeng/avatar';
+import {AvatarGroupModule} from 'primeng/avatargroup';
+import {BadgeModule} from 'primeng/badge';
+import {BreadcrumbModule} from 'primeng/breadcrumb';
+import {ButtonModule} from 'primeng/button';
+import {CalendarModule} from 'primeng/calendar';
+import {CardModule} from 'primeng/card';
+import {CarouselModule} from 'primeng/carousel';
+import {CascadeSelectModule} from 'primeng/cascadeselect';
+import {ChartModule} from 'primeng/chart';
+import {CheckboxModule} from 'primeng/checkbox';
+import {ChipModule} from 'primeng/chip';
+import {ChipsModule} from 'primeng/chips';
+import {CodeHighlighterModule} from 'primeng/codehighlighter';
+import {ConfirmDialogModule} from 'primeng/confirmdialog';
+import {ConfirmPopupModule} from 'primeng/confirmpopup';
+import {ColorPickerModule} from 'primeng/colorpicker';
+import {ContextMenuModule} from 'primeng/contextmenu';
+import {DataViewModule} from 'primeng/dataview';
+import {DialogModule} from 'primeng/dialog';
+import {DividerModule} from 'primeng/divider';
+import {DropdownModule} from 'primeng/dropdown';
+import {FieldsetModule} from 'primeng/fieldset';
+import {FileUploadModule} from 'primeng/fileupload';
+import {FullCalendarModule} from '@fullcalendar/angular';
+import {GalleriaModule} from 'primeng/galleria';
+import {ImageModule} from 'primeng/image';
+import {InplaceModule} from 'primeng/inplace';
+import {InputNumberModule} from 'primeng/inputnumber';
+import {InputMaskModule} from 'primeng/inputmask';
+import {InputSwitchModule} from 'primeng/inputswitch';
+import {InputTextModule} from 'primeng/inputtext';
+import {InputTextareaModule} from 'primeng/inputtextarea';
+import {KnobModule} from 'primeng/knob';
+import {LightboxModule} from 'primeng/lightbox';
+import {ListboxModule} from 'primeng/listbox';
+import {MegaMenuModule} from 'primeng/megamenu';
+import {MenuModule} from 'primeng/menu';
+import {MenubarModule} from 'primeng/menubar';
+import {MessagesModule} from 'primeng/messages';
+import {MessageModule} from 'primeng/message';
+import {MultiSelectModule} from 'primeng/multiselect';
+import {OrderListModule} from 'primeng/orderlist';
+import {OrganizationChartModule} from 'primeng/organizationchart';
+import {OverlayPanelModule} from 'primeng/overlaypanel';
+import {PaginatorModule} from 'primeng/paginator';
+import {PanelModule} from 'primeng/panel';
+import {PanelMenuModule} from 'primeng/panelmenu';
+import {PasswordModule} from 'primeng/password';
+import {PickListModule} from 'primeng/picklist';
+import {ProgressBarModule} from 'primeng/progressbar';
+import {RadioButtonModule} from 'primeng/radiobutton';
+import {RatingModule} from 'primeng/rating';
+import {RippleModule} from 'primeng/ripple';
+import {ScrollPanelModule} from 'primeng/scrollpanel';
+import {ScrollTopModule} from 'primeng/scrolltop';
+import {SelectButtonModule} from 'primeng/selectbutton';
+import {SidebarModule} from 'primeng/sidebar';
+import {SkeletonModule} from 'primeng/skeleton';
+import {SlideMenuModule} from 'primeng/slidemenu';
+import {SliderModule} from 'primeng/slider';
+import {SplitButtonModule} from 'primeng/splitbutton';
+import {SplitterModule} from 'primeng/splitter';
+import {StepsModule} from 'primeng/steps';
+import {TabMenuModule} from 'primeng/tabmenu';
+import {TableModule} from 'primeng/table';
+import {TabViewModule} from 'primeng/tabview';
+import {TagModule} from 'primeng/tag';
+import {TerminalModule} from 'primeng/terminal';
+import {TieredMenuModule} from 'primeng/tieredmenu';
+import {TimelineModule} from 'primeng/timeline';
+import {ToastModule} from 'primeng/toast';
+import {ToggleButtonModule} from 'primeng/togglebutton';
+import {ToolbarModule} from 'primeng/toolbar';
+import {TooltipModule} from 'primeng/tooltip';
+import {TreeModule} from 'primeng/tree';
+import {TreeTableModule} from 'primeng/treetable';
+import {VirtualScrollerModule} from 'primeng/virtualscroller';
+
+import {AppCodeModule} from './app.code.component';
+import {AppComponent} from './app.component';
+import {AppMainComponent} from './app.main.component';
+import {AppTopBarComponent} from './app.topbar.component';
+import {AppFooterComponent} from './app.footer.component';
+import {AppConfigComponent} from './app.config.component';
+import {AppMenuComponent} from './app.menu.component';
+import {AppMenuitemComponent} from './app.menuitem.component';
+import {DashboardDemoComponent} from './demo/view/dashboarddemo.component';
+import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
+import {FloatLabelDemoComponent} from './demo/view/floatlabeldemo.component';
+import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component';
+import {InputDemoComponent} from './demo/view/inputdemo.component';
+import {ButtonDemoComponent} from './demo/view/buttondemo.component';
+import {TableDemoComponent} from './demo/view/tabledemo.component';
+import {ListDemoComponent} from './demo/view/listdemo.component';
+import {TreeDemoComponent} from './demo/view/treedemo.component';
+import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
+import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
+import {MenusDemoComponent} from './demo/view/menusdemo.component';
+import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
+import {MiscDemoComponent} from './demo/view/miscdemo.component';
+import {EmptyDemoComponent} from './demo/view/emptydemo.component';
+import {ChartsDemoComponent} from './demo/view/chartsdemo.component';
+import {FileDemoComponent} from './demo/view/filedemo.component';
+import {DocumentationComponent} from './demo/view/documentation.component';
+import {AppCrudComponent} from './pages/app.crud.component';
+import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
+
+import {CountryService} from './demo/service/countryservice';
+import {CustomerService} from './demo/service/customerservice';
+import {EventService} from './demo/service/eventservice';
+import {IconService} from './demo/service/iconservice';
+import {NodeService} from './demo/service/nodeservice';
+import {PhotoService} from './demo/service/photoservice';
+import {ProductService} from './demo/service/productservice';
+import {MenuService} from './app.menu.service';
+
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+
+FullCalendarModule.registerPlugins([
+ dayGridPlugin,
+ timeGridPlugin,
+ interactionPlugin
+]);
@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- AppRoutingModule
- ],
- providers: [],
- bootstrap: [AppComponent]
+ imports: [
+ BrowserModule,
+ FormsModule,
+ AppRoutingModule,
+ HttpClientModule,
+ BrowserAnimationsModule,
+ AccordionModule,
+ AutoCompleteModule,
+ AvatarModule,
+ AvatarGroupModule,
+ BadgeModule,
+ BreadcrumbModule,
+ ButtonModule,
+ CalendarModule,
+ CardModule,
+ CarouselModule,
+ CascadeSelectModule,
+ ChartModule,
+ CheckboxModule,
+ ChipsModule,
+ ChipModule,
+ CodeHighlighterModule,
+ ConfirmDialogModule,
+ ConfirmPopupModule,
+ ColorPickerModule,
+ ContextMenuModule,
+ DataViewModule,
+ DialogModule,
+ DividerModule,
+ DropdownModule,
+ FieldsetModule,
+ FileUploadModule,
+ FullCalendarModule,
+ GalleriaModule,
+ ImageModule,
+ InplaceModule,
+ InputNumberModule,
+ InputMaskModule,
+ InputSwitchModule,
+ InputTextModule,
+ InputTextareaModule,
+ KnobModule,
+ LightboxModule,
+ ListboxModule,
+ MegaMenuModule,
+ MenuModule,
+ MenubarModule,
+ MessageModule,
+ MessagesModule,
+ MultiSelectModule,
+ OrderListModule,
+ OrganizationChartModule,
+ OverlayPanelModule,
+ PaginatorModule,
+ PanelModule,
+ PanelMenuModule,
+ PasswordModule,
+ PickListModule,
+ ProgressBarModule,
+ RadioButtonModule,
+ RatingModule,
+ RippleModule,
+ ScrollPanelModule,
+ ScrollTopModule,
+ SelectButtonModule,
+ SidebarModule,
+ SkeletonModule,
+ SlideMenuModule,
+ SliderModule,
+ SplitButtonModule,
+ SplitterModule,
+ StepsModule,
+ TagModule,
+ TableModule,
+ TabMenuModule,
+ TabViewModule,
+ TerminalModule,
+ TieredMenuModule,
+ TimelineModule,
+ ToastModule,
+ ToggleButtonModule,
+ ToolbarModule,
+ TooltipModule,
+ TreeModule,
+ TreeTableModule,
+ VirtualScrollerModule,
+ AppCodeModule
+ ],
+ declarations: [
+ AppComponent,
+ AppMainComponent,
+ AppTopBarComponent,
+ AppFooterComponent,
+ AppConfigComponent,
+ AppMenuComponent,
+ AppMenuitemComponent,
+ DashboardDemoComponent,
+ FormLayoutDemoComponent,
+ FloatLabelDemoComponent,
+ InvalidStateDemoComponent,
+ InputDemoComponent,
+ ButtonDemoComponent,
+ TableDemoComponent,
+ ListDemoComponent,
+ TreeDemoComponent,
+ PanelsDemoComponent,
+ OverlaysDemoComponent,
+ MenusDemoComponent,
+ MessagesDemoComponent,
+ MessagesDemoComponent,
+ MiscDemoComponent,
+ ChartsDemoComponent,
+ EmptyDemoComponent,
+ FileDemoComponent,
+ DocumentationComponent,
+ AppCrudComponent,
+ AppTimelineDemoComponent,
+ ],
+ providers: [
+ {provide: LocationStrategy, useClass: HashLocationStrategy},
+ CountryService, CustomerService, EventService, IconService, NodeService,
+ PhotoService, ProductService, MenuService
+ ],
+ bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/src/app/app.topbar.component.html b/src/app/app.topbar.component.html
new file mode 100644
index 0000000..c287d4a
--- /dev/null
+++ b/src/app/app.topbar.component.html
@@ -0,0 +1,29 @@
+
\ No newline at end of file
diff --git a/src/app/app.topbar.component.ts b/src/app/app.topbar.component.ts
new file mode 100644
index 0000000..3cd3e6d
--- /dev/null
+++ b/src/app/app.topbar.component.ts
@@ -0,0 +1,24 @@
+import {Component, OnDestroy} from '@angular/core';
+import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
+import { Subscription } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+ selector: 'app-topbar',
+ templateUrl: './app.topbar.component.html'
+})
+export class AppTopBarComponent implements OnDestroy{
+
+ subscription: Subscription;
+
+ items: MenuItem[];
+
+ constructor(public app: AppComponent, public appMain: AppMainComponent) {}
+
+ ngOnDestroy() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ }
+ }
+}
diff --git a/src/app/demo/domain/customer.ts b/src/app/demo/domain/customer.ts
new file mode 100644
index 0000000..d838864
--- /dev/null
+++ b/src/app/demo/domain/customer.ts
@@ -0,0 +1,20 @@
+export interface Country {
+ name?: string;
+ code?: string;
+}
+
+export interface Representative {
+ name?: string;
+ image?: string;
+}
+
+export interface Customer {
+ id?: number;
+ name?: string;
+ country?: Country;
+ company?: string;
+ date?: string;
+ status?: string;
+ activity?: number;
+ representative?: Representative;
+}
diff --git a/src/app/demo/domain/image.ts b/src/app/demo/domain/image.ts
new file mode 100644
index 0000000..83e93eb
--- /dev/null
+++ b/src/app/demo/domain/image.ts
@@ -0,0 +1,6 @@
+export interface Image {
+ previewImageSrc?;
+ thumbnailImageSrc?;
+ alt?;
+ title?;
+}
diff --git a/src/app/demo/domain/product.ts b/src/app/demo/domain/product.ts
new file mode 100755
index 0000000..13929d9
--- /dev/null
+++ b/src/app/demo/domain/product.ts
@@ -0,0 +1,12 @@
+export interface Product {
+ id?: string;
+ code?: string;
+ name?: string;
+ description?: string;
+ price?: number;
+ quantity?: number;
+ inventoryStatus?: string;
+ category?: string;
+ image?: string;
+ rating?: number;
+}
diff --git a/src/app/demo/service/countryservice.ts b/src/app/demo/service/countryservice.ts
new file mode 100755
index 0000000..4aa81d9
--- /dev/null
+++ b/src/app/demo/service/countryservice.ts
@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CountryService {
+
+ constructor(private http: HttpClient) { }
+
+ getCountries() {
+ return this.http.get('assets/demo/data/countries.json')
+ .toPromise()
+ .then(res => res.data as any[])
+ .then(data => data);
+ }
+}
diff --git a/src/app/demo/service/customerservice.ts b/src/app/demo/service/customerservice.ts
new file mode 100644
index 0000000..fde5595
--- /dev/null
+++ b/src/app/demo/service/customerservice.ts
@@ -0,0 +1,31 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Customer } from '../domain/customer';
+
+@Injectable()
+export class CustomerService {
+
+ constructor(private http: HttpClient) { }
+
+ getCustomersSmall() {
+ return this.http.get('assets/demo/data/customers-small.json')
+ .toPromise()
+ .then(res => res.data as Customer[])
+ .then(data => data);
+ }
+
+ getCustomersMedium() {
+ return this.http.get('assets/demo/data/customers-medium.json')
+ .toPromise()
+ .then(res => res.data as Customer[])
+ .then(data => data);
+ }
+
+ getCustomersLarge() {
+ return this.http.get('assets/demo/data/customers-large.json')
+ .toPromise()
+ .then(res => res.data as Customer[])
+ .then(data => data);
+ }
+
+}
diff --git a/src/app/demo/service/eventservice.ts b/src/app/demo/service/eventservice.ts
new file mode 100755
index 0000000..e70aa77
--- /dev/null
+++ b/src/app/demo/service/eventservice.ts
@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class EventService {
+
+ constructor(private http: HttpClient) { }
+
+ getEvents() {
+ return this.http.get('assets/demo/data/scheduleevents.json')
+ .toPromise()
+ .then(res => res.data as any[])
+ .then(data => data);
+ }
+}
diff --git a/src/app/demo/service/iconservice.ts b/src/app/demo/service/iconservice.ts
new file mode 100755
index 0000000..ec53360
--- /dev/null
+++ b/src/app/demo/service/iconservice.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import {map} from 'rxjs/operators';
+
+@Injectable()
+export class IconService {
+
+ constructor(private http: HttpClient) { }
+
+ icons: any[];
+
+ selectedIcon: any;
+
+ apiUrl = 'assets/demo/data/icons.json';
+
+ getIcons() {
+ return this.http.get(this.apiUrl).pipe(map((response: any) => {
+ this.icons = response.icons;
+ return this.icons;
+ }));
+ }
+}
diff --git a/src/app/demo/service/nodeservice.ts b/src/app/demo/service/nodeservice.ts
new file mode 100755
index 0000000..bc756b4
--- /dev/null
+++ b/src/app/demo/service/nodeservice.ts
@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { TreeNode } from 'primeng/api';
+
+@Injectable()
+export class NodeService {
+
+ constructor(private http: HttpClient) { }
+
+ getFiles() {
+ return this.http.get('assets/demo/data/files.json')
+ .toPromise()
+ .then(res => res.data as TreeNode[]);
+ }
+
+ getLazyFiles() {
+ return this.http.get('assets/demo/data/files-lazy.json')
+ .toPromise()
+ .then(res => res.data as TreeNode[]);
+ }
+
+ getFilesystem() {
+ return this.http.get('assets/demo/data/filesystem.json')
+ .toPromise()
+ .then(res => res.data as TreeNode[]);
+ }
+
+ getLazyFilesystem() {
+ return this.http.get('assets/demo/data/filesystem-lazy.json')
+ .toPromise()
+ .then(res => res.data as TreeNode[]);
+ }
+}
diff --git a/src/app/demo/service/photoservice.ts b/src/app/demo/service/photoservice.ts
new file mode 100644
index 0000000..745433c
--- /dev/null
+++ b/src/app/demo/service/photoservice.ts
@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Image } from '../domain/image';
+
+@Injectable()
+export class PhotoService {
+
+ constructor(private http: HttpClient) { }
+
+ getImages() {
+ return this.http.get('assets/demo/data/photos.json')
+ .toPromise()
+ .then(res => res.data as Image[])
+ .then(data => data);
+ }
+}
diff --git a/src/app/demo/service/productservice.ts b/src/app/demo/service/productservice.ts
new file mode 100755
index 0000000..fbf8342
--- /dev/null
+++ b/src/app/demo/service/productservice.ts
@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Product } from '../domain/product';
+
+@Injectable()
+export class ProductService {
+
+ constructor(private http: HttpClient) { }
+
+ getProductsSmall() {
+ return this.http.get('assets/demo/data/products-small.json')
+ .toPromise()
+ .then(res => res.data as Product[])
+ .then(data => data);
+ }
+
+ getProducts() {
+ return this.http.get('assets/demo/data/products.json')
+ .toPromise()
+ .then(res => res.data as Product[])
+ .then(data => data);
+ }
+
+ getProductsMixed() {
+ return this.http.get('assets/demo/data/products-mixed.json')
+ .toPromise()
+ .then(res => res.data as Product[])
+ .then(data => data);
+ }
+
+ getProductsWithOrdersSmall() {
+ return this.http.get('assets/demo/data/products-orders-small.json')
+ .toPromise()
+ .then(res => res.data as Product[])
+ .then(data => data);
+ }
+}
diff --git a/src/app/demo/view/buttondemo.component.html b/src/app/demo/view/buttondemo.component.html
new file mode 100644
index 0000000..bc44454
--- /dev/null
+++ b/src/app/demo/view/buttondemo.component.html
@@ -0,0 +1,127 @@
+
diff --git a/src/app/demo/view/buttondemo.component.ts b/src/app/demo/view/buttondemo.component.ts
new file mode 100644
index 0000000..49262e6
--- /dev/null
+++ b/src/app/demo/view/buttondemo.component.ts
@@ -0,0 +1,20 @@
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+
+@Component({
+ templateUrl: './buttondemo.component.html'
+})
+export class ButtonDemoComponent implements OnInit {
+
+ items: MenuItem[];
+
+ 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'}
+ ];
+ }
+}
diff --git a/src/app/demo/view/chartsdemo.component.html b/src/app/demo/view/chartsdemo.component.html
new file mode 100755
index 0000000..550262a
--- /dev/null
+++ b/src/app/demo/view/chartsdemo.component.html
@@ -0,0 +1,42 @@
+
diff --git a/src/app/demo/view/chartsdemo.component.ts b/src/app/demo/view/chartsdemo.component.ts
new file mode 100755
index 0000000..6316b40
--- /dev/null
+++ b/src/app/demo/view/chartsdemo.component.ts
@@ -0,0 +1,239 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ templateUrl: './chartsdemo.component.html'
+})
+export class ChartsDemoComponent implements OnInit {
+
+ lineData: any;
+
+ barData: any;
+
+ pieData: any;
+
+ polarData: any;
+
+ radarData: any;
+
+ lineOptions: any;
+
+ barOptions: any;
+
+ pieOptions: any;
+
+ polarOptions: any;
+
+ radarOptions: any;
+
+ ngOnInit() {
+ this.lineData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'First Dataset',
+ data: [65, 59, 80, 81, 56, 55, 40],
+ fill: false,
+ backgroundColor: '#2f4860',
+ borderColor: '#2f4860',
+ tension: .4
+ },
+ {
+ label: 'Second Dataset',
+ data: [28, 48, 40, 19, 86, 27, 90],
+ fill: false,
+ backgroundColor: '#00bb7e',
+ borderColor: '#00bb7e',
+ tension: .4
+ }
+ ]
+ };
+
+ this.lineOptions = {
+ plugins: {
+ legend: {
+ labels: {
+ fontColor: '#A0A7B5'
+ }
+ }
+ },
+ scales: {
+ x: {
+ ticks: {
+ color: '#A0A7B5'
+ },
+ grid: {
+ color: 'rgba(160, 167, 181, .3)',
+ }
+ },
+ y: {
+ ticks: {
+ color: '#A0A7B5'
+ },
+ grid: {
+ color: 'rgba(160, 167, 181, .3)',
+ }
+ },
+ }
+ };
+
+ this.barData = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: '#2f4860',
+ data: [65, 59, 80, 81, 56, 55, 40]
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: '#00bb7e',
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+ };
+
+ this.barOptions = {
+ plugins: {
+ legend: {
+ labels: {
+ fontColor: '#A0A7B5'
+ }
+ }
+ },
+ scales: {
+ x: {
+ ticks: {
+ color: '#A0A7B5'
+ },
+ grid: {
+ color: 'rgba(160, 167, 181, .3)',
+ }
+ },
+ y: {
+ ticks: {
+ color: '#A0A7B5'
+ },
+ grid: {
+ color: 'rgba(160, 167, 181, .3)',
+ }
+ },
+ }
+ };
+
+ this.pieData = {
+ labels: ['A', 'B', 'C'],
+ datasets: [
+ {
+ data: [300, 50, 100],
+ backgroundColor: [
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
+ ],
+ hoverBackgroundColor: [
+ "#FF6384",
+ "#36A2EB",
+ "#FFCE56"
+ ]
+ }
+ ]
+ };
+
+ this.pieOptions = {
+ plugins: {
+ legend: {
+ labels: {
+ fontColor: '#A0A7B5'
+ }
+ }
+ }
+ };
+
+ this.polarData = {
+ datasets: [{
+ data: [
+ 11,
+ 16,
+ 7,
+ 3,
+ 14
+ ],
+ backgroundColor: [
+ "#FF6384",
+ "#4BC0C0",
+ "#FFCE56",
+ "#E7E9ED",
+ "#36A2EB"
+ ],
+ label: 'My dataset'
+ }],
+ labels: [
+ "Red",
+ "Green",
+ "Yellow",
+ "Grey",
+ "Blue"
+ ]
+ };
+
+ this.polarOptions = {
+ plugins: {
+ legend: {
+ labels: {
+ fontColor: '#A0A7B5'
+ }
+ }
+ },
+ scales: {
+ r: {
+ grid: {
+ color: 'rgba(160, 167, 181, .3)'
+ }
+ }
+ }
+ };
+
+ this.radarData = {
+ labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(179,181,198,0.2)',
+ borderColor: 'rgba(179,181,198,1)',
+ pointBackgroundColor: 'rgba(179,181,198,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(179,181,198,1)',
+ data: [65, 59, 90, 81, 56, 55, 40]
+ },
+ {
+ label: 'My Second dataset',
+ backgroundColor: 'rgba(255,99,132,0.2)',
+ borderColor: 'rgba(255,99,132,1)',
+ pointBackgroundColor: 'rgba(255,99,132,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(255,99,132,1)',
+ data: [28, 48, 40, 19, 96, 27, 100]
+ }
+ ]
+ };
+
+ this.radarOptions = {
+ plugins: {
+ legend: {
+ labels: {
+ fontColor: '#A0A7B5'
+ }
+ }
+ },
+ scales: {
+ r: {
+ grid: {
+ color: 'rgba(160, 167, 181, .3)'
+ }
+ }
+ }
+ };
+ }
+}
diff --git a/src/app/demo/view/dashboard.component.html b/src/app/demo/view/dashboard.component.html
new file mode 100755
index 0000000..a365129
--- /dev/null
+++ b/src/app/demo/view/dashboard.component.html
@@ -0,0 +1,244 @@
+
+
+
+
+
+
24 new
+
since last visit
+
+
+
+
+
+
%52+
+
since last week
+
+
+
+
+
+
520
+
newly registered
+
+
+
+
+
+
+
Comments
+
152 Unread
+
+
+
+
+
+
85
+
responded
+
+
+
+
+
+
Recent Sales
+
+
+
+ Image
+ Name
+ Price
+ View
+
+
+
+
+
+
+ {{product.name}}
+ {{product.price | currency:'USD'}}
+
+
+
+
+
+
+
+
+
Best Selling Products
+
+
+
+
+
+
Space T-Shirt
+
Clothing
+
+
+
+
Portal Sticker
+
Accessories
+
+
+
+
Supernova Sticker
+
Accessories
+
+
+
+
Wonders Notebook
+
Office
+
+
+
+
Mat Black Case
+
Accessories
+
+
+
+
Robots T-Shirt
+
Clothing
+
+
+
+
+
+
+
+
+
+
+
+
TODAY
+
+
+
+
+ Richard Jones
+ has purchased a blue t-shirt for 79$
+
+
+
+
+
+ Your request for withdrawal of 2500$ has been initiated.
+
+
+
+
YESTERDAY
+
+
+
+
+ Keyser Wick
+ has purchased a black jacket for 59$
+
+
+
+
+
+ Jane Davis
+ has posted a new questions about your product.
+
+
+
+
+
+
+
+
TAKE THE NEXT STEP
+
Try PrimeBlocks
+
+
+
+
+
+
+
+
+
+
+
Current Version
+
Angular 13 and PrimeNG 13
+
+
Getting Started
+
Sakai is an application template for Angular and is distributed as a CLI project. In case CLI is not installed already, use
+ the command below to set it up.
+
+
+
Dependencies
+
Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at Why PrimeNG Templates article.
+
+
+ npm install -g @angular/cli
+
+
+
Once CLI is ready in your system, extract the contents of the Sakai 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.
+
+
+ cd sakai
+ npm install
+ ng serve
+
+
+
The application should run at http://localhost:4200/, you may now start with the development of your application.
+
+
Important CLI Commands
+
Following commands are derived from CLI.
+
+ 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`.
+
+ Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+ Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+ Run 'ng help' for more options.
+
+
+
Structure
+
Sakai consists of 2 main parts; the application layout, layout resources. app.component.html inside app folder is the html template for the base layout,
+ required resources for the layout are placed inside the src/assets/layout folder and similarly theme resources are inside src/assets/theme folder.
+
+
+
Application Template
+
Main layout is the html template of the app.main.component.ts, it is divided into a couple of sections such as topbar, sidebar, right panel and footer. Here is the code for
+ the main template. The component class app.main.component.ts implements the logic such as opening menus and managing layout modes.
+
+
+<div class="layout-wrapper" [ngClass]="{
+ 'layout-overlay':isOverlay(),
+ 'layout-static':isStatic(),
+ 'layout-theme-light': !app.darkMode,
+ 'layout-theme-dark': app.darkMode,
+ 'layout-overlay-sidebar-active': overlayMenuActive,
+ 'layout-static-sidebar-inactive': staticMenuInactive,
+ 'layout-mobile-sidebar-active': menuActiveMobile,
+ 'p-ripple-disabled': !app.ripple, 'p-input-filled' : app.inputStyle === 'filled'}"
+
+ <app-topbar></app-topbar>
+
+ <div class="layout-sidebar">
+ <app-menu></app-menu>
+ </div>
+
+ <div class="layout-main-container">
+ <div class="layout-main">
+ <router-outlet></router-outlet>
+ </div>
+
+ <app-footer></app-footer>
+ </div>
+
+ <app-config></app-config>
+
+ <div class="layout-mask p-component-overlay"></div>
+</div>
+
+
+
Menu
+
Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
+ navigate to this file and define your own model as a nested structure. Here is the menu component from the sample application.
+
+
+
+import { Component, OnInit } from '@angular/core';
+import { AppMainComponent } from './app.main.component';
+
+@Component({
+ selector: 'app-menu',
+ templateUrl: './app.menu.component.html'
+})
+export class AppMenuComponent implements OnInit, AfterViewInit {
+
+ model: any[];
+
+ constructor(public appMain: AppMainComponent) { }
+
+ ngOnInit() {
+ this.model = [
+ {label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/']},
+ {
+ label: 'UI Kit', icon: 'pi pi-star-o', routerLink: ['/uikit'],
+ items: [
+ {label: 'Form Layout', icon: 'pi pi-id-card', routerLink: ['/uikit/formlayout']},
+ {label: 'Input', icon: 'pi pi-check-square', routerLink: ['/uikit/input']},
+ {label: 'Float Label', icon: 'pi pi-bookmark', routerLink: ['/uikit/floatlabel']},
+ {label: 'Invalid State', icon: 'pi pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
+ {label: 'Button', icon: 'pi pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
+ {label: 'Table', icon: 'pi pi-table', routerLink: ['/uikit/table']},
+ {label: 'List', icon: 'pi pi-list', routerLink: ['/uikit/list']},
+ {label: 'Tree', icon: 'pi pi-share-alt', routerLink: ['/uikit/tree']},
+ {label: 'Panel', icon: 'pi pi-tablet', routerLink: ['/uikit/panel']},
+ {label: 'Overlay', icon: 'pi pi-clone', routerLink: ['/uikit/overlay']},
+ {label: 'Media', icon: 'pi pi-image', routerLink: ['/uikit/media']},
+ {label: 'Menu', icon: 'pi pi-bars', routerLink: ['/uikit/menu']},
+ {label: 'Message', icon: 'pi pi-comment', routerLink: ['/uikit/message']},
+ {label: 'File', icon: 'pi pi-file', routerLink: ['/uikit/file']},
+ {label: 'Chart', icon: 'pi pi-chart-bar', routerLink: ['/uikit/charts']},
+ {label: 'Misc', icon: 'pi pi-circle-off', routerLink: ['/uikit/misc']}
+ ]
+ },
+ {
+ label: 'Pages', icon: 'pi pi-briefcase', routerLink: ['/pages'],
+ items: [
+ {label: 'Crud', icon: 'pi pi-pencil', routerLink: ['/pages/crud']},
+ {label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
+ {label: 'Not Found', icon: 'pi pi-exclamation-circle', routerLink: ['/notfound']},
+ {label: 'Empty', icon: 'pi pi-circle-off', routerLink: ['/pages/empty']}
+ ]
+ },
+ {
+ label: 'Hierarchy', icon: 'pi pi-align-left',
+ items: [
+ {
+ label: 'Submenu 1', icon: 'pi pi-align-left',
+ items: [
+ {
+ label: 'Submenu 1.1', icon: 'pi pi-align-left',
+ items: [
+ {label: 'Submenu 1.1.1', icon: 'pi pi-align-left'},
+ {label: 'Submenu 1.1.2', icon: 'pi pi-align-left'},
+ {label: 'Submenu 1.1.3', icon: 'pi pi-align-left'},
+ ]
+ },
+ {
+ label: 'Submenu 1.2', icon: 'pi pi-align-left',
+ items: [
+ {label: 'Submenu 1.2.1', icon: 'pi pi-align-left'}
+ ]
+ },
+ ]
+ },
+ {
+ label: 'Submenu 2', icon: 'pi pi-align-left',
+ items: [
+ {
+ label: 'Submenu 2.1', icon: 'pi pi-align-left',
+ items: [
+ {label: 'Submenu 2.1.1', icon: 'pi pi-align-left'},
+ {label: 'Submenu 2.1.2', icon: 'pi pi-align-left'},
+ ]
+ },
+ {
+ label: 'Submenu 2.2', icon: 'pi pi-align-left',
+ items: [
+ {label: 'Submenu 2.2.1', icon: 'pi pi-align-left'},
+ ]
+ },
+ ]
+ }
+ ]
+ },
+ {
+ label: 'Start', icon: 'pi pi-download',
+ items: [
+ {
+ label: 'Buy Now', icon: 'pi pi-shopping-cart', url: ['https://www.primefaces.org/store']
+ },
+ {
+ label: 'Documentation', icon: 'pi pi-info-circle', routerLink: ['/documentation']
+ }
+ ]
+ }
+ ];
+ }
+}
+
+
+
+
Integration with an Existing CLI Project
+
To setup Sakai in an existing project, follow the steps below;
+
+
+ Copy the src/assets folder to your projects folder with the same name
+ Copy all app.* files to the src/app folder of your application.
+
+
+
Install PrimeNG
+
+ npm install primeng@latest --save
+ npm install primeicons@latest --save
+
+
+
Add PrimeNG CSS at styles section in angular.json.
+
+
+ "styles": [
+ "styles.scss" //your styles and overrides
+ ],
+
+
+
Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on
+ the fly by changing the path however if this is not a requirement, you may also add them to the styles configuration above so they go inside the bundle.
+
+
Theme
+
Sakai uses the free Saga, Arya and Vela themes which are distributed within PrimeNG, however it can be used with any PrimeNG theme as well such as material, tailwind and bootstrap.
+
+
SASS Variables
+
In case you'd like to customize the layout variables, open _variables.scss file under src/layout folder. Saving the changes
+ will be reflected instantly at your browser.
+
+
src/assets/_variables.scss
+
+
A custom theme can be developed by the following steps.
+
+ Choose a custom theme name such as "mytheme".
+ Create a folder named "mytheme" under assets/theme folder .
+ Create a file such as theme.scss under assets/theme/mytheme folder .
+ Define the variables listed below in your file and import the ../../sass/theme/_theme.scss file.
+ Build the scss to generate css
+ Include the generated theme.css to your page.
+
+
+
Here are the variables required to create a theme.
+
+$primaryLightColor: #777BF1;
+$primaryColor:#464DF2;
+$primaryDarkColor: #221ED9;
+$primaryDarkerColor: #1222B9;
+$primaryTextColor: #FFFFFF;
+$primaryLighterColor: rgba($primaryLightColor,.1);
+
+$highlightBg: $primaryColor;
+$highlightTextColor: $primaryTextColor;
+
+@import '../../sass/theme/_theme_light';
+
+
+
An example sass command to compile the css would be;
+
+
+sass --update src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
+
+
+
Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command
+ so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.
+
+sass --watch src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
+
+
+
Same can also be applied to layout itself;
+
+ Choose a layout name such as layout-myown.
+ Create an empty file named layout-myown.scss inside assets/layout/css folder.
+ Define the variables listed below and import the /sass/layout/_layout.scss file.
+ Build the scss to generate css
+ Serve the css by importing it using a link tag or a bundler.
+
+
+
Here are the variables required to create a layout.
+
+@import '../../sass/layout/_layout_light';
+
+
+
SASS Variables
+
Both the theme and layout provides various variables to customize the design.
+
+
sass/variables/layout/_layout_common.scss
+
Common variables for light and dark application layout.
+
+$fontSize:14px !default;
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$mobileBreakpoint:991px !default;
+$borderRadius:24px !default;
+$animationDuration:.2s !default;
+$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;
+$letterSpacing:0.02em !default;
+$transitionDuration:.2s !default;
+$tabletBreakpoint:991px !default;
+$phoneBreakpoint:576px !default;
+
+
+
sass/variables/layout/_layout_light.scss
+
Variables of the light theme layout.
+
+$bodyBgColor:#F2F4F6 !default;
+
+//text
+$textShade100:#3E4754 !default;
+$textShade200:rgba(41, 50, 65, 0.8) !default;
+$textShade300:rgba(41, 50, 65, 0.5) !default;
+
+//content
+$contentShade100:#ffffff !default;
+$contentShade200: #F7FAFF !default;
+$contentShade300: #EEF5FF !default;
+$contentShade400: #F7F7F8 !default;
+$dividerColor: #D4D6D9 !default;
+
+$menuTooltipBgColor:#293241!default;
+$menuTooltipTextColor:#ffffff !default;
+
+@import './_layout_common.scss';
+
+
+
sass/variables/theme/_theme_light
+
Variables of the light component theme, see the Theme Designer API for documentation.
+
+
+//reused color variables
+//reused color variables
+$shade000:#ffffff !default; //surface
+$shade100:#FCFCFC !default; //header background
+$shade200:rgba($primaryColor,.2) !default; //hover background
+$shade300:#D4D6D9 !default; //border, divider
+$shade400:#D4D6D9 !default; //input border
+$shade500:#545B67 !default; //input icon
+$shade600:#83888F !default; //text secondary color
+$shade700:#69707A !default; //text color
+$shade800:#343a40 !default; //unused
+$shade900:#212529 !default; //unused
+
+//global
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade700 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:6px !default;
+$transitionDuration:.2s !default;
+$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.6 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#f44336 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:$shade200 !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .5rem !default;
+$inputTextFontSize:1rem !default;
+
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade600 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$primaryColor !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade100 !default;
+$inputFilledHoverBg:$inputFilledBg !default;
+$inputFilledFocusBg:$shade000 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade600 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade700 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade700 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade700 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.5rem 1rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade700 !default;
+$inputListHeaderBorder:0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:0 none !default;
+$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+
+//button
+$buttonPadding:.5rem 1rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#607D8B !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
+$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
+$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
+
+$infoButtonBg:#0288D1 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid $infoButtonBg !default;
+$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonTextHoverColor:$infoButtonTextColor !default;
+$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
+$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonTextActiveColor:$infoButtonTextColor !default;
+$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
+$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
+
+$successButtonBg:#689F38 !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid $successButtonBg !default;
+$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonTextHoverColor:$successButtonTextColor !default;
+$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
+$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonTextActiveColor:$successButtonTextColor !default;
+$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
+$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
+
+$warningButtonBg:#FBC02D !default;
+$warningButtonTextColor:#212529 !default;
+$warningButtonBorder:1px solid $warningButtonBg !default;
+$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonTextHoverColor:$warningButtonTextColor !default;
+$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
+$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonTextActiveColor:$warningButtonTextColor !default;
+$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
+$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
+
+$helpButtonBg:#9C27B0 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid $helpButtonBg !default;
+$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonTextHoverColor:$helpButtonTextColor !default;
+$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
+$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonTextActiveColor:$helpButtonTextColor !default;
+$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
+$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
+
+$dangerButtonBg:#D32F2F !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid $dangerButtonBg !default;
+$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
+$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
+
+$linkButtonColor:$primaryDarkerColor !default;
+$linkButtonHoverColor:$primaryDarkerColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#323232 !default;
+$colorPickerBorderColor:#191919 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:$inputBg !default;
+$toggleButtonBorder:1px solid $shade400 !default;
+$toggleButtonTextColor:$shade700 !default;
+$toggleButtonIconColor:$shade600 !default;
+$toggleButtonHoverBg:$shade200 !default;
+$toggleButtonHoverBorderColor:$shade400 !default;
+$toggleButtonTextHoverColor:$shade700 !default;
+$toggleButtonIconHoverColor:$shade600 !default;
+$toggleButtonActiveBg:$primaryColor !default;
+$toggleButtonActiveBorderColor:$primaryColor !default;
+$toggleButtonTextActiveColor:$primaryTextColor !default;
+$toggleButtonIconActiveColor:$primaryTextColor !default;
+$toggleButtonActiveHoverBg:$primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
+$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade700 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#e74c3c !default;
+$ratingCancelIconHoverColor:#c0392b !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade300 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$shade000 !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:50% !default;
+$sliderHandleHoverBorderColor:$primaryColor !default;
+$sliderHandleHoverBg:$primaryColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:.5rem !default;
+$calendarBg:$shade000 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade700 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade000 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade700 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:50% !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade700 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:30px !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:50% !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$shade700 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem !default;
+$panelToggleableHeaderPadding:.5rem 1rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade700 !default;
+
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade000 !default;
+$panelContentTextColor:$shade700 !default;
+$panelContentPadding:1rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade000 !default;
+$panelFooterTextColor:$shade700 !default;
+$panelFooterPadding:0.5rem 1rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade700 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade700 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade700 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade300 !default;
+$tabviewNavBorderWidth:0 0 2px 0 !default;
+$tabviewNavBg:$shade000 !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid $shade300 !default;
+$tabviewHeaderBorderWidth:0 0 2px 0 !default;
+$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
+$tabviewHeaderBg:$shade000 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:$panelHeaderPadding !default;
+$tabviewHeaderMargin:0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg:$shade000 !default;
+$tabviewHeaderHoverBorderColor:$shade600 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade000 !default;
+$tabviewHeaderActiveBorderColor:$primaryColor !default;
+$tabviewHeaderTextActiveColor:$primaryColor !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding:2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$shade600 !default;
+$paginatorBorder:solid $shade200 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.5rem 1rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:0 none !default;
+$paginatorElementIconColor:$shade600 !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:transparent !default;
+$paginatorElementIconHoverColor:$shade700 !default;
+$paginatorElementBorderRadius:$borderRadius !default;
+$paginatorElementMargin:.143rem !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:1px solid $shade200 !default;
+$tableHeaderBorderWidth:1px 0 1px 0 !default;
+$tableHeaderBg:$shade100 !default;
+$tableHeaderTextColor:$shade700 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade700 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade200 !default;
+$tableHeaderCellBorderWidth:0 0 1px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade700 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade100 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade000 !default;
+$tableBodyRowTextColor:$shade700 !default;
+$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade700 !default;
+$tableBodyCellBorder:1px solid $shade200 !default;
+$tableBodyCellBorderWidth:0 0 1px 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade700 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade200 !default;
+$tableFooterCellBorderWidth:0 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+
+$tableFooterBorder:1px solid $shade200 !default;
+$tableFooterBorderWidth:0 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade700 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:solid $shade200 !default;
+$dataViewListItemBorderWidth:0 0 1px 0 !default;
+
+//orderlist, picklist
+$orderListBreakpoint:769px !default;
+$pickListBreakpoint:769px !default;
+
+//schedule
+$fullCalendarEventBg:$primaryDarkColor !default;
+$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor:$primaryTextColor !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.5rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:2px solid $primaryColor !default;
+$timelineEventMarkerBackground:$shade000 !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.5rem !default;
+$messageBorderWidth:0 0 0 6px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 0 0 6px !default;
+$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$toastOpacity:.9 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#B3E5FC !default;
+$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
+$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
+$successMessageBg:#C8E6C9 !default;
+$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
+$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
+$warningMessageBg:#FFECB3 !default;
+$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
+$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
+$errorMessageBg:#FFCDD2 !default;
+$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
+$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
+
+//overlays
+$overlayContentBorder:0 none !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:0 none !default;
+$dialogHeaderTextColor:$shade700 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1.5rem !default;
+$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
+$dialogFooterBorder:0 none !default;
+$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
+
+//tooltip
+$tooltipBg:$shade700 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:$shade000 !default;
+$stepsItemBorder:1px solid $shade200 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade700 !default;
+$stepsItemNumberBorderRadius:50% !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar
+$progressBarHeight:1rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade300 !default;
+$progressBarValueBg:$primaryColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade000 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade700 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade700 !default;
+$menuitemIconColor:$shade600 !default;
+$menuitemTextHoverColor:$shade700 !default;
+$menuitemIconHoverColor:$shade600 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextActiveColor:$shade700 !default;
+$menuitemIconActiveColor:$shade600 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade000 !default;
+$submenuHeaderTextColor:$shade700 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:0 none !default;
+$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
+$verticalMenuPadding:.25rem 0 !default;
+$verticalMenuitemMargin:0;
+$menuSeparatorMargin:.25rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$menuBg !default;
+$breadcrumbBorder:$menuBorder !default;
+$breadcrumbItemTextColor:$menuitemTextColor !default;
+$breadcrumbItemIconColor:$menuitemIconColor !default;
+$breadcrumbLastItemTextColor:$menuitemTextColor !default;
+$breadcrumbLastItemIconColor:$menuitemIconColor !default;
+$breadcrumbSeparatorColor:$menuitemTextColor !default;
+
+$horizontalMenuPadding:.5rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:$menuBorder !default;
+$horizontalMenuTextColor:$menuTextColor !default;
+$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:50% !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:50% !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:50% !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0;
+$dividerHorizontalPadding:0 1rem;
+$dividerVerticalMargin:0 1rem;
+$dividerVerticalPadding:1rem 0;
+$dividerSize:1px;
+$dividerColor:$shade300;
+
+//avatar
+$avatarBg:$shade300;
+$avatarTextColor:$textColor;
+
+//chip
+$chipBg:$shade300;
+$chipTextColor:$textColor;
+$chipBorderRadius: 16px;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7);
+$scrollTopHoverBg:rgba(0,0,0,0.8);
+$scrollTopWidth:3rem;
+$scrollTopHeight:3rem;
+$scrollTopBorderRadius:50%;
+$scrollTopFontSize:1.5rem;
+$scrollTopTextColor:$shade100;
+
+//skeleton
+$skeletonBg:$shade200;
+$skeletonAnimationBg:rgba(255,255,255,0.4);
+
+//splitter
+$splitterGutterBg:$shade100;
+$splitterGutterHandleBg:$shade300;
+
+:root {
+ --surface-a:#{$shade000};
+ --surface-b:#{$shade100};
+ --surface-c:#{$shade200};
+ --surface-d:#{$shade300};
+ --surface-e:#{$shade000};
+ --surface-f:#{$shade000};
+ --text-color:#{$shade700};
+ --text-color-secondary:#{$shade600};
+ --primary-color:#{$primaryColor};
+ --primary-dark-color:#{$primaryDarkColor};
+ --primary-light-color:#{$primaryLightColor};
+ --primary-lighter-color:#{$primaryLighterColor};
+ --primary-color-text:#{$primaryTextColor};
+ --font-family:#{$fontFamily};
+}
+
+
+
+
Menu Modes
+
Menu has 2 modes, static and overlay. Layout container element in app.component.html is used to define which mode to use by adding specific classes. List
+ below indicates the style classes for each mode.
+
+ Static: "layout-wrapper layout-static"
+ Overlay: "layout-wrapper layout-overlay"
+
+
+
For example to create a horizontal menu, the div element should be in following form;
+
+<div class="layout-wrapper layout-sidebar">
+
+
+
It is also possible to leave the choice to the user by keeping the preference at a component and using an ngClass expression so that user can switch between modes. Sample
+ application has an example implementation of such use case. Refer to app.component.ts for an example.
+
+
Grid CSS
+
Sakai uses PrimeNG Flex Grid CSS throughout the demos such as Dashboard, however any Grid library can be used with it since Sakai Layout itself does not depend on PrimeFlex CSS.
+
+
Customizing Styles
+
It is suggested to add your customizations in the following sass files under the "sass/overrides" folder instead of adding them to the
+ scss files under sass folder to avoid maintenance issues after an update.
+
+
+ _layout_variables : Variables of the layout._layout_styles : Styles for the layout._theme_variables : Variables of the theme._theme_styles : Styles for the theme.
+
+
Migration Guide
+
Every change is included in CHANGELOG.md file at the root folder of the distribution along with the instructions to update.
+
+
+
+
+
+
Empty Page
+
This is your empty page template to start building beautiful applications.
+
+
+
+
+
+
Advanced
+
+
+
+ {{file.name}} - {{file.size}} bytes
+
+
+
+
+
Basic
+
+
+
+
+
Float Label
+
+
+
+ InputText
+
+
+
+
+
+
+
+
+
+
+
+
+ InputGroup
+
+
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
Help Text
+
+ Username
+ Enter your username to reset your password.
+
+
+
+
+
+
+
+
+
InputText
+
+
+
Icons
+
+
+
Float Label
+
+ Username
+
+
+
Textarea
+
+
+
AutoComplete
+
+
+
Calendar
+
+
+
InputNumber
+
+
+
+
Chips
+
+
+
+
+
+
+
+
+
+
RadioButton
+
+
+
Checkbox
+
+
+
Input Switch
+
+
+
+
+
Listbox
+
+
+
Dropdown
+
+
+
Multiselect
+
+
+
+
+
{{option.name}}
+
+ Select Countries
+
+
+
+
+
+
{{country.name}}
+
+
+
+
+
+
ToggleButton
+
+
+
SelectButton
+
+
+
SelectButton - Multiple
+
+
+
+
+
+
+
+
+
Invalid State
+
+
+
+ InputText
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
DataView
+
+
+
+
+
+
+
+
+
+
{{product.name}}
+
{{product.description}}
+
+
{{product.category}}
+
+
+
${{product.price}}
+
+
{{product.inventoryStatus}}
+
+
+
+
+
+
+
+
+ {{product.category}}
+
+
{{product.inventoryStatus}}
+
+
+
+
{{product.name}}
+
{{product.description}}
+
+
+
+
+
+
+
+
+
+
+
+
PickList
+
+
+ {{city.name}}
+
+
+
+
+
+
+
+
OrderList
+
+
+ {{city.name}}
+
+
+
+
+
+
+
+
MenuBar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
ContextMenu
+ Right click to display.
+
+
+
+
+
+
+
MegaMenu - Horizontal
+
+
+
MegaMenu - Vertical
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Help Text
+
+ Username
+ Username is not available.
+
+
+
+
+
+
+
+
Badge
+
Numbers
+
+
+
Positioned Badge
+
+
+
+
+
+
Inline Button Badge
+
+
+
+
Sizes
+
+
+
+
+
Avatar
+
Avatar Group
+
+
+
+
Label - Circle
+
+
+
+
+
Icon - Badge
+
+
+
+
+
ScrollTop
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Vitae et leo duis ut diam.
+ Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+ Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+ Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+ Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+ Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+ Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+ Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+ Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+ Mattis aliquam faucibus purus in massa tempor nec.
+
+
+
+
+
+
+
Tag
+
Tags
+
+
+
+
+
+
+
Pills
+
+
+
+
+
+
+
Icons
+
+
+
+
+
+
+
+
+
Chip
+
Basic
+
+
+
Icon
+
+
+
Image
+
+
+
Styling
+
+
+
+
+
+
+
+
+
+
Dialog
+
+
+ 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.
+
+
+
+
+
+
+
+
+
Overlay Panel
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Image
+ Price
+
+
+
+
+ {{product.name}}
+ {{formatCurrency(product.price)}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sidebar
+
+ Left Sidebar
+
+
+
+ Right Sidebar
+
+
+
+ Top Sidebar
+
+
+
+ Bottom Sidebar
+
+
+
+ Full Screen Sidebar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
AccordionPanel
+
+
+ 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.
+
+
+ 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.
+
+
+ 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.
+
+
+
+
+
+
TabView
+
+
+ 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.
+
+
+ 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.
+
+
+ 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.
+
+
+
+
+
+
+
+
Panel
+
+ 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.
+
+
+
+
+
Fieldset
+
+ 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.
+
+
+
+
+
+
+
Subtitle
+
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.
+
+
+
+
+
+
Divider
+
+
+
+
+ Username
+
+
+ Password
+
+
+
+
+
+
+
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.
+
+
+ Badge
+
+
+
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.
+
+
+
+
+
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
+ voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
+ a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
+ doloribus asperiores repellat.
+ Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
+ Morbi dapibus luctus odio.
+
+
+
+
+
+
+
+
Splitter
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
Default
+
Pagination, sorting, filtering and checkbox selection.
+
+
+
+ List of Customers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ {{customer.name}}
+
+
+ Country
+ {{customer.country.name}}
+
+
+ Representative
+ {{customer.representative.name}}
+
+
+ Date
+ {{customer.date | date: 'MM/dd/yyyy'}}
+
+
+ Status
+ {{customer.status}}
+
+
+ Activity
+
+
+
+
+
+
+
+ No customers found.
+
+
+
+
+
+
+
+
+
Customized
+
Scrollable table with gridlines (.p-datatable-gridlines ), striped rows (.p-datatable-striped ) and smaller paddings (p-datatable-sm ).
+
+
+
+ List of Customers
+
+
+
+
+
+
+ Name
+
+ Country
+
+ Representative
+
+ Date
+
+ Status
+
+ Activity
+
+
+
+
+
+
+ Name
+ {{customer.name}}
+
+
+ Country
+ {{customer.country.name}}
+
+
+ Representative
+ {{customer.representative.name}}
+
+
+ Date
+ {{customer.date}}
+
+
+ Status
+ {{customer.status}}
+
+
+ Activity
+
+
+
+
+
+ No customers found.
+
+
+
+
+
+
+
+
+
Row Expand
+
+
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+
+
+ Name {{product.name}}Image Price {{product.price | currency:'USD'}}Category {{product.category}}Reviews Status {{product.inventoryStatus}}
+
+
+
+
+
+
+
+
+ Id
+ Customer
+ Date
+ Amount
+ Status
+
+
+
+
+ Id {{order.id}}Customer {{order.customer}}Date {{order.date}}Amount {{order.amount | currency:'USD'}}Status {{order.status}}
+
+
+
+ There are no order for this product yet.
+
+
+
+
+
+
+
+
+
+
+
+
+
Row Group and Scrolling
+
+
+
+ Name
+ Country
+ Company
+ Status
+ Date
+
+
+
+
+
+ {{customer.representative.name}}
+
+
+
+ Name
+ {{customer.name}}
+ Country
+ {{customer.country.name}}
+ Company
+ {{customer.company}}
+ Status
+ {{customer.status}}
+ Date
+ {{customer.date}}
+
+
+
+
+
+
+
+
+
+
TreeTable
+
+
+
+
+ {{col.header}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Code
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+
+
+ Code
+ {{product.code}}
+ Name
+ {{product.name}}
+ Image
+ Price
+ {{product.price | currency:'USD'}}
+ Category
+ {{product.category}}
+ Reviews
+ Status
+ {{product.inventoryStatus}}
+
+
+
+
+
+
+
+
+
+
+ Name
+ Name is required.
+
+
+ Description
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Timeline
+
+
Custom Timeline
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+ quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+
+
+
+
+
Horizontal - Alternate Align
+
+
+ {{event}}
+
+
+
+
+
+
+
+
+ Artboard
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/demo/images/product/purple-band.jpg b/src/assets/demo/images/product/purple-band.jpg
new file mode 100644
index 0000000..17523fe
Binary files /dev/null and b/src/assets/demo/images/product/purple-band.jpg differ
diff --git a/src/assets/demo/images/product/purple-gemstone-necklace.jpg b/src/assets/demo/images/product/purple-gemstone-necklace.jpg
new file mode 100644
index 0000000..a40d4b3
Binary files /dev/null and b/src/assets/demo/images/product/purple-gemstone-necklace.jpg differ
diff --git a/src/assets/demo/images/product/purple-t-shirt.jpg b/src/assets/demo/images/product/purple-t-shirt.jpg
new file mode 100644
index 0000000..12d75f1
Binary files /dev/null and b/src/assets/demo/images/product/purple-t-shirt.jpg differ
diff --git a/src/assets/demo/images/product/shoes.jpg b/src/assets/demo/images/product/shoes.jpg
new file mode 100644
index 0000000..efc7aca
Binary files /dev/null and b/src/assets/demo/images/product/shoes.jpg differ
diff --git a/src/assets/demo/images/product/sneakers.jpg b/src/assets/demo/images/product/sneakers.jpg
new file mode 100644
index 0000000..53f66dc
Binary files /dev/null and b/src/assets/demo/images/product/sneakers.jpg differ
diff --git a/src/assets/demo/images/product/teal-t-shirt.jpg b/src/assets/demo/images/product/teal-t-shirt.jpg
new file mode 100644
index 0000000..749ae9d
Binary files /dev/null and b/src/assets/demo/images/product/teal-t-shirt.jpg differ
diff --git a/src/assets/demo/images/product/yellow-earbuds.jpg b/src/assets/demo/images/product/yellow-earbuds.jpg
new file mode 100644
index 0000000..1bfc87a
Binary files /dev/null and b/src/assets/demo/images/product/yellow-earbuds.jpg differ
diff --git a/src/assets/demo/images/product/yoga-mat.jpg b/src/assets/demo/images/product/yoga-mat.jpg
new file mode 100644
index 0000000..18d9564
Binary files /dev/null and b/src/assets/demo/images/product/yoga-mat.jpg differ
diff --git a/src/assets/demo/images/product/yoga-set.jpg b/src/assets/demo/images/product/yoga-set.jpg
new file mode 100644
index 0000000..734ba58
Binary files /dev/null and b/src/assets/demo/images/product/yoga-set.jpg differ
diff --git a/src/assets/layout/images/banner-primeblocks-dark.png b/src/assets/layout/images/banner-primeblocks-dark.png
new file mode 100644
index 0000000..21bb88e
Binary files /dev/null and b/src/assets/layout/images/banner-primeblocks-dark.png differ
diff --git a/src/assets/layout/images/banner-primeblocks.png b/src/assets/layout/images/banner-primeblocks.png
new file mode 100644
index 0000000..5304b4b
Binary files /dev/null and b/src/assets/layout/images/banner-primeblocks.png differ
diff --git a/src/assets/layout/images/logo-dark.svg b/src/assets/layout/images/logo-dark.svg
new file mode 100644
index 0000000..303ca85
--- /dev/null
+++ b/src/assets/layout/images/logo-dark.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/src/assets/layout/images/logo-white.svg b/src/assets/layout/images/logo-white.svg
new file mode 100644
index 0000000..ed15e69
--- /dev/null
+++ b/src/assets/layout/images/logo-white.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/src/assets/layout/images/pages/icon-design.svg b/src/assets/layout/images/pages/icon-design.svg
new file mode 100644
index 0000000..09c47bb
--- /dev/null
+++ b/src/assets/layout/images/pages/icon-design.svg
@@ -0,0 +1,17 @@
+
+
+
+ noun_design_135895
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/pages/icon-devices.svg b/src/assets/layout/images/pages/icon-devices.svg
new file mode 100644
index 0000000..7e34db5
--- /dev/null
+++ b/src/assets/layout/images/pages/icon-devices.svg
@@ -0,0 +1,15 @@
+
+
+
+ noun_devices_165980
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/pages/icon-diamond.svg b/src/assets/layout/images/pages/icon-diamond.svg
new file mode 100644
index 0000000..210e661
--- /dev/null
+++ b/src/assets/layout/images/pages/icon-diamond.svg
@@ -0,0 +1,17 @@
+
+
+
+ icon-diamond
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/pages/icon-document.svg b/src/assets/layout/images/pages/icon-document.svg
new file mode 100644
index 0000000..32d1e28
--- /dev/null
+++ b/src/assets/layout/images/pages/icon-document.svg
@@ -0,0 +1,19 @@
+
+
+
+ icon-document
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/themes/arya-blue.png b/src/assets/layout/images/themes/arya-blue.png
new file mode 100644
index 0000000..62a7b05
Binary files /dev/null and b/src/assets/layout/images/themes/arya-blue.png differ
diff --git a/src/assets/layout/images/themes/arya-green.png b/src/assets/layout/images/themes/arya-green.png
new file mode 100644
index 0000000..8b67fd8
Binary files /dev/null and b/src/assets/layout/images/themes/arya-green.png differ
diff --git a/src/assets/layout/images/themes/arya-orange.png b/src/assets/layout/images/themes/arya-orange.png
new file mode 100644
index 0000000..fef1ac4
Binary files /dev/null and b/src/assets/layout/images/themes/arya-orange.png differ
diff --git a/src/assets/layout/images/themes/arya-purple.png b/src/assets/layout/images/themes/arya-purple.png
new file mode 100644
index 0000000..fb7f9e8
Binary files /dev/null and b/src/assets/layout/images/themes/arya-purple.png differ
diff --git a/src/assets/layout/images/themes/bootstrap4-dark-blue.svg b/src/assets/layout/images/themes/bootstrap4-dark-blue.svg
new file mode 100644
index 0000000..d0a9de4
--- /dev/null
+++ b/src/assets/layout/images/themes/bootstrap4-dark-blue.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/layout/images/themes/bootstrap4-dark-purple.svg b/src/assets/layout/images/themes/bootstrap4-dark-purple.svg
new file mode 100644
index 0000000..c97df77
--- /dev/null
+++ b/src/assets/layout/images/themes/bootstrap4-dark-purple.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/layout/images/themes/bootstrap4-light-blue.svg b/src/assets/layout/images/themes/bootstrap4-light-blue.svg
new file mode 100644
index 0000000..93c8b56
--- /dev/null
+++ b/src/assets/layout/images/themes/bootstrap4-light-blue.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/layout/images/themes/bootstrap4-light-purple.svg b/src/assets/layout/images/themes/bootstrap4-light-purple.svg
new file mode 100644
index 0000000..b9c644c
--- /dev/null
+++ b/src/assets/layout/images/themes/bootstrap4-light-purple.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/layout/images/themes/fluent-light.png b/src/assets/layout/images/themes/fluent-light.png
new file mode 100644
index 0000000..4766eeb
Binary files /dev/null and b/src/assets/layout/images/themes/fluent-light.png differ
diff --git a/src/assets/layout/images/themes/lara-dark-blue.png b/src/assets/layout/images/themes/lara-dark-blue.png
new file mode 100644
index 0000000..0a99908
Binary files /dev/null and b/src/assets/layout/images/themes/lara-dark-blue.png differ
diff --git a/src/assets/layout/images/themes/lara-dark-indigo.png b/src/assets/layout/images/themes/lara-dark-indigo.png
new file mode 100644
index 0000000..b435d98
Binary files /dev/null and b/src/assets/layout/images/themes/lara-dark-indigo.png differ
diff --git a/src/assets/layout/images/themes/lara-dark-purple.png b/src/assets/layout/images/themes/lara-dark-purple.png
new file mode 100644
index 0000000..e0d5bf4
Binary files /dev/null and b/src/assets/layout/images/themes/lara-dark-purple.png differ
diff --git a/src/assets/layout/images/themes/lara-dark-teal.png b/src/assets/layout/images/themes/lara-dark-teal.png
new file mode 100644
index 0000000..2ae2194
Binary files /dev/null and b/src/assets/layout/images/themes/lara-dark-teal.png differ
diff --git a/src/assets/layout/images/themes/lara-light-blue.png b/src/assets/layout/images/themes/lara-light-blue.png
new file mode 100644
index 0000000..0278849
Binary files /dev/null and b/src/assets/layout/images/themes/lara-light-blue.png differ
diff --git a/src/assets/layout/images/themes/lara-light-indigo.png b/src/assets/layout/images/themes/lara-light-indigo.png
new file mode 100644
index 0000000..80bee58
Binary files /dev/null and b/src/assets/layout/images/themes/lara-light-indigo.png differ
diff --git a/src/assets/layout/images/themes/lara-light-purple.png b/src/assets/layout/images/themes/lara-light-purple.png
new file mode 100644
index 0000000..7745c13
Binary files /dev/null and b/src/assets/layout/images/themes/lara-light-purple.png differ
diff --git a/src/assets/layout/images/themes/lara-light-teal.png b/src/assets/layout/images/themes/lara-light-teal.png
new file mode 100644
index 0000000..f8fb07f
Binary files /dev/null and b/src/assets/layout/images/themes/lara-light-teal.png differ
diff --git a/src/assets/layout/images/themes/luna-amber.png b/src/assets/layout/images/themes/luna-amber.png
new file mode 100644
index 0000000..2cb7685
Binary files /dev/null and b/src/assets/layout/images/themes/luna-amber.png differ
diff --git a/src/assets/layout/images/themes/luna-blue.png b/src/assets/layout/images/themes/luna-blue.png
new file mode 100644
index 0000000..fac4339
Binary files /dev/null and b/src/assets/layout/images/themes/luna-blue.png differ
diff --git a/src/assets/layout/images/themes/luna-green.png b/src/assets/layout/images/themes/luna-green.png
new file mode 100644
index 0000000..f4c3789
Binary files /dev/null and b/src/assets/layout/images/themes/luna-green.png differ
diff --git a/src/assets/layout/images/themes/luna-pink.png b/src/assets/layout/images/themes/luna-pink.png
new file mode 100644
index 0000000..6ef7b35
Binary files /dev/null and b/src/assets/layout/images/themes/luna-pink.png differ
diff --git a/src/assets/layout/images/themes/md-dark-deeppurple.svg b/src/assets/layout/images/themes/md-dark-deeppurple.svg
new file mode 100644
index 0000000..c6f838b
--- /dev/null
+++ b/src/assets/layout/images/themes/md-dark-deeppurple.svg
@@ -0,0 +1,9 @@
+
+
+ 4
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/themes/md-dark-indigo.svg b/src/assets/layout/images/themes/md-dark-indigo.svg
new file mode 100644
index 0000000..68658b6
--- /dev/null
+++ b/src/assets/layout/images/themes/md-dark-indigo.svg
@@ -0,0 +1,9 @@
+
+
+ 2
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/themes/md-light-deeppurple.svg b/src/assets/layout/images/themes/md-light-deeppurple.svg
new file mode 100644
index 0000000..0d3119f
--- /dev/null
+++ b/src/assets/layout/images/themes/md-light-deeppurple.svg
@@ -0,0 +1,9 @@
+
+
+ 4
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/themes/md-light-indigo.svg b/src/assets/layout/images/themes/md-light-indigo.svg
new file mode 100644
index 0000000..1afeed7
--- /dev/null
+++ b/src/assets/layout/images/themes/md-light-indigo.svg
@@ -0,0 +1,9 @@
+
+
+ 2
+
+
+
\ No newline at end of file
diff --git a/src/assets/layout/images/themes/mira.jpg b/src/assets/layout/images/themes/mira.jpg
new file mode 100644
index 0000000..18e5b6e
Binary files /dev/null and b/src/assets/layout/images/themes/mira.jpg differ
diff --git a/src/assets/layout/images/themes/nano.jpg b/src/assets/layout/images/themes/nano.jpg
new file mode 100644
index 0000000..62f3a10
Binary files /dev/null and b/src/assets/layout/images/themes/nano.jpg differ
diff --git a/src/assets/layout/images/themes/nova-accent.png b/src/assets/layout/images/themes/nova-accent.png
new file mode 100644
index 0000000..260087f
Binary files /dev/null and b/src/assets/layout/images/themes/nova-accent.png differ
diff --git a/src/assets/layout/images/themes/nova-alt.png b/src/assets/layout/images/themes/nova-alt.png
new file mode 100644
index 0000000..6d2eaa7
Binary files /dev/null and b/src/assets/layout/images/themes/nova-alt.png differ
diff --git a/src/assets/layout/images/themes/nova.png b/src/assets/layout/images/themes/nova.png
new file mode 100644
index 0000000..12ff704
Binary files /dev/null and b/src/assets/layout/images/themes/nova.png differ
diff --git a/src/assets/layout/images/themes/rhea.png b/src/assets/layout/images/themes/rhea.png
new file mode 100644
index 0000000..2ac3421
Binary files /dev/null and b/src/assets/layout/images/themes/rhea.png differ
diff --git a/src/assets/layout/images/themes/saga-blue.png b/src/assets/layout/images/themes/saga-blue.png
new file mode 100644
index 0000000..0671d46
Binary files /dev/null and b/src/assets/layout/images/themes/saga-blue.png differ
diff --git a/src/assets/layout/images/themes/saga-green.png b/src/assets/layout/images/themes/saga-green.png
new file mode 100644
index 0000000..4c8c3b8
Binary files /dev/null and b/src/assets/layout/images/themes/saga-green.png differ
diff --git a/src/assets/layout/images/themes/saga-orange.png b/src/assets/layout/images/themes/saga-orange.png
new file mode 100644
index 0000000..2cabd5d
Binary files /dev/null and b/src/assets/layout/images/themes/saga-orange.png differ
diff --git a/src/assets/layout/images/themes/saga-purple.png b/src/assets/layout/images/themes/saga-purple.png
new file mode 100644
index 0000000..4b45f8b
Binary files /dev/null and b/src/assets/layout/images/themes/saga-purple.png differ
diff --git a/src/assets/layout/images/themes/soho-dark.png b/src/assets/layout/images/themes/soho-dark.png
new file mode 100644
index 0000000..02194d4
Binary files /dev/null and b/src/assets/layout/images/themes/soho-dark.png differ
diff --git a/src/assets/layout/images/themes/soho-light.png b/src/assets/layout/images/themes/soho-light.png
new file mode 100644
index 0000000..9532fb5
Binary files /dev/null and b/src/assets/layout/images/themes/soho-light.png differ
diff --git a/src/assets/layout/images/themes/tailwind-light.png b/src/assets/layout/images/themes/tailwind-light.png
new file mode 100644
index 0000000..679bd1e
Binary files /dev/null and b/src/assets/layout/images/themes/tailwind-light.png differ
diff --git a/src/assets/layout/images/themes/vela-blue.png b/src/assets/layout/images/themes/vela-blue.png
new file mode 100644
index 0000000..6780f35
Binary files /dev/null and b/src/assets/layout/images/themes/vela-blue.png differ
diff --git a/src/assets/layout/images/themes/vela-green.png b/src/assets/layout/images/themes/vela-green.png
new file mode 100644
index 0000000..6344526
Binary files /dev/null and b/src/assets/layout/images/themes/vela-green.png differ
diff --git a/src/assets/layout/images/themes/vela-orange.png b/src/assets/layout/images/themes/vela-orange.png
new file mode 100644
index 0000000..a2a9cde
Binary files /dev/null and b/src/assets/layout/images/themes/vela-orange.png differ
diff --git a/src/assets/layout/images/themes/vela-purple.png b/src/assets/layout/images/themes/vela-purple.png
new file mode 100644
index 0000000..d53ac06
Binary files /dev/null and b/src/assets/layout/images/themes/vela-purple.png differ
diff --git a/src/assets/layout/images/themes/viva-dark.svg b/src/assets/layout/images/themes/viva-dark.svg
new file mode 100644
index 0000000..43b7706
--- /dev/null
+++ b/src/assets/layout/images/themes/viva-dark.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/layout/images/themes/viva-light.svg b/src/assets/layout/images/themes/viva-light.svg
new file mode 100644
index 0000000..1904eb4
--- /dev/null
+++ b/src/assets/layout/images/themes/viva-light.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/layout/images/widgets/user-card.jpg b/src/assets/layout/images/widgets/user-card.jpg
new file mode 100644
index 0000000..cba8ef5
Binary files /dev/null and b/src/assets/layout/images/widgets/user-card.jpg differ
diff --git a/src/assets/layout/layout.css b/src/assets/layout/layout.css
new file mode 100644
index 0000000..de58b74
--- /dev/null
+++ b/src/assets/layout/layout.css
@@ -0,0 +1,556 @@
+/* General */
+/* Add your customizations of the layout variables here */
+.preloader {
+ position: fixed;
+ z-index: 999999;
+ background: #edf1f5;
+ width: 100%;
+ height: 100%;
+}
+
+.preloader-content {
+ border: 0 solid transparent;
+ border-radius: 50%;
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ top: calc(50vh - 75px);
+ left: calc(50vw - 75px);
+}
+
+.preloader-content:before, .preloader-content:after {
+ content: "";
+ border: 1em solid var(--primary-color);
+ border-radius: 50%;
+ width: inherit;
+ height: inherit;
+ position: absolute;
+ top: 0;
+ left: 0;
+ animation: loader 2s linear infinite;
+ opacity: 0;
+}
+
+.preloader-content:before {
+ animation-delay: 0.5s;
+}
+
+@keyframes loader {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0;
+ }
+}
+* {
+ box-sizing: border-box;
+}
+
+html {
+ height: 100%;
+ font-size: 10px;
+}
+
+body {
+ font-family: var(--font-family);
+ color: var(--text-color);
+ background-color: var(--surface-ground);
+ margin: 0;
+ padding: 0;
+ min-height: 100%;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ text-decoration: none;
+ color: var(--primary-color);
+}
+
+.layout-theme-light {
+ background-color: #edf1f5;
+}
+
+.layout-topbar {
+ position: fixed;
+ height: 5rem;
+ z-index: 997;
+ left: 0;
+ top: 0;
+ width: 100%;
+ padding: 0 2rem;
+ background-color: var(--surface-card);
+ transition: left 0.2s;
+ display: flex;
+ align-items: center;
+ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
+}
+.layout-topbar .layout-topbar-logo {
+ display: flex;
+ align-items: center;
+ color: var(--surface-900);
+ font-size: 1.5rem;
+ font-weight: 500;
+ width: 300px;
+ border-radius: 12px;
+}
+.layout-topbar .layout-topbar-logo img {
+ height: 2.5rem;
+ margin-right: 0.5rem;
+}
+.layout-topbar .layout-topbar-logo:focus {
+ outline: 0 none;
+ outline-offset: 0;
+ transition: box-shadow 0.2s;
+ box-shadow: var(--focus-ring);
+}
+.layout-topbar .layout-topbar-button {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ color: var(--text-color-secondary);
+ border-radius: 50%;
+ width: 3rem;
+ height: 3rem;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+.layout-topbar .layout-topbar-button:hover {
+ color: var(--text-color);
+ background-color: var(--surface-hover);
+}
+.layout-topbar .layout-topbar-button:focus {
+ outline: 0 none;
+ outline-offset: 0;
+ transition: box-shadow 0.2s;
+ box-shadow: var(--focus-ring);
+}
+.layout-topbar .layout-topbar-button i {
+ font-size: 1.5rem;
+}
+.layout-topbar .layout-topbar-button span {
+ font-size: 1rem;
+ display: none;
+}
+.layout-topbar .layout-menu-button {
+ margin-left: 2rem;
+}
+.layout-topbar .layout-topbar-menu-button {
+ display: none;
+}
+.layout-topbar .layout-topbar-menu-button i {
+ font-size: 1.25rem;
+}
+.layout-topbar .layout-topbar-menu {
+ margin: 0 0 0 auto;
+ padding: 0;
+ list-style: none;
+ display: flex;
+}
+.layout-topbar .layout-topbar-menu .layout-topbar-button {
+ margin-left: 1rem;
+}
+
+@media (max-width: 991px) {
+ .layout-topbar {
+ justify-content: space-between;
+ }
+ .layout-topbar .layout-topbar-logo {
+ width: auto;
+ order: 2;
+ }
+ .layout-topbar .layout-menu-button {
+ margin-left: 0;
+ order: 1;
+ }
+ .layout-topbar .layout-topbar-menu-button {
+ display: inline-flex;
+ margin-left: 0;
+ order: 3;
+ }
+ .layout-topbar .layout-topbar-menu {
+ margin-left: 0;
+ position: absolute;
+ flex-direction: column;
+ background-color: var(--surface-overlay);
+ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
+ border-radius: 12px;
+ padding: 1rem;
+ right: 2rem;
+ top: 5rem;
+ min-width: 15rem;
+ display: none;
+ -webkit-animation: scalein 0.15s linear;
+ animation: scalein 0.15s linear;
+ }
+ .layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active {
+ display: block;
+ }
+ .layout-topbar .layout-topbar-menu .layout-topbar-button {
+ margin-left: 0;
+ display: flex;
+ width: 100%;
+ height: auto;
+ justify-content: flex-start;
+ border-radius: 12px;
+ padding: 1rem;
+ }
+ .layout-topbar .layout-topbar-menu .layout-topbar-button i {
+ font-size: 1rem;
+ margin-right: 0.5rem;
+ }
+ .layout-topbar .layout-topbar-menu .layout-topbar-button span {
+ font-weight: medium;
+ display: block;
+ }
+}
+.layout-sidebar {
+ position: fixed;
+ width: 300px;
+ height: calc(100vh - 9rem);
+ z-index: 999;
+ overflow-y: auto;
+ user-select: none;
+ top: 7rem;
+ left: 2rem;
+ transition: transform 0.2s, left 0.2s;
+ background-color: var(--surface-overlay);
+ border-radius: 12px;
+ padding: 1.5rem;
+ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.layout-menu {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+.layout-menu li.layout-menuitem-category {
+ margin-top: 0.75rem;
+}
+.layout-menu li.layout-menuitem-category:first-child {
+ margin-top: 0;
+}
+.layout-menu li .layout-menuitem-root-text {
+ text-transform: uppercase;
+ color: var(--text-color-secondary);
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ font-size: 0.875rem;
+}
+.layout-menu li a {
+ cursor: pointer;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ color: var(--text-color);
+ transition: color 0.2s;
+ border-radius: 12px;
+ padding: 0.75rem 1rem;
+ transition: background-color 0.15s;
+}
+.layout-menu li a span {
+ margin-left: 0.5rem;
+}
+.layout-menu li a .menuitem-toggle-icon {
+ margin-left: auto;
+}
+.layout-menu li a:focus {
+ outline: 0 none;
+ outline-offset: 0;
+ transition: box-shadow 0.2s;
+ box-shadow: inset var(--focus-ring);
+}
+.layout-menu li a:hover {
+ background-color: var(--surface-hover);
+}
+.layout-menu li a.router-link-exact-active {
+ font-weight: 700;
+}
+.layout-menu li.active-menuitem > a .menuitem-toggle-icon:before {
+ content: "\e933";
+}
+.layout-menu li ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+.layout-menu li ul.layout-submenu-wrapper-enter {
+ max-height: 0;
+}
+.layout-menu li ul.layout-submenu-wrapper-enter-active {
+ overflow: hidden;
+ max-height: 1000px;
+ transition: max-height 1s ease-in-out;
+}
+.layout-menu li ul.layout-submenu-wrapper-enter-done {
+ transform: none;
+}
+.layout-menu li ul.layout-submenu-wrapper-exit {
+ max-height: 1000px;
+}
+.layout-menu li ul.layout-submenu-wrapper-exit-active {
+ overflow: hidden;
+ max-height: 0;
+ transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1);
+}
+.layout-menu li ul ul {
+ padding-left: 1rem;
+}
+
+.layout-config {
+ position: fixed;
+ top: 0;
+ padding: 0;
+ right: 0;
+ width: 20rem;
+ z-index: 999;
+ height: 100vh;
+ transform: translateX(100%);
+ transition: transform 0.2s;
+ backface-visibility: hidden;
+ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08) !important;
+ color: var(--text-color);
+ background-color: var(--surface-overlay);
+ border-top-left-radius: 12px;
+ border-bottom-left-radius: 12px;
+}
+.layout-config.layout-config-active {
+ transform: translateX(0);
+}
+.layout-config .layout-config-button {
+ display: block;
+ position: absolute;
+ width: 52px;
+ height: 52px;
+ line-height: 52px;
+ background-color: var(--primary-color);
+ color: var(--primary-color-text);
+ text-align: center;
+ top: 230px;
+ left: -52px;
+ z-index: -1;
+ overflow: hidden;
+ cursor: pointer;
+ border-top-left-radius: 12px;
+ border-bottom-left-radius: 12px;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ transition: background-color 0.2s;
+}
+.layout-config .layout-config-button i {
+ font-size: 32px;
+ line-height: inherit;
+ cursor: pointer;
+ transform: rotate(0deg);
+ transition: color 0.2s, transform 1s;
+}
+.layout-config .layout-config-close {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ z-index: 1;
+}
+.layout-config .layout-config-content {
+ position: relative;
+ overflow: auto;
+ height: calc(100vh - 5rem);
+ padding: 2rem;
+}
+.layout-config .config-scale {
+ display: flex;
+ align-items: center;
+ margin: 1rem 0 2rem 0;
+}
+.layout-config .config-scale .p-button {
+ margin-right: 0.5rem;
+}
+.layout-config .config-scale i {
+ margin-right: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+}
+.layout-config .config-scale i.scale-active {
+ font-size: 1.25rem;
+ color: var(--primary-color);
+}
+.layout-config .free-themes img {
+ width: 2rem;
+ border-radius: 4px;
+ transition: transform 0.2s;
+ display: block;
+}
+.layout-config .free-themes img:hover {
+ transform: scale(1.1);
+}
+.layout-config .free-themes span {
+ font-size: 0.75rem;
+ margin-top: 0.25rem;
+}
+
+.layout-main-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ justify-content: space-between;
+ padding: 7rem 2rem 2rem 4rem;
+ transition: margin-left 0.2s;
+}
+
+.layout-main {
+ flex: 1 1 auto;
+}
+
+.layout-footer {
+ transition: margin-left 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 1rem;
+ border-top: 1px solid var(--surface-border);
+}
+
+@media (min-width: 992px) {
+ .layout-wrapper.layout-overlay .layout-main-container {
+ margin-left: 0;
+ padding-left: 2rem;
+ }
+ .layout-wrapper.layout-overlay .layout-sidebar {
+ transform: translateX(-100%);
+ left: 0;
+ top: 0;
+ height: 100vh;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .layout-wrapper.layout-overlay.layout-overlay-sidebar-active .layout-sidebar {
+ transform: translateX(0);
+ }
+ .layout-wrapper.layout-static .layout-main-container {
+ margin-left: 300px;
+ }
+ .layout-wrapper.layout-static.layout-static-sidebar-inactive .layout-sidebar {
+ transform: translateX(-100%);
+ left: 0;
+ }
+ .layout-wrapper.layout-static.layout-static-sidebar-inactive .layout-main-container {
+ margin-left: 0;
+ padding-left: 2rem;
+ }
+ .layout-wrapper .layout-mask {
+ display: none;
+ }
+}
+@media (max-width: 991px) {
+ .layout-wrapper .layout-main-container {
+ margin-left: 0;
+ padding-left: 2rem;
+ }
+ .layout-wrapper .layout-sidebar {
+ transform: translateX(-100%);
+ left: 0;
+ top: 0;
+ height: 100vh;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .layout-wrapper .layout-mask {
+ z-index: 998;
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+ .layout-wrapper .layout-mask.layout-mask-enter-from, .layout-wrapper .layout-mask.layout-mask-leave-to {
+ background-color: transparent;
+ }
+ .layout-wrapper.layout-mobile-sidebar-active .layout-sidebar {
+ transform: translateX(0);
+ }
+ .layout-wrapper.layout-mobile-sidebar-active .layout-mask {
+ display: block;
+ }
+
+ .body-overflow-hidden {
+ overflow: hidden;
+ }
+}
+.card {
+ background-color: var(--surface-card);
+ padding: 1.5rem;
+ margin-bottom: 1rem;
+ border-radius: 12px;
+ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08) !important;
+}
+.card.card-w-title {
+ padding-bottom: 2rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 1.5rem 0 1rem 0;
+ font-family: inherit;
+ font-weight: 500;
+ line-height: 1.2;
+ color: inherit;
+}
+h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
+ margin-top: 0;
+}
+
+h1 {
+ font-size: 2.5rem;
+}
+
+h2 {
+ font-size: 2rem;
+}
+
+h3 {
+ font-size: 1.75rem;
+}
+
+h4 {
+ font-size: 1.5rem;
+}
+
+h5 {
+ font-size: 1.25rem;
+}
+
+h6 {
+ font-size: 1rem;
+}
+
+mark {
+ background: #FFF8E1;
+ padding: 0.25rem 0.4rem;
+ border-radius: 12px;
+ font-family: monospace;
+}
+
+blockquote {
+ margin: 1rem 0;
+ padding: 0 2rem;
+ border-left: 4px solid #90A4AE;
+}
+
+hr {
+ border-top: solid var(--surface-border);
+ border-width: 1px 0 0 0;
+ margin: 1rem 0;
+}
+
+p {
+ margin: 0 0 1rem 0;
+ line-height: 1.5;
+}
+p:last-child {
+ margin-bottom: 0;
+}
+
+/* Add your customizations of the layout styles here */
diff --git a/src/assets/layout/layout.scss b/src/assets/layout/layout.scss
new file mode 100644
index 0000000..5e3fab5
--- /dev/null
+++ b/src/assets/layout/layout.scss
@@ -0,0 +1,4 @@
+@import "../sass/layout/_variables";
+@import "../sass/overrides/_layout_variables";
+@import "../sass/layout/_layout";
+@import "../sass/overrides/_layout_styles";
diff --git a/src/assets/pages/landing.html b/src/assets/pages/landing.html
new file mode 100644
index 0000000..87ade23
--- /dev/null
+++ b/src/assets/pages/landing.html
@@ -0,0 +1,249 @@
+
+
+
+
+ PrimeNG Omega
+
+
+
+
+
+
+
+
+
+
+
+
+
PrimeNG Omega
+
Clean, Elegant and Functional
+
+
+ Sign Up
+
+
+
+
+
+
+
Omega Features
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+ doloremque.
+
+
+
+
+
+ Responsive
+ Kogi Cosby sweater ethical squid irony disrupt, organic tote bag gluten-free.
+
+
+
+
+
+ Clean
+ Bushwick meh Blue Bottle pork belly mustache skateboard 3 wolf moon.
+
+
+
+
+
+ Grid
+ Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever.
+
+
+
+
+
+ Modern
+ Retro occupy organic, stumptown shabby chic pour-over roof party DIY.
+
+
+
+
+
+ Documented
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam enim numquam.
+
+
+
+
+
+ Support
+ Retro occupy organic, stumptown shabby chic pour-over roof party DIY.
+
+
+
+
+
+
+
+
+
Try Our Mobile App!
+
Available at App Store and Google Play.
+
+
+ Learn More
+
+
+
+
+
+
+
Pricing
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+ doloremque laudantium, totam rem aperiam.
+
+
+
+
+
Basic
+
1$
+
+
50GB Disk Space
+
500GB Monthly Bandwith
+
20 Email Accounts
+
5 Subdomain
+
+
+
+
+
+
Standard
+
5$
+
+
200GB Disk Space
+
1TB Monthly Bandwith
+
50 Email Accounts
+
10 Subdomain
+
+
+
+
+
+
Professional
+
10$
+
+
2TB Disk Space
+
10TB Monthly Bandwith
+
Unlimited Email Accounts
+
50 Subdomain
+
+
+
+
+
+
+
+
+
Video
+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+ doloremque.
+
+ VIDEO
+
+
+
+
+
+
Sakai
+ Sakai PrimeNG
- 
+ by
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+