@webilix/ngx-helper-m3 0.0.36 → 0.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -692,11 +692,11 @@ class NgxHelperPageGroupComponent {
|
|
|
692
692
|
this.pageChanged.next(item);
|
|
693
693
|
}
|
|
694
694
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxHelperPageGroupComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
695
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageId: "pageId", data: "data" }, outputs: { pageChanged: "pageChanged", dataChanged: "dataChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.display": "this.display" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n class=\"page-group-aside\"\n [style.width]=\"sidebarWidth\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <!-- ICON -->\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n <!-- CURRENT PAGE -->\n @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n </div>\n }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<div\n class=\"page-group-nav\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n @if (pageId === item) {\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n }\n </div>\n }\n</div>\n\n<div\n class=\"page-group-spacer\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n \"\n></div>\n}\n\n<div class=\"page-group-content\">\n <!-- HEADER -->\n @if (pageGroup.header) {\n <div\n class=\"header\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n (isMobile\n ? 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n : componentConfig.stickyView?.top?.desktopView) || undefined\n \"\n >\n <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n <div class=\"spacer\"></div>\n </div>\n }\n <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
695
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageId: "pageId", data: "data" }, outputs: { pageChanged: "pageChanged", dataChanged: "dataChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.display": "this.display" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n class=\"page-group-aside\"\n [style.width]=\"sidebarWidth\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <!-- ICON -->\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n <!-- CURRENT PAGE -->\n @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n </div>\n }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n\n<!-- MOBILE LIST VIEW -->\n@if (pageGroup.showMenu === false || (pages.length <= 5 && !pageGroup.showMenu)) {\n<div\n class=\"page-group-nav\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n @if (pageId === item) {\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n }\n </div>\n }\n</div>\n}\n\n<!-- MOBILE MENU VIEW -->\n@else {\n<div\n class=\"page-group-menu\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n <mat-icon class=\"page\">{{ pageGroup.pages[pageId].icon }}</mat-icon>\n <div class=\"title\">{{ pageGroup.pages[pageId].title }}</div>\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"pageMenu\" class=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #pageMenu=\"matMenu\" class=\"ngx-helper-page-group-menu\" [xPosition]=\"'before'\">\n @for (item of pages; track $index) {\n <button mat-menu-item type=\"button\" (click)=\"setPage(item)\" [disabled]=\"item === pageId\">\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n </button>\n }\n </mat-menu>\n</div>\n}\n\n<div\n class=\"page-group-spacer\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n \"\n></div>\n}\n\n<div class=\"page-group-content\">\n <!-- HEADER -->\n @if (pageGroup.header) {\n <div\n class=\"header\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n (isMobile\n ? 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n : componentConfig.stickyView?.top?.desktopView) || undefined\n \"\n >\n <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n <div class=\"spacer\"></div>\n </div>\n }\n <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n", styles: ["::ng-deep .ngx-helper-page-group-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-page-group-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-page-group-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-page-group-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
696
696
|
}
|
|
697
697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxHelperPageGroupComponent, decorators: [{
|
|
698
698
|
type: Component,
|
|
699
|
-
args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatIcon], providers: [ComponentService], template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n class=\"page-group-aside\"\n [style.width]=\"sidebarWidth\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <!-- ICON -->\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n <!-- CURRENT PAGE -->\n @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n </div>\n }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<div\n class=\"page-group-nav\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n @if (pageId === item) {\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n }\n </div>\n }\n</div>\n\n<div\n class=\"page-group-spacer\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n \"\n></div>\n}\n\n<div class=\"page-group-content\">\n <!-- HEADER -->\n @if (pageGroup.header) {\n <div\n class=\"header\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n (isMobile\n ? 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n : componentConfig.stickyView?.top?.desktopView) || undefined\n \"\n >\n <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n <div class=\"spacer\"></div>\n </div>\n }\n <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n" }]
|
|
699
|
+
args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatButton, MatIcon, MatMenuModule], providers: [ComponentService], template: "@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n class=\"page-group-aside\"\n [style.width]=\"sidebarWidth\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <!-- ICON -->\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n <!-- CURRENT PAGE -->\n @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n </div>\n }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n\n<!-- MOBILE LIST VIEW -->\n@if (pageGroup.showMenu === false || (pages.length <= 5 && !pageGroup.showMenu)) {\n<div\n class=\"page-group-nav\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n @for (item of pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageId === item\"\n [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n (click)=\"setPage(item)\"\n >\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n @if (pageId === item) {\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n }\n </div>\n }\n</div>\n}\n\n<!-- MOBILE MENU VIEW -->\n@else {\n<div\n class=\"page-group-menu\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n <mat-icon class=\"page\">{{ pageGroup.pages[pageId].icon }}</mat-icon>\n <div class=\"title\">{{ pageGroup.pages[pageId].title }}</div>\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"pageMenu\" class=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #pageMenu=\"matMenu\" class=\"ngx-helper-page-group-menu\" [xPosition]=\"'before'\">\n @for (item of pages; track $index) {\n <button mat-menu-item type=\"button\" (click)=\"setPage(item)\" [disabled]=\"item === pageId\">\n <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n </button>\n }\n </mat-menu>\n</div>\n}\n\n<div\n class=\"page-group-spacer\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n \"\n></div>\n}\n\n<div class=\"page-group-content\">\n <!-- HEADER -->\n @if (pageGroup.header) {\n <div\n class=\"header\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n (isMobile\n ? 'calc(' +\n (componentConfig.stickyView?.top?.mobileView || undefined) +\n ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n : componentConfig.stickyView?.top?.desktopView) || undefined\n \"\n >\n <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n <div class=\"spacer\"></div>\n </div>\n }\n <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n", styles: ["::ng-deep .ngx-helper-page-group-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-page-group-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-page-group-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-page-group-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
|
|
700
700
|
}], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ComponentService }, { type: undefined, decorators: [{
|
|
701
701
|
type: Optional
|
|
702
702
|
}, {
|