@ethlete/cdk 4.13.1 → 4.14.1

package/fesm2022/ethlete-cdk.mjs

@@ -11433,7 +11433,6 @@ const provideFilterOverlayConfig = (config) => {
             provide: FILTER_OVERLAY_CONFIG,
             useValue: config,
         },
-        FilterOverlayService,
     ];
 };
 
@@ -11637,6 +11636,7 @@ class OverlayRouterService {
         // The current route, but delayed by one frame to ensure that the needed animation classes are applied.
         this.currentRoute = toSignal(toObservable(this._syncCurrentRoute).pipe(switchMap((r) => fromNextFrame().pipe(map(() => r)))), { initialValue: this._getInitialRoute() });
         this.extraRoutes = signal([]);
+        this.transitionType = signal('slide');
         this.routes = computed(() => {
             const allRoutes = [...this._config.routes, ...this.extraRoutes()];
             const allRoundsWithTransformedInputs = allRoutes.map((route) => {
@@ -11804,7 +11804,6 @@ const provideOverlayRouterConfig = (config) => {
             provide: OVERLAY_ROUTER_CONFIG_TOKEN,
             useValue: config,
         },
-        OverlayRouterService,
     ];
 };
 
@@ -12311,16 +12310,17 @@ class OverlaySidebarPageComponent {
     constructor() {
         this.headerTemplate = input.required();
         this.bodyTemplate = input.required();
+        this.pageDividers = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlaySidebarPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: OverlaySidebarPageComponent, isStandalone: true, selector: "et-overlay-sidebar-page", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-overlay-sidebar-page-host" }, hostDirectives: [{ directive: OverlayMainDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: OverlaySidebarPageComponent, isStandalone: true, selector: "et-overlay-sidebar-page", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: true, transformFunction: null }, pageDividers: { classPropertyName: "pageDividers", publicName: "pageDividers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-overlay-sidebar-page-host" }, hostDirectives: [{ directive: OverlayMainDirective }], ngImport: i0, template: `
     @if (headerTemplate()?.template; as tpl) {
       <et-overlay-header>
         <ng-container *ngTemplateOutlet="tpl" />
       </et-overlay-header>
     }
 
-    <et-overlay-body>
+    <et-overlay-body [dividers]="pageDividers()">
       <ng-container *ngTemplateOutlet="bodyTemplate()" />
     </et-overlay-body>
   `, isInline: true, dependencies: [{ kind: "directive", type: OverlayHeaderDirective, selector: "[etOverlayHeader], et-overlay-header" }, { kind: "component", type: OverlayBodyComponent, selector: "[et-overlay-body], et-overlay-body", inputs: ["dividers"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -12336,7 +12336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
       </et-overlay-header>
     }
 
-    <et-overlay-body>
+    <et-overlay-body [dividers]="pageDividers()">
       <ng-container *ngTemplateOutlet="bodyTemplate()" />
     </et-overlay-body>
   `,
@@ -12362,6 +12362,7 @@ class SidebarOverlayService {
         });
         this.sidebarContentTemplate = signal(null);
         this.sidebarHeaderTemplate = signal(null);
+        this.sidebarPageDividers = signal(false);
         const sidebarPageRoute = this.config.sidebarPageRoute ?? '/sidebar';
         toObservable(this.renderSidebar)
             .pipe(distinctUntilChanged(), tap((renderSidebar) => {
@@ -12379,6 +12380,7 @@ class SidebarOverlayService {
                     inputs: {
                         headerTemplate: this.sidebarHeaderTemplate,
                         bodyTemplate: this.sidebarContentTemplate,
+                        pageDividers: this.sidebarPageDividers,
                     },
                 });
             }
@@ -12392,7 +12394,6 @@ const provideSidebarOverlayConfig = (config) => {
             provide: SIDEBAR_OVERLAY_CONFIG,
             useValue: config,
         },
-        SidebarOverlayService,
     ];
 };
 
@@ -12659,6 +12660,10 @@ class OverlayRouterOutletComponent {
         this.hostClassBindings = signalHostClasses({
             'et-overlay-router-outlet-nav-dir--backward': computed(() => this.router.navigationDirection() === 'backward'),
             'et-overlay-router-outlet-nav-dir--forward': computed(() => this.router.navigationDirection() === 'forward'),
+            'et-overlay-router-outlet-transition--slide': computed(() => this.router.transitionType() === 'slide'),
+            'et-overlay-router-outlet-transition--fade': computed(() => this.router.transitionType() === 'fade'),
+            'et-overlay-router-outlet-transition--overlay': computed(() => this.router.transitionType() === 'overlay'),
+            'et-overlay-router-outlet-transition--none': computed(() => this.router.transitionType() === 'none'),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -12672,7 +12677,7 @@ class OverlayRouterOutletComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%);--_et-overlay-router-transition-easing: var(--ease-in-out-5)}.et-overlay-router-outlet-host.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-overlay-router-outlet-page{grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-overlay-router-outlet-page>*{pointer-events:auto}.et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}\n"], dependencies: [{ kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page:is(.et-animation-enter-from,.et-animation-leave-to){opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:opacity .1s linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-20%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-overlay-router-outlet-page{grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-overlay-router-outlet-page>*{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayRouterOutletComponent, decorators: [{
             type: Component,
@@ -12688,7 +12693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
     </div>
   `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-overlay-router-outlet-host',
-                    }, imports: [AnimatedIfDirective, AnimatedLifecycleDirective, NgComponentOutlet], styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%);--_et-overlay-router-transition-easing: var(--ease-in-out-5)}.et-overlay-router-outlet-host.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-overlay-router-outlet-page{grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-overlay-router-outlet-page>*{pointer-events:auto}.et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}\n"] }]
+                    }, imports: [AnimatedIfDirective, AnimatedLifecycleDirective, NgComponentOutlet], styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page:is(.et-animation-enter-from,.et-animation-leave-to){opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:opacity .1s linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-20%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-overlay-router-outlet-page{grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-overlay-router-outlet-page>*{pointer-events:auto}\n"] }]
         }] });
 
 class OverlaySidebarComponent {
@@ -12696,14 +12701,18 @@ class OverlaySidebarComponent {
         this.sidebarContent = viewChild.required('sidebarContentTpl');
         this.sidebarHeaderContent = contentChild(OVERLAY_HEADER_TEMPLATE_TOKEN);
         this.sidebar = inject(SidebarOverlayService);
+        this.router = inject(OverlayRouterService);
+        this.pageDividers = input(false);
         this.hostClassBindings = signalHostClasses({
             'et-overlay-sidebar--visible': this.sidebar.renderSidebar,
         });
+        this.router.transitionType.set('overlay');
         syncSignal(this.sidebarContent, this.sidebar.sidebarContentTemplate);
         syncSignal(this.sidebarHeaderContent, this.sidebar.sidebarHeaderTemplate);
+        syncSignal(this.pageDividers, this.sidebar.sidebarPageDividers);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlaySidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: OverlaySidebarComponent, isStandalone: true, selector: "et-overlay-sidebar", host: { classAttribute: "et-overlay-sidebar-host" }, queries: [{ propertyName: "sidebarHeaderContent", first: true, predicate: OVERLAY_HEADER_TEMPLATE_TOKEN, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidebarContent", first: true, predicate: ["sidebarContentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: OverlaySidebarComponent, isStandalone: true, selector: "et-overlay-sidebar", inputs: { pageDividers: { classPropertyName: "pageDividers", publicName: "pageDividers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-overlay-sidebar-host" }, queries: [{ propertyName: "sidebarHeaderContent", first: true, predicate: OVERLAY_HEADER_TEMPLATE_TOKEN, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidebarContent", first: true, predicate: ["sidebarContentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #sidebarContentTpl>
       <ng-content />
     </ng-template>
@@ -12733,7 +12742,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         class: 'et-overlay-sidebar-host',
                     },
                     imports: [NgTemplateOutlet],
-                    hostDirectives: [],
                 }]
         }], ctorParameters: () => [] });