@elderbyte/ngx-starter 19.19.0 → 19.20.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.
@@ -35144,6 +35144,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
35144
35144
  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(--mdc-filled-button-container-shape) 0 0 var(--mdc-filled-button-container-shape);border-right:0}.elder-button-group button:last-child:not(:first-child){border-radius:0 var(--mdc-filled-button-container-shape) var(--mdc-filled-button-container-shape) 0;border-left:0}.elder-button-group button:last-child:first-child{border-radius:var(--mdc-filled-button-container-shape)}\n"] }]
35145
35145
  }], ctorParameters: () => [] });
35146
35146
 
35147
+ class ElderUrlFragmentSwitcherCtx {
35148
+ constructor(availableFragments, activeFragment) {
35149
+ this.availableFragments = availableFragments;
35150
+ this.activeFragment = activeFragment;
35151
+ }
35152
+ }
35147
35153
  class ElderUrlFragmentSwitcherComponent {
35148
35154
  /***************************************************************************
35149
35155
  * *
@@ -35151,23 +35157,31 @@ class ElderUrlFragmentSwitcherComponent {
35151
35157
  * *
35152
35158
  **************************************************************************/
35153
35159
  constructor() {
35154
- this.logger = LoggerFactory.getLogger('ElderUrlFragmentSwitcherComponent');
35155
35160
  /***************************************************************************
35156
35161
  * *
35157
35162
  * Fields *
35158
35163
  * *
35159
35164
  **************************************************************************/
35165
+ /**
35166
+ * Disables the component
35167
+ */
35160
35168
  this.disable = true;
35161
- /*
35162
- Regex which matches the part of the url which will get replaced
35169
+ /**
35170
+ * Regex which matches the part of the url which will get replaced
35163
35171
  */
35164
35172
  this.urlRegex = new RegExp('[.](\\w+)');
35173
+ /**
35174
+ * Index of the regex group which will be replaced
35175
+ */
35165
35176
  this.regexArrayIndex = 0;
35166
- /*
35167
- Window which will open the created url
35177
+ /**
35178
+ * Window which will open the created url
35168
35179
  */
35169
35180
  this.windowOpenIn = '_self';
35170
- this.activeUrlFragment$ = new BehaviorSubject(new ElderUrlFragment('No match', ''));
35181
+ this._activeUrlFragment$ = new BehaviorSubject(new ElderUrlFragment('No match', ''));
35182
+ this._urlFragments$ = new BehaviorSubject([]);
35183
+ this.logger = LoggerFactory.getLogger('ElderUrlFragmentSwitcherComponent');
35184
+ this.fragmentContext$ = combineLatest([this.urlFragments$, this._activeUrlFragment$]).pipe(takeUntilDestroyed(), map(([fragments, activeFragment]) => new ElderUrlFragmentSwitcherCtx(fragments, activeFragment)));
35171
35185
  }
35172
35186
  /***************************************************************************
35173
35187
  * *
@@ -35176,19 +35190,27 @@ class ElderUrlFragmentSwitcherComponent {
35176
35190
  **************************************************************************/
35177
35191
  ngOnInit() {
35178
35192
  if (!this.disable) {
35179
- const urlFragment = this.urlFragments.find((c) => {
35180
- try {
35181
- return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
35182
- }
35183
- catch (e) {
35184
- return false;
35185
- }
35186
- });
35187
- if (urlFragment) {
35188
- this.activeUrlFragment$.next(urlFragment);
35189
- }
35193
+ this.updateActiveFragment();
35190
35194
  }
35191
35195
  }
35196
+ /***************************************************************************
35197
+ * *
35198
+ * Properties *
35199
+ * *
35200
+ **************************************************************************/
35201
+ /**
35202
+ * List of url fragments which can replace a part of the window location
35203
+ */
35204
+ set urlFragments(urlFragments) {
35205
+ this._urlFragments$.next(urlFragments);
35206
+ this.updateActiveFragment();
35207
+ }
35208
+ get urlFragments() {
35209
+ return this._urlFragments$.getValue();
35210
+ }
35211
+ get urlFragments$() {
35212
+ return this._urlFragments$.asObservable();
35213
+ }
35192
35214
  /***************************************************************************
35193
35215
  * *
35194
35216
  * Public API *
@@ -35198,8 +35220,26 @@ class ElderUrlFragmentSwitcherComponent {
35198
35220
  this.logger.debug(urlFragment);
35199
35221
  window.open(window.location.href.replace(this.urlRegex.exec(window.location.href)[this.regexArrayIndex], urlFragment), this.windowOpenIn);
35200
35222
  }
35223
+ /***************************************************************************
35224
+ * *
35225
+ * Private Methods *
35226
+ * *
35227
+ **************************************************************************/
35228
+ updateActiveFragment() {
35229
+ const urlFragment = this.urlFragments.find((c) => {
35230
+ try {
35231
+ return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
35232
+ }
35233
+ catch (e) {
35234
+ return false;
35235
+ }
35236
+ });
35237
+ if (urlFragment) {
35238
+ this._activeUrlFragment$.next(urlFragment);
35239
+ }
35240
+ }
35201
35241
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
35202
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ElderUrlFragmentSwitcherComponent, isStandalone: true, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n <elder-button-group>\n <button\n class=\"status-button\"\n mat-stroked-button\n type=\"button\"\n disabled\n [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n >\n <div class=\"layout-col\">\n <span *ngIf=\"!disable\" class=\"caption\">{{ activeUrlFragment.name }}</span>\n </div>\n </button>\n\n <button\n mat-stroked-button\n type=\"button\"\n *ngIf=\"!disable\"\n [matMenuTriggerFor]=\"fragmentMenu\"\n [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n >\n <mat-icon>flip_camera_android</mat-icon>\n </button>\n </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n <button\n mat-menu-item\n type=\"button\"\n *ngFor=\"let urlFragment of urlFragments\"\n (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n >\n <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n <span>{{ urlFragment.name }}</span>\n </button>\n</mat-menu>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
35242
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 <span *ngIf=\"!disable\" class=\"caption\">{{ ctx.activeFragment?.name }}</span>\n </div>\n </button>\n\n <button\n mat-stroked-button\n type=\"button\"\n *ngIf=\"!disable\"\n [matMenuTriggerFor]=\"fragmentMenu\"\n [ngStyle]=\"{ 'background-color': ctx.activeFragment?.color }\"\n >\n <mat-icon>flip_camera_android</mat-icon>\n </button>\n </elder-button-group>\n\n <mat-menu #fragmentMenu=\"matMenu\">\n <button\n mat-menu-item\n type=\"button\"\n *ngFor=\"let urlFragment of ctx.availableFragments\"\n (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n >\n <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n <span>{{ urlFragment.name }}</span>\n </button>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
35203
35243
  }
35204
35244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, decorators: [{
35205
35245
  type: Component,
@@ -35214,19 +35254,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
35214
35254
  NgFor,
35215
35255
  MatMenuItem,
35216
35256
  AsyncPipe,
35217
- ], template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n <elder-button-group>\n <button\n class=\"status-button\"\n mat-stroked-button\n type=\"button\"\n disabled\n [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n >\n <div class=\"layout-col\">\n <span *ngIf=\"!disable\" class=\"caption\">{{ activeUrlFragment.name }}</span>\n </div>\n </button>\n\n <button\n mat-stroked-button\n type=\"button\"\n *ngIf=\"!disable\"\n [matMenuTriggerFor]=\"fragmentMenu\"\n [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n >\n <mat-icon>flip_camera_android</mat-icon>\n </button>\n </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n <button\n mat-menu-item\n type=\"button\"\n *ngFor=\"let urlFragment of urlFragments\"\n (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n >\n <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n <span>{{ urlFragment.name }}</span>\n </button>\n</mat-menu>\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"] }]
35257
+ ], 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 <span *ngIf=\"!disable\" class=\"caption\">{{ ctx.activeFragment?.name }}</span>\n </div>\n </button>\n\n <button\n mat-stroked-button\n type=\"button\"\n *ngIf=\"!disable\"\n [matMenuTriggerFor]=\"fragmentMenu\"\n [ngStyle]=\"{ 'background-color': ctx.activeFragment?.color }\"\n >\n <mat-icon>flip_camera_android</mat-icon>\n </button>\n </elder-button-group>\n\n <mat-menu #fragmentMenu=\"matMenu\">\n <button\n mat-menu-item\n type=\"button\"\n *ngFor=\"let urlFragment of ctx.availableFragments\"\n (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n >\n <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n <span>{{ urlFragment.name }}</span>\n </button>\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"] }]
35218
35258
  }], ctorParameters: () => [], propDecorators: { disable: [{
35219
35259
  type: Input
35220
- }], urlFragments: [{
35221
- type: Input
35222
35260
  }], urlRegex: [{
35223
35261
  type: Input
35224
35262
  }], regexArrayIndex: [{
35225
35263
  type: Input
35226
- }, {
35227
- type: Input
35228
35264
  }], windowOpenIn: [{
35229
35265
  type: Input
35266
+ }], urlFragments: [{
35267
+ type: Input
35230
35268
  }] } });
35231
35269
 
35232
35270
  class ElderButtonGroupModule {