@webilix/ngx-helper-m3 0.0.3 → 0.0.5
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.
- package/fesm2022/webilix-ngx-helper-m3.mjs +134 -83
- package/fesm2022/webilix-ngx-helper-m3.mjs.map +1 -1
- package/lib/components/card/ngx-helper-card.component.d.ts +46 -0
- package/lib/components/card/ngx-helper-card.interface.d.ts +16 -0
- package/lib/components/component.service.d.ts +2 -4
- package/lib/components/page-group/ngx-helper-page-group.component.d.ts +1 -4
- package/lib/components/page-group/ngx-helper-page-group.interface.d.ts +1 -2
- package/lib/components/section/ngx-helper-section-sticky.directive.d.ts +1 -0
- package/lib/components/section/ngx-helper-section.component.d.ts +3 -5
- package/lib/confirm/bottom-sheet/confirm-bottom-sheet.component.d.ts +1 -0
- package/lib/confirm/dialog/confirm-dialog.component.d.ts +1 -0
- package/lib/container/bottom-sheet/container-bottom-sheet.component.d.ts +1 -0
- package/lib/container/dialog/container-dialog.component.d.ts +1 -0
- package/lib/ngx-helper.config.d.ts +1 -7
- package/ngx-helper-m3.css +275 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, makeEnvironmentProviders, Injectable,
|
|
3
|
-
import {
|
|
2
|
+
import { InjectionToken, makeEnvironmentProviders, Injectable, Component, Optional, Inject, HostBinding, Input, EventEmitter, Injector, Output, inject, Directive, Pipe } from '@angular/core';
|
|
3
|
+
import { NgClass, NgComponentOutlet } from '@angular/common';
|
|
4
|
+
import * as i1$2 from '@angular/material/button';
|
|
5
|
+
import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
|
|
6
|
+
import { MatDivider } from '@angular/material/divider';
|
|
4
7
|
import * as i3 from '@angular/material/icon';
|
|
5
8
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
9
|
+
import * as i2 from '@angular/material/menu';
|
|
10
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
6
11
|
import { Helper } from '@webilix/helper-library';
|
|
7
12
|
import * as i1 from '@angular/router';
|
|
8
13
|
import { JalaliDateTime } from '@webilix/jalali-date-time';
|
|
9
14
|
import * as i1$1 from '@angular/platform-browser';
|
|
10
|
-
import * as
|
|
11
|
-
import { MatButtonModule, MatIconButton } from '@angular/material/button';
|
|
12
|
-
import * as i2 from '@angular/material/dialog';
|
|
15
|
+
import * as i2$1 from '@angular/material/dialog';
|
|
13
16
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
14
17
|
import * as i1$3 from '@angular/material/bottom-sheet';
|
|
15
18
|
import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
|
|
@@ -29,10 +32,8 @@ class ComponentService {
|
|
|
29
32
|
};
|
|
30
33
|
};
|
|
31
34
|
return {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
highlightText: config?.colors?.highlightText || 'var(--secondary)',
|
|
35
|
-
highlightBackground: config?.colors?.highlightBackground || 'var(--secondary-container)',
|
|
35
|
+
mobileWidth: config?.mobileWidth || 600,
|
|
36
|
+
pageGroupSidebarWidth: config?.pageGroupSidebarWidth || '200px',
|
|
36
37
|
stickyView: config?.stickyView
|
|
37
38
|
? {
|
|
38
39
|
top: config.stickyView.top ? getStickyView(config.stickyView.top) : undefined,
|
|
@@ -48,6 +49,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
48
49
|
type: Injectable
|
|
49
50
|
}] });
|
|
50
51
|
|
|
52
|
+
class NgxHelperCardComponent {
|
|
53
|
+
componentService;
|
|
54
|
+
config;
|
|
55
|
+
className = 'ngx-helper-m3-card';
|
|
56
|
+
title;
|
|
57
|
+
subTitle;
|
|
58
|
+
icon;
|
|
59
|
+
actions = [];
|
|
60
|
+
padding = '1rem';
|
|
61
|
+
backgroundColor;
|
|
62
|
+
isMobile = false;
|
|
63
|
+
buttons = [];
|
|
64
|
+
componentConfig;
|
|
65
|
+
constructor(componentService, config) {
|
|
66
|
+
this.componentService = componentService;
|
|
67
|
+
this.config = config;
|
|
68
|
+
}
|
|
69
|
+
ngOnInit() {
|
|
70
|
+
this.componentConfig = this.componentService.getComponentConfig(this.config);
|
|
71
|
+
this.onResize();
|
|
72
|
+
}
|
|
73
|
+
ngOnChanges(changes) {
|
|
74
|
+
this.buttons = this.actions.map((action) => {
|
|
75
|
+
return 'buttons' in action ? { type: 'MENU', ...action } : { type: 'BUTTON', ...action };
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
onResize() {
|
|
79
|
+
this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
|
|
80
|
+
}
|
|
81
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperCardComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", padding: "padding", backgroundColor: "backgroundColor" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<header>\n <!-- ICON -->\n @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n <!-- TITLE -->\n <div class=\"content\">\n <div class=\"title\">{{ title }}</div>\n <!-- SUB TITLE -->\n @if (subTitle) {\n <div class=\"sub-title\">{{ subTitle }}</div>\n }\n </div>\n\n <!-- BUTTONS -->\n @if (buttons.length > 0) {\n <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n @for (item of buttons; track $index) {\n <!-- TYPE -->\n @switch (item.type) {\n\n <!-- BUTTON -->\n @case('BUTTON') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n\n <!-- MENU -->\n @case('MENU') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n @for (menu of item.buttons; track $index) {\n <!-- DIVIDER -->\n @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n <div class=\"title\">{{ menu.title }}</div>\n <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n </button>\n } }\n </mat-menu>\n } } }\n </div>\n }\n</header>\n\n<content [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\"><ng-content></ng-content></content>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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"] }] });
|
|
83
|
+
}
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperCardComponent, decorators: [{
|
|
85
|
+
type: Component,
|
|
86
|
+
args: [{ selector: 'ngx-helper-card', host: { '(window:resize)': 'onResize($event)' }, imports: [NgClass, MatButton, MatDivider, MatIcon, MatMenuModule], providers: [ComponentService], template: "<header>\n <!-- ICON -->\n @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n <!-- TITLE -->\n <div class=\"content\">\n <div class=\"title\">{{ title }}</div>\n <!-- SUB TITLE -->\n @if (subTitle) {\n <div class=\"sub-title\">{{ subTitle }}</div>\n }\n </div>\n\n <!-- BUTTONS -->\n @if (buttons.length > 0) {\n <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n @for (item of buttons; track $index) {\n <!-- TYPE -->\n @switch (item.type) {\n\n <!-- BUTTON -->\n @case('BUTTON') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n\n <!-- MENU -->\n @case('MENU') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\">\n @for (menu of item.buttons; track $index) {\n <!-- DIVIDER -->\n @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n <div class=\"title\">{{ menu.title }}</div>\n <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n </button>\n } }\n </mat-menu>\n } } }\n </div>\n }\n</header>\n\n<content [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\"><ng-content></ng-content></content>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
|
|
87
|
+
}], ctorParameters: () => [{ type: ComponentService }, { type: undefined, decorators: [{
|
|
88
|
+
type: Optional
|
|
89
|
+
}, {
|
|
90
|
+
type: Inject,
|
|
91
|
+
args: [NGX_HELPER_CONFIG]
|
|
92
|
+
}] }], propDecorators: { className: [{
|
|
93
|
+
type: HostBinding,
|
|
94
|
+
args: ['className']
|
|
95
|
+
}], title: [{
|
|
96
|
+
type: Input,
|
|
97
|
+
args: [{ required: true }]
|
|
98
|
+
}], subTitle: [{
|
|
99
|
+
type: Input,
|
|
100
|
+
args: [{ required: false }]
|
|
101
|
+
}], icon: [{
|
|
102
|
+
type: Input,
|
|
103
|
+
args: [{ required: false }]
|
|
104
|
+
}], actions: [{
|
|
105
|
+
type: Input,
|
|
106
|
+
args: [{ required: false }]
|
|
107
|
+
}], padding: [{
|
|
108
|
+
type: Input,
|
|
109
|
+
args: [{ required: false }]
|
|
110
|
+
}], backgroundColor: [{
|
|
111
|
+
type: Input,
|
|
112
|
+
args: [{ required: false }]
|
|
113
|
+
}] } });
|
|
114
|
+
|
|
51
115
|
const NGX_HELPER_PAGE_GROUP_DATA = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA');
|
|
52
116
|
const NGX_HELPER_PAGE_GROUP_INDEX = new InjectionToken('NGX-HELPER-PAGE-GROUP-INDEX');
|
|
53
117
|
const NGX_HELPER_PAGE_GROUP_TITLE = new InjectionToken('NGX-HELPER-PAGE-GROUP-TITLE');
|
|
@@ -57,8 +121,8 @@ class NgxHelperPageGroupComponent {
|
|
|
57
121
|
router;
|
|
58
122
|
componentService;
|
|
59
123
|
config;
|
|
124
|
+
className = 'ngx-helper-m3-page-group';
|
|
60
125
|
display = 'none';
|
|
61
|
-
toolbarHeight = '32px';
|
|
62
126
|
pageGroup;
|
|
63
127
|
pageIndex = 0;
|
|
64
128
|
data;
|
|
@@ -67,8 +131,6 @@ class NgxHelperPageGroupComponent {
|
|
|
67
131
|
injector;
|
|
68
132
|
sidebarWidth;
|
|
69
133
|
componentConfig;
|
|
70
|
-
swipeStart;
|
|
71
|
-
swipeLeft = 0;
|
|
72
134
|
constructor(activatedRoute, router, componentService, config) {
|
|
73
135
|
this.activatedRoute = activatedRoute;
|
|
74
136
|
this.router = router;
|
|
@@ -76,9 +138,11 @@ class NgxHelperPageGroupComponent {
|
|
|
76
138
|
this.config = config;
|
|
77
139
|
}
|
|
78
140
|
ngOnInit() {
|
|
79
|
-
this.display = this.pageGroup.pages.length === 0 ? 'none' : '
|
|
80
|
-
|
|
141
|
+
this.display = this.pageGroup.pages.length === 0 ? 'none' : 'flex';
|
|
142
|
+
if (this.pageGroup.pages.length === 0)
|
|
143
|
+
return;
|
|
81
144
|
this.componentConfig = this.componentService.getComponentConfig(this.config);
|
|
145
|
+
this.sidebarWidth = this.pageGroup.sidebarWidth || this.componentConfig.pageGroupSidebarWidth;
|
|
82
146
|
if (this.pageIndex < 0)
|
|
83
147
|
this.pageIndex = 0;
|
|
84
148
|
else if (this.pageIndex > this.pageGroup.pages.length - 1)
|
|
@@ -98,10 +162,12 @@ class NgxHelperPageGroupComponent {
|
|
|
98
162
|
this.setInjector();
|
|
99
163
|
}
|
|
100
164
|
onResize() {
|
|
101
|
-
|
|
102
|
-
this.
|
|
165
|
+
this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
|
|
166
|
+
this.className = `ngx-helper-m3-page-group${this.isMobile ? ' mobile-view' : ''}`;
|
|
103
167
|
}
|
|
104
168
|
setInjector() {
|
|
169
|
+
if (this.pageGroup.pages.length === 0)
|
|
170
|
+
return;
|
|
105
171
|
this.injector = Injector.create({
|
|
106
172
|
providers: [
|
|
107
173
|
{ provide: NGX_HELPER_PAGE_GROUP_DATA, useValue: this.data },
|
|
@@ -111,6 +177,8 @@ class NgxHelperPageGroupComponent {
|
|
|
111
177
|
});
|
|
112
178
|
}
|
|
113
179
|
setPage(index) {
|
|
180
|
+
if (this.pageGroup.pages.length === 0)
|
|
181
|
+
return;
|
|
114
182
|
if (this.pageIndex === index || index < 0 || index > this.pageGroup.pages.length - 1)
|
|
115
183
|
return;
|
|
116
184
|
this.pageIndex = index;
|
|
@@ -122,47 +190,23 @@ class NgxHelperPageGroupComponent {
|
|
|
122
190
|
this.router.navigate(this.pageGroup.route, { queryParams });
|
|
123
191
|
}
|
|
124
192
|
}
|
|
125
|
-
swipe(event, action, header, container) {
|
|
126
|
-
if (header.offsetWidth > container.offsetWidth)
|
|
127
|
-
return;
|
|
128
|
-
const clientX = event instanceof MouseEvent ? event.clientX : event.changedTouches[0].clientX;
|
|
129
|
-
switch (action) {
|
|
130
|
-
case 'START':
|
|
131
|
-
this.swipeStart = clientX - this.swipeLeft;
|
|
132
|
-
break;
|
|
133
|
-
case 'END':
|
|
134
|
-
this.swipeStart = undefined;
|
|
135
|
-
break;
|
|
136
|
-
case 'MOVE':
|
|
137
|
-
if (!this.swipeStart)
|
|
138
|
-
return;
|
|
139
|
-
let left = clientX - this.swipeStart;
|
|
140
|
-
if (left <= 0)
|
|
141
|
-
left = 0;
|
|
142
|
-
else if (left > container.offsetWidth - header.offsetWidth)
|
|
143
|
-
left = container.offsetWidth - header.offsetWidth;
|
|
144
|
-
this.swipeLeft = left;
|
|
145
|
-
container.style.left = `${left}px`;
|
|
146
|
-
break;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperPageGroupComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageIndex: "pageIndex", data: "data" }, outputs: { pageIndexChanged: "pageIndexChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "
|
|
194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxHelperPageGroupComponent, isStandalone: true, selector: "ngx-helper-page-group", inputs: { pageGroup: "pageGroup", pageIndex: "pageIndex", data: "data" }, outputs: { pageIndexChanged: "pageIndexChanged" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className", "style.display": "this.display" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "@if (pageGroup.pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<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 pageGroup.pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageIndex === $index\"\n [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n (click)=\"setPage($index)\"\n >\n <!-- ICON -->\n <mat-icon>{{ item.icon }}</mat-icon>\n <div class=\"title\">{{ item.title }}</div>\n <!-- CURRENT PAGE -->\n @if (pageIndex === $index) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n </div>\n }\n</aside>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<nav\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n @for (item of pageGroup.pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageIndex === $index\"\n [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n (click)=\"setPage($index)\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n @if (pageIndex === $index) {\n <div class=\"title\">{{ item.title }}</div>\n }\n </div>\n }\n</nav>\n\n<div\n class=\"toolbar-spacer\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' + (componentConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-helper-m3-toolbar-height))'\n \"\n></div>\n}\n\n<content>\n <!-- HEADER -->\n @if (pageGroup.header) {\n <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-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 </header>\n }\n <span *ngComponentOutlet=\"pageGroup.pages[pageIndex].component; injector: injector\"></span>\n</content>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
151
195
|
}
|
|
152
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperPageGroupComponent, decorators: [{
|
|
153
197
|
type: Component,
|
|
154
|
-
args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatIcon], providers: [ComponentService], template: "
|
|
198
|
+
args: [{ selector: 'ngx-helper-page-group', host: { '(window:resize)': 'onResize($event)' }, imports: [NgComponentOutlet, MatIcon], providers: [ComponentService], template: "@if (pageGroup.pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<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 pageGroup.pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageIndex === $index\"\n [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n (click)=\"setPage($index)\"\n >\n <!-- ICON -->\n <mat-icon>{{ item.icon }}</mat-icon>\n <div class=\"title\">{{ item.title }}</div>\n <!-- CURRENT PAGE -->\n @if (pageIndex === $index) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n </div>\n }\n</aside>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n<nav\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n @for (item of pageGroup.pages; track $index) {\n <div\n class=\"page\"\n [class.active]=\"pageIndex === $index\"\n [style.cursor]=\"pageIndex === $index ? 'default' : 'pointer'\"\n (click)=\"setPage($index)\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n @if (pageIndex === $index) {\n <div class=\"title\">{{ item.title }}</div>\n }\n </div>\n }\n</nav>\n\n<div\n class=\"toolbar-spacer\"\n [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n [style.top]=\"\n 'calc(' + (componentConfig.stickyView?.top?.mobileView || undefined) + ' + var(--ngx-helper-m3-toolbar-height))'\n \"\n></div>\n}\n\n<content>\n <!-- HEADER -->\n @if (pageGroup.header) {\n <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-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 </header>\n }\n <span *ngComponentOutlet=\"pageGroup.pages[pageIndex].component; injector: injector\"></span>\n</content>\n}\n" }]
|
|
155
199
|
}], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ComponentService }, { type: undefined, decorators: [{
|
|
156
200
|
type: Optional
|
|
157
201
|
}, {
|
|
158
202
|
type: Inject,
|
|
159
203
|
args: [NGX_HELPER_CONFIG]
|
|
160
|
-
}] }], propDecorators: {
|
|
204
|
+
}] }], propDecorators: { className: [{
|
|
161
205
|
type: HostBinding,
|
|
162
|
-
args: ['
|
|
163
|
-
}],
|
|
206
|
+
args: ['className']
|
|
207
|
+
}], display: [{
|
|
164
208
|
type: HostBinding,
|
|
165
|
-
args: ['style
|
|
209
|
+
args: ['style.display']
|
|
166
210
|
}], pageGroup: [{
|
|
167
211
|
type: Input,
|
|
168
212
|
args: [{ required: true }]
|
|
@@ -182,27 +226,27 @@ class NgxHelperSectionStickyDirective {
|
|
|
182
226
|
ngxHelperSectionSticky;
|
|
183
227
|
ngxHelperSectionZIndex;
|
|
184
228
|
componentService = inject(ComponentService);
|
|
229
|
+
componentConfig;
|
|
185
230
|
isMobile = false;
|
|
186
231
|
constructor(elementRef, config) {
|
|
187
232
|
this.elementRef = elementRef;
|
|
188
233
|
this.config = config;
|
|
189
234
|
}
|
|
190
235
|
ngOnInit() {
|
|
236
|
+
this.componentConfig = this.componentService.getComponentConfig(this.config);
|
|
191
237
|
this.onResize();
|
|
192
238
|
}
|
|
193
239
|
onResize() {
|
|
194
|
-
|
|
195
|
-
this.isMobile = window.innerWidth <= mobileWidth;
|
|
240
|
+
this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
|
|
196
241
|
this.setPosition();
|
|
197
242
|
}
|
|
198
243
|
setPosition() {
|
|
199
244
|
const element = this.elementRef.nativeElement;
|
|
200
245
|
if (!element)
|
|
201
246
|
return;
|
|
202
|
-
const config = this.componentService.getComponentConfig(this.config);
|
|
203
247
|
switch (this.ngxHelperSectionSticky) {
|
|
204
248
|
case 'TOP':
|
|
205
|
-
const top =
|
|
249
|
+
const top = this.componentConfig.stickyView?.top;
|
|
206
250
|
if (!top)
|
|
207
251
|
return;
|
|
208
252
|
element.style.position = 'sticky';
|
|
@@ -210,7 +254,7 @@ class NgxHelperSectionStickyDirective {
|
|
|
210
254
|
element.style.top = this.isMobile ? top.mobileView : top.desktopView;
|
|
211
255
|
break;
|
|
212
256
|
case 'BOTTOM':
|
|
213
|
-
const bottom =
|
|
257
|
+
const bottom = this.componentConfig.stickyView?.bottom;
|
|
214
258
|
if (!bottom)
|
|
215
259
|
return;
|
|
216
260
|
element.style.position = 'sticky';
|
|
@@ -245,11 +289,9 @@ class NgxHelperSectionComponent {
|
|
|
245
289
|
componentService;
|
|
246
290
|
config;
|
|
247
291
|
gap;
|
|
248
|
-
backgroundColor;
|
|
249
292
|
gapSize;
|
|
250
|
-
mobileView;
|
|
251
|
-
isMobile = false;
|
|
252
293
|
componentConfig;
|
|
294
|
+
isMobile = false;
|
|
253
295
|
constructor(componentService, config) {
|
|
254
296
|
this.componentService = componentService;
|
|
255
297
|
this.config = config;
|
|
@@ -257,19 +299,17 @@ class NgxHelperSectionComponent {
|
|
|
257
299
|
ngOnInit() {
|
|
258
300
|
this.componentConfig = this.componentService.getComponentConfig(this.config);
|
|
259
301
|
this.gap = this.gapSize || '1rem';
|
|
260
|
-
this.backgroundColor = this.componentConfig.background;
|
|
261
302
|
this.onResize();
|
|
262
303
|
}
|
|
263
304
|
onResize() {
|
|
264
|
-
|
|
265
|
-
this.isMobile = this.mobileView || window.innerWidth <= mobileWidth;
|
|
305
|
+
this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
|
|
266
306
|
}
|
|
267
307
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSectionComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
268
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgxHelperSectionComponent, isStandalone: true, selector: "ngx-helper-section", inputs: { gapSize: "gapSize"
|
|
308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgxHelperSectionComponent, isStandalone: true, selector: "ngx-helper-section", inputs: { gapSize: "gapSize" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "style.--section-gap": "this.gap" } }, providers: [ComponentService], ngImport: i0, template: "<div class=\"columns\" [class.mobile]=\"isMobile\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .columns{display:flex;align-items:flex-start;column-gap:var(--section-gap)}:host ::ng-deep ngx-helper-section-column{flex:1;display:flex;flex-direction:column;row-gap:var(--section-gap)}:host .mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .mobile ::ng-deep ngx-helper-section-column{width:100%!important}\n"] });
|
|
269
309
|
}
|
|
270
310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperSectionComponent, decorators: [{
|
|
271
311
|
type: Component,
|
|
272
|
-
args: [{ selector: 'ngx-helper-section', host: { '(window:resize)': 'onResize($event)' }, imports: [], providers: [ComponentService], template: "<div class=\"columns\" [class.mobile]=\"isMobile\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .columns{display:flex;align-items:flex-start;column-gap:var(--section-gap)}:host ::ng-deep ngx-helper-section-column{flex:1;display:flex;flex-direction:column;row-gap:var(--section-gap)
|
|
312
|
+
args: [{ selector: 'ngx-helper-section', host: { '(window:resize)': 'onResize($event)' }, imports: [], providers: [ComponentService], template: "<div class=\"columns\" [class.mobile]=\"isMobile\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;direction:rtl}:host .columns{display:flex;align-items:flex-start;column-gap:var(--section-gap)}:host ::ng-deep ngx-helper-section-column{flex:1;display:flex;flex-direction:column;row-gap:var(--section-gap)}:host .mobile{flex-direction:column;column-gap:0;row-gap:var(--section-gap)}:host .mobile ::ng-deep ngx-helper-section-column{width:100%!important}\n"] }]
|
|
273
313
|
}], ctorParameters: () => [{ type: ComponentService }, { type: undefined, decorators: [{
|
|
274
314
|
type: Optional
|
|
275
315
|
}, {
|
|
@@ -278,15 +318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
278
318
|
}] }], propDecorators: { gap: [{
|
|
279
319
|
type: HostBinding,
|
|
280
320
|
args: ['style.--section-gap']
|
|
281
|
-
}], backgroundColor: [{
|
|
282
|
-
type: HostBinding,
|
|
283
|
-
args: ['style.--section-background-color']
|
|
284
321
|
}], gapSize: [{
|
|
285
322
|
type: Input,
|
|
286
323
|
args: [{ required: false }]
|
|
287
|
-
}], mobileView: [{
|
|
288
|
-
type: Input,
|
|
289
|
-
args: [{ required: false }]
|
|
290
324
|
}] } });
|
|
291
325
|
|
|
292
326
|
class NgxHelperSectionColumnComponent {
|
|
@@ -614,17 +648,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
614
648
|
}] });
|
|
615
649
|
|
|
616
650
|
class ConfirmDialogComponent {
|
|
651
|
+
className = 'ngx-helper-m3-confirm';
|
|
617
652
|
confirm = inject(MAT_DIALOG_DATA);
|
|
618
653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" } }, ngImport: i0, template: "<
|
|
654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<content>\n <!-- ICON -->\n @if (confirm.icon) {\n <mat-icon>{{ confirm.icon }}</mat-icon>\n }\n\n <!-- CONTENT -->\n <div class=\"confirm\">\n <div class=\"question\">{{ confirm.question }}</div>\n <!-- DESCRIPTION -->\n @if (confirm.description) {\n <div class=\"description\">{{ confirm.description }}</div>\n }\n <!-- DATA -->\n @if (confirm.data) {\n <div class=\"data\">\n <div class=\"title\">{{ confirm.data.title }}:</div>\n <div class=\"value\">{{ confirm.data.value }}</div>\n </div>\n }\n </div>\n</content>\n\n<footer>\n <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</footer>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
620
655
|
}
|
|
621
656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
622
657
|
type: Component,
|
|
623
|
-
args: [{ host: { selector: 'confirm-dialog' }, imports: [NgClass, MatButtonModule, MatDialogModule, MatIconModule], template: "<
|
|
624
|
-
}]
|
|
658
|
+
args: [{ host: { selector: 'confirm-dialog' }, imports: [NgClass, MatButtonModule, MatDialogModule, MatIconModule], template: "<content>\n <!-- ICON -->\n @if (confirm.icon) {\n <mat-icon>{{ confirm.icon }}</mat-icon>\n }\n\n <!-- CONTENT -->\n <div class=\"confirm\">\n <div class=\"question\">{{ confirm.question }}</div>\n <!-- DESCRIPTION -->\n @if (confirm.description) {\n <div class=\"description\">{{ confirm.description }}</div>\n }\n <!-- DATA -->\n @if (confirm.data) {\n <div class=\"data\">\n <div class=\"title\">{{ confirm.data.title }}:</div>\n <div class=\"value\">{{ confirm.data.value }}</div>\n </div>\n }\n </div>\n</content>\n\n<footer>\n <button mat-button type=\"button\" mat-dialog-close [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n <button mat-button type=\"button\" [mat-dialog-close]=\"true\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</footer>\n" }]
|
|
659
|
+
}], propDecorators: { className: [{
|
|
660
|
+
type: HostBinding,
|
|
661
|
+
args: ['className']
|
|
662
|
+
}] } });
|
|
625
663
|
|
|
626
664
|
class ConfirmBottomSheetComponent {
|
|
627
665
|
matBottomSheetRef;
|
|
666
|
+
className = 'ngx-helper-m3-confirm';
|
|
628
667
|
confirm = inject(MAT_BOTTOM_SHEET_DATA);
|
|
629
668
|
constructor(matBottomSheetRef) {
|
|
630
669
|
this.matBottomSheetRef = matBottomSheetRef;
|
|
@@ -633,12 +672,15 @@ class ConfirmBottomSheetComponent {
|
|
|
633
672
|
this.matBottomSheetRef.dismiss(confirmed);
|
|
634
673
|
}
|
|
635
674
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
636
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" } }, ngImport: i0, template: "<content>\n <!-- ICON -->\n @if (confirm.icon) {\n <
|
|
675
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ConfirmBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "confirm-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<content>\n <!-- ICON -->\n @if (confirm.icon) {\n <mat-icon>{{ confirm.icon }}</mat-icon>\n }\n\n <!-- CONTENT -->\n <div class=\"confirm\">\n <div class=\"question\">{{ confirm.question }}</div>\n <!-- DESCRIPTION -->\n @if (confirm.description) {\n <div class=\"description\">{{ confirm.description }}</div>\n }\n <!-- DATA -->\n @if (confirm.data) {\n <div class=\"data\">\n <div class=\"title\">{{ confirm.data.title }}:</div>\n <div class=\"value\">{{ confirm.data.value }}</div>\n </div>\n }\n </div>\n</content>\n\n<footer>\n <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</footer>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
637
676
|
}
|
|
638
677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ConfirmBottomSheetComponent, decorators: [{
|
|
639
678
|
type: Component,
|
|
640
|
-
args: [{ host: { selector: 'confirm-bottom-sheet' }, imports: [NgClass, MatButtonModule, MatIconModule], template: "<content>\n <!-- ICON -->\n @if (confirm.icon) {\n <
|
|
641
|
-
}], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }]
|
|
679
|
+
args: [{ host: { selector: 'confirm-bottom-sheet' }, imports: [NgClass, MatButtonModule, MatIconModule], template: "<content>\n <!-- ICON -->\n @if (confirm.icon) {\n <mat-icon>{{ confirm.icon }}</mat-icon>\n }\n\n <!-- CONTENT -->\n <div class=\"confirm\">\n <div class=\"question\">{{ confirm.question }}</div>\n <!-- DESCRIPTION -->\n @if (confirm.description) {\n <div class=\"description\">{{ confirm.description }}</div>\n }\n <!-- DATA -->\n @if (confirm.data) {\n <div class=\"data\">\n <div class=\"title\">{{ confirm.data.title }}:</div>\n <div class=\"value\">{{ confirm.data.value }}</div>\n </div>\n }\n </div>\n</content>\n\n<footer>\n <button mat-button type=\"button\" (click)=\"close()\" [ngClass]=\"confirm.denyClass\">\u062E\u06CC\u0631</button>\n <button mat-button type=\"button\" (click)=\"close(true)\" [ngClass]=\"confirm.confirmClass\">\u0628\u0644\u06CC</button>\n</footer>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
|
|
680
|
+
}], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }], propDecorators: { className: [{
|
|
681
|
+
type: HostBinding,
|
|
682
|
+
args: ['className']
|
|
683
|
+
}] } });
|
|
642
684
|
|
|
643
685
|
class NgxHelperConfirmCalss {
|
|
644
686
|
matBottomSheet;
|
|
@@ -675,6 +717,7 @@ class NgxHelperConfirmCalss {
|
|
|
675
717
|
.open(ConfirmBottomSheetComponent, {
|
|
676
718
|
// DEFAULT CONFIG
|
|
677
719
|
direction: 'rtl',
|
|
720
|
+
panelClass: 'ngx-helper-bottom-sheet',
|
|
678
721
|
// OVERWRITE CONFIG
|
|
679
722
|
...config,
|
|
680
723
|
maxHeight: '80vh',
|
|
@@ -728,13 +771,13 @@ class NgxHelperConfirmService {
|
|
|
728
771
|
denyClass: config?.denyClass,
|
|
729
772
|
});
|
|
730
773
|
}
|
|
731
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
774
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
732
775
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, providedIn: 'root' });
|
|
733
776
|
}
|
|
734
777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperConfirmService, decorators: [{
|
|
735
778
|
type: Injectable,
|
|
736
779
|
args: [{ providedIn: 'root' }]
|
|
737
|
-
}], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2.MatDialog }] });
|
|
780
|
+
}], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
|
|
738
781
|
|
|
739
782
|
const NGX_HELPER_CONTAINER_TYPE = new InjectionToken('NGX-HELPER-CONTAINER-TYPE');
|
|
740
783
|
const NGX_HELPER_CONTAINER_DATA = new InjectionToken('NGX-HELPER-CONTAINER-DATA');
|
|
@@ -742,6 +785,7 @@ const NGX_HELPER_CONTAINER_CLOSE = new InjectionToken('NGX-HELPER-CONTAINER-CLOS
|
|
|
742
785
|
|
|
743
786
|
class ContainerDialogComponent {
|
|
744
787
|
matDialogRef;
|
|
788
|
+
className = 'ngx-helper-m3-container';
|
|
745
789
|
container = inject(MAT_DIALOG_DATA);
|
|
746
790
|
injector;
|
|
747
791
|
constructor(matDialogRef) {
|
|
@@ -762,16 +806,20 @@ class ContainerDialogComponent {
|
|
|
762
806
|
close() {
|
|
763
807
|
this.matDialogRef.close();
|
|
764
808
|
}
|
|
765
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerDialogComponent, deps: [{ token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
766
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-dialog" } }, ngImport: i0, template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\"
|
|
809
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerDialogComponent, deps: [{ token: i2$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
810
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-dialog" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
767
811
|
}
|
|
768
812
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerDialogComponent, decorators: [{
|
|
769
813
|
type: Component,
|
|
770
|
-
args: [{ host: { selector: 'container-dialog' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\"
|
|
771
|
-
}], ctorParameters: () => [{ type: i2.MatDialogRef }]
|
|
814
|
+
args: [{ host: { selector: 'container-dialog' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n" }]
|
|
815
|
+
}], ctorParameters: () => [{ type: i2$1.MatDialogRef }], propDecorators: { className: [{
|
|
816
|
+
type: HostBinding,
|
|
817
|
+
args: ['className']
|
|
818
|
+
}] } });
|
|
772
819
|
|
|
773
820
|
class ContainerBottomSheetComponent {
|
|
774
821
|
matBottomSheetRef;
|
|
822
|
+
className = 'ngx-helper-m3-container';
|
|
775
823
|
container = inject(MAT_BOTTOM_SHEET_DATA);
|
|
776
824
|
injector;
|
|
777
825
|
constructor(matBottomSheetRef) {
|
|
@@ -793,12 +841,15 @@ class ContainerBottomSheetComponent {
|
|
|
793
841
|
this.matBottomSheetRef.dismiss();
|
|
794
842
|
}
|
|
795
843
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerBottomSheetComponent, deps: [{ token: i1$3.MatBottomSheetRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" } }, ngImport: i0, template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\"
|
|
844
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ContainerBottomSheetComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "container-bottom-sheet" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
797
845
|
}
|
|
798
846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ContainerBottomSheetComponent, decorators: [{
|
|
799
847
|
type: Component,
|
|
800
|
-
args: [{ host: { selector: 'container-bottom-sheet' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\"
|
|
801
|
-
}], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }]
|
|
848
|
+
args: [{ host: { selector: 'container-bottom-sheet' }, imports: [NgComponentOutlet, MatIconButton, MatIcon], template: "<header>\n <div class=\"title\">{{ container.title }}</div>\n @if (!container.config.hideClose) {\n <button mat-icon-button type=\"button\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</header>\n<content [style.padding]=\"container.config.padding || '1rem'\">\n <span *ngComponentOutlet=\"container.component; injector: injector\"></span>\n</content>\n", styles: ["::ng-deep .ngx-helper-bottom-sheet .mat-bottom-sheet-container{padding:0}\n"] }]
|
|
849
|
+
}], ctorParameters: () => [{ type: i1$3.MatBottomSheetRef }], propDecorators: { className: [{
|
|
850
|
+
type: HostBinding,
|
|
851
|
+
args: ['className']
|
|
852
|
+
}] } });
|
|
802
853
|
|
|
803
854
|
class NgxHelperContainerCalss {
|
|
804
855
|
matBottomSheet;
|
|
@@ -873,13 +924,13 @@ class NgxHelperContainerService {
|
|
|
873
924
|
const config = arg1 || {};
|
|
874
925
|
return new NgxHelperContainerCalss(this.matBottomSheet, this.matDialog, { component, title, config });
|
|
875
926
|
}
|
|
876
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
927
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, deps: [{ token: i1$3.MatBottomSheet }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
877
928
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, providedIn: 'root' });
|
|
878
929
|
}
|
|
879
930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxHelperContainerService, decorators: [{
|
|
880
931
|
type: Injectable,
|
|
881
932
|
args: [{ providedIn: 'root' }]
|
|
882
|
-
}], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2.MatDialog }] });
|
|
933
|
+
}], ctorParameters: () => [{ type: i1$3.MatBottomSheet }, { type: i2$1.MatDialog }] });
|
|
883
934
|
|
|
884
935
|
/*
|
|
885
936
|
* Public API Surface of ngx-helper-m3
|
|
@@ -889,5 +940,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
889
940
|
* Generated bundle index. Do not edit.
|
|
890
941
|
*/
|
|
891
942
|
|
|
892
|
-
export { NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_INDEX, NGX_HELPER_PAGE_GROUP_TITLE, NgxHelperBankCardPipe, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
|
|
943
|
+
export { NGX_HELPER_CONFIG, NGX_HELPER_CONTAINER_CLOSE, NGX_HELPER_CONTAINER_DATA, NGX_HELPER_CONTAINER_TYPE, NGX_HELPER_PAGE_GROUP_DATA, NGX_HELPER_PAGE_GROUP_INDEX, NGX_HELPER_PAGE_GROUP_TITLE, NgxHelperBankCardPipe, NgxHelperCardComponent, NgxHelperConfirmService, NgxHelperContainerService, NgxHelperDatePipe, NgxHelperDurationPipe, NgxHelperFileSizePipe, NgxHelperMobilePipe, NgxHelperMultiLinePipe, NgxHelperNumberPipe, NgxHelperPageGroupComponent, NgxHelperPeriodPipe, NgxHelperPricePipe, NgxHelperSafePipe, NgxHelperSectionColumnComponent, NgxHelperSectionComponent, NgxHelperSectionStickyDirective, NgxHelperVolumePipe, NgxHelperWeightPipe, provideNgxHelperConfig };
|
|
893
944
|
//# sourceMappingURL=webilix-ngx-helper-m3.mjs.map
|