@elderbyte/ngx-starter 13.7.8 → 13.8.0
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/esm2020/lib/common/templates/template-slot-manager.mjs +34 -6
- package/esm2020/lib/components/navigation/toolbar/elder-toolbar.service.mjs +5 -3
- package/esm2020/lib/components/navigation/toolbar/toolbar/elder-toolbar.component.mjs +17 -13
- package/esm2020/lib/components/navigation/toolbar/toolbar-column-position.mjs +1 -1
- package/esm2020/lib/components/shell/shell/elder-shell.component.mjs +1 -1
- package/fesm2015/elderbyte-ngx-starter.mjs +54 -19
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +53 -19
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/common/templates/template-slot-manager.d.ts +13 -1
- package/lib/components/navigation/toolbar/toolbar/elder-toolbar.component.d.ts +13 -10
- package/lib/components/navigation/toolbar/toolbar-column-position.d.ts +9 -1
- package/lib/components/shell/shell/elder-shell.component.d.ts +3 -2
- package/package.json +1 -1
|
@@ -14631,7 +14631,11 @@ class TemplateSlotManager {
|
|
|
14631
14631
|
* Constructors *
|
|
14632
14632
|
* *
|
|
14633
14633
|
**************************************************************************/
|
|
14634
|
-
|
|
14634
|
+
/**
|
|
14635
|
+
* Create a new Template Slot Manager.
|
|
14636
|
+
* @param slotDefinitions Slot definitions, supporting synonyms
|
|
14637
|
+
*/
|
|
14638
|
+
constructor(slotDefinitions) {
|
|
14635
14639
|
/***************************************************************************
|
|
14636
14640
|
* *
|
|
14637
14641
|
* Fields *
|
|
@@ -14641,10 +14645,15 @@ class TemplateSlotManager {
|
|
|
14641
14645
|
/** Default templates (App Level) */
|
|
14642
14646
|
this._defaultSlotTemplates = new Map();
|
|
14643
14647
|
/** Custom templates (Component Level) */
|
|
14644
|
-
this._slotTemplates = new Map();
|
|
14648
|
+
this._slotTemplates = new Map();
|
|
14645
14649
|
this._activeSlotTemplates = new Map();
|
|
14646
|
-
|
|
14647
|
-
|
|
14650
|
+
/**
|
|
14651
|
+
* Key: A synonym slot name
|
|
14652
|
+
* Value: The primary slot the synonym is resolving to
|
|
14653
|
+
*/
|
|
14654
|
+
this._slotSynonyms = new Map();
|
|
14655
|
+
for (const slotDefinition of slotDefinitions) {
|
|
14656
|
+
this.initSlot(slotDefinition);
|
|
14648
14657
|
}
|
|
14649
14658
|
}
|
|
14650
14659
|
/***************************************************************************
|
|
@@ -14657,6 +14666,7 @@ class TemplateSlotManager {
|
|
|
14657
14666
|
* over time.
|
|
14658
14667
|
*/
|
|
14659
14668
|
activeSlotTemplate(slot) {
|
|
14669
|
+
slot = this.resolveSlot(slot);
|
|
14660
14670
|
const activeColumn = this._activeSlotTemplates.get(slot);
|
|
14661
14671
|
if (activeColumn) {
|
|
14662
14672
|
return activeColumn.asObservable();
|
|
@@ -14673,7 +14683,7 @@ class TemplateSlotManager {
|
|
|
14673
14683
|
* @param isDefault if the given template should be used as global default
|
|
14674
14684
|
*/
|
|
14675
14685
|
registerSlotTemplate(slot, template, isDefault = false) {
|
|
14676
|
-
|
|
14686
|
+
slot = this.resolveSlot(slot);
|
|
14677
14687
|
if (isDefault) {
|
|
14678
14688
|
this._defaultSlotTemplates.set(slot, template);
|
|
14679
14689
|
}
|
|
@@ -14690,6 +14700,7 @@ class TemplateSlotManager {
|
|
|
14690
14700
|
*/
|
|
14691
14701
|
deregisterSlotTemplate(template, slot) {
|
|
14692
14702
|
if (slot) {
|
|
14703
|
+
slot = this.resolveSlot(slot);
|
|
14693
14704
|
if (this._slotTemplates.get(slot) === template) {
|
|
14694
14705
|
this.removeSlotTemplate(slot);
|
|
14695
14706
|
}
|
|
@@ -14707,6 +14718,23 @@ class TemplateSlotManager {
|
|
|
14707
14718
|
* Private methods *
|
|
14708
14719
|
* *
|
|
14709
14720
|
**************************************************************************/
|
|
14721
|
+
initSlot(slotDefinition) {
|
|
14722
|
+
let slot;
|
|
14723
|
+
if (slotDefinition instanceof Array) {
|
|
14724
|
+
slot = slotDefinition.shift();
|
|
14725
|
+
this.registerSlotSynonyms(slot, slotDefinition);
|
|
14726
|
+
}
|
|
14727
|
+
else {
|
|
14728
|
+
slot = slotDefinition;
|
|
14729
|
+
}
|
|
14730
|
+
this._activeSlotTemplates.set(slot, new BehaviorSubject(null));
|
|
14731
|
+
}
|
|
14732
|
+
registerSlotSynonyms(primarySlot, synonyms) {
|
|
14733
|
+
synonyms.forEach(synonym => this._slotSynonyms.set(synonym, primarySlot));
|
|
14734
|
+
}
|
|
14735
|
+
resolveSlot(slot) {
|
|
14736
|
+
return this._slotSynonyms.get(slot) ?? slot;
|
|
14737
|
+
}
|
|
14710
14738
|
removeSlotTemplate(slot) {
|
|
14711
14739
|
this.logger.trace('Deregistering template slot at ', slot);
|
|
14712
14740
|
this._slotTemplates.delete(slot);
|
|
@@ -14741,10 +14769,12 @@ class ElderToolbarService {
|
|
|
14741
14769
|
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
14742
14770
|
this.slotManager = new TemplateSlotManager([
|
|
14743
14771
|
'left',
|
|
14772
|
+
'left.begin',
|
|
14773
|
+
['left.end', 'left.actions'],
|
|
14744
14774
|
'center',
|
|
14745
14775
|
'right',
|
|
14746
|
-
'
|
|
14747
|
-
'right.
|
|
14776
|
+
['right.begin', 'right.actions'],
|
|
14777
|
+
'right.end',
|
|
14748
14778
|
]);
|
|
14749
14779
|
}
|
|
14750
14780
|
/***************************************************************************
|
|
@@ -15067,10 +15097,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
|
|
|
15067
15097
|
|
|
15068
15098
|
class ElderToolbarComponent {
|
|
15069
15099
|
/***************************************************************************
|
|
15070
|
-
|
|
15071
|
-
|
|
15072
|
-
|
|
15073
|
-
|
|
15100
|
+
* *
|
|
15101
|
+
* Constructor *
|
|
15102
|
+
* *
|
|
15103
|
+
**************************************************************************/
|
|
15074
15104
|
constructor(toolbarService) {
|
|
15075
15105
|
this.toolbarService = toolbarService;
|
|
15076
15106
|
/***************************************************************************
|
|
@@ -15079,24 +15109,28 @@ class ElderToolbarComponent {
|
|
|
15079
15109
|
* *
|
|
15080
15110
|
**************************************************************************/
|
|
15081
15111
|
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
15082
|
-
this.leftColumnTemplate$ = toolbarService.activeColumnTemplate('left');
|
|
15083
|
-
this.centerColumnTemplate$ = toolbarService.activeColumnTemplate('center');
|
|
15084
|
-
this.rightColumnTemplate$ = toolbarService.activeColumnTemplate('right');
|
|
15085
|
-
this.leftActionsColumnTemplate$ = toolbarService.activeColumnTemplate('left.actions');
|
|
15086
|
-
this.rightActionsColumnTemplate$ = toolbarService.activeColumnTemplate('right.actions');
|
|
15087
15112
|
}
|
|
15088
15113
|
/***************************************************************************
|
|
15089
15114
|
* *
|
|
15090
15115
|
* Life Cycle *
|
|
15091
15116
|
* *
|
|
15092
15117
|
**************************************************************************/
|
|
15093
|
-
ngOnInit() {
|
|
15118
|
+
ngOnInit() {
|
|
15119
|
+
}
|
|
15120
|
+
/***************************************************************************
|
|
15121
|
+
* *
|
|
15122
|
+
* Public API *
|
|
15123
|
+
* *
|
|
15124
|
+
**************************************************************************/
|
|
15125
|
+
slotTemplate$(slot) {
|
|
15126
|
+
return this.toolbarService.activeColumnTemplate(slot);
|
|
15127
|
+
}
|
|
15094
15128
|
}
|
|
15095
15129
|
ElderToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ElderToolbarComponent, deps: [{ token: ElderToolbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
15096
|
-
ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "\n\n<div fxLayout=\"row\">\n\n <ng-content></ng-content>\n\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n [color]=\"color ? color : 'primary'\">\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <ng-container *ngTemplateOutlet=\"(
|
|
15130
|
+
ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "\n\n<div fxLayout=\"row\">\n\n <ng-content></ng-content>\n\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n [color]=\"color ? color : 'primary'\">\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n </div>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n </div>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n </div>\n\n\n <!-- Default Templates -->\n\n <ng-template #defaultLeftColumnTemplate>\n\n <elder-toolbar-title></elder-toolbar-title>\n\n </ng-template>\n\n\n <ng-template #defaultCenterColumnTemplate></ng-template>\n\n <ng-template #defaultEmptyTemplate></ng-template>\n\n\n <ng-template #defaultRightColumnTemplate>\n\n <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n </ng-template>\n\n </mat-toolbar>\n\n</div>\n\n", styles: [""], components: [{ type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }], directives: [{ type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15097
15131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ElderToolbarComponent, decorators: [{
|
|
15098
15132
|
type: Component,
|
|
15099
|
-
args: [{ selector: 'elder-toolbar, ebs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div fxLayout=\"row\">\n\n <ng-content></ng-content>\n\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n [color]=\"color ? color : 'primary'\">\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <ng-container *ngTemplateOutlet=\"(
|
|
15133
|
+
args: [{ selector: 'elder-toolbar, ebs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div fxLayout=\"row\">\n\n <ng-content></ng-content>\n\n <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n [color]=\"color ? color : 'primary'\">\n\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n </div>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n </div>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n </div>\n\n\n <!-- Default Templates -->\n\n <ng-template #defaultLeftColumnTemplate>\n\n <elder-toolbar-title></elder-toolbar-title>\n\n </ng-template>\n\n\n <ng-template #defaultCenterColumnTemplate></ng-template>\n\n <ng-template #defaultEmptyTemplate></ng-template>\n\n\n <ng-template #defaultRightColumnTemplate>\n\n <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n </ng-template>\n\n </mat-toolbar>\n\n</div>\n\n", styles: [""] }]
|
|
15100
15134
|
}], ctorParameters: function () { return [{ type: ElderToolbarService }]; }, propDecorators: { color: [{
|
|
15101
15135
|
type: Input
|
|
15102
15136
|
}] } });
|