@sd-angular/core 19.0.0-beta.6 → 19.0.0-beta.61
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/README.md +686 -33
- package/assets/scss/ckeditor5.scss +60 -2
- package/assets/scss/core/bootstrap.scss +17 -0
- package/assets/scss/core/form.scss +4 -1
- package/assets/scss/core/grid.scss +40 -0
- package/assets/scss/sd-core.scss +1 -0
- package/assets/scss/themes/material-theme.scss +61 -36
- package/components/avatar/index.d.ts +1 -0
- package/components/avatar/src/avatar.component.d.ts +19 -0
- package/components/badge/src/badge.component.d.ts +77 -19
- package/components/button/src/button.component.d.ts +30 -28
- package/components/code-editor/index.d.ts +1 -0
- package/components/code-editor/src/code-editor.component.d.ts +25 -0
- package/components/document-builder/index.d.ts +1 -0
- package/components/document-builder/src/document-builder.component.d.ts +12 -41
- package/components/document-builder/src/document-builder.model.d.ts +14 -11
- package/components/document-builder/src/plugins/block-space/block-space.plugin.d.ts +9 -0
- package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.d.ts +44 -0
- package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.model.d.ts +57 -0
- package/components/document-builder/src/plugins/heading/heading.plugin.d.ts +1 -0
- package/components/document-builder/src/plugins/highlight-range/highlight-range.plugin.d.ts +4 -0
- package/components/document-builder/src/plugins/image-custom/image-custom.plugin.d.ts +31 -0
- package/components/document-builder/src/plugins/index.d.ts +7 -2
- package/components/document-builder/src/plugins/page-orientation/page-orientation.plugin.d.ts +2 -2
- package/components/document-builder/src/plugins/paste-handler/filters/bookmark.d.ts +14 -0
- package/components/document-builder/src/plugins/paste-handler/filters/br.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/image.d.ts +25 -0
- package/components/document-builder/src/plugins/paste-handler/filters/list.d.ts +29 -0
- package/components/document-builder/src/plugins/paste-handler/filters/parse.d.ts +35 -0
- package/components/document-builder/src/plugins/paste-handler/filters/removeboldwrapper.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/removegooglesheetstag.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/removeinvalidtablewidth.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/removemsattributes.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/removestyleblock.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/removexmlns.d.ts +15 -0
- package/components/document-builder/src/plugins/paste-handler/filters/replacemsfootnotes.d.ts +54 -0
- package/components/document-builder/src/plugins/paste-handler/filters/replacetabswithinprewithspaces.d.ts +24 -0
- package/components/document-builder/src/plugins/paste-handler/filters/space.d.ts +27 -0
- package/components/document-builder/src/plugins/paste-handler/filters/table.d.ts +16 -0
- package/components/document-builder/src/plugins/paste-handler/filters/utils.d.ts +25 -0
- package/components/document-builder/src/plugins/paste-handler/index.d.ts +35 -0
- package/components/document-builder/src/plugins/paste-handler/normalizers/googledocsnormalizer.d.ts +31 -0
- package/components/document-builder/src/plugins/paste-handler/normalizers/googlesheetsnormalizer.d.ts +31 -0
- package/components/document-builder/src/plugins/paste-handler/normalizers/mswordnormalizer.d.ts +29 -0
- package/components/document-builder/src/plugins/paste-handler/types.d.ts +30 -0
- package/components/document-builder/src/plugins/table-custom/index.d.ts +34 -0
- package/components/document-builder/src/plugins/variable/variable.plugin.d.ts +39 -0
- package/components/index.d.ts +4 -0
- package/components/mini-editor/index.d.ts +2 -0
- package/components/mini-editor/src/mini-editor.component.d.ts +90 -0
- package/components/mini-editor/src/mini-editor.model.d.ts +44 -0
- package/components/section/src/section.component.d.ts +10 -11
- package/components/side-drawer/src/side-drawer.component.d.ts +11 -24
- package/components/tab-router/src/components/tab-router-item/tab-router-item.component.d.ts +4 -1
- package/components/tab-router/src/components/tab-router-outlet/tab-router-outlet.component.d.ts +3 -15
- package/components/table/src/components/column-filter/column-filter.component.d.ts +3 -3
- package/components/table/src/components/desktop-cell/desktop-cell.component.d.ts +12 -2
- package/components/table/src/components/desktop-cell-view/desktop-cell-view.component.d.ts +12 -2
- package/components/table/src/components/external-filter/external-filter.component.d.ts +1 -1
- package/components/table/src/components/selector-action/action-filter.pipe.d.ts +11 -10
- package/components/table/src/components/selector-action/selector-action.component.d.ts +5 -3
- package/components/table/src/directives/index.d.ts +2 -0
- package/components/table/src/directives/sd-table-column-filter-def.directive.d.ts +9 -0
- package/components/table/src/directives/sticky-shadow.directive.d.ts +17 -0
- package/components/table/src/models/table-column.model.d.ts +34 -34
- package/components/table/src/models/table-command.model.d.ts +7 -3
- package/components/table/src/models/table-item.model.d.ts +5 -4
- package/components/table/src/models/table-option-config.model.d.ts +5 -0
- package/components/table/src/models/table-option-export.model.d.ts +3 -2
- package/components/table/src/models/table-option-selector.model.d.ts +11 -10
- package/components/table/src/models/table-option.model.d.ts +10 -9
- package/components/table/src/services/index.d.ts +3 -0
- package/components/table/src/services/table-export/table-export.service.d.ts +26 -0
- package/components/table/src/services/table-filter/table-filter.model.d.ts +5 -4
- package/components/table/src/services/table-format/table-format.service.d.ts +16 -0
- package/components/table/src/table.component.d.ts +39 -53
- package/components/upload-file/src/configurations/upload-file.configuration.d.ts +1 -1
- package/components/upload-file/src/services/upload-file.service.d.ts +0 -1
- package/components/upload-file/src/upload-file.component.d.ts +49 -54
- package/components/view/index.d.ts +1 -0
- package/components/view/src/view.component.d.ts +16 -0
- package/components/workflow/src/models/form-generic-component.model.d.ts +5 -4
- package/components/workflow/src/models/index.d.ts +1 -0
- package/directives/index.d.ts +1 -0
- package/directives/src/sd-href.directive.d.ts +9 -0
- package/fesm2022/sd-angular-core-components-avatar.mjs +103 -0
- package/fesm2022/sd-angular-core-components-avatar.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-badge.mjs +101 -91
- package/fesm2022/sd-angular-core-components-badge.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-button.mjs +70 -96
- package/fesm2022/sd-angular-core-components-button.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-code-editor.mjs +129 -0
- package/fesm2022/sd-angular-core-components-code-editor.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-document-builder.mjs +3994 -608
- package/fesm2022/sd-angular-core-components-document-builder.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-history.mjs +1 -1
- package/fesm2022/sd-angular-core-components-history.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-import-excel.mjs +1 -1
- package/fesm2022/sd-angular-core-components-import-excel.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-mini-editor.mjs +326 -0
- package/fesm2022/sd-angular-core-components-mini-editor.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-preview.mjs +1 -1
- package/fesm2022/sd-angular-core-components-preview.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-section.mjs +24 -42
- package/fesm2022/sd-angular-core-components-section.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-side-drawer.mjs +78 -84
- package/fesm2022/sd-angular-core-components-side-drawer.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-tab-router.mjs +152 -226
- package/fesm2022/sd-angular-core-components-tab-router.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +1129 -1131
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-upload-file.mjs +339 -444
- package/fesm2022/sd-angular-core-components-upload-file.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-view.mjs +45 -0
- package/fesm2022/sd-angular-core-components-view.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-workflow.mjs +47 -57
- package/fesm2022/sd-angular-core-components-workflow.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components.mjs +4 -0
- package/fesm2022/sd-angular-core-components.mjs.map +1 -1
- package/fesm2022/sd-angular-core-directives.mjs +80 -27
- package/fesm2022/sd-angular-core-directives.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs +274 -364
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-chip-calendar.mjs +5 -2
- package/fesm2022/sd-angular-core-forms-chip-calendar.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-chip.mjs +5 -2
- package/fesm2022/sd-angular-core-forms-chip.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-date-range.mjs +160 -245
- package/fesm2022/sd-angular-core-forms-date-range.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-date.mjs +153 -273
- package/fesm2022/sd-angular-core-forms-date.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-datetime.mjs +152 -288
- package/fesm2022/sd-angular-core-forms-datetime.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input-number.mjs +191 -338
- package/fesm2022/sd-angular-core-forms-input-number.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input.mjs +149 -287
- package/fesm2022/sd-angular-core-forms-input.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-radio.mjs +3 -2
- package/fesm2022/sd-angular-core-forms-radio.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-select.mjs +375 -448
- package/fesm2022/sd-angular-core-forms-select.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-textarea.mjs +148 -227
- package/fesm2022/sd-angular-core-forms-textarea.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-keycloak.mjs +126 -0
- package/fesm2022/sd-angular-core-modules-keycloak.mjs.map +1 -0
- package/fesm2022/sd-angular-core-modules-layout.mjs +454 -453
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules.mjs +1 -1
- package/fesm2022/sd-angular-core-services-api.mjs +5 -10
- package/fesm2022/sd-angular-core-services-api.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-confirm.mjs +5 -7
- package/fesm2022/sd-angular-core-services-confirm.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-docx.mjs +173 -0
- package/fesm2022/sd-angular-core-services-docx.mjs.map +1 -0
- package/fesm2022/sd-angular-core-services-notify.mjs +2 -2
- package/fesm2022/sd-angular-core-services-notify.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services.mjs +1 -0
- package/fesm2022/sd-angular-core-services.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-extensions.mjs +21 -45
- package/fesm2022/sd-angular-core-utilities-extensions.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-models.mjs +15 -1
- package/fesm2022/sd-angular-core-utilities-models.mjs.map +1 -1
- package/forms/autocomplete/src/autocomplete.component.d.ts +50 -55
- package/forms/chip/src/chip.component.d.ts +3 -2
- package/forms/chip-calendar/src/chip-calendar.component.d.ts +3 -2
- package/forms/date/src/date.component.d.ts +43 -46
- package/forms/date-range/src/date-range.component.d.ts +30 -34
- package/forms/datetime/src/datetime.component.d.ts +43 -49
- package/forms/input/src/input.component.d.ts +48 -57
- package/forms/input-number/src/input-number.component.d.ts +48 -54
- package/forms/select/src/select.component.d.ts +62 -64
- package/forms/textarea/src/textarea.component.d.ts +35 -43
- package/modules/index.d.ts +1 -1
- package/modules/keycloak/index.d.ts +4 -0
- package/modules/keycloak/keycloak.configuration.d.ts +11 -0
- package/modules/keycloak/keycloak.interceptor.d.ts +2 -0
- package/modules/keycloak/keycloak.module.d.ts +18 -0
- package/modules/keycloak/keycloak.service.d.ts +14 -0
- package/modules/layout/components/layout-main/layout-main.component.d.ts +7 -12
- package/modules/layout/components/page/page.component.d.ts +5 -7
- package/modules/layout/components/sidebar-v1/components/sidebar/sidebar.component.d.ts +22 -29
- package/modules/layout/components/sidebar-v1/components/user/user.component.d.ts +11 -17
- package/modules/layout/components/sidebar-v1/main.component.d.ts +14 -14
- package/modules/layout/configurations/layout.configuration.d.ts +46 -3
- package/modules/layout/modules/forbidden/pages/root/root.component.d.ts +3 -8
- package/modules/layout/modules/home/components/home-page/home-page.component.d.ts +2 -5
- package/modules/layout/modules/not-found/pages/root/root.component.d.ts +3 -8
- package/modules/layout/pipes/high-light-search.pipe.d.ts +1 -1
- package/modules/layout/services/index.d.ts +1 -0
- package/modules/layout/services/layout.service.d.ts +10 -0
- package/modules/layout/services/menu/menu.model.d.ts +2 -0
- package/modules/layout/services/storage/storage.service.d.ts +0 -3
- package/package.json +80 -57
- package/sd-angular-core-19.0.0-beta.61.tgz +0 -0
- package/services/api/src/api.model.d.ts +6 -1
- package/services/confirm/src/lib/confirm.service.d.ts +1 -0
- package/services/docx/index.d.ts +1 -0
- package/services/docx/src/lib/docx.model.d.ts +9 -0
- package/services/docx/src/lib/docx.service.d.ts +13 -0
- package/services/docx/src/public-api.d.ts +2 -0
- package/services/index.d.ts +1 -0
- package/services/notify/index.d.ts +1 -0
- package/services/notify/src/notify.model.d.ts +1 -1
- package/services/notify/src/notify.service.d.ts +5 -5
- package/utilities/extensions/src/string.extension.d.ts +2 -0
- package/utilities/extensions/src/utility.extension.d.ts +1 -0
- package/utilities/models/index.d.ts +3 -0
- package/utilities/models/src/filter.model.d.ts +14 -2
- package/utilities/models/src/icon.model.d.ts +2 -0
- package/utilities/models/src/nested-key-of.model.d.ts +5 -0
- package/utilities/models/src/pattern.model.d.ts +1 -1
- package/utilities/models/src/unwrap-signal.model.d.ts +6 -0
- package/components/document-builder/src/plugins/comment/comment.plugin.d.ts +0 -4
- package/components/document-builder/src/plugins/table-fit/table-fit.plugin.d.ts +0 -4
- package/fesm2022/sd-angular-core-modules-oidc.mjs +0 -127
- package/fesm2022/sd-angular-core-modules-oidc.mjs.map +0 -1
- package/modules/oidc/dynamic-sts.loader.d.ts +0 -11
- package/modules/oidc/index.d.ts +0 -2
- package/modules/oidc/oidc.configuration.d.ts +0 -11
- package/modules/oidc/oidc.module.d.ts +0 -14
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Pipe, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, createNgModule } from '@angular/core';
|
|
3
|
-
import * as
|
|
4
|
-
import {
|
|
5
|
-
import * as
|
|
2
|
+
import { Injectable, Pipe, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, signal, inject, Injector, NgModuleFactory, createNgModule } from '@angular/core';
|
|
3
|
+
import * as i2 from '@angular/router';
|
|
4
|
+
import { Router, ActivatedRoute, RouterEvent, RoutesRecognized, NavigationEnd } from '@angular/router';
|
|
5
|
+
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
import * as i3 from '@angular/material/icon';
|
|
8
8
|
import { MatIconModule } from '@angular/material/icon';
|
|
9
9
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
10
|
-
import { BehaviorSubject, Subscription, Subject } from 'rxjs';
|
|
10
|
+
import { BehaviorSubject, Subscription, isObservable, lastValueFrom, Subject } from 'rxjs';
|
|
11
11
|
import { debounceTime, startWith, map, filter, take } from 'rxjs/operators';
|
|
12
|
-
import
|
|
12
|
+
import { SdNotifyService } from '@sd-angular/core/services/notify';
|
|
13
|
+
import { SdUtilities } from '@sd-angular/core/utilities';
|
|
14
|
+
import * as i2$1 from '@angular/cdk/drag-drop';
|
|
13
15
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
14
16
|
import { SdBadge } from '@sd-angular/core/components/badge';
|
|
15
|
-
import { SdUtilities } from '@sd-angular/core/utilities';
|
|
16
|
-
import * as i4 from '@sd-angular/core/services/notify';
|
|
17
17
|
|
|
18
18
|
class SdTabBase {
|
|
19
19
|
#tab;
|
|
@@ -114,6 +114,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
114
114
|
}]
|
|
115
115
|
}], ctorParameters: () => [] });
|
|
116
116
|
|
|
117
|
+
class SdTabDecoratorService {
|
|
118
|
+
static tabRouterService = new BehaviorSubject(undefined);
|
|
119
|
+
constructor(tabRouterService) {
|
|
120
|
+
SdTabDecoratorService.tabRouterService.next(tabRouterService);
|
|
121
|
+
}
|
|
122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
123
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
|
|
124
|
+
}
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, decorators: [{
|
|
126
|
+
type: Injectable,
|
|
127
|
+
args: [{
|
|
128
|
+
providedIn: 'root',
|
|
129
|
+
}]
|
|
130
|
+
}], ctorParameters: () => [{ type: SdTabRouterService }] });
|
|
131
|
+
|
|
117
132
|
class SdTabInfoPipe {
|
|
118
133
|
tabRouterService;
|
|
119
134
|
constructor(tabRouterService) {
|
|
@@ -153,12 +168,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
153
168
|
class SdTabRouterItemComponent {
|
|
154
169
|
cdRef;
|
|
155
170
|
tabRouterService;
|
|
171
|
+
router;
|
|
156
172
|
tab;
|
|
157
173
|
#subsctiption = new Subscription();
|
|
158
174
|
tabInfo;
|
|
159
|
-
constructor(cdRef, tabRouterService) {
|
|
175
|
+
constructor(cdRef, tabRouterService, router) {
|
|
160
176
|
this.cdRef = cdRef;
|
|
161
177
|
this.tabRouterService = tabRouterService;
|
|
178
|
+
this.router = router;
|
|
162
179
|
}
|
|
163
180
|
ngOnInit() {
|
|
164
181
|
this.#subsctiption.add(this.tabRouterService.events.pipe(debounceTime(100)).subscribe(() => {
|
|
@@ -174,6 +191,13 @@ class SdTabRouterItemComponent {
|
|
|
174
191
|
ngOnDestroy() {
|
|
175
192
|
this.#subsctiption.unsubscribe();
|
|
176
193
|
}
|
|
194
|
+
onTabClick = (event) => {
|
|
195
|
+
event.preventDefault();
|
|
196
|
+
this.router.navigate([this.tab.url], {
|
|
197
|
+
queryParams: this.tab.queryParams,
|
|
198
|
+
state: { switchTab: true },
|
|
199
|
+
});
|
|
200
|
+
};
|
|
177
201
|
close = (event) => {
|
|
178
202
|
event.preventDefault();
|
|
179
203
|
event.stopPropagation();
|
|
@@ -212,13 +236,13 @@ class SdTabRouterItemComponent {
|
|
|
212
236
|
this.tabRouterService.close(this.tab);
|
|
213
237
|
}
|
|
214
238
|
};
|
|
215
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
216
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTabRouterItemComponent, isStandalone: true, selector: "sd-tab-router-item", inputs: { tab: "tab" }, ngImport: i0, template: "<a\n [
|
|
239
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdTabRouterService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
240
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTabRouterItemComponent, isStandalone: true, selector: "sd-tab-router-item", inputs: { tab: "tab" }, ngImport: i0, template: "<a\r\n [href]=\"[tab.url]\"\r\n class=\"tab-router__item d-flex align-items-center gap-8\"\r\n [class.tab-router__item--active]=\"tab.isActive\"\r\n (click)=\"onTabClick($event)\"\r\n (mousedown)=\"onMousedown($event)\"\r\n (mouseup)=\"onMouseup($event)\">\r\n @let info = tabInfo | sdTabInfo: tab;\r\n @if (info) {\r\n <sd-badge\r\n style=\"overflow: hidden;white-space: nowrap;\"\r\n [icon]=\"info.icon\"\r\n [title]=\"info.icon\"\r\n [tooltip]=\"info.tooltip || info.name\"\r\n [title]=\"info.name\"\r\n [color]=\"info.color\"\r\n (click)=\"onTabClick($event)\"></sd-badge>\r\n <button\r\n aria-hidden=\"true\"\r\n class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\r\n (click)=\"close($event)\"\r\n (mousedown)=\"$event.stopPropagation()\">\r\n <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\r\n </button>\r\n }\r\n</a>\r\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdTabInfoPipe, name: "sdTabInfo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
217
241
|
}
|
|
218
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterItemComponent, decorators: [{
|
|
219
243
|
type: Component,
|
|
220
|
-
args: [{ selector: 'sd-tab-router-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule,
|
|
221
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdTabRouterService }], propDecorators: { tab: [{
|
|
244
|
+
args: [{ selector: 'sd-tab-router-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, SdBadge, SdTabInfoPipe], template: "<a\r\n [href]=\"[tab.url]\"\r\n class=\"tab-router__item d-flex align-items-center gap-8\"\r\n [class.tab-router__item--active]=\"tab.isActive\"\r\n (click)=\"onTabClick($event)\"\r\n (mousedown)=\"onMousedown($event)\"\r\n (mouseup)=\"onMouseup($event)\">\r\n @let info = tabInfo | sdTabInfo: tab;\r\n @if (info) {\r\n <sd-badge\r\n style=\"overflow: hidden;white-space: nowrap;\"\r\n [icon]=\"info.icon\"\r\n [title]=\"info.icon\"\r\n [tooltip]=\"info.tooltip || info.name\"\r\n [title]=\"info.name\"\r\n [color]=\"info.color\"\r\n (click)=\"onTabClick($event)\"></sd-badge>\r\n <button\r\n aria-hidden=\"true\"\r\n class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\r\n (click)=\"close($event)\"\r\n (mousedown)=\"$event.stopPropagation()\">\r\n <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\r\n </button>\r\n }\r\n</a>\r\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"] }]
|
|
245
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdTabRouterService }, { type: i2.Router }], propDecorators: { tab: [{
|
|
222
246
|
type: Input,
|
|
223
247
|
args: [{ required: true }]
|
|
224
248
|
}] } });
|
|
@@ -253,7 +277,7 @@ class SdTabRouterNavComponent {
|
|
|
253
277
|
moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
|
|
254
278
|
};
|
|
255
279
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterNavComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdTabRouterNavComponent, isStandalone: true, selector: "sd-tab-router-nav", inputs: { tabs: "tabs" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true }], ngImport: i0, template: "<div\n #tabRouterNav\n cdkDropList\n cdkDropListLockAxis=\"x\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"onDrop($event)\"\n class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n [class.d-none]=\"tabs.length > 1\">\n <ng-container *ngFor=\"let tab of tabs\">\n <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef?.nativeElement\"></sd-tab-router-item>\n </ng-container>\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type:
|
|
280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdTabRouterNavComponent, isStandalone: true, selector: "sd-tab-router-nav", inputs: { tabs: "tabs" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true }], ngImport: i0, template: "<div\n #tabRouterNav\n cdkDropList\n cdkDropListLockAxis=\"x\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"onDrop($event)\"\n class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n [class.d-none]=\"tabs.length > 1\">\n <ng-container *ngFor=\"let tab of tabs\">\n <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef?.nativeElement\"></sd-tab-router-item>\n </ng-container>\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdTabRouterItemComponent, selector: "sd-tab-router-item", inputs: ["tab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
257
281
|
}
|
|
258
282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterNavComponent, decorators: [{
|
|
259
283
|
type: Component,
|
|
@@ -268,64 +292,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
268
292
|
args: ['window:resize', ['$event']]
|
|
269
293
|
}] } });
|
|
270
294
|
|
|
271
|
-
class SdTabDecoratorService {
|
|
272
|
-
static tabRouterService = new BehaviorSubject(undefined);
|
|
273
|
-
constructor(tabRouterService) {
|
|
274
|
-
SdTabDecoratorService.tabRouterService.next(tabRouterService);
|
|
275
|
-
}
|
|
276
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
277
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
|
|
278
|
-
}
|
|
279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabDecoratorService, decorators: [{
|
|
280
|
-
type: Injectable,
|
|
281
|
-
args: [{
|
|
282
|
-
providedIn: 'root',
|
|
283
|
-
}]
|
|
284
|
-
}], ctorParameters: () => [{ type: SdTabRouterService }] });
|
|
285
|
-
|
|
286
295
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
287
296
|
class SdTabRouterOutletComponent {
|
|
288
|
-
router;
|
|
289
|
-
activatedRoute;
|
|
290
|
-
cd;
|
|
291
|
-
injector;
|
|
292
|
-
tabDecoratorService;
|
|
293
|
-
tabRouterService;
|
|
294
|
-
sdNotifyService;
|
|
295
297
|
tabRouterNav;
|
|
296
|
-
tabs = [];
|
|
298
|
+
tabs = signal([]);
|
|
299
|
+
#router = inject(Router);
|
|
300
|
+
#activatedRoute = inject(ActivatedRoute);
|
|
301
|
+
#injector = inject(Injector);
|
|
302
|
+
#tabRouterService = inject(SdTabRouterService);
|
|
303
|
+
#sdNotifyService = inject(SdNotifyService);
|
|
304
|
+
#tabDecoratorService = inject(SdTabDecoratorService);
|
|
297
305
|
#rootRoute;
|
|
298
306
|
#subscription = new Subscription();
|
|
299
307
|
#firstLoad = true;
|
|
300
|
-
constructor(
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
this.activatedRoute = activatedRoute;
|
|
304
|
-
this.cd = cd;
|
|
305
|
-
this.injector = injector;
|
|
306
|
-
this.tabDecoratorService = tabDecoratorService;
|
|
307
|
-
this.tabRouterService = tabRouterService;
|
|
308
|
-
this.sdNotifyService = sdNotifyService;
|
|
309
|
-
this.#subscription.add(router.events
|
|
310
|
-
.pipe(map((event) => (event instanceof RouterEvent ? event : event.routerEvent)), filter(event => {
|
|
311
|
-
return event instanceof RoutesRecognized || event instanceof NavigationEnd;
|
|
312
|
-
}))
|
|
308
|
+
constructor() {
|
|
309
|
+
this.#subscription.add(this.#router.events
|
|
310
|
+
.pipe(map((event) => (event instanceof RouterEvent ? event : event.routerEvent)), filter(event => event instanceof RoutesRecognized || event instanceof NavigationEnd))
|
|
313
311
|
.subscribe(async (event) => {
|
|
314
312
|
if (this.#firstLoad && event instanceof NavigationEnd) {
|
|
315
313
|
this.#firstLoad = false;
|
|
316
|
-
const route = this.#getActivatedRouteSnapshot(this
|
|
317
|
-
this.#rootRoute = this
|
|
314
|
+
const route = this.#getActivatedRouteSnapshot(this.#activatedRoute.snapshot);
|
|
315
|
+
this.#rootRoute = this.#router.routerState.root;
|
|
318
316
|
await this.#activeRoute(event.urlAfterRedirects || event.url, route);
|
|
319
317
|
return;
|
|
320
318
|
}
|
|
321
319
|
if (!this.#firstLoad && event instanceof RoutesRecognized) {
|
|
322
320
|
const route = this.#getActivatedRouteSnapshot(event.state.root);
|
|
323
|
-
this.#rootRoute = this
|
|
321
|
+
this.#rootRoute = this.#router.routerState.root;
|
|
324
322
|
await this.#activeRoute(event.urlAfterRedirects || event.url, route);
|
|
325
323
|
}
|
|
326
324
|
}));
|
|
327
|
-
this.#subscription.add(tabRouterService.actions.subscribe((event) => {
|
|
328
|
-
if (event
|
|
325
|
+
this.#subscription.add(this.#tabRouterService.actions.subscribe((event) => {
|
|
326
|
+
if (event?.type === 'close') {
|
|
329
327
|
this.#closeTab(event.tab);
|
|
330
328
|
}
|
|
331
329
|
}));
|
|
@@ -333,61 +331,42 @@ class SdTabRouterOutletComponent {
|
|
|
333
331
|
ngOnDestroy() {
|
|
334
332
|
this.#subscription.unsubscribe();
|
|
335
333
|
}
|
|
336
|
-
tabTrackBy = (index, tab) =>
|
|
337
|
-
return tab.key;
|
|
338
|
-
};
|
|
334
|
+
tabTrackBy = (index, tab) => tab.key;
|
|
339
335
|
#closeTab = (tab) => {
|
|
336
|
+
const currentTabs = this.tabs();
|
|
340
337
|
const { isActive, key: activeKey } = tab;
|
|
341
338
|
if (isActive) {
|
|
342
|
-
const activeIndex =
|
|
343
|
-
const nextTab =
|
|
339
|
+
const activeIndex = currentTabs.findIndex(({ key }) => key === activeKey);
|
|
340
|
+
const nextTab = currentTabs[activeIndex + 1] || currentTabs[activeIndex - 1];
|
|
341
|
+
this.tabs.set(currentTabs.filter(({ key }) => key !== activeKey));
|
|
344
342
|
if (nextTab) {
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
};
|
|
349
|
-
this.tabs = this.tabs.filter(({ key }) => key !== activeKey);
|
|
350
|
-
this.router.navigate([nextUrl], {
|
|
351
|
-
queryParams: nextQueryParams,
|
|
352
|
-
state: {
|
|
353
|
-
switchTab: true,
|
|
354
|
-
},
|
|
343
|
+
this.#router.navigate([nextTab.url], {
|
|
344
|
+
queryParams: { ...(nextTab.queryParams || {}) },
|
|
345
|
+
state: { switchTab: true },
|
|
355
346
|
});
|
|
356
347
|
}
|
|
357
348
|
else {
|
|
358
|
-
this.
|
|
359
|
-
this.router.navigateByUrl('/', {
|
|
360
|
-
state: {
|
|
361
|
-
switchTab: true,
|
|
362
|
-
},
|
|
363
|
-
});
|
|
349
|
+
this.#router.navigateByUrl('/', { state: { switchTab: true } });
|
|
364
350
|
}
|
|
365
351
|
}
|
|
366
352
|
else {
|
|
367
|
-
this.tabs
|
|
353
|
+
this.tabs.set(currentTabs.filter(({ key }) => key !== tab.key));
|
|
368
354
|
this.tabRouterNav?.checkUI();
|
|
369
|
-
this.cd.markForCheck();
|
|
370
355
|
}
|
|
371
356
|
};
|
|
372
357
|
#activeRoute = async (fullUrl, route) => {
|
|
373
|
-
if (!route?.component)
|
|
358
|
+
if (!route?.component)
|
|
374
359
|
return;
|
|
375
|
-
}
|
|
376
360
|
const component = route.component;
|
|
377
|
-
const queryParams = {
|
|
378
|
-
|
|
379
|
-
};
|
|
380
|
-
const params = {
|
|
381
|
-
...(route.params || {}),
|
|
382
|
-
};
|
|
383
|
-
const data = {
|
|
384
|
-
...(route.data || {}),
|
|
385
|
-
};
|
|
361
|
+
const queryParams = { ...(route.queryParams || {}) };
|
|
362
|
+
const params = { ...(route.params || {}) };
|
|
363
|
+
const data = { ...(route.data || {}) };
|
|
386
364
|
const [url] = fullUrl.split('?');
|
|
387
365
|
const key = SdUtilities.hash({ url, queryParams });
|
|
388
366
|
let existedIndex = -1;
|
|
389
367
|
let activatedIndex = -1;
|
|
390
|
-
this.tabs
|
|
368
|
+
const currentTabs = this.tabs();
|
|
369
|
+
currentTabs.forEach((tab, index) => {
|
|
391
370
|
if (tab.key === key) {
|
|
392
371
|
tab.isActive = true;
|
|
393
372
|
existedIndex = index;
|
|
@@ -395,179 +374,126 @@ class SdTabRouterOutletComponent {
|
|
|
395
374
|
else {
|
|
396
375
|
if (tab.isActive) {
|
|
397
376
|
activatedIndex = index;
|
|
398
|
-
this
|
|
377
|
+
this.#tabRouterService.pushEvent(tab, SdTabDeactivated);
|
|
399
378
|
}
|
|
400
379
|
tab.isActive = false;
|
|
401
380
|
}
|
|
402
381
|
});
|
|
403
|
-
const currentNavigation = this
|
|
404
|
-
// Switch tab sẽ ko re-render lại trang
|
|
382
|
+
const currentNavigation = this.#router.getCurrentNavigation();
|
|
405
383
|
const switchTab = currentNavigation?.extras?.state?.['switchTab'];
|
|
406
|
-
// Replace tab sẽ close trang hiện tại
|
|
407
384
|
const replaceTab = currentNavigation?.extras?.state?.['replaceTab'];
|
|
385
|
+
// --- XỬ LÝ INJECTOR VÀ FIX LỖI TYPE TS(2345) ---
|
|
386
|
+
const getBestInjector = async (snapshot) => {
|
|
387
|
+
// 1. Nếu là Standalone Route, lấy injector từ chính route config (đã được router resolve)
|
|
388
|
+
const routeInjector = snapshot._resolvedGui || snapshot.routeConfig?._injector;
|
|
389
|
+
if (routeInjector)
|
|
390
|
+
return routeInjector;
|
|
391
|
+
// 2. Xử lý NgModule (Lazy load kiểu cũ)
|
|
392
|
+
const loadChildren = snapshot.parent?.routeConfig?.loadChildren;
|
|
393
|
+
if (typeof loadChildren === 'function') {
|
|
394
|
+
let loaded = await loadChildren();
|
|
395
|
+
// Unwrap Observable
|
|
396
|
+
if (isObservable(loaded)) {
|
|
397
|
+
loaded = await lastValueFrom(loaded);
|
|
398
|
+
}
|
|
399
|
+
// Unwrap Default Export (ES Module)
|
|
400
|
+
if (loaded && typeof loaded === 'object' && 'default' in loaded) {
|
|
401
|
+
loaded = loaded.default;
|
|
402
|
+
}
|
|
403
|
+
// Nếu là NgModuleFactory (Angular cũ hơn)
|
|
404
|
+
if (loaded instanceof NgModuleFactory) {
|
|
405
|
+
return loaded.create(this.#injector).injector;
|
|
406
|
+
}
|
|
407
|
+
// Nếu là Type (Class NgModule) - Đây là chỗ fix lỗi TS(2345)
|
|
408
|
+
if (typeof loaded === 'function' && !Array.isArray(loaded)) {
|
|
409
|
+
try {
|
|
410
|
+
return createNgModule(loaded, this.#injector).injector;
|
|
411
|
+
}
|
|
412
|
+
catch {
|
|
413
|
+
return this.#injector;
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
return this.#injector;
|
|
418
|
+
};
|
|
419
|
+
const finalInjector = await getBestInjector(route);
|
|
420
|
+
const activatedRoute = this.#getActivatedRoute(this.#rootRoute, component);
|
|
421
|
+
const newTab = {
|
|
422
|
+
key,
|
|
423
|
+
component,
|
|
424
|
+
injector: new SdOutletInjector(activatedRoute, finalInjector),
|
|
425
|
+
isActive: true,
|
|
426
|
+
url,
|
|
427
|
+
params,
|
|
428
|
+
queryParams,
|
|
429
|
+
data,
|
|
430
|
+
tabInfoChanges: new Subject(),
|
|
431
|
+
};
|
|
408
432
|
if (existedIndex >= 0) {
|
|
409
|
-
const
|
|
433
|
+
const updatedTabs = [...currentTabs];
|
|
410
434
|
if (replaceTab && activatedIndex >= 0) {
|
|
411
|
-
|
|
412
|
-
this.tabs.splice(activatedIndex, 1);
|
|
413
|
-
}
|
|
435
|
+
updatedTabs.splice(activatedIndex, 1);
|
|
414
436
|
}
|
|
415
437
|
if (switchTab) {
|
|
416
|
-
this
|
|
417
|
-
this
|
|
438
|
+
this.#tabRouterService.setCurrentTab(updatedTabs[existedIndex]);
|
|
439
|
+
this.#tabRouterService.pushEvent(updatedTabs[existedIndex], SdTabActivated);
|
|
418
440
|
}
|
|
419
441
|
else {
|
|
420
|
-
|
|
421
|
-
const module = (await route.parent.routeConfig.loadChildren());
|
|
422
|
-
const moduleRef = createNgModule(module, this.injector);
|
|
423
|
-
const activatedRoute = this.#getActivatedRoute(this.#rootRoute, component);
|
|
424
|
-
const tab = {
|
|
425
|
-
key,
|
|
426
|
-
component,
|
|
427
|
-
injector: new SdOutletInjector(activatedRoute, moduleRef),
|
|
428
|
-
isActive: true,
|
|
429
|
-
url,
|
|
430
|
-
params,
|
|
431
|
-
queryParams,
|
|
432
|
-
data,
|
|
433
|
-
tabInfoChanges: new Subject(),
|
|
434
|
-
};
|
|
435
|
-
this.tabs[this.tabs.indexOf(existedTab)] = tab;
|
|
436
|
-
}
|
|
442
|
+
updatedTabs[existedIndex] = newTab;
|
|
437
443
|
}
|
|
444
|
+
this.tabs.set(updatedTabs);
|
|
438
445
|
}
|
|
439
446
|
else {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
const tab = {
|
|
445
|
-
key,
|
|
446
|
-
component,
|
|
447
|
-
injector: new SdOutletInjector(activatedRoute, moduleRef),
|
|
448
|
-
isActive: true,
|
|
449
|
-
url,
|
|
450
|
-
params,
|
|
451
|
-
queryParams,
|
|
452
|
-
data,
|
|
453
|
-
tabInfoChanges: new Subject(),
|
|
454
|
-
};
|
|
455
|
-
this.tabRouterService.setCurrentTab(tab);
|
|
456
|
-
if (activatedIndex >= 0 && replaceTab) {
|
|
457
|
-
this.tabs.splice(activatedIndex, 1);
|
|
458
|
-
}
|
|
459
|
-
this.tabs.push(tab);
|
|
460
|
-
// if (existedIndex >= 0 && !switchTab) {
|
|
461
|
-
// this.tabs[existedIndex] = tab;
|
|
462
|
-
// } else {
|
|
463
|
-
// this.tabs.push(tab);
|
|
464
|
-
// }
|
|
447
|
+
const updatedTabs = [...currentTabs];
|
|
448
|
+
this.#tabRouterService.setCurrentTab(newTab);
|
|
449
|
+
if (activatedIndex >= 0 && replaceTab) {
|
|
450
|
+
updatedTabs.splice(activatedIndex, 1);
|
|
465
451
|
}
|
|
466
|
-
this.
|
|
467
|
-
if (this.tabs.length > 10) {
|
|
468
|
-
this
|
|
452
|
+
this.tabs.set([...updatedTabs, newTab]);
|
|
453
|
+
if (this.tabs().length > 10) {
|
|
454
|
+
this.#sdNotifyService.warning('Bạn đã mở quá nhiều tab.');
|
|
469
455
|
}
|
|
470
|
-
// if (this.tabs.length > 15) {
|
|
471
|
-
// this.tabs.splice(0, this.tabs.length - 10);
|
|
472
|
-
// }
|
|
473
456
|
}
|
|
474
|
-
|
|
475
|
-
// const existedTab = this.tabs[existedIndex];
|
|
476
|
-
// this.tabRouterService.setCurrentTab(existedTab);
|
|
477
|
-
// this.tabRouterService.pushEvent(existedTab, SdTabActivated);
|
|
478
|
-
// } else {
|
|
479
|
-
// if (typeof route?.parent?.routeConfig?.loadChildren === 'function') {
|
|
480
|
-
// const module = await route.parent.routeConfig.loadChildren();
|
|
481
|
-
// const factory = await this.compiler.compileModuleAsync(module);
|
|
482
|
-
// const injector = factory.create(this.injector);
|
|
483
|
-
// const activatedRoute = this.#getActivatedRoute(
|
|
484
|
-
// this.#rootRoute,
|
|
485
|
-
// component
|
|
486
|
-
// );
|
|
487
|
-
// const tab = {
|
|
488
|
-
// key,
|
|
489
|
-
// component,
|
|
490
|
-
// injector: new SdOutletInjector(activatedRoute, injector),
|
|
491
|
-
// isActive: true,
|
|
492
|
-
// name: url,
|
|
493
|
-
// url,
|
|
494
|
-
// params,
|
|
495
|
-
// queryParams,
|
|
496
|
-
// data
|
|
497
|
-
// };
|
|
498
|
-
// this.tabRouterService.setCurrentTab(tab);
|
|
499
|
-
// if (activatedIndex >= 0 && replaceTab) {
|
|
500
|
-
// this.tabs.splice(activatedIndex, 1);
|
|
501
|
-
// }
|
|
502
|
-
// if (existedIndex >= 0 && !switchTab) {
|
|
503
|
-
// this.tabs[existedIndex] = tab;
|
|
504
|
-
// } else {
|
|
505
|
-
// this.tabs.push(tab);
|
|
506
|
-
// }
|
|
507
|
-
// }
|
|
508
|
-
// this.tabRouterNav?.checkUI();
|
|
509
|
-
// if (this.tabs.length > 10) {
|
|
510
|
-
// this.sdNotifyService.notify.warning(
|
|
511
|
-
// 'Bạn đã mở quá nhiều tab. Vui lòng tắt các tab không dùng để hệ thống hoạt động tốt hơn.'
|
|
512
|
-
// );
|
|
513
|
-
// }
|
|
514
|
-
// if (this.tabs.length > 15) {
|
|
515
|
-
// this.tabs.splice(0, this.tabs.length - 10);
|
|
516
|
-
// }
|
|
517
|
-
// }
|
|
518
|
-
this.cd.markForCheck();
|
|
457
|
+
this.tabRouterNav?.checkUI();
|
|
519
458
|
};
|
|
520
|
-
#getActivatedRouteSnapshot = (
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
activatedRouteSnapshot = activatedRouteSnapshot.firstChild;
|
|
526
|
-
}
|
|
527
|
-
return activatedRouteSnapshot;
|
|
459
|
+
#getActivatedRouteSnapshot = (snapshot) => {
|
|
460
|
+
let node = snapshot;
|
|
461
|
+
while (node.firstChild)
|
|
462
|
+
node = node.firstChild;
|
|
463
|
+
return node;
|
|
528
464
|
};
|
|
529
465
|
#getActivatedRoute = (activatedRoute, component) => {
|
|
530
|
-
if (
|
|
531
|
-
return null;
|
|
532
|
-
}
|
|
533
|
-
if (activatedRoute.component && activatedRoute.component === component) {
|
|
466
|
+
if (activatedRoute.component === component)
|
|
534
467
|
return activatedRoute;
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
return activatedRoute;
|
|
540
|
-
}
|
|
468
|
+
for (const child of activatedRoute.children) {
|
|
469
|
+
const result = this.#getActivatedRoute(child, component);
|
|
470
|
+
if (result)
|
|
471
|
+
return result;
|
|
541
472
|
}
|
|
542
473
|
return null;
|
|
543
474
|
};
|
|
544
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterOutletComponent, deps: [
|
|
545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
476
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTabRouterOutletComponent, isStandalone: true, selector: "sd-tab-router-outlet", viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true }], ngImport: i0, template: "<sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n\n<div class=\"tab-router__list\">\n @for (tab of tabs(); track tab.key) {\n <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n <div class=\"tab-router__content\">\n <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n </div>\n </div>\n } @empty {\n <div class=\"tab-router__empty\">\n </div>\n }\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%;height:calc(100vh - 64px)}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdTabRouterNavComponent, selector: "sd-tab-router-nav", inputs: ["tabs"] }] });
|
|
546
477
|
}
|
|
547
478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTabRouterOutletComponent, decorators: [{
|
|
548
479
|
type: Component,
|
|
549
|
-
args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, SdTabRouterNavComponent], template: "<sd-tab-router-nav [tabs]=\"tabs\" #tabRouterNav></sd-tab-router-nav>\n\n<div class=\"tab-router__list\">\n
|
|
550
|
-
}], ctorParameters: () => [
|
|
480
|
+
args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, SdTabRouterNavComponent], template: "<sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n\n<div class=\"tab-router__list\">\n @for (tab of tabs(); track tab.key) {\n <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n <div class=\"tab-router__content\">\n <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n </div>\n </div>\n } @empty {\n <div class=\"tab-router__empty\">\n </div>\n }\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%;height:calc(100vh - 64px)}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"] }]
|
|
481
|
+
}], ctorParameters: () => [], propDecorators: { tabRouterNav: [{
|
|
551
482
|
type: ViewChild,
|
|
552
483
|
args: ['tabRouterNav']
|
|
553
484
|
}] } });
|
|
554
485
|
class SdOutletInjector {
|
|
555
486
|
route;
|
|
556
|
-
|
|
557
|
-
constructor(route,
|
|
558
|
-
// private childContexts: ChildrenOutletContexts,
|
|
559
|
-
parent) {
|
|
487
|
+
parentInjector;
|
|
488
|
+
constructor(route, parentInjector) {
|
|
560
489
|
this.route = route;
|
|
561
|
-
this.
|
|
490
|
+
this.parentInjector = parentInjector;
|
|
562
491
|
}
|
|
563
492
|
get(token, notFoundValue) {
|
|
564
|
-
if (token === ActivatedRoute
|
|
565
|
-
return this.route;
|
|
493
|
+
if (token === ActivatedRoute) {
|
|
494
|
+
return this.route || notFoundValue;
|
|
566
495
|
}
|
|
567
|
-
|
|
568
|
-
// return this.childContexts;
|
|
569
|
-
// }
|
|
570
|
-
return this.parent.injector.get(token, notFoundValue);
|
|
496
|
+
return this.parentInjector.get(token, notFoundValue);
|
|
571
497
|
}
|
|
572
498
|
}
|
|
573
499
|
|