@elderbyte/ngx-starter 20.4.6 → 20.4.7
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.
|
@@ -10635,11 +10635,11 @@ class ElderExpandToggleButtonComponent {
|
|
|
10635
10635
|
this.expanded = !this.expanded;
|
|
10636
10636
|
}
|
|
10637
10637
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderExpandToggleButtonComponent, isStandalone: true, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n matRipple\n class=\"layout-row place-start-center full toggle-button\"\n (click)=\"onToggleExpand($event)\"\n>\n <div class=\"layout-row place-start-center flex\">\n <ng-content></ng-content>\n\n <span class=\"flex\"></span>\n\n <div class=\"layout-col place-center-center\">\n <mat-icon>{{\n (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</mat-icon>\n </div>\n </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10638
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderExpandToggleButtonComponent, isStandalone: true, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n matRipple\n class=\"layout-row place-start-center full toggle-button\"\n (click)=\"onToggleExpand($event)\"\n tabindex=\"0\"\n>\n <div class=\"layout-row place-start-center flex\">\n <ng-content></ng-content>\n\n <span class=\"flex\"></span>\n\n <div class=\"layout-col place-center-center\">\n <mat-icon>{{\n (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</mat-icon>\n </div>\n </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10639
10639
|
}
|
|
10640
10640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
|
|
10641
10641
|
type: Component,
|
|
10642
|
-
args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "<a\n matRipple\n class=\"layout-row place-start-center full toggle-button\"\n (click)=\"onToggleExpand($event)\"\n>\n <div class=\"layout-row place-start-center flex\">\n <ng-content></ng-content>\n\n <span class=\"flex\"></span>\n\n <div class=\"layout-col place-center-center\">\n <mat-icon>{{\n (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</mat-icon>\n </div>\n </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"] }]
|
|
10642
|
+
args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "<a\n matRipple\n class=\"layout-row place-start-center full toggle-button\"\n (click)=\"onToggleExpand($event)\"\n tabindex=\"0\"\n>\n <div class=\"layout-row place-start-center flex\">\n <ng-content></ng-content>\n\n <span class=\"flex\"></span>\n\n <div class=\"layout-col place-center-center\">\n <mat-icon>{{\n (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n }}</mat-icon>\n </div>\n </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"] }]
|
|
10643
10643
|
}], propDecorators: { expandedChange: [{
|
|
10644
10644
|
type: Output
|
|
10645
10645
|
}], expanded: [{
|
|
@@ -11051,6 +11051,16 @@ class ElderTogglePanelTriggerDirective {
|
|
|
11051
11051
|
this.handleTrigger();
|
|
11052
11052
|
}
|
|
11053
11053
|
}
|
|
11054
|
+
handleKeyDown(event) {
|
|
11055
|
+
// on click type handle also keydown events
|
|
11056
|
+
if (this.type === 'click') {
|
|
11057
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
11058
|
+
event.preventDefault();
|
|
11059
|
+
event.stopPropagation();
|
|
11060
|
+
this.handleTrigger();
|
|
11061
|
+
}
|
|
11062
|
+
}
|
|
11063
|
+
}
|
|
11054
11064
|
/***************************************************************************
|
|
11055
11065
|
* *
|
|
11056
11066
|
* Private methods *
|
|
@@ -11062,7 +11072,7 @@ class ElderTogglePanelTriggerDirective {
|
|
|
11062
11072
|
}
|
|
11063
11073
|
}
|
|
11064
11074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTogglePanelTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
11065
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderTogglePanelTriggerDirective, isStandalone: true, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)" } }, ngImport: i0 }); }
|
|
11075
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderTogglePanelTriggerDirective, isStandalone: true, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)", "keydown": "handleKeyDown($event)" } }, ngImport: i0 }); }
|
|
11066
11076
|
}
|
|
11067
11077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTogglePanelTriggerDirective, decorators: [{
|
|
11068
11078
|
type: Directive,
|
|
@@ -11085,6 +11095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
11085
11095
|
}], handleFocus: [{
|
|
11086
11096
|
type: HostListener,
|
|
11087
11097
|
args: ['focus', ['$event']]
|
|
11098
|
+
}], handleKeyDown: [{
|
|
11099
|
+
type: HostListener,
|
|
11100
|
+
args: ['keydown', ['$event']]
|
|
11088
11101
|
}] } });
|
|
11089
11102
|
|
|
11090
11103
|
class ElderPanelModule {
|
|
@@ -28697,11 +28710,11 @@ class ElderNavListComponent {
|
|
|
28697
28710
|
}
|
|
28698
28711
|
}
|
|
28699
28712
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28700
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", 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\"
|
|
28713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", 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\">\n <div\n class=\"layout-col p-sm flex scrollable\"\n style=\"overflow-y: scroll\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28701
28714
|
}
|
|
28702
28715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavListComponent, decorators: [{
|
|
28703
28716
|
type: Component,
|
|
28704
|
-
args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\"
|
|
28717
|
+
args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\">\n <div\n class=\"layout-col p-sm flex scrollable\"\n style=\"overflow-y: scroll\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
|
|
28705
28718
|
}], ctorParameters: () => [], propDecorators: { compareWith: [{
|
|
28706
28719
|
type: Input
|
|
28707
28720
|
}], valueChange: [{
|
|
@@ -28717,7 +28730,7 @@ class NavItemModel {
|
|
|
28717
28730
|
this.hrefTarget = hrefTarget;
|
|
28718
28731
|
}
|
|
28719
28732
|
}
|
|
28720
|
-
class
|
|
28733
|
+
class NavItemActivated {
|
|
28721
28734
|
constructor(event, value) {
|
|
28722
28735
|
this.event = event;
|
|
28723
28736
|
this.value = value;
|
|
@@ -28738,7 +28751,7 @@ class ElderNavLinkComponent {
|
|
|
28738
28751
|
**************************************************************************/
|
|
28739
28752
|
this.tabIndex = -1;
|
|
28740
28753
|
this.queryParams = {};
|
|
28741
|
-
this.
|
|
28754
|
+
this.activated = new Subject();
|
|
28742
28755
|
this._disabled = false;
|
|
28743
28756
|
this._routerLink$ = new BehaviorSubject('');
|
|
28744
28757
|
this._href$ = new BehaviorSubject('');
|
|
@@ -28807,14 +28820,24 @@ class ElderNavLinkComponent {
|
|
|
28807
28820
|
* Public API *
|
|
28808
28821
|
* *
|
|
28809
28822
|
**************************************************************************/
|
|
28810
|
-
|
|
28823
|
+
itemActivated(event) {
|
|
28811
28824
|
if (!this._disabled) {
|
|
28812
|
-
this.
|
|
28813
|
-
if (this.value
|
|
28825
|
+
this.activated.next(new NavItemActivated(event, this.value));
|
|
28826
|
+
if (this.value !== null) {
|
|
28814
28827
|
this.navList.value = this.value;
|
|
28815
28828
|
}
|
|
28816
28829
|
}
|
|
28817
28830
|
}
|
|
28831
|
+
itemClick(event) {
|
|
28832
|
+
this.itemActivated(event);
|
|
28833
|
+
}
|
|
28834
|
+
itemKeyDown(event) {
|
|
28835
|
+
event.preventDefault();
|
|
28836
|
+
event.stopPropagation();
|
|
28837
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
28838
|
+
this.itemActivated(event);
|
|
28839
|
+
}
|
|
28840
|
+
}
|
|
28818
28841
|
/***************************************************************************
|
|
28819
28842
|
* *
|
|
28820
28843
|
* Private methods *
|
|
@@ -28824,7 +28847,7 @@ class ElderNavLinkComponent {
|
|
|
28824
28847
|
return this.navList.isActive(this.value);
|
|
28825
28848
|
}
|
|
28826
28849
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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@if (model$ | async; as model) {\n @if (model.routerLink; as routerLink) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link
|
|
28850
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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", activated: "activated" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n @if (model.routerLink; as routerLink) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link\"\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 @if (model.href; as href) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link\"\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 @if (!model.href && !model.routerLink) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link\"\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 }\n}\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n @if (!(!icon && !title)) {\n <mat-icon [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n }\n @if (svgIcon) {\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\n }\n @if (title) {\n <span class=\"noselect\">\n {{ title | translate }}\n </span>\n }\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: 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28828
28851
|
}
|
|
28829
28852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
|
|
28830
28853
|
type: Component,
|
|
@@ -28836,7 +28859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
28836
28859
|
MatIcon,
|
|
28837
28860
|
AsyncPipe,
|
|
28838
28861
|
TranslateModule,
|
|
28839
|
-
], template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n @if (model.routerLink; as routerLink) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link
|
|
28862
|
+
], template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n @if (model.routerLink; as routerLink) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link\"\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 @if (model.href; as href) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link\"\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 @if (!model.href && !model.routerLink) {\n <a\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link\"\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 }\n}\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n @if (!(!icon && !title)) {\n <mat-icon [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n }\n @if (svgIcon) {\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\n }\n @if (title) {\n <span class=\"noselect\">\n {{ title | translate }}\n </span>\n }\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"] }]
|
|
28840
28863
|
}], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { tabIndex: [{
|
|
28841
28864
|
type: HostBinding,
|
|
28842
28865
|
args: ['attr.tabindex']
|
|
@@ -28856,6 +28879,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
28856
28879
|
type: Input
|
|
28857
28880
|
}], clicked: [{
|
|
28858
28881
|
type: Output
|
|
28882
|
+
}], activated: [{
|
|
28883
|
+
type: Output
|
|
28859
28884
|
}], routerLinkActive: [{
|
|
28860
28885
|
type: ViewChild,
|
|
28861
28886
|
args: [RouterLinkActive, { static: false }]
|
|
@@ -28947,18 +28972,25 @@ class ElderNavGroupComponent {
|
|
|
28947
28972
|
* *
|
|
28948
28973
|
**************************************************************************/
|
|
28949
28974
|
itemClick(event) {
|
|
28950
|
-
this.clicked.emit(new
|
|
28975
|
+
this.clicked.emit(new NavItemActivated(event, undefined));
|
|
28951
28976
|
this.toggle();
|
|
28952
28977
|
}
|
|
28953
28978
|
toggle() {
|
|
28954
28979
|
this.isOpen.set(!this.isOpen());
|
|
28955
28980
|
}
|
|
28981
|
+
itemKeyDown(event) {
|
|
28982
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
28983
|
+
event.preventDefault();
|
|
28984
|
+
event.stopPropagation();
|
|
28985
|
+
this.itemClick(event);
|
|
28986
|
+
}
|
|
28987
|
+
}
|
|
28956
28988
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28957
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button
|
|
28989
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\">\n <a\n matRipple\n tabindex=\"0\"\n class=\"layout-row place-start-center nav-group-button\"\n [class.nav-group-button-open]=\"isOpen()\"\n [class.nav-group-button-closed]=\"!isOpen()\"\n [class.nav-group-button-active]=\"active()\"\n (click)=\"itemClick($event)\"\n (keydown)=\"itemKeyDown($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm\"\n [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n [inert]=\"!isOpen()\"\n >\n <ng-content select=\"elder-nav-link\"></ng-content>\n </div>\n</div>\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}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"], dependencies: [{ 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"] }], animations: animations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28958
28990
|
}
|
|
28959
28991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, decorators: [{
|
|
28960
28992
|
type: Component,
|
|
28961
|
-
args: [{ selector: 'elder-nav-group', animations: animations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon], template: "<div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button
|
|
28993
|
+
args: [{ selector: 'elder-nav-group', animations: animations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon], template: "<div class=\"layout-col nav-group\">\n <a\n matRipple\n tabindex=\"0\"\n class=\"layout-row place-start-center nav-group-button\"\n [class.nav-group-button-open]=\"isOpen()\"\n [class.nav-group-button-closed]=\"!isOpen()\"\n [class.nav-group-button-active]=\"active()\"\n (click)=\"itemClick($event)\"\n (keydown)=\"itemKeyDown($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm\"\n [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n [inert]=\"!isOpen()\"\n >\n <ng-content select=\"elder-nav-link\"></ng-content>\n </div>\n</div>\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}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"] }]
|
|
28962
28994
|
}], ctorParameters: () => [] });
|
|
28963
28995
|
|
|
28964
28996
|
class ElderNavModule {
|
|
@@ -29987,11 +30019,11 @@ class ElderAppHeaderComponent {
|
|
|
29987
30019
|
this.version = input(undefined, ...(ngDevMode ? [{ debugName: "version" }] : []));
|
|
29988
30020
|
}
|
|
29989
30021
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29990
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleLink: { classPropertyName: "subTitleLink", publicName: "subTitleLink", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, 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 class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n icon()\n }}</mat-icon>\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
|
|
30022
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleLink: { classPropertyName: "subTitleLink", publicName: "subTitleLink", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, 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 class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n icon()\n }}</mat-icon>\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\n routerLink=\"/\"\n id=\"title\"\n class=\"noselect link-unstyled\"\n style=\"font-size: 28px\"\n tabindex=\"-1\"\n >{{ title() }}</a\n >\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 @if (subTitleLink()) {\n <a\n [href]=\"subTitleLink()\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n tabindex=\"-1\"\n >{{ subTitle() }}</a\n >\n } @else {\n <span>{{ subTitle() }}</span>\n }\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
29991
30023
|
}
|
|
29992
30024
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
|
|
29993
30025
|
type: Component,
|
|
29994
|
-
args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, 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 class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n icon()\n }}</mat-icon>\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
|
|
30026
|
+
args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, 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 class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n icon()\n }}</mat-icon>\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\n routerLink=\"/\"\n id=\"title\"\n class=\"noselect link-unstyled\"\n style=\"font-size: 28px\"\n tabindex=\"-1\"\n >{{ title() }}</a\n >\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 @if (subTitleLink()) {\n <a\n [href]=\"subTitleLink()\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n tabindex=\"-1\"\n >{{ subTitle() }}</a\n >\n } @else {\n <span>{{ subTitle() }}</span>\n }\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"] }]
|
|
29995
30027
|
}] });
|
|
29996
30028
|
|
|
29997
30029
|
class DrawerOutletBinding {
|