@elderbyte/ngx-starter 19.3.0 → 19.3.2

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.
@@ -30313,23 +30313,17 @@ class ElderIntervalPickerComponent {
30313
30313
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
30314
30314
  type: Component,
30315
30315
  args: [{ selector: 'elder-interval-picker', imports: [
30316
- MatDateRangePicker,
30317
30316
  MatDatepickerModule,
30318
- MatDateRangeInput,
30319
30317
  MatFormFieldModule,
30320
30318
  MatLabel,
30321
- MatHint,
30322
- MatDatepickerToggle,
30323
30319
  MatInputModule,
30324
30320
  CommonModule,
30325
30321
  MatIconModule,
30326
30322
  FormsModule,
30327
30323
  MatButtonModule,
30328
30324
  MatCalendar,
30329
- MatTooltip,
30330
30325
  TranslateModule,
30331
30326
  MatMenuModule,
30332
- ElderIntervalInputComponent,
30333
30327
  ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n <div class=\"layout-col gap-md pt-xs\">\n <div class=\"layout-col\">\n <div class=\"layout-row select-buttons-container gap-sm\">\n <div class=\"layout-col gap-xs place-start-stretch\">\n <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n @if (presenter.isFixedAnchorDateSet()) {\n {{ 'intervalPicker.anchorDay' | translate }}\n } @else {\n {{ 'intervalPicker.today' | translate }}\n }\n </button>\n <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n @if (presenter.isFixedAnchorDateSet()) {\n {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n } @else {\n {{ 'intervalPicker.yesterday' | translate }}\n }\n </button>\n <button\n mat-button\n type=\"button\"\n (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n >\n {{ 'intervalPicker.last' | translate }} 7\n {{ 'intervalPicker.days' | translate }}\n </button>\n <button\n mat-button\n type=\"button\"\n (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n >\n {{ 'intervalPicker.last' | translate }} 30\n {{ 'intervalPicker.days' | translate }}\n </button>\n <button\n mat-button\n type=\"button\"\n (click)=\"controller.select.selectLast365daysIncludingToday()\"\n >\n {{ 'intervalPicker.last' | translate }} 365\n {{ 'intervalPicker.days' | translate }}\n </button>\n @if (intervalInputMode() === 'date-time-range') {\n <div class=\"pt-sm\"></div>\n <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n {{ 'intervalPicker.last' | translate }} 5\n {{ 'intervalPicker.minutes' | translate }}\n </button>\n <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n </button>\n <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n {{ 'intervalPicker.last' | translate }} 24\n {{ 'intervalPicker.hours' | translate }}\n </button>\n }\n </div>\n </div>\n </div>\n </div>\n <div class=\"layout-col\">\n <!-- smart shift -->\n <div class=\"layout-row place-around-center\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.smartShift(-1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n <span>{{ presenter.smartShiftMessage() }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.smartShift(1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n </div>\n <!-- calendars and input controls -->\n <div\n class=\"layout-row place-around-center\"\n style=\"align-items: flex-start; min-height: 280px\"\n >\n <mat-calendar\n #rangeCalendarStart\n style=\"width: 210px; max-width: 100%\"\n [selected]=\"presenter.dateRangeForCalendar()\"\n (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n >\n </mat-calendar>\n <mat-calendar\n #rangeCalendarEnd\n style=\"width: 210px; max-width: 100%\"\n [selected]=\"presenter.dateRangeForCalendar()\"\n (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n [minDate]=\"presenter.startDateTimeAsJSDate()\"\n [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n >\n </mat-calendar>\n </div>\n <div class=\"layout-row place-around-center gap-xl pt-sm\">\n <div class=\"layout-row place-around-center\">\n <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n <input\n #startDateInput\n name=\"startDateInput\"\n matInput\n type=\"date\"\n [ngModel]=\"presenter.startDateHtmlString()\"\n (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n />\n </mat-form-field>\n </div>\n <div class=\"layout-row place-around-center\">\n <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n <input\n #endDateInput\n name=\"endDateInput\"\n matInput\n type=\"date\"\n [ngModel]=\"presenter.endDateHtmlString()\"\n (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n />\n </mat-form-field>\n </div>\n </div>\n @if (intervalInputMode() === 'date-time-range') {\n <div class=\"layout-row place-around-center gap-xl pt-sm\">\n <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n <input\n name=\"startTimeInput\"\n matInput\n type=\"time\"\n #startTimeControl=\"ngModel\"\n step=\"1\"\n [ngModel]=\"presenter.startTimeHtmlString()\"\n (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n />\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n (click)=\"controller.clearStartTime()\"\n [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n <input\n name=\"endTimeInput\"\n matInput\n type=\"time\"\n #endTimeControl=\"ngModel\"\n step=\"1\"\n [ngModel]=\"presenter.endTimeHtmlString()\"\n (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n />\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n (click)=\"controller.clearEndTime()\"\n [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n }\n <br />\n </div>\n <div class=\"pt-xs\" style=\"width: 25%\">\n <div class=\"layout-col gap-lg\">\n <div class=\"layout-col gap-xs place-start-start\">\n <!-- select current -->\n <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n {{ 'intervalPicker.currentPeriod.week' | translate }}\n </button>\n <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n {{ 'intervalPicker.currentPeriod.month' | translate }}\n </button>\n <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n </button>\n <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n {{ 'intervalPicker.currentPeriod.year' | translate }}\n </button>\n </div>\n <div class=\"fixed-shifts-container\">\n <div class=\"layout-col place-start-stretch\">\n <div class=\"layout-row place-between-center\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftDay(-1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n <span>{{ 'intervalPicker.day' | translate }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftDay(1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n </div>\n <div class=\"layout-row place-between-center\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftMonth(-1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n <span>{{ 'intervalPicker.month' | translate }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftMonth(1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n </div>\n <div class=\"layout-row place-between-center\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftYear(-1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n <span>{{ 'intervalPicker.year' | translate }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftYear(1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n </div>\n\n @if (true) {\n <!-- shift minute -->\n <div class=\"layout-row place-between-center\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftMinute(-1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n <span>{{ 'intervalPicker.minute' | translate }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftMinute(1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n </div>\n <!-- shift hour -->\n <div class=\"layout-row place-between-center\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftHour(-1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n <span>{{ 'intervalPicker.hour' | translate }}</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"controller.shift.shiftHour(1)\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n <div>\n @if (showAnchor()) {\n <div class=\"layout-row flex-none gap-md\">\n <mat-menu #anchorMenu=\"matMenu\">\n @if (presenter.startDateHtmlString()) {\n <button\n type=\"button\"\n mat-menu-item\n (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n [disabled]=\"!presenter.startDateHtmlString()\"\n >\n <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n <span>{{ 'intervalPicker.endDate' | translate }}</span>\n </button>\n }\n @if (presenter.endDateHtmlString()) {\n <button\n type=\"button\"\n mat-menu-item\n (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n [disabled]=\"!presenter.endDateHtmlString()\"\n >\n <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n <span>{{ 'intervalPicker.startDate' | translate }}</span>\n </button>\n }\n @if (presenter.isFixedAnchorDateSet()) {\n <button\n type=\"button\"\n mat-menu-item\n (click)=\"controller.anchor.resetAnchor()\"\n [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n >\n <mat-icon>close</mat-icon>\n <span>{{ 'intervalPicker.clear' | translate }}</span>\n </button>\n }\n </mat-menu>\n\n <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n <input\n #startDateInput\n name=\"anchorDateInput\"\n matInput\n type=\"date\"\n [ngModel]=\"presenter.anchorDateHtmlString()\"\n (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n [readonly]=\"anchorReadOnly()\"\n />\n @if (!anchorReadOnly()) {\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n [matMenuTriggerFor]=\"anchorMenu\"\n [disabled]=\"presenter.isAnchorMenuDisabled()\"\n >\n <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n </button>\n }\n </mat-form-field>\n @if (intervalInputMode() === 'date-time-range') {\n <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n <input\n matInput\n name=\"anchorTimeInput\"\n type=\"time\"\n #anchorTimeControl=\"ngModel\"\n step=\"1\"\n [readonly]=\"anchorReadOnly()\"\n [ngModel]=\"presenter.anchorTimeHtmlString()\"\n (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n />\n <button\n type=\"button\"\n mat-icon-button\n matSuffix\n (click)=\"controller.anchor.resetAnchorTime()\"\n [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n }\n </div>\n }\n </div>\n <!-- result interval -->\n <div class=\"layout-col place-center-center\">\n <div class=\"date-interval mat-caption pt-xs\">\n @if (presenter.startDateTimeAsJSDate()) {\n {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n } @else {\n {{ 'intervalPicker.startDateNotSet' | translate }}\n }\n <span> - </span>\n @if (presenter.endDateTimeAsJSDate()) {\n {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n } @else {\n {{ 'intervalPicker.endDateNotSet' | translate }}\n }\n </div>\n <div>\n <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n </div>\n </div>\n <div class=\"layout-row gap-lg\">\n <button\n type=\"button\"\n mat-flat-button\n color=\"primary\"\n (click)=\"controller.clearInterval()\"\n [disabled]=\"!presenter.isValidIntervalSet()\"\n >\n {{ 'intervalPicker.clear' | translate }}\n </button>\n\n @if (!this.autoEmitMode()) {\n <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n {{ 'actions.ok' | translate }}\n </button>\n }\n </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"] }]
30334
30328
  }], ctorParameters: () => [], propDecorators: { intervalChange: [{
30335
30329
  type: Output
@@ -30807,14 +30801,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
30807
30801
  selector: 'elder-interval-picker-toggle',
30808
30802
  imports: [
30809
30803
  ElderIntervalPickerComponent,
30810
- ElderIntervalInputComponent,
30811
- MatFormField,
30812
- MatLabel,
30813
30804
  ElderOverlayComponent,
30814
30805
  ElderDialogPanelComponent,
30815
30806
  MatIcon,
30816
30807
  MatIconButton,
30817
- MatSuffix,
30818
30808
  ElderOverlayTriggerDirective,
30819
30809
  ElderOverlayOriginDirective,
30820
30810
  ],
@@ -31483,7 +31473,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
31483
31473
  MatPrefix,
31484
31474
  MatIconButton,
31485
31475
  MatSuffix,
31486
- ElderStopEventPropagationDirective,
31487
31476
  MatInput,
31488
31477
  FormsModule,
31489
31478
  MatHint,
@@ -31937,7 +31926,6 @@ class ElderSearchBoxComponent {
31937
31926
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
31938
31927
  type: Component,
31939
31928
  args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { class: 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
31940
- NgIf,
31941
31929
  MatFormField,
31942
31930
  ElderFormFieldDenseDirective,
31943
31931
  MatIconButton,
@@ -32657,6 +32645,10 @@ class ElderChipListSelectComponent {
32657
32645
  * The color used to indicated selection.
32658
32646
  */
32659
32647
  this.color = 'primary';
32648
+ /**
32649
+ * If the chip list should be stacked.
32650
+ */
32651
+ this.stacked = false;
32660
32652
  this.itemClick = new EventEmitter();
32661
32653
  this.data$ = this.dataContext$.pipe(filter((dc) => !!dc), switchMap((dc) => dc.data));
32662
32654
  if (!selectionModel) {
@@ -33035,15 +33027,7 @@ class HttpDataTransferOverviewComponent {
33035
33027
  }
33036
33028
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: HttpDataTransferOverviewComponent, decorators: [{
33037
33029
  type: Component,
33038
- args: [{ selector: 'elder-data-transfer-overview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
33039
- MatCard,
33040
- NgIf,
33041
- NgFor,
33042
- HttpDataTransferComponent,
33043
- MatToolbar,
33044
- HttpDataTransferAggregateComponent,
33045
- AsyncPipe,
33046
- ], template: "<div class=\"layout-col full elevated-card\">\n <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n <elder-data-transfer\n class=\"flex-none\"\n *ngFor=\"let transfer of transfers\"\n [transfer]=\"transfer\"\n >\n </elder-data-transfer>\n </div>\n\n <ng-template #noData>\n <div class=\"layout-col place-center-center flex\">\n <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n </div>\n </ng-template>\n </div>\n\n <div class=\"flex-none data-transfer-aggregate-container px-md\">\n <elder-data-transfer-aggregate\n class=\"flex\"\n [hiddenWhenInactive]=\"false\"\n ></elder-data-transfer-aggregate>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.elevated-card{background-color:var(--mdc-elevated-card-container-color);border-radius:var(--elder-border-radius-sm);border-radius:var(--elder-pane-border-radius);overflow:hidden;box-shadow:var(--mat-app-elevation-shadow-level-5, none)}.data-transfer-aggregate-container{background-color:var(--md-sys-color-surface-container-low);display:flex;width:100%;flex-direction:row;align-items:center;white-space:nowrap;height:var(--mat-toolbar-standard-height);font-family:var(--mat-toolbar-title-text-font, var(--mat-app-title-large-font));font-size:var(--mat-toolbar-title-text-size, var(--mat-app-title-large-size));line-height:var(--mat-toolbar-title-text-line-height, var(--mat-app-title-large-line-height));font-weight:var(--mat-toolbar-title-text-weight, var(--mat-app-title-large-weight));letter-spacing:var(--mat-toolbar-title-text-tracking, var(--mat-app-title-large-tracking))}\n"] }]
33030
+ args: [{ selector: 'elder-data-transfer-overview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgFor, HttpDataTransferComponent, HttpDataTransferAggregateComponent, AsyncPipe], template: "<div class=\"layout-col full elevated-card\">\n <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n <elder-data-transfer\n class=\"flex-none\"\n *ngFor=\"let transfer of transfers\"\n [transfer]=\"transfer\"\n >\n </elder-data-transfer>\n </div>\n\n <ng-template #noData>\n <div class=\"layout-col place-center-center flex\">\n <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n </div>\n </ng-template>\n </div>\n\n <div class=\"flex-none data-transfer-aggregate-container px-md\">\n <elder-data-transfer-aggregate\n class=\"flex\"\n [hiddenWhenInactive]=\"false\"\n ></elder-data-transfer-aggregate>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.elevated-card{background-color:var(--mdc-elevated-card-container-color);border-radius:var(--elder-border-radius-sm);border-radius:var(--elder-pane-border-radius);overflow:hidden;box-shadow:var(--mat-app-elevation-shadow-level-5, none)}.data-transfer-aggregate-container{background-color:var(--md-sys-color-surface-container-low);display:flex;width:100%;flex-direction:row;align-items:center;white-space:nowrap;height:var(--mat-toolbar-standard-height);font-family:var(--mat-toolbar-title-text-font, var(--mat-app-title-large-font));font-size:var(--mat-toolbar-title-text-size, var(--mat-app-title-large-size));line-height:var(--mat-toolbar-title-text-line-height, var(--mat-app-title-large-line-height));font-weight:var(--mat-toolbar-title-text-weight, var(--mat-app-title-large-weight));letter-spacing:var(--mat-toolbar-title-text-tracking, var(--mat-app-title-large-tracking))}\n"] }]
33047
33031
  }], ctorParameters: () => [{ type: ElderDataTransferService }] });
33048
33032
 
33049
33033
  class HttpDataTransferIndicatorComponent {
@@ -35616,9 +35600,21 @@ class ElderTabGroupRoutingDirective {
35616
35600
  handleFragmentParamsChange(params) {
35617
35601
  const tabMarker = this.getTabMarker(params);
35618
35602
  if (tabMarker) {
35619
- this.activateTabByMarker(tabMarker);
35603
+ this.tryActivateTabByMarkerHierarchy(tabMarker);
35620
35604
  }
35621
35605
  }
35606
+ tryActivateTabByMarkerHierarchy(tabMarkerHierarchy) {
35607
+ const markers = tabMarkerHierarchy.split(',');
35608
+ let success = false;
35609
+ for (const marker of markers) {
35610
+ success = this.activateTabByMarker(marker);
35611
+ if (success) {
35612
+ break;
35613
+ }
35614
+ }
35615
+ // remember tab marker in case of failure to retry later.
35616
+ this.lastFailedTabMarkerHierarchy = success ? null : tabMarkerHierarchy;
35617
+ }
35622
35618
  activateTabByMarker(tabMarker) {
35623
35619
  let success;
35624
35620
  if (this.isIndexMarker(tabMarker)) {
@@ -35629,8 +35625,7 @@ class ElderTabGroupRoutingDirective {
35629
35625
  // if no index is given we assume the marker is the id of the tab.
35630
35626
  success = this.activateTabById(tabMarker);
35631
35627
  }
35632
- // remember tab marker in case of failure to retry later.
35633
- this.lastFailedTabMarker = success ? null : tabMarker;
35628
+ return success;
35634
35629
  }
35635
35630
  activateTabByIndex(indexToActivate) {
35636
35631
  if (indexToActivate !== this.activeTabIndex) {
@@ -35676,14 +35671,14 @@ class ElderTabGroupRoutingDirective {
35676
35671
  }
35677
35672
  handleTabChangeEvent(tabChangeEvent) {
35678
35673
  this._log.trace('Handling tabChangeEvent: ', tabChangeEvent);
35679
- this.lastFailedTabMarker = null;
35674
+ this.lastFailedTabMarkerHierarchy = null;
35680
35675
  this.activeElderTab = this.findElderTabByTab(tabChangeEvent.tab);
35681
35676
  this.updateFragmentParam();
35682
35677
  }
35683
35678
  retryLastFailedActivation() {
35684
- if (this.lastFailedTabMarker) {
35685
- this._log.trace('Retrying to activate tab by marker:', this.lastFailedTabMarker);
35686
- this.activateTabByMarker(this.lastFailedTabMarker);
35679
+ if (this.lastFailedTabMarkerHierarchy) {
35680
+ this._log.trace('Retrying to activate tab by marker:', this.lastFailedTabMarkerHierarchy);
35681
+ this.tryActivateTabByMarkerHierarchy(this.lastFailedTabMarkerHierarchy);
35687
35682
  }
35688
35683
  }
35689
35684
  setSelectedIndex(index) {