@elderbyte/ngx-starter 20.2.2 → 20.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -28417,49 +28417,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
28417
28417
|
type: Input
|
|
28418
28418
|
}] } });
|
|
28419
28419
|
|
|
28420
|
+
const animations = [
|
|
28421
|
+
trigger('openClose', [
|
|
28422
|
+
state('open', style({
|
|
28423
|
+
height: '*',
|
|
28424
|
+
opacity: 1,
|
|
28425
|
+
})),
|
|
28426
|
+
state('closed', style({
|
|
28427
|
+
height: 0,
|
|
28428
|
+
opacity: 0.5,
|
|
28429
|
+
padding: 0,
|
|
28430
|
+
})),
|
|
28431
|
+
transition('open => closed', [animate('200ms')]),
|
|
28432
|
+
transition('closed => open', [animate('200ms')]),
|
|
28433
|
+
]),
|
|
28434
|
+
];
|
|
28420
28435
|
class ElderNavGroupComponent {
|
|
28421
28436
|
/***************************************************************************
|
|
28422
28437
|
* *
|
|
28423
|
-
* Constructor
|
|
28438
|
+
* Constructor & Effects *
|
|
28424
28439
|
* *
|
|
28425
28440
|
**************************************************************************/
|
|
28426
|
-
constructor(
|
|
28427
|
-
this.
|
|
28428
|
-
this.
|
|
28429
|
-
|
|
28430
|
-
|
|
28431
|
-
|
|
28441
|
+
constructor() {
|
|
28442
|
+
this.destroyRef = inject(DestroyRef);
|
|
28443
|
+
this.navList = inject(ElderNavListComponent);
|
|
28444
|
+
/***************************************************************************
|
|
28445
|
+
* *
|
|
28446
|
+
* Fields *
|
|
28447
|
+
* *
|
|
28448
|
+
**************************************************************************/
|
|
28449
|
+
this.children = contentChildren(ElderNavLinkComponent);
|
|
28450
|
+
this.isOpen = signal(false);
|
|
28451
|
+
this.clicked = output();
|
|
28452
|
+
this.childrenActiveState = signal(false);
|
|
28453
|
+
/***************************************************************************
|
|
28454
|
+
* *
|
|
28455
|
+
* Computed Properties *
|
|
28456
|
+
* *
|
|
28457
|
+
**************************************************************************/
|
|
28458
|
+
this.active = computed(() => this.childrenActiveState());
|
|
28459
|
+
// Effect to monitor children's active states
|
|
28460
|
+
effect(() => {
|
|
28461
|
+
const childComponents = this.children();
|
|
28462
|
+
if (this.childSubscription) {
|
|
28463
|
+
this.childSubscription.unsubscribe();
|
|
28464
|
+
}
|
|
28465
|
+
const childActiveObservables = childComponents.map((child) => child.active$);
|
|
28466
|
+
this.childSubscription = combineLatest(childActiveObservables).subscribe((active) => {
|
|
28467
|
+
this.childrenActiveState.set(active.some((active) => active));
|
|
28468
|
+
});
|
|
28469
|
+
});
|
|
28470
|
+
// Effect to open the group if any child becomes active: important for page load
|
|
28471
|
+
effect(() => {
|
|
28472
|
+
const isActive = this.active();
|
|
28473
|
+
const isOpen = untracked(this.isOpen);
|
|
28474
|
+
if (isActive && !isOpen) {
|
|
28475
|
+
this.isOpen.set(true);
|
|
28476
|
+
}
|
|
28477
|
+
});
|
|
28432
28478
|
}
|
|
28433
28479
|
/***************************************************************************
|
|
28434
28480
|
* *
|
|
28435
28481
|
* Life Cycle *
|
|
28436
28482
|
* *
|
|
28437
28483
|
**************************************************************************/
|
|
28438
|
-
ngOnInit() {
|
|
28439
|
-
this.navList.valueChange
|
|
28440
|
-
.pipe(takeUntil(this.destroy$), map((value) => this.isCurrentValueActive))
|
|
28441
|
-
.subscribe((active) => this._active$.next(active));
|
|
28442
|
-
if (this.value) {
|
|
28443
|
-
this._active$.next(this.isCurrentValueActive);
|
|
28444
|
-
}
|
|
28445
|
-
}
|
|
28484
|
+
ngOnInit() { }
|
|
28446
28485
|
ngOnDestroy() {
|
|
28447
|
-
this.
|
|
28448
|
-
|
|
28449
|
-
|
|
28450
|
-
/***************************************************************************
|
|
28451
|
-
* *
|
|
28452
|
-
* Properties *
|
|
28453
|
-
* *
|
|
28454
|
-
**************************************************************************/
|
|
28455
|
-
get active$() {
|
|
28456
|
-
return this._active$;
|
|
28457
|
-
}
|
|
28458
|
-
set value(v) {
|
|
28459
|
-
this._value = v;
|
|
28460
|
-
}
|
|
28461
|
-
get value() {
|
|
28462
|
-
return this._value;
|
|
28486
|
+
if (this.childSubscription) {
|
|
28487
|
+
this.childSubscription.unsubscribe();
|
|
28488
|
+
}
|
|
28463
28489
|
}
|
|
28464
28490
|
/***************************************************************************
|
|
28465
28491
|
* *
|
|
@@ -28467,66 +28493,19 @@ class ElderNavGroupComponent {
|
|
|
28467
28493
|
* *
|
|
28468
28494
|
**************************************************************************/
|
|
28469
28495
|
itemClick(event) {
|
|
28470
|
-
this.clicked.
|
|
28496
|
+
this.clicked.emit(new NavItemClicked(event, undefined));
|
|
28471
28497
|
this.toggle();
|
|
28472
|
-
if (this.value) {
|
|
28473
|
-
this.navList.value = this.value;
|
|
28474
|
-
}
|
|
28475
28498
|
}
|
|
28476
28499
|
toggle() {
|
|
28477
|
-
|
|
28478
|
-
this.state$.next({ isOpen: !myState.isOpen });
|
|
28479
|
-
}
|
|
28480
|
-
/***************************************************************************
|
|
28481
|
-
* *
|
|
28482
|
-
* Private methods *
|
|
28483
|
-
* *
|
|
28484
|
-
**************************************************************************/
|
|
28485
|
-
get isCurrentValueActive() {
|
|
28486
|
-
return this.navList.isActive(this.value);
|
|
28500
|
+
this.isOpen.set(!this.isOpen());
|
|
28487
28501
|
}
|
|
28488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ElderNavGroupComponent, deps: [
|
|
28489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
28490
|
-
trigger('openClose', [
|
|
28491
|
-
state('open', style({
|
|
28492
|
-
height: '*',
|
|
28493
|
-
opacity: 1,
|
|
28494
|
-
})),
|
|
28495
|
-
state('closed', style({
|
|
28496
|
-
height: 0,
|
|
28497
|
-
opacity: 0.5,
|
|
28498
|
-
padding: 0,
|
|
28499
|
-
})),
|
|
28500
|
-
transition('open => closed', [animate('200ms')]),
|
|
28501
|
-
transition('closed => open', [animate('200ms')]),
|
|
28502
|
-
]),
|
|
28503
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", 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 mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\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 >\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>{{ 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 >\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 }); }
|
|
28504
28504
|
}
|
|
28505
28505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ElderNavGroupComponent, decorators: [{
|
|
28506
28506
|
type: Component,
|
|
28507
|
-
args: [{ selector: 'elder-nav-group', animations: [
|
|
28508
|
-
|
|
28509
|
-
state('open', style({
|
|
28510
|
-
height: '*',
|
|
28511
|
-
opacity: 1,
|
|
28512
|
-
})),
|
|
28513
|
-
state('closed', style({
|
|
28514
|
-
height: 0,
|
|
28515
|
-
opacity: 0.5,
|
|
28516
|
-
padding: 0,
|
|
28517
|
-
})),
|
|
28518
|
-
transition('open => closed', [animate('200ms')]),
|
|
28519
|
-
transition('closed => open', [animate('200ms')]),
|
|
28520
|
-
]),
|
|
28521
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "@if (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 <!-- 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}\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"] }]
|
|
28522
|
-
}], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { children: [{
|
|
28523
|
-
type: ContentChildren,
|
|
28524
|
-
args: [ElderNavLinkComponent]
|
|
28525
|
-
}], clicked: [{
|
|
28526
|
-
type: Output
|
|
28527
|
-
}], value: [{
|
|
28528
|
-
type: Input
|
|
28529
|
-
}] } });
|
|
28507
|
+
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 mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\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 >\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>{{ 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 >\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"] }]
|
|
28508
|
+
}], ctorParameters: () => [] });
|
|
28530
28509
|
|
|
28531
28510
|
class ElderNavModule {
|
|
28532
28511
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ElderNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|