@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-theme-page-root.mjs

@@ -1,217 +1,315 @@
-import * as i0 from '@angular/core';
-import { inject, contentChild, input, output, booleanAttribute, computed, effect, Component } from '@angular/core';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationHeaderComponent, NavigationFooterComponent } from '@ojiepermana/angular/navigation';
-import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
-import { LayoutService } from '@ojiepermana/angular/theme/layout';
-import { LayoutIdentityService, LayoutBrand, LayoutUser } from '@ojiepermana/angular/theme/layout/wrapper';
-import { PageFilterComponent } from '@ojiepermana/angular/theme/page/filter';
-import { PageHeaderComponent } from '@ojiepermana/angular/theme/page/slots';
-import { PageSideComponent } from '@ojiepermana/angular/theme/page/side';
-import { PageStateService, PAGE_DEFAULT_VARIANT, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_FILTER_PLACEMENT, PAGE_DEFAULT_FILTER_WIDTH } from '@ojiepermana/angular/theme/page/core';
-
-/** Instance counter behind each apps launcher's unique id, so several live `Page`s cannot collide on `claimId`. */
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, contentChild, effect, inject, input, output } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationFooterComponent, NavigationHeaderComponent } from "@ojiepermana/angular/navigation";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { LayoutService } from "@ojiepermana/angular/theme/layout";
+import { LayoutBrand, LayoutIdentityService, LayoutUser } from "@ojiepermana/angular/theme/layout/wrapper";
+import { PageFilterComponent } from "@ojiepermana/angular/theme/page/filter";
+import { PageOverviewComponent } from "@ojiepermana/angular/theme/page/overview";
+import { PageHeaderComponent } from "@ojiepermana/angular/theme/page/slots";
+import { PageSideComponent } from "@ojiepermana/angular/theme/page/side";
+import { PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_FILTER_PLACEMENT, PAGE_DEFAULT_FILTER_WIDTH, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PageStateService } from "@ojiepermana/angular/theme/page/core";
+const OVERVIEW_STACKED_ROWS = [
+	"grid-rows-[auto_auto_minmax(0,1fr)]",
+	"[&>[data-page-slot=filter]]:row-start-1",
+	"[&>[data-page-slot=overview]]:row-start-2",
+	"[&>[data-page-slot=content]]:row-start-3",
+	"[&>[data-page-slot=dashboard]]:row-start-3"
+].join(" ");
+const OVERVIEW_ROWS = [
+	"grid-rows-[auto_minmax(0,1fr)]",
+	"[&>[data-page-slot=overview]]:row-start-1",
+	"[&>[data-page-slot=content]]:row-start-2",
+	"[&>[data-page-slot=dashboard]]:row-start-2"
+].join(" ");
 let pageAppsLauncherInstanceId = 0;
-class PageComponent {
-    page = inject(PageStateService);
-    layout = inject(LayoutService, { optional: true });
-    navigation = inject(NAVIGATION_ADAPTER, { optional: true });
-    identity = inject(LayoutIdentityService, { optional: true });
-    projectedSide = contentChild(PageSideComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "projectedSide" }] : /* istanbul ignore next */ []));
-    projectedHeader = contentChild(PageHeaderComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "projectedHeader" }] : /* istanbul ignore next */ []));
-    projectedFilter = contentChild(PageFilterComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "projectedFilter" }] : /* istanbul ignore next */ []));
-    variant = input(PAGE_DEFAULT_VARIANT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    height = input(PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    scroll = input(PAGE_DEFAULT_SCROLL, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
-    /** Visual appearance shared with the layout (`flat | border-rail`); unifies header/footer borders. */
-    appearance = input(PAGE_DEFAULT_APPEARANCE, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    position = input(PAGE_DEFAULT_SIDE_POSITION, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    sideMode = input(PAGE_DEFAULT_SIDE_MODE, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sideMode" }] : /* istanbul ignore next */ []));
-    sideOpen = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sideOpen" }] : /* istanbul ignore next */ []));
-    sideWidth = input(PAGE_DEFAULT_SIDE_WIDTH, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sideWidth" }] : /* istanbul ignore next */ []));
-    /** Controlled state for a drawer/overlay `PageFilter`. `null` is uncontrolled — the toggle, backdrop, and Esc drive it. */
-    filterOpen = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterOpen" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    sideOpenChange = output();
-    filterOpenChange = output();
-    /** Under the `empty` layout, show the apps button (a flyout of the main navigation) in the top-right corner. `false` turns it off. */
-    appsLauncher = input(true, { ...(ngDevMode ? { debugName: "appsLauncher" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Id of the navigation the apps launcher surfaces (`main` by default). */
-    appsNavId = input('main', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsNavId" }] : /* istanbul ignore next */ []));
-    /** Material symbol for the apps launcher button. */
-    appsIcon = input('apps', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsIcon" }] : /* istanbul ignore next */ []));
-    /** Label and `aria-label` for the icon-only apps launcher button. */
-    appsLabel = input('Open navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsLabel" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the backdrop button that dismisses an open overlay panel. */
-    overlayCloseLabel = input('Close overlay panel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayCloseLabel" }] : /* istanbul ignore next */ []));
-    /** Id unik untuk instance `<Navigation>` apps-launcher; tak boleh memakai id `main` (akan bentrok `claimId`). */
-    launcherNavId = `__page-apps-${(pageAppsLauncherInstanceId += 1)}`;
-    resolvedPosition = computed(() => this.projectedSide()?.position() ?? this.position(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
-    resolvedSideMode = computed(() => this.projectedSide()?.mode() ?? this.sideMode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSideMode" }] : /* istanbul ignore next */ []));
-    isLeftSide = computed(() => this.resolvedPosition() === 'left', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isLeftSide" }] : /* istanbul ignore next */ []));
-    isRightSide = computed(() => this.resolvedPosition() === 'right', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isRightSide" }] : /* istanbul ignore next */ []));
-    // Filter — resolusi dibaca langsung dari `PageFilter` yang diprojeksikan (reactive content query).
-    // Resolusi filter dibaca dari `PageFilter` yang diprojeksikan, lalu fall back ke page-state
-    // (diisi `registerFilter`), lalu default — pola seragam agar Page & PageFilter selalu sepakat.
-    hasFilter = computed(() => this.projectedFilter() !== undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasFilter" }] : /* istanbul ignore next */ []));
-    filterPlacement = computed(() => this.projectedFilter()?.placement() ??
-        this.page.filterPlacement() ??
-        PAGE_DEFAULT_FILTER_PLACEMENT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterPlacement" }] : /* istanbul ignore next */ []));
-    /** Mode efektif: `stacked` selalu `sticky`; `side` memakai mode pada `PageFilter`. */
-    filterMode = computed(() => this.filterPlacement() === 'stacked'
-        ? 'sticky'
-        : (this.projectedFilter()?.mode() ?? this.page.filterMode()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
-    filterPosition = computed(() => this.projectedFilter()?.position() ?? this.page.filterPosition(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterPosition" }] : /* istanbul ignore next */ []));
-    filterWidthVar = computed(() => this.projectedFilter()?.width() ?? this.page.filterWidth() ?? PAGE_DEFAULT_FILTER_WIDTH, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterWidthVar" }] : /* istanbul ignore next */ []));
-    showsSideOverlayBackdrop = computed(() => this.variant() === 'side' && this.resolvedSideMode() === 'overlay' && this.page.sideOpen(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsSideOverlayBackdrop" }] : /* istanbul ignore next */ []));
-    showsFilterOverlayBackdrop = computed(() => this.hasFilter() && this.filterMode() === 'overlay' && this.page.filterOpen(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsFilterOverlayBackdrop" }] : /* istanbul ignore next */ []));
-    showsOverlayBackdrop = computed(() => this.showsSideOverlayBackdrop() || this.showsFilterOverlayBackdrop(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsOverlayBackdrop" }] : /* istanbul ignore next */ []));
-    /** Signal data untuk id yang dipilih; di-recompute hanya saat `appsNavId` berubah. */
-    appsNavSource = computed(() => this.navigation?.data(this.appsNavId()) ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsNavSource" }] : /* istanbul ignore next */ []));
-    appsNavData = computed(() => this.appsNavSource()?.() ?? [], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsNavData" }] : /* istanbul ignore next */ []));
-    /** Apps-launcher hanya muncul di layout `empty`, saat diaktifkan, dan saat nav target punya data. */
-    showsAppsLauncher = computed(() => this.appsLauncher() && this.layout?.type() === 'empty' && this.appsNavData().length > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsAppsLauncher" }] : /* istanbul ignore next */ []));
-    /**
-     * Host `<Navigation>` launcher di-absolute ke pojok kanan-atas (hanya membungkus tombol trigger;
-     * panel flyout tetap membentang selebar `Page` lewat pengukuran container). Saat ada `PageHeader`,
-     * tombol menyatu di dalam pita header (offset rapat); tanpa header, mengambang di atas konten.
-     */
-    appsLauncherHostClass = computed(() => cn('absolute z-30 h-auto w-auto', this.projectedHeader() ? 'right-2 top-1.5' : 'right-3 top-3'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsLauncherHostClass" }] : /* istanbul ignore next */ []));
-    /** Appearance flyout mengikuti layout (seperti shell flyout); fallback ke appearance `Page`. */
-    appsLauncherAppearance = computed(() => this.layout?.appearance() ?? this.appearance(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsLauncherAppearance" }] : /* istanbul ignore next */ []));
-    /** Brand/user untuk header & footer flyout — sama seperti shell flyout; `null` saat tak ada shell. */
-    appsBrand = computed(() => this.identity?.brand() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsBrand" }] : /* istanbul ignore next */ []));
-    appsUser = computed(() => this.identity?.user() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appsUser" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn('relative block h-full min-h-0 w-full min-w-0 overflow-hidden text-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    shellClasses = computed(() => cn('relative z-10 h-full min-h-0 w-full min-w-0', this.scroll() === 'content' && 'grid grid-rows-[auto_minmax(0,1fr)_auto]', this.scroll() === 'page' && 'overflow-auto'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
-    bodyClasses = computed(() => {
-        if (this.variant() !== 'side') {
-            return cn('relative min-w-0', this.scroll() === 'content' && 'min-h-0');
-        }
-        const sideMode = this.resolvedSideMode();
-        const position = this.resolvedPosition();
-        if (sideMode === 'sticky') {
-            return cn('grid min-w-0', this.scroll() === 'content' && 'min-h-0', position === 'left'
-                ? 'grid-cols-[var(--page-side-width)_minmax(0,1fr)]'
-                : 'grid-cols-[minmax(0,1fr)_var(--page-side-width)]');
-        }
-        return cn('relative min-w-0', this.scroll() === 'content' && 'min-h-0');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
-    /**
-     * Wrapper di sekitar `PageFilter` + `PageContent`. Tanpa filter, memakai `display: contents`
-     * agar transparan (perilaku body lama dipertahankan persis). Dengan filter, menjadi grid/flex
-     * yang menata filter (baris untuk `stacked`, kolom untuk `side`); drawer/overlay menjadikannya
-     * `relative` sebagai positioning context untuk panel yang mengambang.
-     */
-    contentRegionClasses = computed(() => {
-        if (!this.hasFilter()) {
-            return 'contents';
-        }
-        const scroll = this.scroll();
-        const mode = this.filterMode();
-        // drawer/overlay (side only): content mengisi penuh, filter mengambang di atasnya.
-        if (mode !== 'sticky') {
-            return cn('relative min-w-0', scroll === 'content' && 'min-h-0 h-full');
-        }
-        if (this.filterPlacement() === 'stacked') {
-            // content scroll: filter (auto) di atas, content (1fr) mengisi sisa tinggi & scroll sendiri.
-            // page scroll: aliran block biasa; filter dipin via `sticky top-0` pada elemennya.
-            return scroll === 'content'
-                ? 'grid min-w-0 min-h-0 h-full grid-rows-[auto_minmax(0,1fr)]'
-                : 'block min-w-0';
-        }
-        // side + sticky: filter sebagai kolom; posisi kanan dibalik via `order-last` pada elemen filter.
-        return cn('grid min-w-0', scroll === 'content' && 'min-h-0 h-full', this.filterPosition() === 'left'
-            ? 'grid-cols-[var(--page-filter-width)_minmax(0,1fr)]'
-            : 'grid-cols-[minmax(0,1fr)_var(--page-filter-width)]');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentRegionClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.page.registerRoot({
-                variant: this.variant(),
-                height: this.height(),
-                scroll: this.scroll(),
-                appearance: this.appearance(),
-                position: this.position(),
-                sideMode: this.sideMode(),
-                sideWidth: this.sideWidth(),
-            });
-        });
-        effect(() => {
-            this.page.setControlledSideOpen(this.sideOpen());
-        });
-        effect(() => {
-            this.page.setControlledFilterOpen(this.filterOpen());
-        });
-        // Header memesan ruang kanan hanya saat tombol apps benar-benar mengambang di atas header.
-        effect(() => {
-            this.page.setAppsLauncherReserve(this.showsAppsLauncher() && this.projectedHeader() !== undefined);
-        });
-        effect(() => {
-            const requestVersion = this.page.sideOpenRequestVersion();
-            if (requestVersion === 0) {
-                return;
-            }
-            this.sideOpenChange.emit(this.page.sideOpenRequest() ?? false);
-        });
-        effect(() => {
-            const requestVersion = this.page.filterOpenRequestVersion();
-            if (requestVersion === 0) {
-                return;
-            }
-            this.filterOpenChange.emit(this.page.filterOpenRequest() ?? false);
-        });
-    }
-    handleBackdropClick() {
-        if (this.showsSideOverlayBackdrop()) {
-            this.page.closeSide();
-        }
-        if (this.showsFilterOverlayBackdrop()) {
-            this.page.closeFilter();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: PageComponent, isStandalone: true, selector: "Page", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sideMode: { classPropertyName: "sideMode", publicName: "sideMode", isSignal: true, isRequired: false, transformFunction: null }, sideOpen: { classPropertyName: "sideOpen", publicName: "sideOpen", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, filterOpen: { classPropertyName: "filterOpen", publicName: "filterOpen", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, appsLauncher: { classPropertyName: "appsLauncher", publicName: "appsLauncher", isSignal: true, isRequired: false, transformFunction: null }, appsNavId: { classPropertyName: "appsNavId", publicName: "appsNavId", isSignal: true, isRequired: false, transformFunction: null }, appsIcon: { classPropertyName: "appsIcon", publicName: "appsIcon", isSignal: true, isRequired: false, transformFunction: null }, appsLabel: { classPropertyName: "appsLabel", publicName: "appsLabel", isSignal: true, isRequired: false, transformFunction: null }, overlayCloseLabel: { classPropertyName: "overlayCloseLabel", publicName: "overlayCloseLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sideOpenChange: "sideOpenChange", filterOpenChange: "filterOpenChange" }, host: { attributes: { "data-page-root": "" }, properties: { "class": "hostClasses()", "attr.data-page-variant": "variant()", "attr.data-page-height": "height()", "attr.data-page-scroll": "scroll()", "attr.data-page-appearance": "appearance()", "attr.data-page-position": "resolvedPosition()", "attr.data-page-side-mode": "resolvedSideMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-filter-placement": "hasFilter() ? filterPlacement() : null", "attr.data-page-filter-mode": "hasFilter() ? filterMode() : null", "attr.data-page-filter-open": "hasFilter() ? page.filterOpen() : null", "style.--page-side-width": "sideWidth()", "style.--page-filter-width": "filterWidthVar()" } }, providers: [PageStateService], queries: [{ propertyName: "projectedSide", first: true, predicate: PageSideComponent, descendants: true, isSignal: true }, { propertyName: "projectedHeader", first: true, predicate: PageHeaderComponent, descendants: true, isSignal: true }, { propertyName: "projectedFilter", first: true, predicate: PageFilterComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+var PageComponent = class PageComponent {
+	page = inject(PageStateService);
+	layout = inject(LayoutService, { optional: true });
+	navigation = inject(NAVIGATION_ADAPTER, { optional: true });
+	identity = inject(LayoutIdentityService, { optional: true });
+	projectedSide = contentChild(PageSideComponent, ...ngDevMode ? [{ debugName: "projectedSide" }] : /* istanbul ignore next */ []);
+	projectedHeader = contentChild(PageHeaderComponent, ...ngDevMode ? [{ debugName: "projectedHeader" }] : /* istanbul ignore next */ []);
+	projectedFilter = contentChild(PageFilterComponent, ...ngDevMode ? [{ debugName: "projectedFilter" }] : /* istanbul ignore next */ []);
+	projectedOverview = contentChild(PageOverviewComponent, ...ngDevMode ? [{ debugName: "projectedOverview" }] : /* istanbul ignore next */ []);
+	variant = input(PAGE_DEFAULT_VARIANT, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	height = input(PAGE_DEFAULT_HEIGHT, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	scroll = input(PAGE_DEFAULT_SCROLL, ...ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []);
+	appearance = input(PAGE_DEFAULT_APPEARANCE, ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	position = input(PAGE_DEFAULT_SIDE_POSITION, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	sideMode = input(PAGE_DEFAULT_SIDE_MODE, ...ngDevMode ? [{ debugName: "sideMode" }] : /* istanbul ignore next */ []);
+	sideOpen = input(null, ...ngDevMode ? [{ debugName: "sideOpen" }] : /* istanbul ignore next */ []);
+	sideWidth = input(PAGE_DEFAULT_SIDE_WIDTH, ...ngDevMode ? [{ debugName: "sideWidth" }] : /* istanbul ignore next */ []);
+	filterOpen = input(null, ...ngDevMode ? [{ debugName: "filterOpen" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	sideOpenChange = output();
+	filterOpenChange = output();
+	appsLauncher = input(true, {
+		...ngDevMode ? { debugName: "appsLauncher" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	appsNavId = input("main", ...ngDevMode ? [{ debugName: "appsNavId" }] : /* istanbul ignore next */ []);
+	appsIcon = input("apps", ...ngDevMode ? [{ debugName: "appsIcon" }] : /* istanbul ignore next */ []);
+	appsLabel = input("Open navigation", ...ngDevMode ? [{ debugName: "appsLabel" }] : /* istanbul ignore next */ []);
+	overlayCloseLabel = input("Close overlay panel", ...ngDevMode ? [{ debugName: "overlayCloseLabel" }] : /* istanbul ignore next */ []);
+	launcherNavId = `__page-apps-${pageAppsLauncherInstanceId += 1}`;
+	resolvedPosition = computed(() => this.projectedSide()?.position() ?? this.position(), ...ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []);
+	resolvedSideMode = computed(() => this.projectedSide()?.mode() ?? this.sideMode(), ...ngDevMode ? [{ debugName: "resolvedSideMode" }] : /* istanbul ignore next */ []);
+	isLeftSide = computed(() => this.resolvedPosition() === "left", ...ngDevMode ? [{ debugName: "isLeftSide" }] : /* istanbul ignore next */ []);
+	isRightSide = computed(() => this.resolvedPosition() === "right", ...ngDevMode ? [{ debugName: "isRightSide" }] : /* istanbul ignore next */ []);
+	hasFilter = computed(() => this.projectedFilter() !== void 0, ...ngDevMode ? [{ debugName: "hasFilter" }] : /* istanbul ignore next */ []);
+	filterPlacement = computed(() => this.projectedFilter()?.placement() ?? this.page.filterPlacement() ?? PAGE_DEFAULT_FILTER_PLACEMENT, ...ngDevMode ? [{ debugName: "filterPlacement" }] : /* istanbul ignore next */ []);
+	filterMode = computed(() => this.filterPlacement() === "stacked" ? "sticky" : this.projectedFilter()?.mode() ?? this.page.filterMode(), ...ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []);
+	filterPosition = computed(() => this.projectedFilter()?.position() ?? this.page.filterPosition(), ...ngDevMode ? [{ debugName: "filterPosition" }] : /* istanbul ignore next */ []);
+	filterWidthVar = computed(() => this.projectedFilter()?.width() ?? this.page.filterWidth() ?? PAGE_DEFAULT_FILTER_WIDTH, ...ngDevMode ? [{ debugName: "filterWidthVar" }] : /* istanbul ignore next */ []);
+	hasOverview = computed(() => this.projectedOverview() !== void 0, ...ngDevMode ? [{ debugName: "hasOverview" }] : /* istanbul ignore next */ []);
+	showsSideOverlayBackdrop = computed(() => this.variant() === "side" && this.resolvedSideMode() === "overlay" && this.page.sideOpen(), ...ngDevMode ? [{ debugName: "showsSideOverlayBackdrop" }] : /* istanbul ignore next */ []);
+	showsFilterOverlayBackdrop = computed(() => this.hasFilter() && this.filterMode() === "overlay" && this.page.filterOpen(), ...ngDevMode ? [{ debugName: "showsFilterOverlayBackdrop" }] : /* istanbul ignore next */ []);
+	showsOverlayBackdrop = computed(() => this.showsSideOverlayBackdrop() || this.showsFilterOverlayBackdrop(), ...ngDevMode ? [{ debugName: "showsOverlayBackdrop" }] : /* istanbul ignore next */ []);
+	appsNavSource = computed(() => this.navigation?.data(this.appsNavId()) ?? null, ...ngDevMode ? [{ debugName: "appsNavSource" }] : /* istanbul ignore next */ []);
+	appsNavData = computed(() => this.appsNavSource()?.() ?? [], ...ngDevMode ? [{ debugName: "appsNavData" }] : /* istanbul ignore next */ []);
+	showsAppsLauncher = computed(() => this.appsLauncher() && this.layout?.type() === "empty" && this.appsNavData().length > 0, ...ngDevMode ? [{ debugName: "showsAppsLauncher" }] : /* istanbul ignore next */ []);
+	appsLauncherHostClass = computed(() => cn("absolute z-30 h-auto w-auto", this.projectedHeader() ? "right-2 top-1.5" : "right-3 top-3"), ...ngDevMode ? [{ debugName: "appsLauncherHostClass" }] : /* istanbul ignore next */ []);
+	appsLauncherAppearance = computed(() => this.layout?.appearance() ?? this.appearance(), ...ngDevMode ? [{ debugName: "appsLauncherAppearance" }] : /* istanbul ignore next */ []);
+	appsBrand = computed(() => this.identity?.brand() ?? null, ...ngDevMode ? [{ debugName: "appsBrand" }] : /* istanbul ignore next */ []);
+	appsUser = computed(() => this.identity?.user() ?? null, ...ngDevMode ? [{ debugName: "appsUser" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("relative block h-full min-h-0 w-full min-w-0 overflow-hidden text-foreground", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	shellClasses = computed(() => cn("relative z-10 h-full min-h-0 w-full min-w-0", this.scroll() === "content" && "grid grid-rows-[auto_minmax(0,1fr)_auto]", this.scroll() === "page" && "overflow-auto"), ...ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []);
+	bodyClasses = computed(() => {
+		if (this.variant() !== "side") return cn("relative min-w-0", this.scroll() === "content" && "min-h-0");
+		const sideMode = this.resolvedSideMode();
+		const position = this.resolvedPosition();
+		if (sideMode === "sticky") return cn("grid min-w-0", this.scroll() === "content" && "min-h-0", position === "left" ? "grid-cols-[var(--page-side-width)_minmax(0,1fr)]" : "grid-cols-[minmax(0,1fr)_var(--page-side-width)]");
+		return cn("relative min-w-0", this.scroll() === "content" && "min-h-0");
+	}, ...ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []);
+	contentRegionClasses = computed(() => {
+		if (this.hasOverview()) return this.overviewRegionClasses();
+		if (!this.hasFilter()) return "contents";
+		const scroll = this.scroll();
+		if (this.filterMode() !== "sticky") return cn("relative min-w-0", scroll === "content" && "min-h-0 h-full");
+		if (this.filterPlacement() === "stacked") return scroll === "content" ? "grid min-w-0 min-h-0 h-full grid-rows-[auto_minmax(0,1fr)]" : "block min-w-0";
+		return cn("grid min-w-0", scroll === "content" && "min-h-0 h-full", this.filterPosition() === "left" ? "grid-cols-[var(--page-filter-width)_minmax(0,1fr)]" : "grid-cols-[minmax(0,1fr)_var(--page-filter-width)]");
+	}, ...ngDevMode ? [{ debugName: "contentRegionClasses" }] : /* istanbul ignore next */ []);
+	overviewRegionClasses() {
+		const scroll = this.scroll();
+		const fill = scroll === "content" && "min-h-0 h-full";
+		if (!this.hasFilter() || this.filterPlacement() === "stacked") return scroll === "content" ? cn("grid min-w-0", fill, OVERVIEW_STACKED_ROWS) : "block min-w-0";
+		if (this.filterMode() !== "sticky") return cn("relative grid min-w-0", fill, OVERVIEW_ROWS);
+		const left = this.filterPosition() === "left";
+		return cn("grid min-w-0", fill, OVERVIEW_ROWS, "[&>[data-page-slot=filter]]:row-[1/span_2]", left ? "grid-cols-[var(--page-filter-width)_minmax(0,1fr)] [&>[data-page-slot=filter]]:col-start-1 [&>:not([data-page-slot=filter])]:col-start-2" : "grid-cols-[minmax(0,1fr)_var(--page-filter-width)] [&>[data-page-slot=filter]]:col-start-2 [&>:not([data-page-slot=filter])]:col-start-1");
+	}
+	constructor() {
+		effect(() => {
+			this.page.registerRoot({
+				variant: this.variant(),
+				height: this.height(),
+				scroll: this.scroll(),
+				appearance: this.appearance(),
+				position: this.position(),
+				sideMode: this.sideMode(),
+				sideWidth: this.sideWidth()
+			});
+		});
+		effect(() => {
+			this.page.setControlledSideOpen(this.sideOpen());
+		});
+		effect(() => {
+			this.page.setControlledFilterOpen(this.filterOpen());
+		});
+		effect(() => {
+			this.page.setAppsLauncherReserve(this.showsAppsLauncher() && this.projectedHeader() !== void 0);
+		});
+		effect(() => {
+			if (this.page.sideOpenRequestVersion() === 0) return;
+			this.sideOpenChange.emit(this.page.sideOpenRequest() ?? false);
+		});
+		effect(() => {
+			if (this.page.filterOpenRequestVersion() === 0) return;
+			this.filterOpenChange.emit(this.page.filterOpenRequest() ?? false);
+		});
+	}
+	handleBackdropClick() {
+		if (this.showsSideOverlayBackdrop()) this.page.closeSide();
+		if (this.showsFilterOverlayBackdrop()) this.page.closeFilter();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: PageComponent,
+		isStandalone: true,
+		selector: "Page",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scroll: {
+				classPropertyName: "scroll",
+				publicName: "scroll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideMode: {
+				classPropertyName: "sideMode",
+				publicName: "sideMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOpen: {
+				classPropertyName: "sideOpen",
+				publicName: "sideOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideWidth: {
+				classPropertyName: "sideWidth",
+				publicName: "sideWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterOpen: {
+				classPropertyName: "filterOpen",
+				publicName: "filterOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appsLauncher: {
+				classPropertyName: "appsLauncher",
+				publicName: "appsLauncher",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appsNavId: {
+				classPropertyName: "appsNavId",
+				publicName: "appsNavId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appsIcon: {
+				classPropertyName: "appsIcon",
+				publicName: "appsIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appsLabel: {
+				classPropertyName: "appsLabel",
+				publicName: "appsLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			overlayCloseLabel: {
+				classPropertyName: "overlayCloseLabel",
+				publicName: "overlayCloseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			sideOpenChange: "sideOpenChange",
+			filterOpenChange: "filterOpenChange"
+		},
+		host: {
+			attributes: { "data-page-root": "" },
+			properties: {
+				"class": "hostClasses()",
+				"attr.data-page-variant": "variant()",
+				"attr.data-page-height": "height()",
+				"attr.data-page-scroll": "scroll()",
+				"attr.data-page-appearance": "appearance()",
+				"attr.data-page-position": "resolvedPosition()",
+				"attr.data-page-side-mode": "resolvedSideMode()",
+				"attr.data-page-side-open": "page.sideOpen()",
+				"attr.data-page-filter-placement": "hasFilter() ? filterPlacement() : null",
+				"attr.data-page-filter-mode": "hasFilter() ? filterMode() : null",
+				"attr.data-page-filter-open": "hasFilter() ? page.filterOpen() : null",
+				"attr.data-page-overview": "hasOverview() ? \"\" : null",
+				"style.--page-side-width": "sideWidth()",
+				"style.--page-filter-width": "filterWidthVar()"
+			}
+		},
+		providers: [PageStateService],
+		queries: [
+			{
+				propertyName: "projectedSide",
+				first: true,
+				predicate: PageSideComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "projectedHeader",
+				first: true,
+				predicate: PageHeaderComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "projectedFilter",
+				first: true,
+				predicate: PageFilterComponent,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "projectedOverview",
+				first: true,
+				predicate: PageOverviewComponent,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
     @if (showsOverlayBackdrop()) {
       <button
         type="button"
@@ -233,6 +331,7 @@ class PageComponent {
 
         <div [class]="contentRegionClasses()" data-page-content-region>
           <ng-content select="PageFilter" />
+          <ng-content select="PageOverview" />
           <ng-content select="PageContent, PageDashboard" />
         </div>
       </div>
@@ -267,38 +366,117 @@ class PageComponent {
         </NavigationFlyout>
       </Navigation>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data-id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "panel-viewport", "trigger-class", "trigger-button-class", "nav-position", "nav-type-style", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"], outputs: ["logout"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Page',
-                    providers: [PageStateService],
-                    imports: [
-                        NavigationContainerComponent,
-                        NavigationFlyoutComponent,
-                        NavigationHeaderComponent,
-                        NavigationFooterComponent,
-                        LayoutBrand,
-                        LayoutUser,
-                    ],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        'data-page-root': '',
-                        '[attr.data-page-variant]': 'variant()',
-                        '[attr.data-page-height]': 'height()',
-                        '[attr.data-page-scroll]': 'scroll()',
-                        '[attr.data-page-appearance]': 'appearance()',
-                        '[attr.data-page-position]': 'resolvedPosition()',
-                        '[attr.data-page-side-mode]': 'resolvedSideMode()',
-                        '[attr.data-page-side-open]': 'page.sideOpen()',
-                        '[attr.data-page-filter-placement]': 'hasFilter() ? filterPlacement() : null',
-                        '[attr.data-page-filter-mode]': 'hasFilter() ? filterMode() : null',
-                        '[attr.data-page-filter-open]': 'hasFilter() ? page.filterOpen() : null',
-                        '[style.--page-side-width]': 'sideWidth()',
-                        '[style.--page-filter-width]': 'filterWidthVar()',
-                    },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: NavigationContainerComponent,
+				selector: "Navigation",
+				inputs: [
+					"id",
+					"data-id",
+					"data",
+					"ariaLabel",
+					"compact",
+					"collapse-tree",
+					"class",
+					"itemClass",
+					"nav-group-class",
+					"activeIds",
+					"activeUrl",
+					"openedIds"
+				],
+				outputs: ["openedIdsChange", "itemSelected"]
+			},
+			{
+				kind: "component",
+				type: NavigationFlyoutComponent,
+				selector: "NavigationFlyout",
+				inputs: [
+					"label",
+					"icon",
+					"icon-only",
+					"icon-position",
+					"trigger-variant",
+					"trigger-floating",
+					"panel-viewport",
+					"trigger-class",
+					"trigger-button-class",
+					"nav-position",
+					"nav-type-style",
+					"class"
+				]
+			},
+			{
+				kind: "component",
+				type: NavigationHeaderComponent,
+				selector: "NavigationHeader",
+				inputs: ["toggle", "class"]
+			},
+			{
+				kind: "component",
+				type: NavigationFooterComponent,
+				selector: "NavigationFooter",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: LayoutBrand,
+				selector: "LayoutBrand",
+				inputs: ["brand", "compact"]
+			},
+			{
+				kind: "component",
+				type: LayoutUser,
+				selector: "LayoutUser",
+				inputs: [
+					"user",
+					"detailed",
+					"logoutLabel",
+					"logoutIcon"
+				],
+				outputs: ["logout"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Page",
+			providers: [PageStateService],
+			imports: [
+				NavigationContainerComponent,
+				NavigationFlyoutComponent,
+				NavigationHeaderComponent,
+				NavigationFooterComponent,
+				LayoutBrand,
+				LayoutUser
+			],
+			host: {
+				"[class]": "hostClasses()",
+				"data-page-root": "",
+				"[attr.data-page-variant]": "variant()",
+				"[attr.data-page-height]": "height()",
+				"[attr.data-page-scroll]": "scroll()",
+				"[attr.data-page-appearance]": "appearance()",
+				"[attr.data-page-position]": "resolvedPosition()",
+				"[attr.data-page-side-mode]": "resolvedSideMode()",
+				"[attr.data-page-side-open]": "page.sideOpen()",
+				"[attr.data-page-filter-placement]": "hasFilter() ? filterPlacement() : null",
+				"[attr.data-page-filter-mode]": "hasFilter() ? filterMode() : null",
+				"[attr.data-page-filter-open]": "hasFilter() ? page.filterOpen() : null",
+				"[attr.data-page-overview]": "hasOverview() ? \"\" : null",
+				"[style.--page-side-width]": "sideWidth()",
+				"[style.--page-filter-width]": "filterWidthVar()"
+			},
+			template: `
     @if (showsOverlayBackdrop()) {
       <button
         type="button"
@@ -320,6 +498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
         <div [class]="contentRegionClasses()" data-page-content-region>
           <ng-content select="PageFilter" />
+          <ng-content select="PageOverview" />
           <ng-content select="PageContent, PageDashboard" />
         </div>
       </div>
@@ -354,12 +533,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </NavigationFlyout>
       </Navigation>
     }
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { projectedSide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageSideComponent), { isSignal: true }] }], projectedHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageHeaderComponent), { isSignal: true }] }], projectedFilter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PageFilterComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sideMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideMode", required: false }] }], sideOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOpen", required: false }] }], sideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideWidth", required: false }] }], filterOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOpen", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], sideOpenChange: [{ type: i0.Output, args: ["sideOpenChange"] }], filterOpenChange: [{ type: i0.Output, args: ["filterOpenChange"] }], appsLauncher: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsLauncher", required: false }] }], appsNavId: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsNavId", required: false }] }], appsIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsIcon", required: false }] }], appsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsLabel", required: false }] }], overlayCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayCloseLabel", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { PageComponent };
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		projectedSide: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => PageSideComponent), { isSignal: true }]
+		}],
+		projectedHeader: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => PageHeaderComponent), { isSignal: true }]
+		}],
+		projectedFilter: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => PageFilterComponent), { isSignal: true }]
+		}],
+		projectedOverview: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => PageOverviewComponent), { isSignal: true }]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		scroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scroll",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		sideMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideMode",
+				required: false
+			}]
+		}],
+		sideOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOpen",
+				required: false
+			}]
+		}],
+		sideWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideWidth",
+				required: false
+			}]
+		}],
+		filterOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterOpen",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		sideOpenChange: [{
+			type: i0.Output,
+			args: ["sideOpenChange"]
+		}],
+		filterOpenChange: [{
+			type: i0.Output,
+			args: ["filterOpenChange"]
+		}],
+		appsLauncher: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appsLauncher",
+				required: false
+			}]
+		}],
+		appsNavId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appsNavId",
+				required: false
+			}]
+		}],
+		appsIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appsIcon",
+				required: false
+			}]
+		}],
+		appsLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appsLabel",
+				required: false
+			}]
+		}],
+		overlayCloseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overlayCloseLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { PageComponent };