@elderbyte/ngx-starter 20.5.0-alpha.2 → 20.5.0-alpha.4
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.
|
@@ -28847,6 +28847,26 @@ const animations = [
|
|
|
28847
28847
|
transition('closed => open', [animate('200ms')]),
|
|
28848
28848
|
]),
|
|
28849
28849
|
];
|
|
28850
|
+
const overlayPositions = [
|
|
28851
|
+
{
|
|
28852
|
+
originX: 'end',
|
|
28853
|
+
originY: 'top',
|
|
28854
|
+
overlayX: 'start',
|
|
28855
|
+
overlayY: 'top',
|
|
28856
|
+
},
|
|
28857
|
+
{
|
|
28858
|
+
originX: 'end',
|
|
28859
|
+
originY: 'center',
|
|
28860
|
+
overlayX: 'start',
|
|
28861
|
+
overlayY: 'center',
|
|
28862
|
+
},
|
|
28863
|
+
{
|
|
28864
|
+
originX: 'end',
|
|
28865
|
+
originY: 'bottom',
|
|
28866
|
+
overlayX: 'start',
|
|
28867
|
+
overlayY: 'bottom',
|
|
28868
|
+
},
|
|
28869
|
+
];
|
|
28850
28870
|
class ElderNavGroupComponent {
|
|
28851
28871
|
/***************************************************************************
|
|
28852
28872
|
* *
|
|
@@ -28861,11 +28881,10 @@ class ElderNavGroupComponent {
|
|
|
28861
28881
|
* Fields *
|
|
28862
28882
|
* *
|
|
28863
28883
|
**************************************************************************/
|
|
28864
|
-
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
28865
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
28866
28884
|
this.children = contentChildren(ElderNavLinkComponent, ...(ngDevMode ? [{ debugName: "children" }] : []));
|
|
28867
28885
|
this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
28868
28886
|
this.clicked = output();
|
|
28887
|
+
this.overlayPositions = overlayPositions;
|
|
28869
28888
|
// private
|
|
28870
28889
|
this._childrenActiveState = signal(false, ...(ngDevMode ? [{ debugName: "_childrenActiveState" }] : []));
|
|
28871
28890
|
/***************************************************************************
|
|
@@ -28907,7 +28926,7 @@ class ElderNavGroupComponent {
|
|
|
28907
28926
|
this.isOpen.set(!this.isOpen());
|
|
28908
28927
|
}
|
|
28909
28928
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group",
|
|
28929
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\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 @if (!isStaticNav) {\n <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n }\n </div>\n </a>\n <!-- Nested Items projection -->\n @if (!isStaticNav) {\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 } @else {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"isOpen.set(false)\"\n (detach)=\"isOpen.set(false)\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"nav-group-in-menu\">\n <div class=\"layout-col nav-group-items-container p-sm\">\n @for (child of children(); track child) {\n <elder-nav-link\n [title]=\"child.title()\"\n [icon]=\"child.icon()\"\n [routerLink]=\"child.routerLink()\"\n [href]=\"child.href()\"\n [target]=\"child.target()\"\n [queryParams]=\"child.queryParams()\"\n [queryParamsHandling]=\"child.queryParamsHandling()\"\n (click)=\"isOpen.set(false)\"\n ></elder-nav-link>\n }\n </div>\n </div>\n </ng-template>\n }\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:32px;font-size:24px;padding:0 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)!important;color:var(--md-sys-color-primary)}.nav-group-in-menu{--elder-nav-item-height: 38px !important;width:auto;border:solid 1px #ccc;border-radius:5px;background:var(--md-sys-color-surface-container-lowest);text-align:center;padding:4px 0;margin:0 0 0 18px;min-width:280px;box-shadow:0 0 8px #00000026;overflow-y:auto}.nav-group-in-menu *{font-size:14px!important}\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: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$c.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$c.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ElderNavLinkComponent, selector: "elder-nav-link", inputs: ["value", "title", "fontIcon", "fontSet", "icon", "routerLink", "queryParams", "queryParamsHandling", "href", "target", "disabled"], outputs: ["clicked"] }], animations: animations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28911
28930
|
}
|
|
28912
28931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, decorators: [{
|
|
28913
28932
|
type: Component,
|
|
@@ -28918,7 +28937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
28918
28937
|
MatMenuModule,
|
|
28919
28938
|
OverlayModule,
|
|
28920
28939
|
ElderNavLinkComponent,
|
|
28921
|
-
], template: "<div class=\"layout-col nav-group\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\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
|
|
28940
|
+
], template: "<div class=\"layout-col nav-group\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\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 @if (!isStaticNav) {\n <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n }\n </div>\n </a>\n <!-- Nested Items projection -->\n @if (!isStaticNav) {\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 } @else {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"isOpen.set(false)\"\n (detach)=\"isOpen.set(false)\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"nav-group-in-menu\">\n <div class=\"layout-col nav-group-items-container p-sm\">\n @for (child of children(); track child) {\n <elder-nav-link\n [title]=\"child.title()\"\n [icon]=\"child.icon()\"\n [routerLink]=\"child.routerLink()\"\n [href]=\"child.href()\"\n [target]=\"child.target()\"\n [queryParams]=\"child.queryParams()\"\n [queryParamsHandling]=\"child.queryParamsHandling()\"\n (click)=\"isOpen.set(false)\"\n ></elder-nav-link>\n }\n </div>\n </div>\n </ng-template>\n }\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:32px;font-size:24px;padding:0 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)!important;color:var(--md-sys-color-primary)}.nav-group-in-menu{--elder-nav-item-height: 38px !important;width:auto;border:solid 1px #ccc;border-radius:5px;background:var(--md-sys-color-surface-container-lowest);text-align:center;padding:4px 0;margin:0 0 0 18px;min-width:280px;box-shadow:0 0 8px #00000026;overflow-y:auto}.nav-group-in-menu *{font-size:14px!important}\n"] }]
|
|
28922
28941
|
}], ctorParameters: () => [] });
|
|
28923
28942
|
|
|
28924
28943
|
class ElderNavModule {
|