ng-prime-tools
Version:
An advanced PrimeNG table for Angular
57 lines • 14.3 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../pt-nav-bar-menu/pt-nav-bar-menu.component";
import * as i3 from "../pt-card/pt-card.component";
import * as i4 from "../pt-side-bar-menu/pt-side-bar-menu.component";
import * as i5 from "@angular/router";
import * as i6 from "../pt-footer/pt-footer.component";
import * as i7 from "../pt-bread-crumb/pt-bread-crumb.component";
export class PTPageSkeletonComponent {
constructor() {
this.toggleSidebar = new EventEmitter();
this.isSidebarVisible = true;
}
ngOnInit() {
this.initializeBackgroundCardConfig();
this.initializeContentCardConfig();
}
onToggleSidebar() {
this.isSidebarVisible = !this.isSidebarVisible;
this.toggleSidebar.emit();
}
// Initialize backgroundCardConfig with default values
initializeBackgroundCardConfig() {
this.pageSkeletonConfig.backgroundCardConfig = {
identifier: 'pt-page-skeleton/background',
noBorder: this.pageSkeletonConfig.backgroundCardConfig?.noBorder ?? true,
backgroundColor: this.pageSkeletonConfig.backgroundCardConfig?.backgroundColor || '#fff',
padding: this.pageSkeletonConfig.backgroundCardConfig?.padding || '20px',
margin: this.pageSkeletonConfig.backgroundCardConfig?.margin || '10px',
...this.pageSkeletonConfig.backgroundCardConfig,
};
}
// Initialize contentCardConfig with default values (if necessary)
initializeContentCardConfig() {
this.pageSkeletonConfig.contentCardConfig = {
identifier: 'pt-page-skeleton/content',
noBorder: this.pageSkeletonConfig.contentCardConfig?.noBorder ?? false,
backgroundColor: this.pageSkeletonConfig.contentCardConfig?.backgroundColor || '#f0f0f0',
padding: this.pageSkeletonConfig.contentCardConfig?.padding || '15px',
scrollableVertical: true,
scrollableHorizontal: true,
...this.pageSkeletonConfig.contentCardConfig,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTPageSkeletonComponent, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar (use *ngIf to toggle visibility) -->\n <pt-side-bar-menu\n *ngIf=\"isSidebarVisible\"\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <!-- Content Card Wrapper -->\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n <pt-bread-crumb\n *ngIf=\"pageSkeletonConfig.breadCrumbConfig\"\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n\n <!-- Background Card -->\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n <pt-footer\n *ngIf=\"pageSkeletonConfig.footerConfig\"\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig"], outputs: ["toggleSidebar"] }, { kind: "component", type: i3.PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: i4.PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6.PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: i7.PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
type: Component,
args: [{ selector: 'pt-page-skeleton', template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar (use *ngIf to toggle visibility) -->\n <pt-side-bar-menu\n *ngIf=\"isSidebarVisible\"\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <!-- Content Card Wrapper -->\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n <pt-bread-crumb\n *ngIf=\"pageSkeletonConfig.breadCrumbConfig\"\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n\n <!-- Background Card -->\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n <pt-footer\n *ngIf=\"pageSkeletonConfig.footerConfig\"\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"] }]
}], propDecorators: { pageSkeletonConfig: [{
type: Input
}], toggleSidebar: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHQtcGFnZS1za2VsZXRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LXBhZ2Utc2tlbGV0b24vcHQtcGFnZS1za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LXBhZ2Utc2tlbGV0b24vcHQtcGFnZS1za2VsZXRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFRL0UsTUFBTSxPQUFPLHVCQUF1QjtJQUxwQztRQU9ZLGtCQUFhLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFdkUscUJBQWdCLEdBQVksSUFBSSxDQUFDO0tBc0NsQztJQXBDQyxRQUFRO1FBQ04sSUFBSSxDQUFDLDhCQUE4QixFQUFFLENBQUM7UUFDdEMsSUFBSSxDQUFDLDJCQUEyQixFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUM7UUFDL0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsc0RBQXNEO0lBQ3RELDhCQUE4QjtRQUM1QixJQUFJLENBQUMsa0JBQWtCLENBQUMsb0JBQW9CLEdBQUc7WUFDN0MsVUFBVSxFQUFFLDZCQUE2QjtZQUN6QyxRQUFRLEVBQUUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLG9CQUFvQixFQUFFLFFBQVEsSUFBSSxJQUFJO1lBQ3hFLGVBQWUsRUFDYixJQUFJLENBQUMsa0JBQWtCLENBQUMsb0JBQW9CLEVBQUUsZUFBZSxJQUFJLE1BQU07WUFDekUsT0FBTyxFQUFFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxvQkFBb0IsRUFBRSxPQUFPLElBQUksTUFBTTtZQUN4RSxNQUFNLEVBQUUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLG9CQUFvQixFQUFFLE1BQU0sSUFBSSxNQUFNO1lBQ3RFLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLG9CQUFvQjtTQUNoRCxDQUFDO0lBQ0osQ0FBQztJQUVELGtFQUFrRTtJQUNsRSwyQkFBMkI7UUFDekIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGlCQUFpQixHQUFHO1lBQzFDLFVBQVUsRUFBRSwwQkFBMEI7WUFDdEMsUUFBUSxFQUFFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxpQkFBaUIsRUFBRSxRQUFRLElBQUksS0FBSztZQUN0RSxlQUFlLEVBQ2IsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGlCQUFpQixFQUFFLGVBQWUsSUFBSSxTQUFTO1lBQ3pFLE9BQU8sRUFBRSxJQUFJLENBQUMsa0JBQWtCLENBQUMsaUJBQWlCLEVBQUUsT0FBTyxJQUFJLE1BQU07WUFDckUsa0JBQWtCLEVBQUUsSUFBSTtZQUN4QixvQkFBb0IsRUFBRSxJQUFJO1lBQzFCLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGlCQUFpQjtTQUM3QyxDQUFDO0lBQ0osQ0FBQzsrR0F6Q1UsdUJBQXVCO21HQUF2Qix1QkFBdUIsMkpDUnBDLGt2Q0F3Q0E7OzRGRGhDYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQUtuQixrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBhZ2VTa2VsZXRvbkNvbmZpZywgQ2FyZENvbmZpZyB9IGZyb20gJy4uL21vZGVscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3B0LXBhZ2Utc2tlbGV0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vcHQtcGFnZS1za2VsZXRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3B0LXBhZ2Utc2tlbGV0b24uY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBQVFBhZ2VTa2VsZXRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHBhZ2VTa2VsZXRvbkNvbmZpZyE6IFBhZ2VTa2VsZXRvbkNvbmZpZztcbiAgQE91dHB1dCgpIHRvZ2dsZVNpZGViYXI6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBpc1NpZGViYXJWaXNpYmxlOiBib29sZWFuID0gdHJ1ZTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmluaXRpYWxpemVCYWNrZ3JvdW5kQ2FyZENvbmZpZygpO1xuICAgIHRoaXMuaW5pdGlhbGl6ZUNvbnRlbnRDYXJkQ29uZmlnKCk7XG4gIH1cblxuICBvblRvZ2dsZVNpZGViYXIoKTogdm9pZCB7XG4gICAgdGhpcy5pc1NpZGViYXJWaXNpYmxlID0gIXRoaXMuaXNTaWRlYmFyVmlzaWJsZTtcbiAgICB0aGlzLnRvZ2dsZVNpZGViYXIuZW1pdCgpO1xuICB9XG5cbiAgLy8gSW5pdGlhbGl6ZSBiYWNrZ3JvdW5kQ2FyZENvbmZpZyB3aXRoIGRlZmF1bHQgdmFsdWVzXG4gIGluaXRpYWxpemVCYWNrZ3JvdW5kQ2FyZENvbmZpZygpIHtcbiAgICB0aGlzLnBhZ2VTa2VsZXRvbkNvbmZpZy5iYWNrZ3JvdW5kQ2FyZENvbmZpZyA9IHtcbiAgICAgIGlkZW50aWZpZXI6ICdwdC1wYWdlLXNrZWxldG9uL2JhY2tncm91bmQnLFxuICAgICAgbm9Cb3JkZXI6IHRoaXMucGFnZVNrZWxldG9uQ29uZmlnLmJhY2tncm91bmRDYXJkQ29uZmlnPy5ub0JvcmRlciA/PyB0cnVlLFxuICAgICAgYmFja2dyb3VuZENvbG9yOlxuICAgICAgICB0aGlzLnBhZ2VTa2VsZXRvbkNvbmZpZy5iYWNrZ3JvdW5kQ2FyZENvbmZpZz8uYmFja2dyb3VuZENvbG9yIHx8ICcjZmZmJyxcbiAgICAgIHBhZGRpbmc6IHRoaXMucGFnZVNrZWxldG9uQ29uZmlnLmJhY2tncm91bmRDYXJkQ29uZmlnPy5wYWRkaW5nIHx8ICcyMHB4JyxcbiAgICAgIG1hcmdpbjogdGhpcy5wYWdlU2tlbGV0b25Db25maWcuYmFja2dyb3VuZENhcmRDb25maWc/Lm1hcmdpbiB8fCAnMTBweCcsXG4gICAgICAuLi50aGlzLnBhZ2VTa2VsZXRvbkNvbmZpZy5iYWNrZ3JvdW5kQ2FyZENvbmZpZyxcbiAgICB9O1xuICB9XG5cbiAgLy8gSW5pdGlhbGl6ZSBjb250ZW50Q2FyZENvbmZpZyB3aXRoIGRlZmF1bHQgdmFsdWVzIChpZiBuZWNlc3NhcnkpXG4gIGluaXRpYWxpemVDb250ZW50Q2FyZENvbmZpZygpIHtcbiAgICB0aGlzLnBhZ2VTa2VsZXRvbkNvbmZpZy5jb250ZW50Q2FyZENvbmZpZyA9IHtcbiAgICAgIGlkZW50aWZpZXI6ICdwdC1wYWdlLXNrZWxldG9uL2NvbnRlbnQnLFxuICAgICAgbm9Cb3JkZXI6IHRoaXMucGFnZVNrZWxldG9uQ29uZmlnLmNvbnRlbnRDYXJkQ29uZmlnPy5ub0JvcmRlciA/PyBmYWxzZSxcbiAgICAgIGJhY2tncm91bmRDb2xvcjpcbiAgICAgICAgdGhpcy5wYWdlU2tlbGV0b25Db25maWcuY29udGVudENhcmRDb25maWc/LmJhY2tncm91bmRDb2xvciB8fCAnI2YwZjBmMCcsXG4gICAgICBwYWRkaW5nOiB0aGlzLnBhZ2VTa2VsZXRvbkNvbmZpZy5jb250ZW50Q2FyZENvbmZpZz8ucGFkZGluZyB8fCAnMTVweCcsXG4gICAgICBzY3JvbGxhYmxlVmVydGljYWw6IHRydWUsXG4gICAgICBzY3JvbGxhYmxlSG9yaXpvbnRhbDogdHJ1ZSxcbiAgICAgIC4uLnRoaXMucGFnZVNrZWxldG9uQ29uZmlnLmNvbnRlbnRDYXJkQ29uZmlnLFxuICAgIH07XG4gIH1cbn1cbiIsIjxwdC1jYXJkIFtjb25maWddPVwicGFnZVNrZWxldG9uQ29uZmlnLmJhY2tncm91bmRDYXJkQ29uZmlnIVwiPlxuICA8IS0tIE5hdmJhciAtLT5cbiAgPHB0LW5hdi1iYXItbWVudVxuICAgIFtuYXZCYXJNZW51Q29uZmlnXT1cInBhZ2VTa2VsZXRvbkNvbmZpZy5uYXZCYXJNZW51Q29uZmlnXCJcbiAgICAodG9nZ2xlU2lkZWJhcik9XCJvblRvZ2dsZVNpZGViYXIoKVwiXG4gID48L3B0LW5hdi1iYXItbWVudT5cblxuICA8ZGl2IGNsYXNzPVwibWFpbi1jb250ZW50XCI+XG4gICAgPCEtLSBTaWRlYmFyICh1c2UgKm5nSWYgdG8gdG9nZ2xlIHZpc2liaWxpdHkpIC0tPlxuICAgIDxwdC1zaWRlLWJhci1tZW51XG4gICAgICAqbmdJZj1cImlzU2lkZWJhclZpc2libGVcIlxuICAgICAgW21lbnVDb25maWddPVwicGFnZVNrZWxldG9uQ29uZmlnLnNpZGVNZW51QmFyQ29uZmlnXCJcbiAgICAgIGNsYXNzPVwic2lkZWJhclwiXG4gICAgPjwvcHQtc2lkZS1iYXItbWVudT5cblxuICAgIDwhLS0gTWFpbiBWaWV3IEFyZWEgLS0+XG4gICAgPGRpdiBjbGFzcz1cImNvbnRlbnQtYXJlYVwiIFtuZ0NsYXNzXT1cInsgJ2Z1bGwtd2lkdGgnOiAhaXNTaWRlYmFyVmlzaWJsZSB9XCI+XG4gICAgICA8IS0tIENvbnRlbnQgQ2FyZCBXcmFwcGVyIC0tPlxuICAgICAgPHB0LWNhcmQgW2NvbmZpZ109XCJwYWdlU2tlbGV0b25Db25maWcuY29udGVudENhcmRDb25maWdcIj5cbiAgICAgICAgPCEtLSBCcmVhZGNydW1iIC0tPlxuICAgICAgICA8cHQtYnJlYWQtY3J1bWJcbiAgICAgICAgICAqbmdJZj1cInBhZ2VTa2VsZXRvbkNvbmZpZy5icmVhZENydW1iQ29uZmlnXCJcbiAgICAgICAgICBbYnJlYWRDcnVtYkNvbmZpZ109XCJwYWdlU2tlbGV0b25Db25maWcuYnJlYWRDcnVtYkNvbmZpZ1wiXG4gICAgICAgICAgY2xhc3M9XCJicmVhZC1jcnVtYlwiXG4gICAgICAgID48L3B0LWJyZWFkLWNydW1iPlxuXG4gICAgICAgIDwhLS0gQmFja2dyb3VuZCBDYXJkIC0tPlxuXG4gICAgICAgIDxyb3V0ZXItb3V0bGV0Pjwvcm91dGVyLW91dGxldD5cbiAgICAgIDwvcHQtY2FyZD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPCEtLSBGb290ZXIgLS0+XG4gIDxwdC1mb290ZXJcbiAgICAqbmdJZj1cInBhZ2VTa2VsZXRvbkNvbmZpZy5mb290ZXJDb25maWdcIlxuICAgIFtmb290ZXJDb25maWddPVwicGFnZVNrZWxldG9uQ29uZmlnLmZvb3RlckNvbmZpZ1wiXG4gICAgY2xhc3M9XCJwdC1mb290ZXJcIlxuICA+PC9wdC1mb290ZXI+XG48L3B0LWNhcmQ+XG4iXX0=