@elderbyte/ngx-starter 19.1.0-beta.21 → 19.1.0-beta.23
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/fesm2022/elderbyte-ngx-starter.mjs +12 -12
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss +10 -14
- package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss +7 -14
- package/src/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.scss +0 -11
- package/theming/abstracts/_elder-design-tokens.scss +10 -2
- package/theming/abstracts/_elder-scss-variables.scss +3 -3
- package/theming/base/_elder-fixes-base.scss +19 -0
- package/theming/components/_elder-chip-theme.scss +43 -22
|
@@ -13925,11 +13925,11 @@ class ElderSelectionMasterCheckboxComponent {
|
|
|
13925
13925
|
**************************************************************************/
|
|
13926
13926
|
ngOnInit() { }
|
|
13927
13927
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, deps: [{ token: DataContextSelectionDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderSelectionMasterCheckboxComponent, isStandalone: true, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13928
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderSelectionMasterCheckboxComponent, isStandalone: true, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgeColor]=\"'accent'\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13929
13929
|
}
|
|
13930
13930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, decorators: [{
|
|
13931
13931
|
type: Component,
|
|
13932
|
-
args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatCheckbox, MatBadge, AsyncPipe], template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"] }]
|
|
13932
|
+
args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatCheckbox, MatBadge, AsyncPipe], template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgeColor]=\"'accent'\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"] }]
|
|
13933
13933
|
}], ctorParameters: () => [{ type: DataContextSelectionDirective }] });
|
|
13934
13934
|
|
|
13935
13935
|
class DataContextStateIndicatorComponent {
|
|
@@ -24077,7 +24077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
24077
24077
|
class SelectChipSpecUtil {
|
|
24078
24078
|
static { this.DefaultChipSpec = {
|
|
24079
24079
|
colorSpec: {
|
|
24080
|
-
themeColor:
|
|
24080
|
+
themeColor: 'primary',
|
|
24081
24081
|
stateColor: undefined,
|
|
24082
24082
|
levelColor: undefined,
|
|
24083
24083
|
},
|
|
@@ -24620,7 +24620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
24620
24620
|
class SelectOptionChipSpecUtil {
|
|
24621
24621
|
static { this.DefaultChipSpec = {
|
|
24622
24622
|
colorSpec: {
|
|
24623
|
-
themeColor:
|
|
24623
|
+
themeColor: 'primary',
|
|
24624
24624
|
stateColor: undefined,
|
|
24625
24625
|
levelColor: undefined,
|
|
24626
24626
|
},
|
|
@@ -26539,11 +26539,11 @@ class ElderNavListComponent {
|
|
|
26539
26539
|
}
|
|
26540
26540
|
}
|
|
26541
26541
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm
|
|
26542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n style=\"overflow-y: scroll\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26543
26543
|
}
|
|
26544
26544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavListComponent, decorators: [{
|
|
26545
26545
|
type: Component,
|
|
26546
|
-
args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm
|
|
26546
|
+
args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n style=\"overflow-y: scroll\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
|
|
26547
26547
|
}], ctorParameters: () => [], propDecorators: { compareWith: [{
|
|
26548
26548
|
type: Input
|
|
26549
26549
|
}], valueChange: [{
|
|
@@ -26666,7 +26666,7 @@ class ElderNavLinkComponent {
|
|
|
26666
26666
|
return this.navList.isActive(this.value);
|
|
26667
26667
|
}
|
|
26668
26668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavLinkComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { title: "title", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon", routerLink: "routerLink", href: "href", target: "target", value: "value", disabled: "disabled" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:
|
|
26669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { title: "title", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon", routerLink: "routerLink", href: "href", target: "target", value: "value", disabled: "disabled" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26670
26670
|
}
|
|
26671
26671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
|
|
26672
26672
|
type: Component,
|
|
@@ -26679,7 +26679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
26679
26679
|
MatIcon,
|
|
26680
26680
|
AsyncPipe,
|
|
26681
26681
|
TranslateModule,
|
|
26682
|
-
], template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:
|
|
26682
|
+
], template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"] }]
|
|
26683
26683
|
}], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { tabIndex: [{
|
|
26684
26684
|
type: HostBinding,
|
|
26685
26685
|
args: ['attr.tabindex']
|
|
@@ -26783,7 +26783,7 @@ class ElderNavGroupComponent {
|
|
|
26783
26783
|
return this.navList.isActive(this.value);
|
|
26784
26784
|
}
|
|
26785
26785
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavGroupComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", inputs: { value: "value" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm
|
|
26786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", inputs: { value: "value" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm\"\n [@openClose]=\"state.isOpen ? 'open' : 'closed'\"\n >\n <ng-content select=\"elder-nav-link\"></ng-content>\n </div>\n </div>\n</ng-container>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
26787
26787
|
trigger('openClose', [
|
|
26788
26788
|
state('open', style({
|
|
26789
26789
|
height: '*',
|
|
@@ -26815,7 +26815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
26815
26815
|
transition('open => closed', [animate('200ms')]),
|
|
26816
26816
|
transition('closed => open', [animate('200ms')]),
|
|
26817
26817
|
]),
|
|
26818
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatRipple, MatIcon, AsyncPipe], template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm
|
|
26818
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatRipple, MatIcon, AsyncPipe], template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm\"\n [@openClose]=\"state.isOpen ? 'open' : 'closed'\"\n >\n <ng-content select=\"elder-nav-link\"></ng-content>\n </div>\n </div>\n</ng-container>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}\n"] }]
|
|
26819
26819
|
}], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { children: [{
|
|
26820
26820
|
type: ContentChildren,
|
|
26821
26821
|
args: [ElderNavLinkComponent]
|
|
@@ -27919,11 +27919,11 @@ class ElderAppHeaderComponent {
|
|
|
27919
27919
|
this.iconColor$.next(c);
|
|
27920
27920
|
}
|
|
27921
27921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27922
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: "icon", svgIcon: "svgIcon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: "icon", svgIcon: "svgIcon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg pb-sm\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27923
27923
|
}
|
|
27924
27924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
|
|
27925
27925
|
type: Component,
|
|
27926
|
-
args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, NgIf, AsyncPipe, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"] }]
|
|
27926
|
+
args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, NgIf, AsyncPipe, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg pb-sm\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"] }]
|
|
27927
27927
|
}], ctorParameters: () => [{ type: ElderThemeService }], propDecorators: { icon: [{
|
|
27928
27928
|
type: Input
|
|
27929
27929
|
}], svgIcon: [{
|