@elderbyte/ngx-starter 20.0.0-beta.2 → 20.0.0-beta.3
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.
|
@@ -35114,6 +35114,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
|
|
|
35114
35114
|
args: [{ selector: 'elder-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"layout-row elder-button-group\">\n <ng-content></ng-content>\n</div>\n", styles: [".elder-button-group button{border:var(--elder-border-light);border-width:0!important;min-width:60px!important}.elder-button-group button:not(:first-child):not(:last-child){border-radius:0;border-left:0}.elder-button-group button:first-child:not(:last-child){border-radius:var(--mat-button-filled-container-shape) 0 0 var(--mat-button-filled-container-shape);border-right:0}.elder-button-group button:last-child:not(:first-child){border-radius:0 var(--mat-button-filled-container-shape) var(--mat-button-filled-container-shape) 0;border-left:0}.elder-button-group button:last-child:first-child{border-radius:var(--mat-button-filled-container-shape)}\n"] }]
|
|
35115
35115
|
}], ctorParameters: () => [] });
|
|
35116
35116
|
|
|
35117
|
+
class ElderUrlFragmentSwitcherCtx {
|
|
35118
|
+
constructor(availableFragments, activeFragment) {
|
|
35119
|
+
this.availableFragments = availableFragments;
|
|
35120
|
+
this.activeFragment = activeFragment;
|
|
35121
|
+
}
|
|
35122
|
+
}
|
|
35117
35123
|
class ElderUrlFragmentSwitcherComponent {
|
|
35118
35124
|
/***************************************************************************
|
|
35119
35125
|
* *
|
|
@@ -35121,23 +35127,31 @@ class ElderUrlFragmentSwitcherComponent {
|
|
|
35121
35127
|
* *
|
|
35122
35128
|
**************************************************************************/
|
|
35123
35129
|
constructor() {
|
|
35124
|
-
this.logger = LoggerFactory.getLogger('ElderUrlFragmentSwitcherComponent');
|
|
35125
35130
|
/***************************************************************************
|
|
35126
35131
|
* *
|
|
35127
35132
|
* Fields *
|
|
35128
35133
|
* *
|
|
35129
35134
|
**************************************************************************/
|
|
35135
|
+
/**
|
|
35136
|
+
* Disables the component
|
|
35137
|
+
*/
|
|
35130
35138
|
this.disable = true;
|
|
35131
|
-
|
|
35132
|
-
|
|
35139
|
+
/**
|
|
35140
|
+
* Regex which matches the part of the url which will get replaced
|
|
35133
35141
|
*/
|
|
35134
35142
|
this.urlRegex = new RegExp('[.](\\w+)');
|
|
35143
|
+
/**
|
|
35144
|
+
* Index of the regex group which will be replaced
|
|
35145
|
+
*/
|
|
35135
35146
|
this.regexArrayIndex = 0;
|
|
35136
|
-
|
|
35137
|
-
|
|
35147
|
+
/**
|
|
35148
|
+
* Window which will open the created url
|
|
35138
35149
|
*/
|
|
35139
35150
|
this.windowOpenIn = '_self';
|
|
35140
|
-
this.
|
|
35151
|
+
this._activeUrlFragment$ = new BehaviorSubject(new ElderUrlFragment('No match', ''));
|
|
35152
|
+
this._urlFragments$ = new BehaviorSubject([]);
|
|
35153
|
+
this.logger = LoggerFactory.getLogger('ElderUrlFragmentSwitcherComponent');
|
|
35154
|
+
this.fragmentContext$ = combineLatest([this.urlFragments$, this._activeUrlFragment$]).pipe(takeUntilDestroyed(), map(([fragments, activeFragment]) => new ElderUrlFragmentSwitcherCtx(fragments, activeFragment)));
|
|
35141
35155
|
}
|
|
35142
35156
|
/***************************************************************************
|
|
35143
35157
|
* *
|
|
@@ -35146,19 +35160,27 @@ class ElderUrlFragmentSwitcherComponent {
|
|
|
35146
35160
|
**************************************************************************/
|
|
35147
35161
|
ngOnInit() {
|
|
35148
35162
|
if (!this.disable) {
|
|
35149
|
-
|
|
35150
|
-
try {
|
|
35151
|
-
return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
|
|
35152
|
-
}
|
|
35153
|
-
catch (e) {
|
|
35154
|
-
return false;
|
|
35155
|
-
}
|
|
35156
|
-
});
|
|
35157
|
-
if (urlFragment) {
|
|
35158
|
-
this.activeUrlFragment$.next(urlFragment);
|
|
35159
|
-
}
|
|
35163
|
+
this.updateActiveFragment();
|
|
35160
35164
|
}
|
|
35161
35165
|
}
|
|
35166
|
+
/***************************************************************************
|
|
35167
|
+
* *
|
|
35168
|
+
* Properties *
|
|
35169
|
+
* *
|
|
35170
|
+
**************************************************************************/
|
|
35171
|
+
/**
|
|
35172
|
+
* List of url fragments which can replace a part of the window location
|
|
35173
|
+
*/
|
|
35174
|
+
set urlFragments(urlFragments) {
|
|
35175
|
+
this._urlFragments$.next(urlFragments);
|
|
35176
|
+
this.updateActiveFragment();
|
|
35177
|
+
}
|
|
35178
|
+
get urlFragments() {
|
|
35179
|
+
return this._urlFragments$.getValue();
|
|
35180
|
+
}
|
|
35181
|
+
get urlFragments$() {
|
|
35182
|
+
return this._urlFragments$.asObservable();
|
|
35183
|
+
}
|
|
35162
35184
|
/***************************************************************************
|
|
35163
35185
|
* *
|
|
35164
35186
|
* Public API *
|
|
@@ -35168,8 +35190,26 @@ class ElderUrlFragmentSwitcherComponent {
|
|
|
35168
35190
|
this.logger.debug(urlFragment);
|
|
35169
35191
|
window.open(window.location.href.replace(this.urlRegex.exec(window.location.href)[this.regexArrayIndex], urlFragment), this.windowOpenIn);
|
|
35170
35192
|
}
|
|
35193
|
+
/***************************************************************************
|
|
35194
|
+
* *
|
|
35195
|
+
* Private Methods *
|
|
35196
|
+
* *
|
|
35197
|
+
**************************************************************************/
|
|
35198
|
+
updateActiveFragment() {
|
|
35199
|
+
const urlFragment = this.urlFragments.find((c) => {
|
|
35200
|
+
try {
|
|
35201
|
+
return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
|
|
35202
|
+
}
|
|
35203
|
+
catch (e) {
|
|
35204
|
+
return false;
|
|
35205
|
+
}
|
|
35206
|
+
});
|
|
35207
|
+
if (urlFragment) {
|
|
35208
|
+
this._activeUrlFragment$.next(urlFragment);
|
|
35209
|
+
}
|
|
35210
|
+
}
|
|
35171
35211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ElderUrlFragmentSwitcherComponent, isStandalone: true, selector: "elder-url-fragment-switcher", inputs: { disable: "disable",
|
|
35212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ElderUrlFragmentSwitcherComponent, isStandalone: true, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn", urlFragments: "urlFragments" }, ngImport: i0, template: "@if (fragmentContext$ | async; as ctx) {\n <elder-button-group>\n <button\n class=\"status-button\"\n mat-stroked-button\n type=\"button\"\n disabled\n [ngStyle]=\"{ 'background-color': ctx.activeFragment?.color }\"\n >\n <div class=\"layout-col\">\n @if (!disable) {\n <span class=\"caption\">{{ ctx.activeFragment?.name }}</span>\n }\n </div>\n </button>\n\n @if (!disable) {\n <button\n mat-stroked-button\n type=\"button\"\n [matMenuTriggerFor]=\"fragmentMenu\"\n [ngStyle]=\"{ 'background-color': ctx.activeFragment?.color }\"\n >\n <mat-icon>flip_camera_android</mat-icon>\n </button>\n }\n </elder-button-group>\n\n <mat-menu #fragmentMenu=\"matMenu\">\n @for (urlFragment of ctx.availableFragments; track urlFragment) {\n <button mat-menu-item type=\"button\" (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n <span>{{ urlFragment.name }}</span>\n </button>\n }\n </mat-menu>\n}\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}.status-button.status-button .caption{color:#f5f5f5!important}\n"], dependencies: [{ kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
35173
35213
|
}
|
|
35174
35214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, decorators: [{
|
|
35175
35215
|
type: Component,
|
|
@@ -35182,19 +35222,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
|
|
|
35182
35222
|
MatMenu,
|
|
35183
35223
|
MatMenuItem,
|
|
35184
35224
|
AsyncPipe,
|
|
35185
|
-
], template: "@if (
|
|
35225
|
+
], template: "@if (fragmentContext$ | async; as ctx) {\n <elder-button-group>\n <button\n class=\"status-button\"\n mat-stroked-button\n type=\"button\"\n disabled\n [ngStyle]=\"{ 'background-color': ctx.activeFragment?.color }\"\n >\n <div class=\"layout-col\">\n @if (!disable) {\n <span class=\"caption\">{{ ctx.activeFragment?.name }}</span>\n }\n </div>\n </button>\n\n @if (!disable) {\n <button\n mat-stroked-button\n type=\"button\"\n [matMenuTriggerFor]=\"fragmentMenu\"\n [ngStyle]=\"{ 'background-color': ctx.activeFragment?.color }\"\n >\n <mat-icon>flip_camera_android</mat-icon>\n </button>\n }\n </elder-button-group>\n\n <mat-menu #fragmentMenu=\"matMenu\">\n @for (urlFragment of ctx.availableFragments; track urlFragment) {\n <button mat-menu-item type=\"button\" (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n <span>{{ urlFragment.name }}</span>\n </button>\n }\n </mat-menu>\n}\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}.status-button.status-button .caption{color:#f5f5f5!important}\n"] }]
|
|
35186
35226
|
}], ctorParameters: () => [], propDecorators: { disable: [{
|
|
35187
35227
|
type: Input
|
|
35188
|
-
}], urlFragments: [{
|
|
35189
|
-
type: Input
|
|
35190
35228
|
}], urlRegex: [{
|
|
35191
35229
|
type: Input
|
|
35192
35230
|
}], regexArrayIndex: [{
|
|
35193
35231
|
type: Input
|
|
35194
|
-
}, {
|
|
35195
|
-
type: Input
|
|
35196
35232
|
}], windowOpenIn: [{
|
|
35197
35233
|
type: Input
|
|
35234
|
+
}], urlFragments: [{
|
|
35235
|
+
type: Input
|
|
35198
35236
|
}] } });
|
|
35199
35237
|
|
|
35200
35238
|
class ElderButtonGroupModule {
|